Ajax小結

Ajax

觀點明白

• 全稱：Ajax是對Asynchronous Javascript + XML的簡寫。
• 作用：能夠向服務器要求分外的數據而不必卸載頁面，會帶來更好的用戶體驗。
• 手藝中心：XMLHttpRequest對象（簡稱XHR）。XHR為向服務器發送要求和剖析服務器相應供應了流通的接口。能夠以異步體式格局從服務器獲得更多信息，意味着用戶單擊后，能夠沒必要革新頁面也能獲得新數據。即能夠運用XHR對象獲得新數據，然後再經由歷程DOM將新數據插進去到頁面中。
• 數據花樣：雖然名字中包括XML的身分，但Ajax通訊與數據花樣無關。這類手藝就是不必革新頁面即可從服務器獲得數據，但不一定是XML數據。

建立Ajax

1. 建立XMLHttpRequest對象

   var xhr;
if (window.XMLHttpRequest){ //IE7+, Firefox, Chrome, Opera, Safari
xhr=new XMLHttpRequest();
}else{ // 兼容 IE6, IE5
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}

2. 關於異步要求，沒必要守候服務器相應，JS代碼繼承實行。
   能夠檢測XHR對象的readyState屬性，該屬性示意要求/相應歷程的當前運動階段。

   0:未初始化。還沒有挪用open()要領。
1:啟動。已挪用open()要領，還沒有挪用send()要領。
2:發送。已挪用send()要領，還沒有吸收相應。
3:吸收。已吸收到部份相應。
4:完成。已吸收到悉數相應數據。

   只需readyState屬性的值由一個值變成另一個值，就會觸發onreadyStatechange事宜，應用這個事宜來檢測每次狀況變化后readyState值，獵取服務器的相應也在這個事宜中處置懲罰。

   xhr.OnreadyStatechange= function(){
If(xhr.readyState == 4){
if(xhr.status >=200 && xhr.status = 304){
alert(xhr.responseText);
}else{
alert(“Request was unsuccessful: ”+ xhr.status);
}
}
};

3. 建立一個新的HTTP要求,並指定要求的要領、URL及異步(true)/同步(false)

   xhr.open(method,url,async);
注重：open 的參數要切記，許多面試官愛問如許的細節
1)method：要求的範例；GET 或 POST
2)url：文件在服務器上的位置
3)async：true（異步）或 false（同步）
注重：post要求一定要設置要求頭的花樣內容
xhr.open("post","ajax_test.html",true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); //運用XHR模擬表單提交
xhr.send("fname=Henry&lname=Ford");

4. 發送HTTP要求

   xmlhttp.send();
如果post要求，參數為作為要求主體發送的參數。
如果get要求，參數為null。

5. 獵取同步發送要求返回的數據

   if ((xhr.status >= 200 && xhr.status <300) || xhr.status == 304){
alert(xhr.responseText);
}else{
alert(“Request was unsuccessful: ”+ xhr.status);
}

6. 運用Javascript和DOM完成部分革新