AJAX工作流程

1.create XHR

2.xhr.open(method, url, async)

3.xhr.onreadystatechange

4.xhr.send()

XHR對象

AJAX技術的核心是XMLHttpRequest對象(簡稱XHR)，IE（6789+）、chrome、firefox、safari都支持XHR對象；

使用XHR首頁要創建它：

1 var xhr = new XMLHttpRequest()

兼容IE67的寫法：

1 var xhr = new (window.XMLHttpRequest||ActiveXObject)("Microsoft.XMLHTTP")

XHR創建請求

xhr.open(method, url, async)是創建請求，並接收三個參數：

1.發送請求的類型，主要是"GET"和"POST"；

2.請示的url，如果為GET，data參數拼接在url後面，

如何為POST，xhr.send(data)，並且設置header；

3.async默認為true，表示異步，false表示同步。

XHR響應請求

onreadychange對象有個readyState屬性，其值有5個

0:未初始化。尚未調用open()方法

1:啟動。已經調用open()方法，但尚未調用send()方法

2:發送。已經調用send()方法，但尚未接收到響應

3:接收。已經接受到部分響應數據

4:完成。已經接受到全部響應數據，並且可以在客戶端使用

1 xhr.onreadystatechange = function() {
2   if (xhr.readyState === 4) {
3       var status = xhr.status;
4       if (status >= 200 & status < 300 || status === 304) {
5           console.log(xhr.responseText)
6       }
7   }
8 }        

發送請求

xhr.open(data)

簡單封裝

 1 var ajax = (function() {
 2     var xhr = new (window.XMLHttpRequest || ActiveXObject)("Microsoft.XMLHTTP");
 3     var request = function(options) {
 4       var fn = function() {};
 5       var opts = options || {};
 6       var method = opts.method || ‘get‘;
 7       var params = opts.params || null;
 8       var async = opts.async || true;
 9       var success = opts.success || fn;
10       var failue = opts.failue || fn;
11       var url = opts.url;
12 
13       method = method.toUpperCase();
14       var arrParams = [];
15       if (params) {
16         for (var i in params) {
17           arrParams.push(i + ‘=‘ + params[i]);
18         }
19         params = arrParams.join(‘&‘);
20       }
21       if (method === ‘GET‘) {
22         url += url.indexOf(‘?‘) === -1 ? ‘?‘ : params;
23       }
24       if (method === ‘POST‘) {    
25         xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
26       }
27       xhr.open(method, url, async);
28       xhr.onreadystatechange = function() {
29         if (xhr.readyState === 4) {
30           var status = xhr.status;
31           if(status >= 200 && status < 300 || status === 304) {
32             success(xhr.responseText);
33           }
34         }
35       }
36       xhr.onerror = function() {
37         failuse(xhr);
38       }
39       xhr.send(params)
40     }
41     return request
42   })();
43 
44   // 調用 
45   ajax({
46     url: ‘./data.js‘,
47     method: ‘get‘,
48     success: function(res) {
49       console.log(res)
50     }
51   })
 

AJAX之XHR