2. Ajax的工作原理

時(shí)間：2022-03-19 16:36:01 | 來源：網(wǎng)絡(luò)推廣

時(shí)間：2022-03-19 16:36:01 來源：網(wǎng)絡(luò)推廣

使用 Ajax 原生方式發(fā)送請(qǐng)求主要通過 XMLHttpRequest(IE7 、Firefox、Chrome、Safari 以及Opera) 、ActiveXObject(IE5 和 IE6)對(duì)象實(shí)現(xiàn)異步通信效果。

創(chuàng)建XMLHttpRequest對(duì)象：

var xhr;
if (window.XMLHttpRequest)
{
// IE7 , Firefox, Chrome, Opera, Safari 瀏覽器執(zhí)行代碼
xhr=new XMLHttpRequest();
}
else
{
// IE6, IE5 瀏覽器執(zhí)行代碼
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}

向服務(wù)器發(fā)送請(qǐng)求：使用 XMLHttpRequest 對(duì)象的 open() 和 send() 方法

//通過 GET 方法發(fā)送信息，請(qǐng)向 URL 添加信息
xhr.open("GET","/try/ajax/demo_get2.php?fname=Henrylname=Ford",true);
xhr.send();

//像 HTML 表單那樣 POST 數(shù)據(jù)，使用 setRequestHeader() 來添加 HTTP 頭
xhr.open("POST","/try/ajax/demo_post2.php",true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send("fname=Henrylname=Ford");

//當(dāng)使用 async=true 時(shí)，需規(guī)定在響應(yīng)處于 onreadystatechange 事件中的就緒狀態(tài)時(shí)執(zhí)行的函數(shù)
xhr.onreadystatechange=function()
{
if (xhr.readyState==4 xhr.status==200)
{
document.getElementById("myDiv").innerHTML=xhr.responseText;
}
}
xhr.open("GET","/try/ajax/ajax_info.txt",true);
xhr.send();

//當(dāng)您使用 async=false 時(shí),把代碼放到 send() 語句后面即可,不推薦使用
xhr.open("GET","/try/ajax/ajax_info.txt",false);
xhr.send();
document.getElementById("myDiv").innerHTML=xhr.responseText;

使用GET還是POST？

與 POST 相比，GET 更簡(jiǎn)單也更快，并且在大部分情況下都能用。

與 POST 相比，GET 更簡(jiǎn)單也更快，并且在大部分情況下都能用。

然而，在以下情況中，請(qǐng)使用 POST 請(qǐng)求：

無法使用緩存文件（更新服務(wù)器上的文件或數(shù)據(jù)庫(kù)）

向服務(wù)器發(fā)送大量數(shù)據(jù)（POST 沒有數(shù)據(jù)量限制）

發(fā)送包含未知字符的用戶輸入時(shí)，POST 比 GET 更穩(wěn)定也更可靠

//來自服務(wù)器的響應(yīng)并非 XML，使用 responseText 屬性,返回字符串形式的響應(yīng)
document.getElementById("myDiv").innerHTML=xhr.responseText;

//來自服務(wù)器的響應(yīng)是 XML，而且需要作為 XML 對(duì)象進(jìn)行解析，使用 responseXML 屬性,請(qǐng)求 cd_catalog.xml 文件，并解析響應(yīng)
xmlDoc=xhr.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;ix.length;i )
{
txt=txt x[i].childNodes[0].nodeValue "br";
}
document.getElementById("myDiv").innerHTML=txt;

onreadystatechange事件：當(dāng)請(qǐng)求被發(fā)送到服務(wù)器時(shí)，我們需要執(zhí)行一些基于響應(yīng)的任務(wù)。每當(dāng) readyState 改變時(shí)，就會(huì)觸發(fā) onreadystatechange 事件。

//當(dāng) readyState 等于 4 且狀態(tài)為 200 時(shí)，表示響應(yīng)已就緒
xhr.onreadystatechange=function()
{
if (xhr.readyState==4 xhr.status==200)
{
document.getElementById("myDiv").innerHTML=xhr.responseText;
}
}
//如果存在多個(gè) AJAX 任務(wù)，那么應(yīng)該為創(chuàng)建 XMLHttpRequest 對(duì)象編寫一個(gè)標(biāo)準(zhǔn)的函數(shù)，并為每個(gè) AJAX 任務(wù)調(diào)用該函數(shù)。該函數(shù)調(diào)用應(yīng)該包含 URL 以及發(fā)生 onreadystatechange 事件時(shí)執(zhí)行的任務(wù)（每次調(diào)用可能不盡相同）
function myFunction()
{
loadXMLDoc("/try/ajax/ajax_info.txt",function()
{
if (xmlhttp.readyState==4 xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
});
}

xhr.readyState的值及解釋：

0：請(qǐng)求未初始化（還沒有調(diào)用 open()）。

1：請(qǐng)求已經(jīng)建立，但是還沒有發(fā)送（還沒有調(diào)用 send()）。

2：請(qǐng)求已發(fā)送，正在處理中（通?，F(xiàn)在可以從響應(yīng)中獲取內(nèi)容頭）。

3：請(qǐng)求在處理中；通常響應(yīng)中已有部分?jǐn)?shù)據(jù)可用了，但是服務(wù)器還沒有完成響應(yīng)的生成。

