Ajax 重构的步骤

来源：互联网发布：pyth0n编程编辑：程序博客网时间：2024/06/06 00:31

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 对象的方法和回调函数

具体代码如下：

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

0 0