XMLHttpRequest對象_Ajax異步請求重點

 

XMLHttpRequest對象

1、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內置對象

2、XMLHttpRequest對象建立

<script type="text/javascript">

 

3、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」);

}

}

4、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());

}