一、什么是Ajax?
Ajax= 異步JavaScript和XML。
Ajax是一種用于創(chuàng)建快速動態(tài)網(wǎng)頁的技術(shù)。
通過在后臺與服務(wù)器進行少量數(shù)據(jù)交換，Ajax可以使網(wǎng)頁實現(xiàn)異步更新。這意味著可以在不重新加載整個網(wǎng)頁的情況下，對網(wǎng)頁的某部分進行更新。
傳統(tǒng)的網(wǎng)頁（不使用 Ajax）如果需要更新內(nèi)容，必需重載整個網(wǎng)頁面。
有很多使用Ajax的應(yīng)用程序案例：新浪微博、Google 地圖、開心網(wǎng)等等。
（注意：Ajax不是一種新的編程語言，而是一種用于創(chuàng)建更好更快以及交互性更強的Web應(yīng)用程序的技術(shù)。）
二、Ajax工作原理
三、ajax的使用及實現(xiàn)步驟
(1) 創(chuàng)建XMLHttpRequest對象,也就是創(chuàng)建一個異步調(diào)用對象.
(2) 創(chuàng)建一個新的HTTP請求,并指定該HTTP請求的方法、URL及驗證信息.
(3)設(shè)置響應(yīng)HTTP請求狀態(tài)變化的函數(shù).
(4)發(fā)送HTTP請求.
(5)獲取異步調(diào)用返回的數(shù)據(jù).
(6)使用JavaScript和DOM實現(xiàn)局部刷新.
以下步驟，如果不能理解你死記硬背都要記下來，總比你答不出來要好吧！
??1.創(chuàng)建Ajax核心對象XMLHttpRequest
varxmlHttp;if(window.XMLHttpRequest){//針對除IE6以外的瀏覽器xmlHttp=newXMLHttpRequest();//實例化一個XMLHttpRequest}else{? xmlHttp=newActiveXObject("Microsoft.XMLHTTP");//針對IE5,IE6}
??2.向服務(wù)器發(fā)送請求
xmlhttp.open(method,url,async);xmlhttp.send();
示例如下：
varxmlHttp =newXMLHttpRequest();? xmlHttp.open('get','demo_get.html','true');//調(diào)用open()方法并采用異步方式xmlHttp.send();//使用open()方法將請求發(fā)送出去xmlHttp.onreadystatechange()=>{if(xmlHttp.readyState ===4&& xmlHttp.status ===200){? ? ? ? ? }}
onreadystatechange事件可指定一個事件處理函數(shù)來處理XMLHttpRequest對象的執(zhí)行結(jié)果。
四、詳解區(qū)分請求類型:GET 或 POST
方法描述
open(method,url,async)規(guī)定請求的類型、URL 以及是否異步處理請求。? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??? method:請求的類型:GET 或 POST；??? url：文件在服務(wù)器上的位置,相對位置或絕對位置；?? ? async：true（異步）或 false（同步）
send(string)將請求發(fā)送到服務(wù)器。string：僅用于 POST 請求
?GET 還是 POST？
????與 POST 相比，GET 更簡單也更快，并且在大部分情況下都能用。
?然而，在以下情況中，請使用 POST 請求：
無法使用緩存文件（更新服務(wù)器上的文件或數(shù)據(jù)庫）
向服務(wù)器發(fā)送大量數(shù)據(jù)（POST 沒有數(shù)據(jù)量限制）
發(fā)送包含未知字符的用戶輸入時，POST 比 GET 更穩(wěn)定也更可靠
GET 請求
一個簡單的 GET 請求：
xmlHttp.open("GET","demo_get.html",true); xmlHttp.send();
??在上面的例子中，您可能得到的是緩存的結(jié)果。
為了避免這種情況，請向 URL 添加一個唯一的 ID
xmlhttp.open("GET","demo_get.html?t="+Math.random(),true); xmlhttp.send();
如果您希望通過 GET 方法發(fā)送信息，請向 URL 添加信息：
xmlhttp.open("GET","demo_get2.html?fname=Henry&lname=Ford",true); xmlhttp.send();
提示：GET請求具有以下的幾個特點：
GET 請求可被緩存
GET 請求保留在瀏覽器歷史記錄中
GET 請求可被收藏為書簽
GET 請求不應(yīng)在處理敏感數(shù)據(jù)時使用
GET 請求有長度限制
GET 請求只應(yīng)當(dāng)用于取回數(shù)據(jù)
POST 請求
一個簡單 POST 請求：
xmlhttp.open("POST","demo_post.html",true); xmlhttp.send();
如果需要像HTML 表單那樣 POST 數(shù)據(jù)，請使用setRequestHeader()來添加 HTTP 頭。然后在send()方法中規(guī)定您希望發(fā)送的數(shù)據(jù)：
xmlhttp.open("POST","ajax_test.html",true); xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xmlhttp.send("fname=Henry&lname=Ford");
方法描述
setRequestHeader(header,value)向請求添加 HTTP頭????? header: 規(guī)定頭的名稱;????? ? value: 規(guī)定頭的值
提示：POST請求的特點如下：
POST 請求不會被緩存
POST 請求不會保留在瀏覽器歷史記錄中
POST 請求不能被收藏為書簽
POST 請求對數(shù)據(jù)長度沒有要求
為什么使用 Async=true? ？
我們的實例在 open() 的第三個參數(shù)中使用了 "true"。該參數(shù)規(guī)定請求是否異步處理。True 表示腳本會在 send() 方法之后繼續(xù)執(zhí)行，而不等待來自服務(wù)器的響應(yīng)。
onreadystatechange事件使代碼復(fù)雜化了。但是這是在沒有得到服務(wù)器響應(yīng)的情況下，防止代碼停止的最安全的方法。
通過把該參數(shù)設(shè)置為 "false"，可以省去額外的 onreadystatechange 代碼。如果在請求失敗時是否執(zhí)行其余的代碼無關(guān)緊要，那么可以使用這個參數(shù)。
五、Ajax中的一些處理
服務(wù)器響應(yīng)處理
responseText? ? 獲得字符串形式的響應(yīng)數(shù)據(jù)。
responseXML? 獲得XML 形式的響應(yīng)數(shù)據(jù)。
同步處理
xmlHttp.open("GET","demo_get.html",false);? xmlHttp.send();document.getElementById("target").innerHTML=xmlHttp.responseText;
??直接在send()后面處理返回來的數(shù)據(jù)。
異步處理
? 異步處理相對比較麻煩，要在請求狀態(tài)改變事件中處理。
xmlHttp.onreadystatechange=function(){//接收到服務(wù)端響應(yīng)時觸發(fā)if(xmlHttp.readyState==4&&xmlHttp.status==200){document.getElementById("target").innerHTML=xmlHttp.responseText;? ? ? }}
下面是 XMLHttpRequest 對象的三個重要的屬性：
屬性描述
onreadystatechange存儲函數(shù)（或函數(shù)名），每當(dāng) readyState 屬性改變時，就會調(diào)用該函數(shù)。
readyState存有 XMLHttpRequest 的狀態(tài)。從 0 到 4 發(fā)生變化。????? 0: 請求未初始化；????? 1: 服務(wù)器連接已建立；???? ? 2: 請求已接收；????? 3: 請求處理中；?? ??? 4: 請求已完成，且響應(yīng)已就緒
status? 200: "OK" ； ? 404: 未找到頁面
在onreadystatechange·事件中，我們規(guī)定當(dāng)服務(wù)器響應(yīng)已做好被處理的準(zhǔn)備時所執(zhí)行的任務(wù)。
當(dāng) readyState 等于 4 且狀態(tài)為 200 時，表示響應(yīng)已就緒：
xmlhttp.status：響應(yīng)狀態(tài)碼。這個也是面試比較愛問的，這個必須知道4個以上(把上面兩個狀態(tài)碼也列到下邊了)，比較常見的有：
200: "OK"
304：該資源在上次請求之后沒有任何修改（這通常用于瀏覽器的緩存機制，使用GET請求時尤其需要注意）。
403? （禁止） 服務(wù)器拒絕請求。
404? （未找到） 服務(wù)器找不到請求的網(wǎng)頁。
408? （請求超時） 服務(wù)器等候請求時發(fā)生超時。
500? （服務(wù)器內(nèi)部錯誤）? 服務(wù)器遇到錯誤，無法完成請求。
作者：懿左左
鏈接：http://www.itdecent.cn/p/d6a84fe5f656
來源：簡書
簡書著作權(quán)歸作者所有，任何形式的轉(zhuǎn)載都請聯(lián)系作者獲得授權(quán)并注明出處。
