AJAX之XHR

標籤：safari   win   部分   header   microsoft   ros   表示   orm   return   

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 request42   })();43 44   // 調用 45   ajax({46     url: ‘./data.js‘,47     method: ‘get‘,48     success: function(res) {49       console.log(res)50     }51   })

 

AJAX之XHR