什么是 Ajax
在很久很久以前，當用戶在網(wǎng)頁上填完一張表單并點擊了提交，這張表單中的數(shù)據(jù)會被發(fā)送到服務器。服務器在接受表單后會對表單進行處理，然后返回一個新網(wǎng)頁。這種方式不得不說有些反人類，如果我不是提交表單，而是想在點擊一個按鈕后進行某些數(shù)據(jù)的刷新，那么整個也必須刷新一遍。如下圖，當我點擊淘寶網(wǎng)某個模塊想要刷新男裝，如果整個網(wǎng)頁都要刷新一遍，估計用不了幾次顧客就會瘋掉。
萬幸當人們遇到問題時，也會想盡辦法解決問題。2005 年，Jesse James Garrett 發(fā)表了文章 Ajax: A New Approach to Web Applications。在文章他提出了 Ajax 這個概念。Ajax 是 Asynchronous JavaScript and XML 的縮寫，中文意思是異步的 JavaScript 和 XML。這一技術能夠向服務器發(fā)送請求并取回必須的數(shù)據(jù)，并在客戶端用 JavaScript 處理數(shù)據(jù)，避免了每次獲取數(shù)據(jù)都要刷新頁面。Ajax 并不是單一的技術，而是有機地利用了一系列相關技術。在 Ajax 這個概念提出之前，類似的技術已經(jīng)存在了很長時間，只不過在 Ajax 這個概念提出之后，這種瀏覽器有服務器通信的技術才變得火熱起來。
如何使用 Ajax
Ajax 技術的核心是 XMLHttpRequest 對象，簡稱 XHR。這個對象最初是由微軟公司發(fā)明并用于 IE5.0 中，其他瀏覽器后來都實現(xiàn)了該特性。Ajax 的使用需要創(chuàng)建 XMLHttpRequest 對象并對該對實例化的對象進行一系列的設置。XMLHttpRequest 對象在不同瀏覽器的創(chuàng)建方法有一些不同（主要是 IE 不同），這里只使用最簡單的方法。先看一下下方的代碼：
let xhr = new XMLHttpRequest(); //實例化一個用于請求的對象
xhr.onreadystatechange = function() { //每次請求狀態(tài)改變就調用該函數(shù)
if (xhr.readyState == 4) { //如果請求步驟完成進行該處理
if ((xhr.status >= 200 && xhr.status <= 300) || xhr.status == 304) { //如果為成功響應展示響應的文本，否則彈出錯誤提示
alert(xhr.responseText);
} else {
alert("error");
}
}
}
xhr.open("get","test.php",true); //啟動一個請求準備發(fā)送
xhr.send(null); //發(fā)送請求
下面說明一下上方代碼中的對象：
- readyState 表示請求或響應過程中當前活動階段（0：未初始化；1：啟動；2：發(fā)送；3：接收；4：完成）
- onreadystatechange 每當 readyState 改變時都會觸發(fā)該事件，所以上方代碼在該事件中檢測請求是否完成
- status 響應的 HTTP 狀態(tài)，請求完成不代表請求正確。所以需要檢查 status 屬性，以確定響應成功。（一般以 200 為成功標志，304 代表請求資源未被修改）
- responseText 指作為響應主體被返回的文本
- open 啟動一個請求準備發(fā)送，三個參數(shù)分別為 請求方式，請求地址，請求是否異步
- send 發(fā)送請求及要攜帶的數(shù)據(jù)，如果不發(fā)送數(shù)據(jù)則以 null 為參數(shù)
Ajax 與數(shù)據(jù)格式
對象名 XMLHttpRequest 之所以包含 XML 字符只是為了兼容 web, 它實際上支持任何基于文本的數(shù)據(jù)格式。如 JSON、form-data。XML 只是一種選擇，實際上并不常用。
Ajax 與跨域
同源策略對 XHR 有一個限制：一般情況下，XHR 只能訪問與包含它的頁面位于同一個服務器的資源。這種安全策略在防止了某些惡意行為的同時，也阻止了正常的跨域請求。XHR 可以通過發(fā)送合適的 CORS(跨域資源共享)來跨域訪問。大部分瀏覽器的新版本已經(jīng)支持 XHR 的這種新特性。這種方式并不需要你多做什么，只要在 open 中加入對的 URL 即可。實現(xiàn)CORS通信的關鍵是服務器。修改服務器代碼，只要服務器實現(xiàn)了CORS接口，就可以跨域通信。
Ajax 與拓展
基于服務器端推送事件的 Coment 是對 Ajax 的拓展。通過 EventSource 或 WebSocket 對象實現(xiàn)相關功能。Ajax 和 Coment 的區(qū)別是數(shù)據(jù)的獲得方式，一個是向服務器請求數(shù)據(jù)，一個是從服務器向客戶端推送數(shù)據(jù)。
前端交流 QQ 群：669826425
