Ajax重構大致可以分為以下3三個步驟。

一 創建一個單獨的JS文件,名稱為AjaxRequest.js,并且在該文件中編寫重構Ajax 所需的代碼

具體代碼如下：

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

// 編寫構造函數

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 對象并指定處理函數,最后發送HTTP 請求的方法

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

{

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

{

method =“GET”;

}

if(window.XMLHttpRequest)

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

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

}

elseif(window.ActiveXObject)

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

try

{

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

}

catch(e)

{

try

{

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

}

catch(e)

{

}

}

}

if(this.req)

{

try

{

varloader = this;

this.req.onreadystatechange= function()

{

net.AjaxRequest.onReadyState.call(loader);

}

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

if(method==“POST”)

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

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

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

}

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

}

catch(err)

{

this.onerror.call(this);? ? ? ? ? ? ? ? ? ? ?? ? ? ? ? ? ? ? ? ? ?// 調用錯誤處理函數

}

}

}

// 重構回調函數

net.AjaxRequest.onReadyState = function()

{

var req =this.req;

var ready =req.readyState; ? ? ? ? ? ? ? ? ?? ? ? ? ? ? ? ? ? ? ?? ? // 獲取請求狀態

if(ready == 4)

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

if(req.status== 200)

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

this.onload.call(this);

}

else

{

this.onerror.call(this); ?? ? ? ? ? ? ? ? ? ? ?? ? ? ? ? ?// 調用錯誤處理函數

}

}

}

// 重構默認的錯誤處理函數

net.AjaxRequest.prototype.defaultError = function()

{

alert(“ 錯誤數據\ n \ n 回調狀態：”+ this.req.readyState +“\ n 狀態：”+ this.req.status);

}

二 在需要應用Ajax 的頁面中應用以下的語句包括步驟一中創建的JS 文件

三 在應用Ajax 的頁面中編寫錯誤處理的方法,實例化Ajax 對象的方法和回調函數

具體代碼如下：

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

function onerror()

{

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

}

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

function getInfo()

{

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

}

/ ************************ 回調函數*********************** *************** /

function deal_getInfo()

{

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

}

script>

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。