一他匪、什么是Ajax?
Ajax= 異步JavaScript和XML。Ajax是一種用于創(chuàng)建快速動(dòng)態(tài)網(wǎng)頁(yè)的技術(shù)夸研。- 通過(guò)在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換邦蜜，
Ajax可以使網(wǎng)頁(yè)實(shí)現(xiàn)異步更新。這意味著可以在不重新加載整個(gè)網(wǎng)頁(yè)的情況下亥至，對(duì)網(wǎng)頁(yè)的某部分進(jìn)行更新悼沈。- 傳統(tǒng)的網(wǎng)頁(yè)（不使用 Ajax）如果需要更新內(nèi)容，必需重載整個(gè)網(wǎng)頁(yè)面姐扮。
?? 有很多使用 Ajax的應(yīng)用程序案例：新浪微博絮供、Google 地圖、開(kāi)心網(wǎng)等等茶敏。
?（注意：Ajax 不是一種新的編程語(yǔ)言杯缺，而是一種用于創(chuàng)建更好更快以及交互性更強(qiáng)的Web應(yīng)用程序的技術(shù)。）
二睡榆、Ajax工作原理
三萍肆、ajax的使用及實(shí)現(xiàn)步驟
??(1) 創(chuàng)建XMLHttpRequest對(duì)象,也就是創(chuàng)建一個(gè)異步調(diào)用對(duì)象.
??(2) 創(chuàng)建一個(gè)新的HTTP請(qǐng)求,并指定該HTTP請(qǐng)求的方法、URL及驗(yàn)證信息.
??(3)設(shè)置響應(yīng)HTTP請(qǐng)求狀態(tài)變化的函數(shù).
??(4)發(fā)送HTTP請(qǐng)求.
??(5)獲取異步調(diào)用返回的數(shù)據(jù).
??(6)使用JavaScript和DOM實(shí)現(xiàn)局部刷新.
以下步驟胀屿，如果不能理解你死記硬背都要記下來(lái)塘揣，總比你答不出來(lái)要好吧！
??1.創(chuàng)建Ajax核心對(duì)象XMLHttpRequest
var xmlHttp;
if(window.XMLHttpRequest){ //針對(duì)除IE6以外的瀏覽器
xmlHttp=new XMLHttpRequest(); //實(shí)例化一個(gè)XMLHttpRequest
}else{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); //針對(duì)IE5,IE6
}
??2.向服務(wù)器發(fā)送請(qǐng)求
xmlhttp.open(method,url,async);
xmlhttp.send();
示例如下：
var xmlHttp = new XMLHttpRequest();
xmlHttp.open('get','demo_get.html','true');//調(diào)用open()方法并采用異步方式
xmlHttp.send(); //使用open()方法將請(qǐng)求發(fā)送出去
xmlHttp.onreadystatechange()=>{
if(xmlHttp.readyState === 4 && xmlHttp.status === 200){
}
}
??onreadystatechange事件可指定一個(gè)事件處理函數(shù)來(lái)處理XMLHttpRequest對(duì)象的執(zhí)行結(jié)果宿崭。
四亲铡、詳解區(qū)分請(qǐng)求類型:GET 或 POST
| 方法 | 描述 |
|---|---|
| open(method,url,async) | 規(guī)定請(qǐng)求的類型、URL 以及是否異步處理請(qǐng)求葡兑。 ??? method:請(qǐng)求的類型:GET 或 POST奖蔓；??? url：文件在服務(wù)器上的位置,相對(duì)位置或絕對(duì)位置；?? ? async：true（異步）或 false（同步） |
| send(string) | 將請(qǐng)求發(fā)送到服務(wù)器讹堤。string：僅用于 POST 請(qǐng)求 |
?GET 還是 POST吆鹤？
????與 POST 相比，GET 更簡(jiǎn)單也更快洲守，并且在大部分情況下都能用疑务。
?然而，在以下情況中梗醇，請(qǐng)使用 POST 請(qǐng)求：
- 無(wú)法使用緩存文件（更新服務(wù)器上的文件或數(shù)據(jù)庫(kù)）
- 向服務(wù)器發(fā)送大量數(shù)據(jù)（POST 沒(méi)有數(shù)據(jù)量限制）
- 發(fā)送包含未知字符的用戶輸入時(shí)知允，POST 比 GET 更穩(wěn)定也更可靠
- GET 請(qǐng)求
- 一個(gè)簡(jiǎn)單的 GET 請(qǐng)求：
xmlHttp.open("GET","demo_get.html",true);
xmlHttp.send();
??在上面的例子中，您可能得到的是緩存的結(jié)果叙谨。
- 為了避免這種情況温鸽，請(qǐng)向 URL 添加一個(gè)唯一的 ID
xmlhttp.open("GET","demo_get.html?t=" + Math.random(),true);
xmlhttp.send();
- 如果您希望通過(guò) GET 方法發(fā)送信息，請(qǐng)向 URL 添加信息：
xmlhttp.open("GET","demo_get2.html?fname=Henry&lname=Ford",true);
xmlhttp.send();
提示：GET請(qǐng)求具有以下的幾個(gè)特點(diǎn)：
- GET 請(qǐng)求可被緩存
- GET 請(qǐng)求保留在瀏覽器歷史記錄中
- GET 請(qǐng)求可被收藏為書(shū)簽
- GET 請(qǐng)求不應(yīng)在處理敏感數(shù)據(jù)時(shí)使用
- GET 請(qǐng)求有長(zhǎng)度限制
- GET 請(qǐng)求只應(yīng)當(dāng)用于取回?cái)?shù)據(jù)
- POST 請(qǐng)求
- 一個(gè)簡(jiǎn)單 POST 請(qǐng)求：
xmlhttp.open("POST","demo_post.html",true);
xmlhttp.send();
??如果需要像 HTML 表單那樣 POST 數(shù)據(jù)手负，請(qǐng)使用setRequestHeader() 來(lái)添加 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) | 向請(qǐng)求添加 HTTP頭????? header: 規(guī)定頭的名稱;???? ? value: 規(guī)定頭的值 |
提示：POST請(qǐng)求的特點(diǎn)如下：
- POST 請(qǐng)求不會(huì)被緩存
- POST 請(qǐng)求不會(huì)保留在瀏覽器歷史記錄中
- POST 請(qǐng)求不能被收藏為書(shū)簽
- POST 請(qǐng)求對(duì)數(shù)據(jù)長(zhǎng)度沒(méi)有要求
為什么使用 Async=true ？
??我們的實(shí)例在 open() 的第三個(gè)參數(shù)中使用了 "true"虫溜。該參數(shù)規(guī)定請(qǐng)求是否異步處理雹姊。True 表示腳本會(huì)在 send() 方法之后繼續(xù)執(zhí)行，而不等待來(lái)自服務(wù)器的響應(yīng)衡楞。
??onreadystatechange事件使代碼復(fù)雜化了吱雏。但是這是在沒(méi)有得到服務(wù)器響應(yīng)的情況下，防止代碼停止的最安全的方法瘾境。
??通過(guò)把該參數(shù)設(shè)置為 "false"歧杏，可以省去額外的 onreadystatechange 代碼。如果在請(qǐng)求失敗時(shí)是否執(zhí)行其余的代碼無(wú)關(guān)緊要迷守，那么可以使用這個(gè)參數(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()后面處理返回來(lái)的數(shù)據(jù)茵瘾。
- 異步處理
? 異步處理相對(duì)比較麻煩，要在請(qǐng)求狀態(tài)改變事件中處理咐鹤。
xmlHttp.onreadystatechange=function(){//接收到服務(wù)端響應(yīng)時(shí)觸發(fā)
if(xmlHttp.readyState==4&&xmlHttp.status==200){
document.getElementById("target").innerHTML=xmlHttp.responseText;
}
}
下面是 XMLHttpRequest 對(duì)象的三個(gè)重要的屬性：
| 屬性 | 描述 |
|---|---|
| onreadystatechange | 存儲(chǔ)函數(shù)（或函數(shù)名）拗秘，每當(dāng) readyState 屬性改變時(shí)，就會(huì)調(diào)用該函數(shù)祈惶。 |
| readyState | 存有 XMLHttpRequest 的狀態(tài)雕旨。從 0 到 4 發(fā)生變化。????? 0: 請(qǐng)求未初始化捧请；????? 1: 服務(wù)器連接已建立凡涩；???? ? 2: 請(qǐng)求已接收；????? 3: 請(qǐng)求處理中疹蛉；?? ??? 4: 請(qǐng)求已完成活箕，且響應(yīng)已就緒 |
| status | ? 200: "OK" ； ? 404: 未找到頁(yè)面 |
??在 onreadystatechange·事件中氧吐，我們規(guī)定當(dāng)服務(wù)器響應(yīng)已做好被處理的準(zhǔn)備時(shí)所執(zhí)行的任務(wù)讹蘑。
??當(dāng) readyState 等于 4 且狀態(tài)為 200 時(shí)，表示響應(yīng)已就緒：
xmlhttp.status：響應(yīng)狀態(tài)碼筑舅。這個(gè)也是面試比較愛(ài)問(wèn)的座慰，這個(gè)必須知道4個(gè)以上(把上面兩個(gè)狀態(tài)碼也列到下邊了)，比較常見(jiàn)的有：
- 200: "OK"
- 304：該資源在上次請(qǐng)求之后沒(méi)有任何修改（這通常用于瀏覽器的緩存機(jī)制翠拣，使用GET請(qǐng)求時(shí)尤其需要注意）版仔。
- 403 （禁止） 服務(wù)器拒絕請(qǐng)求。
- 404 （未找到） 服務(wù)器找不到請(qǐng)求的網(wǎng)頁(yè)误墓。
- 408 （請(qǐng)求超時(shí)） 服務(wù)器等候請(qǐng)求時(shí)發(fā)生超時(shí)蛮粮。
- 500 （服務(wù)器內(nèi)部錯(cuò)誤） 服務(wù)器遇到錯(cuò)誤，無(wú)法完成請(qǐng)求谜慌。
