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 文件

<script language =“javascript”src =“AjaxRequest.js”> </ script>

 

三 在应用Ajax 的页面中编写错误处理的方法,实例化Ajax 对象的方法和回调函数

具体代码以下：

<script language =“javascript”>

/ ****************** 错误处理的方法*************************** *********** /

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>