複製代碼 代碼如下:function CallBackObject()
{
this.XmlHttp = this.GetHttpObject();
}
CallBackObject.prototype.GetHttpObject = function() //動態為CallBackObject的原型添加了GetHttpObject共有方法
{
//第一步：建立XMLHttpRequest對象
//進行相容性判斷
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;
//第二步：註冊回調方法，當伺服器處理結束返回資料以後利用回調方法實現局部的頁面重新整理資料
//這個回調方法實際上在每次XMLHttpRequest對象的readyState屬性的值發生變化的時候都會被調用
this.XmlHttp.onreadystatechange = function() {
//根據XmlHttp.readyState傳回值不同調用不同的方法。
oThis.ReadyStateChange();
};
//第三步：設定和伺服器互動的相應參數
this.XmlHttp.open('POST', URL);
this.XmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
//第四步：設定向伺服器發送的資料，啟動和伺服器端互動
this.XmlHttp.send(null);
}
}
}
CallBackObject.prototype.AbortCallBack = function()
{
if( this.XmlHttp )
this.XmlHttp.abort();
}
CallBackObject.prototype.ReadyStateChange = function() {
//第五步：判斷和伺服器互動是否完成，還要判斷伺服器端是否正確返回資料
//this.XmlHttp.readyState == 0初始化狀態。XMLHttpRequest 對象已建立或已被 abort() 方法重設。
if (this.XmlHttp.readyState == 1) {
//open() 方法已調用，但是 send() 方法未調用。請求還沒有被發送。
this.OnLoading();
}
else if (this.XmlHttp.readyState == 2) {
//Send() 方法已調用，HTTP 要求已發送到 Web 服務器。未接收到響應。
this.OnLoaded();
}
else if (this.XmlHttp.readyState == 3) {
//Receiving 所有回應標頭部都已經接收到。響應體開始接收但未完成。
this.OnInteractive();
}
else if (this.XmlHttp.readyState == 4) {
//Loaded HTTP 響應已經完全接收。
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
}
調用方法如下： 複製代碼 代碼如下:<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事件
無論readyState值何時發生改變，XMLHttpRequest對象都會激發一個readystatechange事件。其中，onreadystatechange屬性接收一個EventListener值-向該方法指示無論readyState值何時發生改變，該對象都將啟用。
responseText屬性
這個responseText屬性包含用戶端接收到的HTTP響應的常值內容。當readyState值為0、1或2時，responseText包含一個Null 字元串。當readyState值為3(正在接收)時，響應中包含用戶端還未完成的響應資訊。當readyState為4(已載入)時，該responseText包含完整的響應資訊。
responseXML屬性
此responseXML屬性用於當接收到完整的HTTP響應時(readyState為4)描述XML響應；此時，Content-Type頭部指定MIME(媒體)類型為text/xml，application/xml或以+xml結尾。如果Content-Type頭部並不包含這些媒體類型之一，那麼responseXML的值為null。無論何時，只要readyState值不為4，那麼該responseXML的值也為null。
其實，這個responseXML屬性值是一個文檔介面類型的對象，用來描述被分析的文檔。如果文檔不能被分析(例如，如果文檔不是良構的或不支援文檔相應的字元編碼)，那麼responseXML的值將為null。
status屬性
這個status屬性描述了HTTP狀態碼，而且其類型為short。而且，僅當readyState值為3(正在接收中)或4(已載入)時，這個status屬性才可用。當readyState的值小於3時試圖存取status的值將引發一個異常。
statusText屬性
這個statusText屬性描述了HTTP狀態碼文本；並且僅當readyState值為3或4才可用。當readyState為其它值時試圖存取statusText屬性將引發一個異常。
