XMLHttpRequest對(duì)象_Ajax異步請(qǐng)求重點(diǎn)(推薦)

一、XMLHttpRequest對(duì)象

1.Ajax能夠是實(shí)現(xiàn)異步傳輸，所依賴的就是JavaScript中的XMLHttpRequest

2.XMLHttpRequest對(duì)象是XMLHttp組件的對(duì)象，它是一個(gè)抽象對(duì)象，允許腳本從服務(wù)器獲取返回的eXML數(shù)據(jù)或?qū)?shù)據(jù)發(fā)送到服務(wù)器端

3.XMLHttpRequest可以實(shí)現(xiàn)客戶端與服務(wù)器只進(jìn)行數(shù)據(jù)層面的交互，不必每次刷新頁面

4.XMLHttpRequest最早在Microsoft Internet Explorer5.0中作為一個(gè)ActiveX控件提供，后受到廣泛應(yīng)用

5.在使用XMLHttpRequest發(fā)送請(qǐng)求和處理相應(yīng)之前需要先創(chuàng)建一個(gè)XMLHttpRequest對(duì)象

6.XMLHttpRequest不是W3C標(biāo)準(zhǔn)，可采用多種方法用JavaScript來創(chuàng)建XMLHttpRequest實(shí)例

7.在IE中XMLHttpRequest實(shí)現(xiàn)為一個(gè)ActiveX控件，而其他瀏覽器則實(shí)現(xiàn)為一個(gè)JavaScript內(nèi)置對(duì)象

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

<script type="text/javascript">

三、XMLHttpRequest對(duì)象屬性（接收并顯示當(dāng)前狀態(tài)）

1.readySate-記錄返回請(qǐng)求的狀態(tài)

。0-為初始化：對(duì)象已經(jīng)建立，單位初始化，open方法還未調(diào)用；

。1-初始化：對(duì)象已經(jīng)建立，但還未調(diào)用send方法發(fā)送請(qǐng)求；

。2-發(fā)送數(shù)據(jù)：send方法已調(diào)用，但HTTP頭未知；

。3-數(shù)據(jù)傳輸中：已經(jīng)接受部分?jǐn)?shù)據(jù)，但響應(yīng)不完全；

。4-完成：數(shù)據(jù)接受完成，此時(shí)才可以獲取完整的返回?cái)?shù)據(jù)

2.responseText-接收客戶端的HTTP響應(yīng)的文本內(nèi)容

。只讀

。當(dāng)readySate為1/2，responseText值是一個(gè)空字符串；

。當(dāng)readyState為3，響應(yīng)信息正在接受還未完成；

。當(dāng)readyState為4，表示可以響應(yīng)信息已經(jīng)接收完成

。xmlHttp默認(rèn)響應(yīng)數(shù)據(jù)編碼為UTF-8

3.responseXML-在send（）執(zhí)行后，將返回的信息格式化為XML Document對(duì)象

。Content-Type指定的MIME類型應(yīng)該為text/HTML

。如果Content-Type不包含這種類型，responseXML在接收時(shí)將會(huì)得到一個(gè)null值

4.status-在send（）執(zhí)行后，可使用status讀取事物狀態(tài)

。長(zhǎng)整型數(shù)據(jù)

。返回當(dāng)前請(qǐng)求的HTTP的狀態(tài)碼

。只有當(dāng)readyState為3或4時(shí)才使用該屬性，否則讀取status會(huì)發(fā)生錯(cuò)誤

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

。200-交易成功

。400-錯(cuò)誤請(qǐng)求

。403-請(qǐng)求不允許

。404-沒有發(fā)現(xiàn)文件、查詢、URL

。500-服務(wù)器內(nèi)部錯(cuò)誤

。502服務(wù)器暫時(shí)不可使用

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

5.statusText-send（）執(zhí)行后，可通過statusText讀取事物狀態(tài)

。返回當(dāng)前HTTP請(qǐng)求的狀態(tài)行

。只有當(dāng)readyState為3或4時(shí)才可使用該屬性，否則讀取state會(huì)發(fā)生錯(cuò)誤

