1 // 封装的 ajax网络请求函数
 2 // obj 是一个对象
 3 function AJAX(obj){
 4     // 1、创建 ajax 对象
 5     var ajaxObj = null;
 6     if (window.XMLHttpRequest) {
 7         ajaxObj = new XMLHttpRequest();
 8     }else{
 9         ajaxObj = new ActiveXObject("Microsoft.XMLHTTP");;
10     }
11
12     // 设置请求的类型
13     obj.type = obj.type.toUpperCase() || "GET";
14
15     // 如果是get请求,并且需要传递参数,则需要给 url后面拼接参数
16     if (obj.type == "GET") {
17         var arr = []; // 定义数组,用于把对象存储到数据里面
18         for(var key in obj.data){
19             arr.push(key+"="+obj.data[key]);
20         }
21         // 用&分隔数组,让其转化为类似:name=gxm&age=18的形式
22         var str = arr.join("&");
23         obj.url = obj.url +"?"+str;
24             // 拨号
25         ajaxObj.open(obj.type,obj.url,true);
26         //2.1设置头文件
27         ajaxObj.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
28
29
30         // 发送"name=123&dad=131"
31         ajaxObj.send();
32     }else{
33         var arr = []; // 定义数组,用于把对象存储到数据里面
34         for(var key in obj.data){
35             arr.push(key+"="+obj.data[key]);
36         }
37         // 用&分隔数组,让其转化为类似:name=gxm&age=18的形式
38         var str = arr.join("&");
39         ajaxObj.open(obj.type,obj.url,true);
40         ajaxObj.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
41         ajaxObj.send(str);
42     }
43
44
45     // 监听
46     //
47     ajaxObj.onreadystatechange = function(){
48         if (ajaxObj.readyState == 4) {
49             if (ajaxObj.status >= 200 && ajaxObj.status < 300|| ajaxObj.status == 304) {
50                     // 请求成功
51                     console.log(ajaxObj.responseText)
52                     // obj.success(ajaxObj.responseText);
53             }else{
54                 // 请求失败
55                     obj.error(ajaxObj.status);
56             }
57
58
59         }
60     }
61
62
63
64
65
66 }

转载于:https://www.cnblogs.com/PowellZhao/p/5685445.html

用原生JS写PHP里的Ajax相关推荐

  1. 原生JS写仿淘宝搜索框(代码+效果),可实现3级搜索哦!

    闲来无事,用原生JS写了一个淘宝搜索框,用的淘宝的接口,可直接进行商品搜索. 写在前面: 1.记得引用jquery啊! 2.有人私信我说css样式不能用,那是因为复制代码的时候,有空格,只需要自己把c ...

  2. 如何上传图片到fileupload空间_如何用原生js写图片上传组件v2.0(还有新版本)?...

    js图片上传组件: 基本要求: 1.上传的图片可预览,可删除,可被覆盖更新 2.要求图片格式为jpg和png,大小不能超过2M 新加需求: 1.模拟回显,可用本地存储(实际上的回显是通过后台传过来的u ...

  3. js 取得input绑定的datalist中的值_原生JS写一个ToDo Demo

    周六加班没什么事,于是乎...上班摸鱼,用原生JS写了一个ToDo Demo,废话少叙,直接看效果: 如图,实现了以下需求(以下的具体实现我会一一道来): 0.页面的基本布局: 1.rem布局.在不同 ...

  4. HTML+CSS+原生JS写一个简易的音乐播放器(仅播放一首歌)

    用HTML+CSS+原生JS写一个简易的音乐播放器(仅播放一首歌) 效果如下:(鼠标点击按钮可以实现播放或暂停,按钮会旋转,实现了歌词同步,功能还需改进) 代码如下: <!DOCTYPE htm ...

  5. 使用原生js写ajax

    // 使用原生js 封装ajax // 兼容xhr对象 function createXHR(){if(typeof XMLHttpRequest != "undefined"){ ...

  6. 原生js写三级联动 java_原生js三级联动的简单实现代码

    本文实例为大家分享了js查询天气应用,供大家参考,具体内容如下 实现功能:打开网页时显示用户所在城市的天气状况,在输入框输入城市可查询其它城市. 实现过程:先调用百度地图的API来获取用户所在的城市, ...

  7. vue如何使用原生js写动画效果_原生js写一个无缝轮播图插件(支持vue)

    轮播图插件(Broadcast.js) 前言:写这个插件的原因 前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...

  8. 基于原生JS写的异形轮播图--效果如网易云、QQ音乐播放器中轮播图

    css部分 <style>#box{height:500px;width:1000px;position: relative;margin:100px auto;overflow: hid ...

  9. 用原生JS写一个网页版的2048小游戏(兼容移动端)

    这个游戏JS部分全都是用原生JS代码写的,加有少量的CSS3动画,并简单的兼容了一下移动端. 先看一下在线的demo:https://yuan-yiming.github.io/2048-online ...

最新文章

  1. 跳转Activity闪退
  2. java设计模式---访问者模式
  3. activeMq-2 高可用以及集群搭建
  4. 6、Flutter Error waiting for a debug connection: ProcessException: adb did not report f(转)
  5. ajax preview,In jQuery, using ajaxSend to preview the url built
  6. 最短Hamilton路径
  7. if(-1)为真还是假_女人是“真拒绝”还是“假矜持”,其实一眼就能看出来
  8. 自适应页界面HTML源码
  9. 计算机编程 高斯消元,高斯-若尔当消元法
  10. 基于单片机的水塔水位检测系统
  11. c++ 递归算法求全排列
  12. 看linux centos版本信息,Linux CentOS查看操作系统版本信息
  13. 初级程序员和高级程序员的区别(转)
  14. BZOJ1226【SDOI2009】学校食堂
  15. 联发科MT5592数字电视DTV芯片处理器参数介绍
  16. 【POJ1182】食物链+思路+代码(较全)
  17. Python计算向量夹角:详解向量的定义、向量点乘、向量模长和余弦定理,教你用Python代码实现向量夹角的计算。
  18. 银行卡开户及交易项目--Oracle
  19. TIF怎么转成PDF?这几款软件不容错过
  20. c语言求小于n的互质数,基于visual Studio2013解决C语言竞赛题之1064互质数差1验证...

热门文章

  1. python 文字处理系统_详解Python中的文本处理
  2. 入参对象有LocalDateTime类型的参数,swagger该如何传参
  3. 正则表达式,一篇就够了
  4. 调用存储过程时报错:Illegal mix of collations
  5. linux内核配置重置,linux内核配置--Boot options
  6. JSP基于JDBC操作MSSQL2008数据库
  7. 2018-06-13 pymssql 访问 SQL Server 2017 或 pyodbc 访问支持 ODBC 的数据库
  8. [草稿]几款硬盘数据共享产品技术选型
  9. 如何制作一个横版格斗过关游戏(2) Cocos2d-x 2.0.4 .
  10. 浅谈C# XML WebServer数据序列化及数据压缩