主頁(yè) > 知識(shí)庫(kù) > javascript對(duì)XMLHttpRequest異步請(qǐng)求的面向?qū)ο蠓庋b

javascript對(duì)XMLHttpRequest異步請(qǐng)求的面向?qū)ο蠓庋b

熱門(mén)標(biāo)簽:團(tuán)購(gòu)網(wǎng)站 電子圍欄 阿里云 銀行業(yè)務(wù) 服務(wù)器配置 Linux服務(wù)器 科大訊飛語(yǔ)音識(shí)別系統(tǒng) Mysql連接數(shù)設(shè)置
復(fù)制代碼 代碼如下:

function CallBackObject()
{
this.XmlHttp = this.GetHttpObject();
}
CallBackObject.prototype.GetHttpObject = function() //動(dòng)態(tài)為CallBackObject的原型添加了GetHttpObject共有方法
{
//第一步:創(chuàng)建XMLHttpRequest對(duì)象
//進(jìn)行兼容性判斷
var xmlhttp;
/*@cc_on
@if (@_jscript_version >= 5)
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
@else
xmlhttp = false;
@end @*/
if (!xmlhttp typeof XMLHttpRequest != 'undefined') {
try {
xmlhttp = new XMLHttpRequest();
} catch (e) {
xmlhttp = false;
}
}
return xmlhttp;
}
CallBackObject.prototype.DoCallBack = function(URL)
{
if( this.XmlHttp )
{
if( this.XmlHttp.readyState == 4 || this.XmlHttp.readyState == 0 )
{
var oThis = this;
//第二步:注冊(cè)回調(diào)方法,當(dāng)服務(wù)器處理結(jié)束返回?cái)?shù)據(jù)以后利用回調(diào)方法實(shí)現(xiàn)局部的頁(yè)面刷新數(shù)據(jù)
//這個(gè)回調(diào)方法實(shí)際上在每次XMLHttpRequest對(duì)象的readyState屬性的值發(fā)生變化的時(shí)候都會(huì)被調(diào)用
this.XmlHttp.onreadystatechange = function() {
//根據(jù)XmlHttp.readyState返回值不同調(diào)用不同的方法。
oThis.ReadyStateChange();
};
//第三步:設(shè)置和服務(wù)器交互的相應(yīng)參數(shù)
this.XmlHttp.open('POST', URL);
this.XmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
//第四步:設(shè)置向服務(wù)器發(fā)送的數(shù)據(jù),啟動(dòng)和服務(wù)器端交互
this.XmlHttp.send(null);
}
}
}
CallBackObject.prototype.AbortCallBack = function()
{
if( this.XmlHttp )
this.XmlHttp.abort();
}
CallBackObject.prototype.ReadyStateChange = function() {
//第五步:判斷和服務(wù)器交互是否完成,還要判斷服務(wù)器端是否正確返回?cái)?shù)據(jù)
//this.XmlHttp.readyState == 0初始化狀態(tài)。XMLHttpRequest 對(duì)象已創(chuàng)建或已被 abort() 方法重置。
if (this.XmlHttp.readyState == 1) {
//open() 方法已調(diào)用,但是 send() 方法未調(diào)用。請(qǐng)求還沒(méi)有被發(fā)送。
this.OnLoading();
}
else if (this.XmlHttp.readyState == 2) {
//Send() 方法已調(diào)用,HTTP 請(qǐng)求已發(fā)送到 Web 服務(wù)器。未接收到響應(yīng)。
this.OnLoaded();
}
else if (this.XmlHttp.readyState == 3) {
//Receiving 所有響應(yīng)頭部都已經(jīng)接收到。響應(yīng)體開(kāi)始接收但未完成。
this.OnInteractive();
}
else if (this.XmlHttp.readyState == 4) {
//Loaded HTTP 響應(yīng)已經(jīng)完全接收。
if (this.XmlHttp.status == 0)
this.OnAbort();
else if (this.XmlHttp.status == 200 this.XmlHttp.statusText == "OK")
this.OnComplete(this.XmlHttp.responseText, this.XmlHttp.responseXML);
else
this.OnError(this.XmlHttp.status, this.XmlHttp.statusText, this.XmlHttp.responseText);
}
}
CallBackObject.prototype.OnLoading = function()
{
// Loading
}
CallBackObject.prototype.OnLoaded = function()
{
// Loaded
}
CallBackObject.prototype.OnInteractive = function()
{
// Interactive
}
CallBackObject.prototype.OnComplete = function(responseText, responseXml)
{
// Complete
}
CallBackObject.prototype.OnAbort = function()
{
// Abort
}
CallBackObject.prototype.OnError = function(status, statusText)
{
// Error
}


