一茬暇、什么是Ajax?
Ajax= 異步JavaScript和XML。
Ajax是一種用于創(chuàng)建快速動態(tài)網(wǎng)頁的技術寡喝。
通過在后臺與服務器進行少量數(shù)據(jù)交換糙俗，Ajax可以使網(wǎng)頁實現(xiàn)異步更新。這意味著可以在不重新加載整個網(wǎng)頁的情況下预鬓，對網(wǎng)頁的某部分進行更新巧骚。
傳統(tǒng)的網(wǎng)頁（不使用 Ajax）如果需要更新內容，必需重載整個網(wǎng)頁面格二。
有很多使用Ajax的應用程序案例：新浪微博劈彪、Google 地圖、開心網(wǎng)等等顶猜。
（注意：Ajax不是一種新的編程語言沧奴，而是一種用于創(chuàng)建更好更快以及交互性更強的Web應用程序的技術。）
二长窄、Ajax工作原理
三滔吠、ajax的使用及實現(xiàn)步驟
(1) 創(chuàng)建XMLHttpRequest對象,也就是創(chuàng)建一個異步調用對象.
(2) 創(chuàng)建一個新的HTTP請求,并指定該HTTP請求的方法远寸、URL及驗證信息.
(3)設置響應HTTP請求狀態(tài)變化的函數(shù).
(4)發(fā)送HTTP請求.
(5)獲取異步調用返回的數(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.向服務器發(fā)送請求
xmlhttp.open(method,url,async);xmlhttp.send();
示例如下：
varxmlHttp =newXMLHttpRequest();? xmlHttp.open('get','demo_get.html','true');//調用open()方法并采用異步方式xmlHttp.send();//使用open()方法將請求發(fā)送出去xmlHttp.onreadystatechange()=>{if(xmlHttp.readyState ===4&& xmlHttp.status ===200){? ? ? ? ? }}
onreadystatechange事件可指定一個事件處理函數(shù)來處理XMLHttpRequest對象的執(zhí)行結果肆资。
四矗愧、詳解區(qū)分請求類型:GET 或 POST
方法描述
open(method,url,async)規(guī)定請求的類型、URL 以及是否異步處理請求郑原。? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??? method:請求的類型:GET 或 POST唉韭；??? url：文件在服務器上的位置,相對位置或絕對位置；?? ? async：true（異步）或 false（同步）
send(string)將請求發(fā)送到服務器犯犁。string：僅用于 POST 請求
?GET 還是 POST属愤？
????與 POST 相比，GET 更簡單也更快酸役，并且在大部分情況下都能用住诸。
?然而，在以下情況中涣澡，請使用 POST 請求：
無法使用緩存文件（更新服務器上的文件或數(shù)據(jù)庫）
向服務器發(fā)送大量數(shù)據(jù)（POST 沒有數(shù)據(jù)量限制）
發(fā)送包含未知字符的用戶輸入時贱呐，POST 比 GET 更穩(wěn)定也更可靠
GET 請求
一個簡單的 GET 請求：
xmlHttp.open("GET","demo_get.html",true); xmlHttp.send();
??在上面的例子中，您可能得到的是緩存的結果入桂。
為了避免這種情況奄薇，請向 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 請求不應在處理敏感數(shù)據(jù)時使用
GET 請求有長度限制
GET 請求只應當用于取回數(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í)行，而不等待來自服務器的響應逢捺。
onreadystatechange事件使代碼復雜化了谁鳍。但是這是在沒有得到服務器響應的情況下，防止代碼停止的最安全的方法劫瞳。
通過把該參數(shù)設置為 "false"倘潜，可以省去額外的 onreadystatechange 代碼。如果在請求失敗時是否執(zhí)行其余的代碼無關緊要志于，那么可以使用這個參數(shù)涮因。
五、Ajax中的一些處理
服務器響應處理
responseText? ? 獲得字符串形式的響應數(shù)據(jù)伺绽。
responseXML? 獲得XML 形式的響應數(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(){//接收到服務端響應時觸發(fā)if(xmlHttp.readyState==4&&xmlHttp.status==200){document.getElementById("target").innerHTML=xmlHttp.responseText;? ? ? }}
下面是 XMLHttpRequest 對象的三個重要的屬性：
屬性描述
onreadystatechange存儲函數(shù)（或函數(shù)名）购披，每當 readyState 屬性改變時，就會調用該函數(shù)肩榕。
readyState存有 XMLHttpRequest 的狀態(tài)刚陡。從 0 到 4 發(fā)生變化。????? 0: 請求未初始化株汉；????? 1: 服務器連接已建立筐乳；???? ? 2: 請求已接收；????? 3: 請求處理中乔妈；?? ??? 4: 請求已完成蝙云，且響應已就緒
status? 200: "OK" ； ? 404: 未找到頁面
在onreadystatechange·事件中路召，我們規(guī)定當服務器響應已做好被處理的準備時所執(zhí)行的任務勃刨。
當 readyState 等于 4 且狀態(tài)為 200 時，表示響應已就緒：
xmlhttp.status：響應狀態(tài)碼优训。這個也是面試比較愛問的朵你，這個必須知道4個以上(把上面兩個狀態(tài)碼也列到下邊了)，比較常見的有：
200: "OK"
304：該資源在上次請求之后沒有任何修改（這通常用于瀏覽器的緩存機制揣非，使用GET請求時尤其需要注意）抡医。
403? （禁止） 服務器拒絕請求。
404? （未找到） 服務器找不到請求的網(wǎng)頁早敬。
408? （請求超時） 服務器等候請求時發(fā)生超時忌傻。
500? （服務器內部錯誤）? 服務器遇到錯誤，無法完成請求搞监。
作者：懿左左
鏈接：http://www.reibang.com/p/d6a84fe5f656
來源：簡書
簡書著作權歸作者所有水孩，任何形式的轉載都請聯(lián)系作者獲得授權并注明出處。
