特別說明：以下文章是菜鳥教程的Ajax教程以及一些其他網上公開資料的學習總結，部分文字直接copy自原文，也有一些文章的引用引用，均標明出處，如涉及侵權請聯繫刪除。
文章目錄
1. 什麼是Ajax
關於Ajax的發明來源略過不提，這些屬於技術裏的冷知識，感興趣的同學自己搜索。
AJAX = Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）
Ajax不是一門新語言，它是基於現有Internet標準基礎上，提出的一種優化客戶端顯示的技術方案。Ajax基於Javascript語言實現，終端用戶想要使用此方案，需要允許瀏覽器執行Javascript腳本。
2. Ajax解決什麼問題
與傳統的網頁訪問與生成方法相比，Ajax可以實現：
- 快速生成動態網頁內容
- 與服務器數據交換更少
- 不刷新全部網頁而只是部分更新網頁上內容
2.1 與傳統網頁訪問的不同
傳統動態網頁訪問，由瀏覽器發送請求（httprequest）到服務器，服務器收到請求後生成整張網頁內容再發送給瀏覽器，瀏覽器收到後顯示出來。如果網頁上有動態更新內容，例如輸入框輸入查詢字符，點擊某個按鍵等等，瀏覽器在用戶操作後，需要把用戶輸入數據再次放入請求（httprequest）發送給服務器，服務器重複上述過程重新生成新的頁面返回給瀏覽器顯示。
從上面過程可以發現，頁面上任何動態輸入操作，瀏覽器都要刷新整張頁面，如果頁面內容很多，或者網絡速度很慢，或者服務器由於任務過多響應不及時，就會造成瀏覽器一直等待服務器的頁面返回，即常見的瀏覽器“白屏”，用戶體驗很差。
Ajax的頁面訪問方式不同，第一次瀏覽器請求時返回的仍然是全部頁面，之後頁面上的動態操作，是由特殊的請求（xmlhttprequest）完成，服務器側對應由專門的Javascript代碼響應此請求，返回對應的數據，瀏覽器收到後，在原頁面基礎上，用新數據部分更新頁面，因此可以實現快速的動態頁面生成。
下面的三張圖對這兩種方式做了一個比較好的總結（圖片來源在此，這位網友的文章總結不錯，希望瞭解更多圖片細節的可以閱讀其文章）。
- 從瀏覽器端看差異
- 從服務器端看差異
- 從頁面編寫上看差異
2.2 與httprequest報頭的對比1
- xmlhttprequest
- httprequest
區別主要在於
-
Ajax請求多了一個X-Requested-With:XMLHttpRequest 屬性。
該屬性是方便服務器端判斷get請求來自Ajax請求還是傳統請求。 -
Ajax的get請求Accept屬性爲application/json,text/javascript
該屬性是期待服務器返回的數據格式。
3. Ajax的優缺點
3.1 優點2
- 無刷新更新數據
AJAX最大優點就是能在不刷新整個頁面的前提下與服務器通信維護數據。這使得Web應用程序更爲迅捷地響應用戶交互，並避免了在網絡上發送那些沒有改變的信息，減少用戶等待時間，帶來非常好的用戶體驗。 - 異步與服務器通信
AJAX使用異步方式與服務器通信，不需要打斷用戶的操作，具有更加迅速的響應能力。優化了Browser和Server之間的溝通，減少不必要的數據傳輸、時間及降低網絡上數據流量。 - 前端和後端負載平衡
AJAX可以把以前一些服務器負擔的工作轉嫁到客戶端，利用客戶端閒置的能力來處理，減輕服務器和帶寬的負擔，節約空間和寬帶租用成本。並且減輕服務器的負擔，AJAX的原則是“按需取數據”，可以最大程度的減少冗餘請求和響應對服務器造成的負擔，提升站點性能。 - 基於標準被廣泛支持
AJAX 基於標準化的並被廣泛支持的技術，不需要下載瀏覽器插件或者小程序，但需要客戶允許JavaScript在瀏覽器上執行。隨着Ajax的成熟，一些簡化 Ajax使用方法的程序庫也相繼問世。同樣，也出現了另一種輔助程序設計的技術，爲那些不支持JavaScript的用戶提供替代功能。 - 界面與應用分離
Ajax使WEB中的界面與應用分離（也可以說是數據與呈現分離），有利於分工合作、減少非技術人員對頁面的修改造成的WEB應用程序錯誤、提高效率、也更加適用於現在的發佈系統。
3.2 缺點3 4
- 瀏覽器不兼容
AJAX高度依賴JavaScript，而不同的瀏覽器對JavaScript支持性不同。這成了一個問題，尤其是當AJAX必須跨許多瀏覽器工作的時候。那些不支持JavaScript或者不支持JavaScript某些選項的瀏覽器將不能夠正常使用ajax。由於Ajax對JavaScript的依賴性，它不適用移動應用。另外，使用Ajax時，web瀏覽器的後退鍵不能正常使用（沒有刷新新頁面，只是在原頁面上更新，因此沒有後退一說）。 - 不安全性
網頁可能很難調試，增加網頁的代碼量，你的網頁更可能遇上嚴峻的安全威脅。 - 增加Web服務器的負載
如果你增加一個自動更新的功能，它每隔幾秒向服務發起請求，那麼就會增加服務器的負載。
4. 使用Ajax
（簡化版5，詳細內容參見菜鳥教程的Ajax教程）
- 創建xmlhttprequest對象
- 小竅門：
所有現代瀏覽器（IE7+、Firefox、Chrome、Safari 以及 Opera）均內建XMLHttpRequest 對象，老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 對象。爲了應對所有的現代瀏覽器，包括 IE5 和 IE6，請檢查瀏覽器是否支持 XMLHttpRequest 對象。*
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執行代碼
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 瀏覽器執行代碼
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
- 創建HTTP請求
xmlhttp.open("GET","/try/ajax/demo_get.php",true);
- 設置響應HTTP請求狀態變化的函數
xmlhttp.onreadystatechange=[function_name]
- 發送請求
xmlhttp.send();
- 處理服務器響應
function [function_name]()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
// 你的數據處理代碼
......
}
}
5. 總結
以上就是對Ajax的總結，細節不做展開，使用時具體參考相關文章即可。文章內容參考網上資源總結而成，相關鏈接參見文後列表。