Ajax与XMLHttpRequest随笔

1.XMLHttpRequest对象

• 创建XHR对象：let xhr = new XMLHttpRequest();

• open()：启动一个请求准备发送

open()接收3个参数：请求类型('GET'、'POST')、请求的URL、是否异步发送请求(true or false)。

• send()：发送请求

  send()接受一个参数：作为请求主体要发送的数据，如果不需要发送数据，传入一个null, 以防止出现未知错误。

• setRequestHeader()：设置自定义的请求头部信息

  setRequestHeader()接收两个参数：头部字段的名称和头部字段的值；调用此方法必须要在调用open()方法之后，send()之前。

• getResponseHeader()：获取响应信息中的某个指定头部信息

• getAllResponseHeaders()：获取响应信息的所有头部信息

  getResponseHeader()接收一个参数：需要知道的头部信息的名称；但W3C标准对这两个方法有限制，它们不能获取如Set-Cookie、Set-Cookie2等的头部信息；所以getAllResponseHeaders()只能拿到限制以外（即被视为safe）的头部信息，而不是全部；而调用getResponseHeader(string)方法时，传入的参数必须是限制以外的头部名称，否则会报错。

• XHR对象属性：

  1. responseText：作为响应主体被返回的文本。

  2. responseXml：如果相应的内容类型为XML, 此属性保存响应数据的XML DOM文档; 如果为非XML数据，则为null。

  3. status: 响应的HTTP状态。

  4. statusText：HTTP的状态说明。

  5. readyState：表示请求/响应过程的阶段

     • 0：未初始化；未调用open()方法。

     • 1：启动；已调用open()方法，但未调用send()方法。

     • 2：发送；已调用send()方法，但未接收到响应。

     • 3：接收；已接收到部分响应数据。

     • 4：完成；已接收到所有响应数据。

       备注：readyState的值每改变一次，都会触发readystatechange事件。

• XHR兼容性（2018-11 from www.caniuse.com）

2.创建具有兼容性的XMLHttpRequest对象

 function getXHR() {
     let xhr = null;
     if (window.XMLHttpRequest) {
         //IE10+以及其他主流浏览器
         xhr = new XMLHttpRequest();
 
     } else if (window.ActiveXObject) {
         //IE9及以下、MSXML3、MSXML2.6及以下
         let versions = [
             'MSXML2.XMLHttp.6.0',
             'MSXML2.XMLHttp3.0',
             'MSXML2.XMLHttp',
             'Microsoft.XMLHttp'
         ];
         for (let i=0; i<versions.length; i++) {
             try {
                 //创建成功结束循环，创建失败抛出错误
                 xhr = new ActiveXObject(versions[i]);
                 break;
             } catch (e) {
                 //skip_跳过
             }
         }
 
     }
     return xhr;
 }

3.封装Ajax请求数据函数

 function ajax(opts) {
     let xhr = getXHR();
     if (xhr) {
         //检查参数
         let async = opts.async === undefined ? true:opts.async;
         let method = opts.method.toUpperCase();
         let data = opts.data === undefined ? null:opts.data;
 
         xhr.open(method, opts.url, async);
 
         //回调函数
         xhr.onreadystatechange = function() {
             if (xhr.readyState == 4) {
                 let status = xhr.status;
                 if (status >= 200 && status < 300 || status == 304) {
                     opts.success && opts.success(xhr.responseText, xhr.responseXML);
 
                 } else {
                     opts.fail && opts.fail(status);
                 }
             }
         }
 
         if (method == 'POST') {
             xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
         }
         xhr.send(data);
 
     } else {
         let error = {
             message: 'not support ajax.',
             code: -1;
         }
         opts.fail && opts.fail(error);
     }
 }
 
 //使用
 ajax({
     url: /example,
     method: POST,
     data: {...},
     success: function(){...},
     fail: function(){...},
     async:true
 });

4.备注

最近在看网页向服务端请求数据相关的内容，忽然记起自己还有个blog，于是把markdown中的笔记改改发上来，太懒了，XMLHttpRequest level 2就不写了，现在应该都是用fetch()了。

5.参考

stackoverflow上的答案：https://stackoverflow.com/questions/8567114/how-to-make-an-ajax-call-without-jquery?answertab=votes#。