Ajax重構(gòu)大致可以分為以下3三個步驟。

一 創(chuàng)建一個單獨的JS文件,名稱為AjaxRequest.js,并且在該文件中編寫重構(gòu)Ajax 所需的代碼

具體代碼如下：

var net = new Object(); ?// 定義一個全局的變量

// 編寫構(gòu)造函數(shù)

net.AjaxRequest = function(url,onload,onerror,method,params)

{

this.req = null;

this.onload = onload;

this.οnerrοr=(onerror)？onerror：this.defaultError;

this.loadDate(url,method,params);

}

// 編寫用于初始化XMLHttpRequest 對象并指定處理函數(shù),最后發(fā)送HTTP 請求的方法

net.AjaxRequest.prototype.loadDate = function(url,method,params)

{

if(！method) ? // 設(shè)置默認的請求方式為GET

{

method =“GET”;

}

if(window.XMLHttpRequest)

{ ? ?? ? ? ? ? ? ? ? ? ? ?? ? ? ? ? ? ? ? ? ? ?? // 非IE 瀏覽器

this.req = newXMLHttpRequest(); ? // 創(chuàng)建XMLHttpRequest 對象

}

elseif(window.ActiveXObject)

{ ? ?? ? ? ? ? ? ? ? ? ? ?? ? ? ? ? ? // IE 瀏覽器

try

{

this.req= new ActiveXObject(“Microsoft.XMLHTTP”); ? ?// 創(chuàng)建XMLHttpRequest 對象

}

catch(e)

{

try

{

this.req = new ActiveXObject(“Msxml2.XMLHTTP”); // 創(chuàng)建XMLHttpRequest 對象

}

catch(e)

{

}

}

}

if(this.req)

{

try

{

varloader = this;

this.req.onreadystatechange= function()

{

net.AjaxRequest.onReadyState.call(loader);

}

this.req.open(method,url,true);? ? ? ? ?// 建立對服務(wù)器的調(diào)用

if(method==“POST”)

{? ? ? ? ? ? ? ?// 如果提交方式為POST

this.req.setRequestHeader(“Content-Type”,“application /x-www-form-urlencoded”); ? ?// 設(shè)置請求的內(nèi)容類型

this.req.setRequestHeader(“x-requested-with”,“ajax”); ??// 設(shè)置請求的發(fā)出者

}

this.req.send(params);? ? ? ? ? ? ? ? ? ? ?? ? ? ? ? ? ? ? ? ? ?? ? ?// 發(fā)送請求

}

catch(err)

{

this.onerror.call(this);? ? ? ? ? ? ? ? ? ? ?? ? ? ? ? ? ? ? ? ? ?// 調(diào)用錯誤處理函數(shù)

}

}

}

// 重構(gòu)回調(diào)函數(shù)

net.AjaxRequest.onReadyState = function()

{

var req =this.req;

var ready =req.readyState; ? ? ? ? ? ? ? ? ?? ? ? ? ? ? ? ? ? ? ?? ? // 獲取請求狀態(tài)

if(ready == 4)

{ ? ?? ? ? ? ? ? ? ? ? ? ?? ? ? ? ? ? ? ? ? ? ?? ? ? ? ? ? // 請求完成

if(req.status== 200)

{ ?? ? ? ? ? ? ? ? ? ? ?? ? ? ? ? ? ? ? ? ? ??// 請求成功

this.onload.call(this);

}

else

{

this.onerror.call(this); ?? ? ? ? ? ? ? ? ? ? ?? ? ? ? ? ?// 調(diào)用錯誤處理函數(shù)

}

}

}

// 重構(gòu)默認的錯誤處理函數(shù)

net.AjaxRequest.prototype.defaultError = function()

{

alert(“ 錯誤數(shù)據(jù)\ n \ n 回調(diào)狀態(tài)：”+ this.req.readyState +“\ n 狀態(tài)：”+ this.req.status);

}

二 在需要應(yīng)用Ajax 的頁面中應(yīng)用以下的語句包括步驟一中創(chuàng)建的JS 文件

三 在應(yīng)用Ajax 的頁面中編寫錯誤處理的方法,實例化Ajax 對象的方法和回調(diào)函數(shù)

具體代碼如下：

/ ****************** 錯誤處理的方法************************************** /

function onerror()

{

alert(“ 您的操作有誤！”);

}

/ ****************** 實例化Ajax 對象的方法*********************** ****** /

function getInfo()

{

var loader = newnet.AjaxRequest(“getInfo.jsp？nocache =”+ new Date().getTime(),deal_getInfo,onerror,“GET”);

}

/ ************************ 回調(diào)函數(shù)*********************** *************** /

function deal_getInfo()

{

document.getElementById(“showInfo”).innerHTML= this.req.responseText;

}

script>

總結(jié)

以上是生活随笔為你收集整理的简述ajax的重构原因,Ajax 重构的步骤的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。