6.Onreadystatechange-readyState發(fā)生變化時(shí)所要執(zhí)行的操作

。通常將處理函數(shù)名稱賦予onreadystatechange來為XMLHttpRequest對(duì)象指定事件處理

。在事件處理函數(shù)中根據(jù)readyState的狀態(tài)值進(jìn)行相應(yīng)的處理

。例：

function test(){
xmlHttp.onreadystatechange=showInfo;
var url=”/ajax/urlInfo”;//請(qǐng)求路徑
xmlHttp.open(“GET”,url,true);
xmlHttp.send(null);
}
Function showInfo(){
If(xmlHttp.readyState==4){
alert(“success”);
}
}

四、XMLHttpRequest對(duì)象方法（動(dòng)態(tài)處理各種信息：數(shù)據(jù)的發(fā)送和接收、請(qǐng)求與響應(yīng)的處理等）

1.abort（）-終止當(dāng)前操作

。停止XMLHttpRequest對(duì)象對(duì)HTTP的請(qǐng)求，把該對(duì)象恢復(fù)到初始狀態(tài)

2.open（）-xmlHttp.open(method,url,mode,user,pwd)

。創(chuàng)建一個(gè)新的HTTP請(qǐng)求，并指定該請(qǐng)求的方法、URL、驗(yàn)證信息等

。method：POST、GET、PUT（可忽略大小寫）

。url:請(qǐng)求的目標(biāo)地址

。mode：指定請(qǐng)求是否為異步，默認(rèn)true；當(dāng)為true時(shí)，當(dāng)state的狀態(tài)改變時(shí)會(huì)調(diào)用onreadystatechange屬性所指定的處理函數(shù)

。調(diào)用open（）后，XMLHttpRequest對(duì)象將readyState屬性設(shè)為1并恢復(fù)responseText、responseXML、status、statusText等屬性的初始值，并且復(fù)位請(qǐng)求頭部信息

調(diào)用open（）時(shí)，readyState為4，則XMLHttpRequest對(duì)象將復(fù)位以上的值

3.send（）-xmlHttp.send（content）

。發(fā)送請(qǐng)求到服務(wù)器并接受回應(yīng)

4.setRequestHeader（）-setRequestHeader（header，value）

。單獨(dú)設(shè)定某個(gè)請(qǐng)求的HTTP頭信息

。當(dāng)readyState為1時(shí)，可在send（）后調(diào)用此方法，否則返回一個(gè)異常

。如果已經(jīng)存在該名稱的HTTP頭，則將原來信息覆蓋

。header-頭名稱：字符串型

。value-頭名稱的值：字符串型

5.getResponseHeader（）-讀取服務(wù)器發(fā)出信息的頭部

。HEAD請(qǐng)求忽略內(nèi)容，所以其響應(yīng)比對(duì)GET或POST響應(yīng)小

獲取內(nèi)容：

。Content-Type：內(nèi)容類型

。Content-Length：內(nèi)容長(zhǎng)度

。Last-Modify：最后一次修改的日期

。例：

function getHeadInfo（）{
if(xmlHttp.readyState==4){
if(headeyType==”Content-Type”){
window.alert(“Content-Type:”+xmlHttp.getResponseHeader(“Content-Type”);
}
else if(headType==”Content-Length”){
window.alert(“Content-Length:”+xmlHttp,getResponseHeader(“Content-Length”);
}
else if(headType==”Last-Modify”){
window.alert(“Last-Modify:”+xmlHttp.getResponseHeader);
}
}
}

。在獲取頭部信息時(shí)，并不是所有信息都能獲取

6.getAllResponseHeaders（）-獲取所有頭部信息

。在獲取時(shí)只用HEAD即可獲取
。例:

fuction headRequest(){
creatXMLHttpRequest();
xmlHttp.onreadystatechange=getHeadInfo;
xmlHttp.open(“HEAD”,”url”,false);
xmlHttp.send(null);
}
function getHeadInfo(){
if(readyState==4){
Alter(xmlHttp.getAllResponseHeaders());
}

以上這篇XMLHttpRequest對(duì)象_Ajax異步請(qǐng)求重點(diǎn)(推薦)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持億速云。