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>