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>