在我們平時的開發過程中，經常使用到Ajax數據交互，相信有很大一部分人會使用，可能沒太詳細了解過Ajax的工作原理。下面我們一起看一下吧！
( 一 ) 什么是Ajax
2. 使用DOM模型來交互和動態顯示。
3. 使用XMLHttpRequest來和服務器進行異步通信。
4. 使用javascript來綁定和調用。
var xmlhttp;
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執行代碼
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 瀏覽器執行代碼
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
2. 向服務器發送請求
使用 XMLHttpRequest 對象的 open() 和 send() 方法：
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
請求類型：與 POST 相比，GET 更簡單也更快，並且在大部分情況下都能用。
然而，在以下情況中，請使用 POST 請求：
: 無法使用緩存文件（更新服務器上的文件或數據庫）
: 向服務器發送大量數據（POST 沒有數據量限制）
: 發送包含未知字符的用戶輸入時，POST 比 GET 更穩定也更可靠
3. 服務器相應
使用 XMLHttpRequest 對象的 responseText 或 responseXML 屬性。
( a ) responseText 屬性(獲得字符串形式的響應數據。)
實例：
document.getElementById("Divs").innerHTML=xmlhttp.responseText;
( b )responseXML 屬性(獲得 XML 形式的響應數據)
實例：
xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
{
txt=txt + x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("Divs").innerHTML=txt;
4.XMLHttpRequest readyState狀態
XMLHttpRequest 對象的三個重要的屬性：
實例：
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("Divs").innerHTML=xmlhttp.responseText;
}
}
注意： onreadystatechange 事件被觸發 4 次（0 - 4）, 分別是： 0-1、1-2、2-3、3-4，對應着 readyState 的每個變化。
日常筆記：⚠️⚠️⚠️
xmlhttp.readyState的值及解釋：
0：請求未初始化（還沒有調用 open()）。
1：請求已經建立，但是還沒有發送（還沒有調用 send()）。
2：請求已發送，正在處理中（通常現在可以從響應中獲取內容頭）。
3：請求在處理中；通常響應中已有部分數據可用了，但是服務器還沒有完成響應的生成。
4：響應已完成；您可以獲取並使用服務器的響應了。
xmlhttp.status的值及解釋：
100——客戶必須繼續發出請求
101——客戶要求服務器根據請求轉換HTTP協議版本
200——交易成功
201——提示知道新文件的URL
202——接受和處理、但處理未完成
203——返回信息不確定或不完整
204——請求收到，但返回信息為空
205——服務器完成了請求，用戶代理必須復位當前已經瀏覽過的文件
206——服務器已經完成了部分用戶的GET請求
300——請求的資源可在多處得到
301——刪除請求數據
302——在其他地址發現了請求數據
303——建議客戶訪問其他URL或訪問方式
304——客戶端已經執行了GET，但文件未變化
305——請求的資源必須從服務器指定的地址得到
306——前一版本HTTP中使用的代碼，現行版本中不再使用
307——申明請求的資源臨時性刪除
400——錯誤請求，如語法錯誤
401——請求授權失敗
402——保留有效ChargeTo頭響應
403——請求不允許
404——沒有發現文件、查詢或URl
405——用戶在Request-Line字段定義的方法不允許
406——根據用戶發送的Accept拖，請求資源不可訪問
407——類似401，用戶必須首先在代理服務器上得到授權
408——客戶端沒有在用戶指定的餓時間內完成請求
409——對當前資源狀態，請求不能完成
410——服務器上不再有此資源且無進一步的參考地址
411——服務器拒絕用戶定義的Content-Length屬性請求
412——一個或多個請求頭字段在當前請求中錯誤
413——請求的資源大於服務器允許的大小
414——請求的資源URL長於服務器允許的長度
415——請求資源不支持請求項目格式
416——請求中包含Range請求頭字段，在當前請求資源范圍內沒有range指示值，請求也不包含If-Range請求頭字段
417——服務器不滿足請求Expect頭字段指定的期望值，如果是代理服務器，可能是下一級服務器不能滿足請求
500——服務器產生內部錯誤
501——服務器不支持請求的函數
502——服務器暫時不可用，有時是為了防止發生系統過載
503——服務器過載或暫停維修
504——關口過載，服務器使用另一個關口或服務來響應用戶，等待時間設定值較長
505——服務器不支持或拒絕支請求頭中指定的HTTP版本
1xx:信息響應類，表示接收到請求並且繼續處理
2xx:處理成功響應類，表示動作被成功接收、理解和接受
3xx:重定向響應類，為了完成指定的動作，必須接受進一步處理
4xx:客戶端錯誤，客戶請求包含語法錯誤或者是不能正確執行
5xx:服務端錯誤，服務器不能正確執行一個正確的請求
xmlhttp.readyState==4 && xmlhttp.status==200的解釋：請求完成並且成功返回
1. 無刷新更新數據。
AJAX最大優點就是能在不刷新整個頁面的前提下與服務器通信維護數據。這使得Web應用程序更為迅捷地響應用戶交互，並避免了在網絡上發送那些沒有改變的信息，減少用戶等待時間，帶來非常好的用戶體驗。
2. 異步與服務器通信。
AJAX使用異步方式與服務器通信，不需要打斷用戶的操作，具有更加迅速的響應能力。優化了Browser和Server之間的溝通，減少不必要的數據傳輸、時間及降低網絡上數據流量。
3. 前端和后端負載平衡。
AJAX可以把以前一些服務器負擔的工作轉嫁到客戶端，利用客戶端閑置的能力來處理，減輕服務器和帶寬的負擔，節約空間和寬帶租用成本。並且減輕服務器的負擔，AJAX的原則是“按需取數據”，可以最大程度的減少冗余請求和響應對服務器造成的負擔，提升站點性能。
4. 基於標准被廣泛支持。
AJAX基於標准化的並被廣泛支持的技術，不需要下載瀏覽器插件或者小程序，但需要客戶允許JavaScript在瀏覽器上執行。隨着Ajax的成熟，一些簡化Ajax使用方法的程序庫也相繼問世。同樣，也出現了另一種輔助程序設計的技術，為那些不支持JavaScript的用戶提供替代功能。
5. 界面與應用分離。
Ajax使WEB中的界面與應用分離（也可以說是數據與呈現分離），有利於分工合作、減少非技術人員對頁面的修改造成的WEB應用程序錯誤、提高效率、也更加適用於現在的發布系統。
缺點：
1. AJAX干掉了Back和History功能，即對瀏覽器機制的破壞。
在動態更新頁面的情況下，用戶無法回到前一個頁面狀態，因為瀏覽器僅能記憶歷史記錄中的靜態頁面。一個被完整讀入的頁面與一個已經被動態修改過的頁面之間的差別非常微妙；用戶通常會希望單擊后退按鈕能夠取消他們的前一次操作，但是在Ajax應用程序中，這將無法實現。
2. AJAX的安全問題。
AJAX技術給用戶帶來很好的用戶體驗的同時也對IT企業帶來了新的安全威脅，Ajax技術就如同對企業數據建立了一個直接通道。這使得開發者在不經意間會暴露比以前更多的數據和服務器邏輯。Ajax的邏輯可以對客戶端的安全掃描技術隱藏起來，允許黑客從遠端服務器上建立新的攻擊。還有Ajax也難以避免一些已知的安全弱點，諸如跨站點腳步攻擊、SQL注入攻擊和基於Credentials的安全漏洞等等。
3. 對搜索引擎支持較弱。
對搜索引擎的支持比較弱。如果使用不當，AJAX會增大網絡數據的流量，從而降低整個系統的性能。
4. 破壞程序的異常處理機制。
至少從目前看來，像Ajax.dll，Ajaxpro.dll這些Ajax框架是會破壞程序的異常機制的。關於這個問題，曾在開發過程中遇到過，但是查了一下網上幾乎沒有相關的介紹。后來做了一次試驗，分別采用Ajax和傳統的form提交的模式來刪除一條數據……給我們的調試帶來了很大的困難。
5. 違背URL和資源定位的初衷。
例如，我給你一個URL地址，如果采用了Ajax技術，也許你在該URL地址下面看到的和我在這個URL地址下看到的內容是不同的。這個和資源定位的初衷是相背離的。
6. AJAX不能很好支持移動設備。
一些手持設備（如手機、PDA等）現在還不能很好的支持Ajax，比如說我們在手機的瀏覽器上打開采用Ajax技術的網站時，它目前是不支持的。
7. 客戶端過肥，太多客戶端代碼造成開發上的成本。
編寫復雜、容易出錯 ；冗余代碼比較多（層層包含js文件是AJAX的通病，再加上以往的很多服務端代碼現在放到了客戶端）；破壞了Web的原有標准。