AjaxAjax的重构

Ajax的重构方法:

(1)成立一个独立的JS文件,命名也AjaxRequest.js,并且在拖欠公文中编辑重构Ajax所待的代码。

 

 1 var net = new Object();    //创建一个全局变量net
 2 //编写构造函数
 3 net.AjaxRequest = function(url,onload,onerror,method,params){
 4     this.req = null;
 5     this.onload = onload;
 6     this.onerror = (onerror) ? onerror : this.defaultError;
 7     this.loadDate(url,method,params);
 8 }
 9 //编写用于初始化XMLHttpRequest对象并指定处理函数,最后发送HTTP请求的方法
10 net.AjaxRequest.prototype.loadDate = function(url,method,params){
11     if(!method){
12         method = "GET";
13     }
14     if(window.XMLHttpRequest){
15         this.req = new XMLHttpRequest();
16     }else if(window.ActiveXObject){
17         this.req = new ActiveXObject("Microsoft.XMLHTTP");
18     }
19     if(this.req){
20         try{
21             var loader = this;
22             this.req.onreadystatechange = function(){
23                 net.AjaxRequest.onReadyState.call(loader);
24             }
25             this.req.open(method,url,true);    //建立对服务器的调用
26             if(method == "POST"){              //如果提交方式为POST
27                 this.req.setRequestHeader("Content-Type",
28                     "application/x-www-form-urlencoded");   //设置请求头
29             }
30             this.req.send(params);    //发送请求
31         }catch(err){
32             this.onerror.call(this);
33         }
34     }
35 
36 }
37 //重构回调函数
38 net.AjaxRequest.onReadyState = function(){
39     var req = this.req;
40     var ready = req.readyState;
41     if(ready == 4){               //请求完成
42         if(req.status == 200){    //请求成功
43             this.onload.call(this);
44         }else{
45             this.onerror.call(this);
46         }
47     }
48 }
49 //重构默认的错误处理函数
50 net.AjaxRequest.prototype.defaultError = function(){
51     alert("错误数据\n\n回调状态:"+this.req.readyState+"\n状态:"+this.req.status);
52 }

 

(2)在需要利用之Ajax的页面中应用一下底言辞包括(1)中开创的JS文件

 

<script language="javascript" src="AjaxRequest.js"></script>

 

(3)在用Ajax的页面中编错误处理的章程、实例化Ajax对象的章程及回调函数。

 1 <script language="javascript">
 2 /*********************错误处理的方法******************/
 3     function onerror(){
 4         alert("您的操作有误!");
 5     }
 6 /*********************实例化Ajax对象的方法************/
 7     function getInfo(){
 8         var loader = new net.AjaxRequest("getInfo.jsp?nocache="+new Date().getTime(),
 9             deal_getInfo,onerror,"GET");
10     }
11 /*********************回调函数************************/
12     function deal_getInfo(){
13         document.getElementById("showInfo").innerHTML=this.req.responseText;
14     }
15 </script>

 

相关文章