調(diào)用方法如下:
復(fù)制代碼 代碼如下:

script type="text/javascript">
function createRequest()
{
var name = escape(document.getElementById("name").value);
var cbo = new CallBackObject();
cbo.OnComplete = Cbo_Complete;
cbo.onError = Cbo_Error;
cbo.OnLoaded = OnLoading;
cbo.DoCallBack("AjaxTest.aspx?name=" + name);
}

function OnLoading() {
alert("OnLoading " );
}

function Cbo_Complete(responseText, responseXML)
{
alert("成功 "+responseText);
}

function Cbo_Error(status, statusText, responseText)
{
alert(responseText);
}
/script>

onreadystatechange事件
  無(wú)論readyState值何時(shí)發(fā)生改變,XMLHttpRequest對(duì)象都會(huì)激發(fā)一個(gè)readystatechange事件。其中,onreadystatechange屬性接收一個(gè)EventListener值-向該方法指示無(wú)論readyState值何時(shí)發(fā)生改變,該對(duì)象都將激活。
  responseText屬性
  這個(gè)responseText屬性包含客戶(hù)端接收到的HTTP響應(yīng)的文本內(nèi)容。當(dāng)readyState值為0、1或2時(shí),responseText包含一個(gè)空字符串。當(dāng)readyState值為3(正在接收)時(shí),響應(yīng)中包含客戶(hù)端還未完成的響應(yīng)信息。當(dāng)readyState為4(已加載)時(shí),該responseText包含完整的響應(yīng)信息。
  responseXML屬性
  此responseXML屬性用于當(dāng)接收到完整的HTTP響應(yīng)時(shí)(readyState為4)描述XML響應(yīng);此時(shí),Content-Type頭部指定MIME(媒體)類(lèi)型為text/xml,application/xml或以+xml結(jié)尾。如果Content-Type頭部并不包含這些媒體類(lèi)型之一,那么responseXML的值為null。無(wú)論何時(shí),只要readyState值不為4,那么該responseXML的值也為null。
  其實(shí),這個(gè)responseXML屬性值是一個(gè)文檔接口類(lèi)型的對(duì)象,用來(lái)描述被分析的文檔。如果文檔不能被分析(例如,如果文檔不是良構(gòu)的或不支持文檔相應(yīng)的字符編碼),那么responseXML的值將為null。
  status屬性
  這個(gè)status屬性描述了HTTP狀態(tài)代碼,而且其類(lèi)型為short。而且,僅當(dāng)readyState值為3(正在接收中)或4(已加載)時(shí),這個(gè)status屬性才可用。當(dāng)readyState的值小于3時(shí)試圖存取status的值將引發(fā)一個(gè)異常。
  statusText屬性
  這個(gè)statusText屬性描述了HTTP狀態(tài)代碼文本;并且僅當(dāng)readyState值為3或4才可用。當(dāng)readyState為其它值時(shí)試圖存取statusText屬性將引發(fā)一個(gè)異常。
您可能感興趣的文章:
  • javascript XMLHttpRequest對(duì)象全面剖析
  • js判斷IE6/IE7/FF的代碼[XMLHttpRequest]
  • Javascript+XMLHttpRequest+asp.net無(wú)刷新讀取數(shù)據(jù)庫(kù)數(shù)據(jù)
  • javascript創(chuàng)建createXmlHttpRequest對(duì)象示例代碼
  • 深入講解xhr(XMLHttpRequest)/jsonp請(qǐng)求之a(chǎn)bort
  • JSP XMLHttpRequest動(dòng)態(tài)無(wú)刷新及其中文亂碼處理
  • JavaScript下通過(guò)的XMLHttpRequest發(fā)送請(qǐng)求的代碼
  • javascript一個(gè)無(wú)懈可擊的實(shí)例化XMLHttpRequest的方法
  • [js]輕便的XMLHttpRequest應(yīng)用函數(shù):downloadUrl()
  • AngularJS入門(mén)教程之 XMLHttpRequest實(shí)例講解
  • JS XMLHttpRequest原理與使用方法深入詳解

標(biāo)簽:衡水 江蘇 廣元 萍鄉(xiāng) 衢州 蚌埠 大理 棗莊

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《javascript對(duì)XMLHttpRequest異步請(qǐng)求的面向?qū)ο蠓庋b》,本文關(guān)鍵詞  ;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無(wú)關(guān)。
  • 相關(guān)文章
  • 收縮
    • 微信客服
    • 微信二維碼
    • 電話(huà)咨詢(xún)

    • 400-1100-266