4：響應(yīng)已完成；您可以獲取并使用服務(wù)器的響應(yīng)了。

xhr.status的值及解釋：

100客戶必須繼續(xù)發(fā)出請(qǐng)求

101客戶要求服務(wù)器根據(jù)請(qǐng)求轉(zhuǎn)換HTTP協(xié)議版本

200交易成功

201提示知道新文件的URL

202接受和處理、但處理未完成

203返回信息不確定或不完整

204請(qǐng)求收到，但返回信息為空

205服務(wù)器完成了請(qǐng)求，用戶代理必須復(fù)位當(dāng)前已經(jīng)瀏覽過的文件

206服務(wù)器已經(jīng)完成了部分用戶的GET請(qǐng)求

300請(qǐng)求的資源可在多處得到

301刪除請(qǐng)求數(shù)據(jù)

302在其他地址發(fā)現(xiàn)了請(qǐng)求數(shù)據(jù)

303建議客戶訪問其他URL或訪問方式

304客戶端已經(jīng)執(zhí)行了GET，但文件未變化

305請(qǐng)求的資源必須從服務(wù)器指定的地址得到

306前一版本HTTP中使用的代碼，現(xiàn)行版本中不再使用

307申明請(qǐng)求的資源臨時(shí)性刪除

400錯(cuò)誤請(qǐng)求，如語法錯(cuò)誤

401請(qǐng)求授權(quán)失敗

402保留有效ChargeTo頭響應(yīng)

403請(qǐng)求不允許

404沒有發(fā)現(xiàn)文件、查詢或URl

405用戶在Request-Line字段定義的方法不允許

406根據(jù)用戶發(fā)送的Accept拖，請(qǐng)求資源不可訪問

407類似401，用戶必須首先在代理服務(wù)器上得到授權(quán)

408客戶端沒有在用戶指定的餓時(shí)間內(nèi)完成請(qǐng)求

409對(duì)當(dāng)前資源狀態(tài)，請(qǐng)求不能完成

410服務(wù)器上不再有此資源且無進(jìn)一步的參考地址

411服務(wù)器拒絕用戶定義的Content-Length屬性請(qǐng)求

412一個(gè)或多個(gè)請(qǐng)求頭字段在當(dāng)前請(qǐng)求中錯(cuò)誤

413請(qǐng)求的資源大于服務(wù)器允許的大小

414請(qǐng)求的資源URL長(zhǎng)于服務(wù)器允許的長(zhǎng)度

415請(qǐng)求資源不支持請(qǐng)求項(xiàng)目格式

416請(qǐng)求中包含Range請(qǐng)求頭字段，在當(dāng)前請(qǐng)求資源范圍內(nèi)沒有range指示值，請(qǐng)求也不包含If-Range請(qǐng)求頭字段

417服務(wù)器不滿足請(qǐng)求Expect頭字段指定的期望值，如果是代理服務(wù)器，可能是下一級(jí)服務(wù)器不能滿足請(qǐng)求

500服務(wù)器產(chǎn)生內(nèi)部錯(cuò)誤

501服務(wù)器不支持請(qǐng)求的函數(shù)

502服務(wù)器暫時(shí)不可用，有時(shí)是為了防止發(fā)生系統(tǒng)過載

503服務(wù)器過載或暫停維修

504關(guān)口過載，服務(wù)器使用另一個(gè)關(guān)口或服務(wù)來響應(yīng)用戶，等待時(shí)間設(shè)定值較長(zhǎng)

505服務(wù)器不支持或拒絕支請(qǐng)求頭中指定的HTTP版本

1xx:信息響應(yīng)類，表示接收到請(qǐng)求并且繼續(xù)處理

2xx:處理成功響應(yīng)類，表示動(dòng)作被成功接收、理解和接受

3xx:重定向響應(yīng)類，為了完成指定的動(dòng)作，必須接受進(jìn)一步處理

4xx:客戶端錯(cuò)誤，客戶請(qǐng)求包含語法錯(cuò)誤或者是不能正確執(zhí)行

5xx:服務(wù)端錯(cuò)誤，服務(wù)器不能正確執(zhí)行一個(gè)正確的請(qǐng)求