Ajax重构看不懂,Ajax 重构的步骤

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.onerror =(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 = new XMLHttpRequest();   // 创建XMLHttpRequest 对象

}

else if(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

{

var loader = 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 = new net.AjaxRequest(“getInfo.jsp？nocache =”+ new Date().getTime(),deal_getInfo,onerror,“GET”);

}

/ ************************ 回调函数*********************** *************** /

function deal_getInfo()

{

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

}

script>