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物件

 1 function getXHR() {
 2     let xhr =www.yigouyule2.cn  null;
 3     if (window.XMLHttpRequest) {
 4         //IE10+以及其他主流瀏覽器
 5         xhr = new XMLHttpRequest();
 6         
 7     } else if (window.ActiveXObject) {
 8         //IE9及以下、MSXML3www.gangchengyuLe178.com 、 MSXML2.6及以下
 9         let versions = [
10             'MSXML2.XMLHttp.6.0', 
11             'MSXML2.XMLHttp3.0', 
12             'MSXML2.XMLHttp', 
13             'Microsoft.XMLHttp'
14         ];
15         for (let i=0; i<versions.length; i++) {
16             try {
17                 //建立成功結束迴圈，建立失敗丟擲錯誤
18                 xhr = new ActiveXObject(versions[i]);
19                 break;
20             } catch (e) {
21                 //skip_跳過
22             }
23         }
24         
25     }
26     return xhr;
27 }

3.封裝Ajax請求資料函式

 1 function ajax(opts) {
 2     let xhr = getXHR();
 3     if (xhr) {
 4         //檢查引數
 5         let async = opts.async === undefined ? true:opts.async;
 6         let method = opts.method.toUpperCase();
 7         let data = opts.data === undefined ? null:opts.data;
 8         
 9         xhr.open(method, opts.url, async);
10         
11         //回撥函式
12         xhr.onreadystatechange www.dfgjyl.cn= function() {
13             if (xhr.readyState == 4) {
14                 let status = xhr.status;
15                 if (status >= 200 && status www.yongxinzaixian.cn< 300 || status == 304) {
16                     opts.success && opts.success(xhr.responseText, xhr.responseXML);
17                     
18                 } else {
19                     opts.fail && opts.fail(status);
20                 }
21             }
22         }
23         
24         if (method == 'POST') {
25             xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
26         }
27         xhr.send(data);
28         
29     } else {
30         let error = {
31             message: 'not support ajax.',
32             code: -1;
33         }
34         opts.fail && opts.fail(error);
35     }
36 }
37 
38 //使用
39 ajax({
40     url: /example, 
41     method: POST, 
42     data: {...}, 
43     success: function(){...},
44     fail: function(){...},
45     async:true
46 });

4.備註

最近在看網頁向服務端請求資料相關的內容，忽然記起自己還有個blog，於是把markdown中的筆記改改發上來，太懶了，XMLHttpRequest level 2就不寫了，現在應該都是用fetch()了。