原生JS完成Ajax请求

自己写微信公众号页面的时候需要使用ajax请求，但是使用vue写的为了ajax请求导入JQuery影响加载速度就用原生的封装一个。

XMLHttpRequest

Ajax的核心 是XMLHttpRequest

1. 创建一个对象XMLHttpRequest

var XMLHttp = new XMLHttpRequest()

注意老版本的 IE（IE5 和 IE6）使用 ActiveX 对象

var XMLHttp = new ActiveXObject("Microsoft.XMLHTTP");

为了自适应浏览器，包括 IE低版本，先检查浏览器是否支持 XMLHttpRequest 对象。
如果支持，则创建 XMLHttpRequest 对象。
如果不支持，则创建ActiveXObject 。

var XMLHttp;
  if (window.XMLHttpRequest){
    // 目前主流阅览器
    XMLHttp =new XMLHttpRequest();
  } else {
    //IE低版本
    XMLHttp =new ActiveXObject("Microsoft.XMLHTTP");
  }

2. 向服务器发送请求

获取实例后向服务器发送请求，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法。

open(method,url,async)

规定请求的类型、URL 以及是否异步处理请求。

• method：请求的类型；GET 或 POST
• url：文件在服务器上的位置
• async：true（异步）或 false（同步）

send(string)

将请求发送到服务器。

• string：仅用于 POST 请求

XMLHttp.open("GET","www.baidu.com",true);
XMLHttp.send();

这里有几点问题：

使用GET 还是 POST

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用 POST 请求：

• 无法使用缓存文件（更新服务器上的文件或数据库。GET请求的文件会缓存所以安全性不高。）
• 向服务器发送大量数据（POST 没有数据量限制。GET受阅览器地址影响有字符限制，不同阅览器不同。）
• 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

GET 请求传参

XMLHttp.open("GET","demo_get2.asp?fname=Bill&lname=Gates",true);
XMLHttp.send();

这里可以看到GET请求传参时是将参数带到URL上的。所以安全性不高，数据量也受阅览器的最大字符数量限制。

POST 请求传参

常见的POST提交数据方式(设置头部信息)

• application/x-www-form-urlencoded
• multipart/form-data
• application/json
• text/xml

setRequestHeader(header,value)
由我来组成头部

• header: 规定头的名称
• value: 规定头的值

application/x-www-form-urlencoded
通常请求传参就使用application/x-www-form-urlencoded头部信息.

XMLHttp.open("POST","ajax_test.asp",true);
XMLHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
XMLHttp.send("fname=Bill&lname=Gates");

XMLHttp.send(“fname=Bill&lname=Gates”);中的值为字符串类型。

multipart/form-data
主要用于上传文件

application/js
用来告诉服务端消息主体是序列化后的 JSON 字符串。
由于 JSON 规范的流行，除了低版本 IE 之外的各大浏览器都原生支持 JSON.stringify，服务端语言也都有处理 JSON 的函数。

var data={name:'goatling'}
XMLHttp.open("POST","ajax_test.asp",true);
XMLHttp.setRequestHeader("Content-type","application/json;charset=utf-8");
XMLHttp.send(JSON.stringify(data));

async 的问题就不说了，你还想同步阻塞不成。

3.服务器响应

如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

4.readystatechange 事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务。
每当 readyState 改变时，就会触发== onreadystatechange== 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。

onreadystatechange

存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。

readyState

存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪

status

200: “OK”
404: 未找到页面

xmlhttp.onreadystatechange=function(){
   if (xmlhttp.readyState==4 && xmlhttp.status==200){
     document.getElementById("DIV").innerHTML=xmlhttp.responseText;
   }
}

5.总结

function ajax(opt) { //ajax请求封装(methods,url,data)
       opt = opt || {};
       opt.method = opt.method.toUpperCase() || 'POST';
       opt.url = opt.url || '';
       opt.async = opt.async || true;
       opt.data = opt.data || null;
       opt.success = opt.success || function () {};
       //上面为初始化数据，没有就默认值
       
       var xmlHttp = null;
       if (XMLHttpRequest) {
           xmlHttp = new XMLHttpRequest();
       } else {
           xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
       }
       //这步判断自适应低版本IE阅览器
       
       var params = [];
       for (var key in opt.data) {
           params.push(key + '=' + opt.data[key]);
       }
       //这步获取传递参数
       
       var postData = params.join('&');
       //这步将数组内参数转化为字符串，"a=1&b=2"格式
       if (opt.method.toUpperCase() === 'POST') {
           //POST时定义头部信息，这里使用了第一种方法。
           xmlHttp.open(opt.method, opt.url, opt.async);
           xmlHttp.setRequestHeader('Content-Type',
               'application/x-www-form-urlencoded;charset=utf-8');
           xmlHttp.send(postData);
       } else if (opt.method.toUpperCase() === 'GET') {
          //GET时使用Url传递参数的方法
           xmlHttp.open(opt.method, opt.url + '?' + postData, opt.async);
           xmlHttp.send(null);
       }
       
       xmlHttp.onreadystatechange = function () {
           if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
              //请求已完成，且响应已就绪返回数据
               opt.success(xmlHttp.responseText);
           }
       };
   }

ajax({
 method:'GET',
 url:'www.baidu.com',
 data:{},
 success:function(res){
 }
})

这里没有做报错处理，可以在readyState == 4 && xmlHttp.status != 200时添加报错返回。
也可以使用promise来做处理更优雅，这里就不写了。

最后

以上就是高大画板为你收集整理的JS完成Ajax请求原生JS完成Ajax请求的全部内容，希望文章能够帮你解决JS完成Ajax请求原生JS完成Ajax请求所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。