XMLHttpRequest對象_Ajax異步請求重點


 

XMLHttpRequest對象

一、XMLHttpRequest對象

1.Ajax能夠是實現異步傳輸,所依賴的就是JavaScript中的XMLHttpRequest

2.XMLHttpRequest對象是XMLHttp組件的對象,它是一個抽象對象,允許腳本從服務器獲取返回的eXML數據或將數據發送到服務器端

3.XMLHttpRequest可以實現客戶端與服務器只進行數據層面的交互,不必每次刷新頁面

4.XMLHttpRequest最早在Microsoft Internet Explorer5.0中作為一個ActiveX控件提供,后受到廣泛應用

5.在使用XMLHttpRequest發送請求和處理相應之前需要先創建一個XMLHttpRequest對象

6.XMLHttpRequest不是W3C標准,可采用多種方法用JavaScript來創建XMLHttpRequest實例

7.IE中XMLHttpRequest實現為一個ActiveX控件,而其他瀏覽器則實現為一個JavaScript內置對象

二、XMLHttpRequest對象創建

<script type="text/javascript">

 

三、XMLHttpRequest對象屬性(接收並顯示當前狀態)

1.readySate-記錄返回請求的狀態

0-為初始化:對象已經建立,單位初始化,open方法還未調用;

1-初始化:對象已經建立,但還未調用send方法發送請求;

2-發送數據:send方法已調用,但HTTP頭未知;

3-數據傳輸中:已經接受部分數據,但響應不完全;

4-完成:數據接受完成,此時才可以獲取完整的返回數據

2.responseText-接收客戶端的HTTP響應的文本內容

。只讀

。當readySate為1/2,responseText值是一個空字符串;

。當readyState為3,響應信息正在接受還未完成;

。當readyState為4,表示可以響應信息已經接收完成

xmlHttp默認響應數據編碼為UTF-8

3.responseXML-在send()執行后,將返回的信息格式化為XML Document對象

Content-Type指定的MIME類型應該為text/HTML

。如果Content-Type不包含這種類型,responseXML在接收時將會得到一個null值

4.status-在send()執行后,可使用status讀取事物狀態

。長整型數據

。返回當前請求的HTTP的狀態碼

。只有當readyState為3或4時才使用該屬性,否則讀取status會發生錯誤

100-客戶必須繼續發送請求

200-交易成功

400-錯誤請求

403-請求不允許

404-沒有發現文件、查詢、URL

500-服務器內部錯誤

502服務器暫時不可使用

505-服務器不支持或拒絕不支持請求頭中的HTTP版本

5.statusText-send()執行后,可通過statusText讀取事物狀態

。返回當前HTTP請求的狀態行

。只有當readyState為3或4時才可使用該屬性,否則讀取state會發生錯誤

6.Onreadystatechange-readyState發生變化時所要執行的操作

。通常將處理函數名稱賦予onreadystatechange來為XMLHttpRequest對象指定事件處理

。在事件處理函數中根據readyState的狀態值進行相應的處理

。例:

function test(){

xmlHttp.onreadystatechange=showInfo;

var url=”/ajax/urlInfo”;//請求路徑

xmlHttp.open(“GET”,url,true);

xmlHttp.send(null);

}

Function showInfo(){

If(xmlHttp.readyState==4){

alert(“success”);

}

}

四、XMLHttpRequest對象方法(動態處理各種信息:數據的發送和接收、請求與響應的處理等)

1.abort()-終止當前操作

。停止XMLHttpRequest對象對HTTP的請求,把該對象恢復到初始狀態

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

。創建一個新的HTTP請求,並指定該請求的方法、URL、驗證信息等

method:POST、GET、PUT(可忽略大小寫)

url:請求的目標地址

mode:指定請求是否為異步,默認true;當為true時,當state的狀態改變時會調用onreadystatechange屬性所指定的處理函數

。調用open()后,XMLHttpRequest對象將readyState屬性設為1並恢復responseText、responseXML、status、statusText等屬性的初始值,並且復位請求頭部信息

調用open()時,readyState為4,則XMLHttpRequest對象將復位以上的值

3.send()-xmlHttp.send(content)

。發送請求到服務器並接受回應

4.setRequestHeader()-setRequestHeader(header,value)

。單獨設定某個請求的HTTP頭信息

。當readyState為1時,可在send()后調用此方法,否則返回一個異常

。如果已經存在該名稱的HTTP頭,則將原來信息覆蓋

header-頭名稱:字符串型

value-頭名稱的值:字符串型

5.getResponseHeader()-讀取服務器發出信息的頭部

HEAD請求忽略內容,所以其響應比對GET或POST響應小

獲取內容:

Content-Type:內容類型

Content-Length:內容長度

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);

}

}

}

。在獲取頭部信息時,並不是所有信息都能獲取

6.getAllResponseHeaders()-獲取所有頭部信息

。在獲取時只用HEAD即可獲取

。例:fuction headRequest(){

creatXMLHttpRequest();

xmlHttp.onreadystatechange=getHeadInfo;

xmlHttp.open(“HEAD”,”url”,false);

xmlHttp.send(null);

}

function getHeadInfo(){

if(readyState==4){

Alter(xmlHttp.getAllResponseHeaders());

}


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM