Ajax重构大致可以分为以下3三个步骤。
具体代码如下:
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,params); } // 编写用于初始化XMLHttpRequest 对象并指定处理函数,最后发送HTTP 请求的方法 net.AjaxRequest.prototype.loadDate = function(url,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); }
<script language =“javascript”src =“AjaxRequest.js”> </ script>
具体代码如下:
<script language =“javascript”> / ****************** 错误处理的方法*************************** *********** / function onerror() { alert(“ 您的操作有误!”); } / ****************** 实例化Ajax 对象的方法*********************** ****** / function getInfo() { var loader = new net.AjaxRequest(“getInfo.jsp?nocache =”+ new Date().getTime(),deal_getInfo,“GET”); } / ************************ 回调函数*********************** *************** / function deal_getInfo() { document.getElementById(“showInfo”).innerHTML = this.req.responseText; } </ script>