XMLHttpRequest對象_Ajax異步請求重點(推薦)
一、XMLHttpRequest對象
1.Ajax能夠是實現(xiàn)異步傳輸,所依賴的就是JavaScript中的XMLHttpRequest
2.XMLHttpRequest對象是XMLHttp組件的對象,它是一個抽象對象,允許腳本從服務器獲取返回的eXML數(shù)據(jù)或?qū)?shù)據(jù)發(fā)送到服務器端
3.XMLHttpRequest可以實現(xiàn)客戶端與服務器只進行數(shù)據(jù)層面的交互,不必每次刷新頁面
4.XMLHttpRequest最早在Microsoft Internet Explorer5.0中作為一個ActiveX控件提供,后受到廣泛應用
5.在使用XMLHttpRequest發(fā)送請求和處理相應之前需要先創(chuàng)建一個XMLHttpRequest對象
6.XMLHttpRequest不是W3C標準,可采用多種方法用JavaScript來創(chuàng)建XMLHttpRequest實例
7.在IE中XMLHttpRequest實現(xiàn)為一個ActiveX控件,而其他瀏覽器則實現(xiàn)為一個JavaScript內(nèi)置對象
二、XMLHttpRequest對象創(chuàng)建
<script type="text/javascript">
三、XMLHttpRequest對象屬性(接收并顯示當前狀態(tài))
1.readySate-記錄返回請求的狀態(tài)
。0-為初始化:對象已經(jīng)建立,單位初始化,open方法還未調(diào)用;
。1-初始化:對象已經(jīng)建立,但還未調(diào)用send方法發(fā)送請求;
。2-發(fā)送數(shù)據(jù):send方法已調(diào)用,但HTTP頭未知;
。3-數(shù)據(jù)傳輸中:已經(jīng)接受部分數(shù)據(jù),但響應不完全;
。4-完成:數(shù)據(jù)接受完成,此時才可以獲取完整的返回數(shù)據(jù)
2.responseText-接收客戶端的HTTP響應的文本內(nèi)容
。只讀
。當readySate為1/2,responseText值是一個空字符串;
。當readyState為3,響應信息正在接受還未完成;
。當readyState為4,表示可以響應信息已經(jīng)接收完成
。xmlHttp默認響應數(shù)據(jù)編碼為UTF-8
3.responseXML-在send()執(zhí)行后,將返回的信息格式化為XML Document對象
。Content-Type指定的MIME類型應該為text/HTML
。如果Content-Type不包含這種類型,responseXML在接收時將會得到一個null值
4.status-在send()執(zhí)行后,可使用status讀取事物狀態(tài)
。長整型數(shù)據(jù)
。返回當前請求的HTTP的狀態(tài)碼
。只有當readyState為3或4時才使用該屬性,否則讀取status會發(fā)生錯誤
。100-客戶必須繼續(xù)發(fā)送請求
。200-交易成功
。400-錯誤請求
。403-請求不允許
。404-沒有發(fā)現(xiàn)文件、查詢、URL
。500-服務器內(nèi)部錯誤
。502服務器暫時不可使用
。505-服務器不支持或拒絕不支持請求頭中的HTTP版本
5.statusText-send()執(zhí)行后,可通過statusText讀取事物狀態(tài)
。返回當前HTTP請求的狀態(tài)行
。只有當readyState為3或4時才可使用該屬性,否則讀取state會發(fā)生錯誤
6.Onreadystatechange-readyState發(fā)生變化時所要執(zhí)行的操作
。通常將處理函數(shù)名稱賦予onreadystatechange來為XMLHttpRequest對象指定事件處理
。在事件處理函數(shù)中根據(jù)readyState的狀態(tài)值進行相應的處理
。例:
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對象方法(動態(tài)處理各種信息:數(shù)據(jù)的發(fā)送和接收、請求與響應的處理等)
1.abort()-終止當前操作
。停止XMLHttpRequest對象對HTTP的請求,把該對象恢復到初始狀態(tài)
2.open()-xmlHttp.open(method,url,mode,user,pwd)
。創(chuàng)建一個新的HTTP請求,并指定該請求的方法、URL、驗證信息等
。method:POST、GET、PUT(可忽略大小寫)
。url:請求的目標地址
。mode:指定請求是否為異步,默認true;當為true時,當state的狀態(tài)改變時會調(diào)用onreadystatechange屬性所指定的處理函數(shù)
。調(diào)用open()后,XMLHttpRequest對象將readyState屬性設為1并恢復responseText、responseXML、status、statusText等屬性的初始值,并且復位請求頭部信息
調(diào)用open()時,readyState為4,則XMLHttpRequest對象將復位以上的值
3.send()-xmlHttp.send(content)
。發(fā)送請求到服務器并接受回應
4.setRequestHeader()-setRequestHeader(header,value)
。單獨設定某個請求的HTTP頭信息
。當readyState為1時,可在send()后調(diào)用此方法,否則返回一個異常
。如果已經(jīng)存在該名稱的HTTP頭,則將原來信息覆蓋
。header-頭名稱:字符串型
。value-頭名稱的值:字符串型
5.getResponseHeader()-讀取服務器發(fā)出信息的頭部
。HEAD請求忽略內(nèi)容,所以其響應比對GET或POST響應小
獲取內(nèi)容:
。Content-Type:內(nèi)容類型
。Content-Length:內(nèi)容長度
。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()); }
以上這篇XMLHttpRequest對象_Ajax異步請求重點(推薦)就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
js 用CreateElement動態(tài)創(chuàng)建標簽示例
用CreateElement動態(tài)創(chuàng)建標簽,主要是html中常用的一些標簽,在本文有詳細的示例,喜歡的朋友可以參考下2013-11-11showModalDialog 和 showModelessDialog
showModalDialog 和 showModelessDialog...2007-01-01filters.revealTrans.Transition使用方法小結(jié)
有看到幻燈片調(diào)用會用到divid.filters.revealTrans.Transition=Math.floor(Math.random()*23)和divid.filters.revealTrans.apply(),那么這兩個都是什么意思呢?2010-08-08微信小程序 wx.login解密出現(xiàn)亂碼的問題解決辦法
這篇文章主要介紹了微信小程序 wx.login解密出現(xiàn)亂碼的問題解決辦法的相關資料,需要的朋友可以參考下2017-03-03