## AJAX AJAX 即 Asynchronous JavaScript and XML，異步的 JavaScript 和 XML。使用 AJAX 可以無刷新地向服務端發送請求接收服務端響應，并更新頁面。 ### 原生 JS 實現 AJAX JS 實現 AJAX 主要基于瀏覽器提供的 XMLHttpRequest（XHR）類，所有現代瀏覽器（IE7+、Firefox、Chrome、Safari 以及 Opera）均內建 XMLHttpRequest 對象。 **獲取XMLHttpRequest對象** ``` // 獲取XMLHttpRequest對象 var xhr = new XMLHttpRequest(); ``` 如果需要兼容老版本的 IE \(IE5, IE6\) 瀏覽器，則可以使用 ActiveX 對象： ``` var xhr; if (window.XMLHttpRequest) { // Mozilla, Safari... xhr = new XMLHttpRequest(); } else if (window.ActiveXObject) { // IE try { xhr = new ActiveXObject('Msxml2.XMLHTTP'); } catch (e) { try { xhr = new ActiveXObject('Microsoft.XMLHTTP'); } catch (e) {} } } ``` **發送一個 HTTP 請求** 接下來，我們需要打開一個URL，然后發送這個請求。分別要用到 XMLHttpRequest 的 open\(\) 方法和 send\(\) 方法。 ``` // GET var xhr; if (window.XMLHttpRequest) { // Mozilla, Safari... xhr = new XMLHttpRequest(); } else if (window.ActiveXObject) { // IE try { xhr = new ActiveXObject('Msxml2.XMLHTTP'); } catch (e) { try { xhr = new ActiveXObject('Microsoft.XMLHTTP'); } catch (e) {} } } if (xhr) { xhr.open('GET', '/api?username=admin&password=root', true); xhr.send(null); } ``` ``` // POST var xhr; if (window.XMLHttpRequest) { // Mozilla, Safari... xhr = new XMLHttpRequest(); } else if (window.ActiveXObject) { // IE try { xhr = new ActiveXObject('Msxml2.XMLHTTP'); } catch (e) { try { xhr = new ActiveXObject('Microsoft.XMLHTTP'); } catch (e) {} } } if (xhr) { xhr.open('POST', '/api', true); // 設置 Content-Type 為 application/x-www-form-urlencoded // 以表單的形式傳遞數據 xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.send('username=admin&password=root'); } ``` open\(\) 方法有三個參數： * open\(\) 的第一個參數是 HTTP 請求方式 – GET，POST，HEAD 或任何服務器所支持的您想調用的方式。按照HTTP規范，該參數要大寫；否則，某些瀏覽器\(如Firefox\)可能無法處理請求。有關HTTP請求方法的詳細信息可參考 [https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html](http://link.zhihu.com/?target=https%3A//www.w3.org/Protocols/rfc2616/rfc2616-sec9.html) * 第二個參數是請求頁面的 URL。由于同源策略（Same origin policy）該頁面不能為第三方域名的頁面。同時一定要保證在所有的頁面中都使用準確的域名，否則調用 open\(\) 會得到 permission denied 的錯誤提示。 * 第三個參數設置請求是否為異步模式。如果是 TRUE，JavaScript 函數將繼續執行，而不等待服務器響應。這就是 AJAX 中的 A。 如果第一個參數是 GET，則可以直接將參數放在 url 后面，如：[http://nodejh.com/api?name=admint&password=root](http://link.zhihu.com/?target=http%3A//nodejh.com/api%3Fname%3Dadmint%26password%3Droot)。 如果第一個參數是 POST，則需要將參數寫在 send\(\) 方法里面。send\(\) 方法的參數可以是任何想送給服務器的數據。這時數據要以字符串的形式送給服務器，如：name=admint&password=root。或者也可以傳遞 JSON 格式的數據： ``` // 設置 Content-Type 為 application/json xhr.setRequestHeader('Content-Type', 'application/json'); // 傳遞 JSON 字符串 xhr.send(JSON.stringify({ username:'admin', password:'root' })); ``` 如果不設置請求頭，原生 AJAX 會默認使用 Content-Type 是 text/plain;charset=UTF-8 的方式發送數據。 關于 Content-Type 更詳細的內容，將在以后的文章中解釋說明。 **處理服務器的響應** 當發送請求時，我們需要指定如何處理服務器的響應，我們需要用到 onreadystatechange 屬性來檢測服務器的響應狀態。使用 onreadystatechange 有兩種方式，一是直接 onreadystatechange 屬性指定一個可調用的函數名，二是使用一個匿名函數： ``` // 方法一 指定可調用的函數 xhr.onreadystatechange = onReadyStateChange; function onReadyStateChange() { // do something } // 方法二 使用匿名函數 xhr.onreadystatechange = function(){ // do the thing }; ``` 接下來我們需要在內部利用 readyState 屬性來獲取當前的狀態，當 readyState 的值為 4，就意味著一個完整的服務器響應已經收到了，接下來就可以處理該響應： ``` // readyState的取值如下 // 0 (未初始化) // 1 (正在裝載) // 2 (裝載完畢) // 3 (交互中) // 4 (完成) if (xhr.readyState === 4) { // everything is good, the response is received } else { // still not ready } ``` 完整代碼如下： ``` // POST var xhr; if (window.XMLHttpRequest) { // Mozilla, Safari... xhr = new XMLHttpRequest(); } else if (window.ActiveXObject) { // IE try { xhr = new ActiveXObject('Msxml2.XMLHTTP'); } catch (e) { try { xhr = new ActiveXObject('Microsoft.XMLHTTP'); } catch (e) {} } } if (xhr) { xhr.onreadystatechange = onReadyStateChange; xhr.open('POST', '/api', true); // 設置 Content-Type 為 application/x-www-form-urlencoded // 以表單的形式傳遞數據 xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.send('username=admin&password=root'); } // onreadystatechange 方法 function onReadyStateChange() { // 該函數會被調用四次 console.log(xhr.readyState); if (xhr.readyState === 4) { // everything is good, the response is received if (xhr.status === 200) { console.log(xhr.responseText); } else { console.log('There was a problem with the request.'); } } else { // still not ready console.log('still not ready...'); } } ``` 然而需要注意的是，IE對 onload 屬性的支持并不友好。除了 onload 還有以下幾個屬性也可以用來監測響應狀態： * onloadstart * onprogress * onabort * ontimeout * onerror * onloadend