ajax重構指的是在不改變軟件現(xiàn)有功能的基礎上，通過調整程序代碼改善軟件的質量、性能，使其程序的設計模式和架構更合理，提高軟件的擴展性和維護性；Ajax的實現(xiàn)主要依賴于XMLHttpRequest對象，由于該對象的實例在處理事件完成后就會被銷毀，所以在需要調用它的時候就要重新構建。

本文操作環(huán)境：windows10系統(tǒng)、javascript1.8.5&&html5版、Dell G3電腦。

什么是ajax重構

重構（Refactoring）就是在不改變軟件現(xiàn)有功能的基礎上，通過調整程序代碼改善軟件的質量、性能，使其程序的設計模式和架構更趨合理，提高軟件的擴展性和維護性。

Ajax的核心對象是XMLHttpReguest，也就是說我們通過Ajax與服務器進行交互，就必須要構建XMLHttpRequest這個對象。

但是在頁面之中通過Ajax與服務器進行交互，在交互之后XMLHttpReguest這個對象就會被銷毀。

所以我們頁面再次通過Ajax與服務器進行交互，還需要重新的構建XMLHttpRequest這個對象。

那么XMLHttpReguest這個對象的創(chuàng)建，我們需要考慮到瀏覽器的兼容性，所以說XMLHttpReguest的創(chuàng)建也是非常繁瑣的，需要根據(jù)不同瀏覽器的類型，來進行不同方式的創(chuàng)建。

那么如果說我們在很多的頁面都應用到了Ajax這種技術，我們在很多的頁面當中都要來創(chuàng)建這個對象，這就體現(xiàn)不出OO(面向對象這種風格，代碼的重復利用)，面向對象中提倡代碼的重用，所以說我們通常情況下都會通過Ajax重構，來封裝XMLHttpReguest這個對象以及封裝一些對Ajax請求進行處理的通用方法，那么我們在編寫代碼的時候就可以直接來引用這個對象，從而來達到代碼的重用，也節(jié)省了這個對象的創(chuàng)建時間

Ajax重構步驟

1)創(chuàng)建一個單獨的JS文件，名字為AjaxRequest.js ，并且在該文件中編寫重構Ajax所需的代碼

2)在 需要應用Ajax的頁面中包括剛剛創(chuàng)建的AjaxRequest.js文件

3)在應用Ajax的頁面中編寫錯誤處理的方法，實例化Ajax對象的方法和回調函數(shù)

在jsp或html頁面之中我們編寫一段JavaScript的腳本代碼，那么可以在當前的頁面當中直接編寫JavaScript腳本代碼。也可以使用另外一種方式：創(chuàng)建js文件，然后將這個js文件引入到我們所編寫的jsp或者是html頁面當中

示例如下：

（1）創(chuàng)建一個單獨的JS文件，命名為AjaxRequest.js，并且在該文件中編寫重構Ajax所需要的代碼。

 var net = new Object();    //創(chuàng)建一個全局變量net  //編寫構造函數(shù)  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對象并指定處理函數(shù)，最后發(fā)送HTTP請求的方法  net.AjaxRequest.prototype.loadDate = function(url,method,params){      if(!method){          method = "GET";      }      if(window.XMLHttpRequest){          this.req = new XMLHttpRequest();      }else if(window.ActiveXObject){          this.req = new ActiveXObject("Microsoft.XMLHTTP");      }      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.send(params);    //發(fā)送請求          }catch(err){              this.onerror.call(this);          }      }    }  //重構回調函數(shù)  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);          }      }  }  //重構默認的錯誤處理函數(shù)  net.AjaxRequest.prototype.defaultError = function(){      alert("錯誤數(shù)據(jù)nn回調狀態(tài)："+this.req.readyState+"n狀態(tài)："+this.req.status);  }

（2）在需要應用的Ajax的頁面中應用一下的語句包括（1）中創(chuàng)建的JS文件

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

（3）在應用Ajax的頁面中編寫錯誤處理的方法、實例化Ajax對象的方法和回調函數(shù)。

 <script language="javascript">  /*********************錯誤處理的方法******************/      function onerror(){          alert("您的操作有誤！");      }  /*********************實例化Ajax對象的方法************/      function getInfo(){          var loader = new net.AjaxRequest("getInfo.jsp?nocache="+new Date().getTime(),              deal_getInfo,onerror,"GET");      }  /*********************回調函數(shù)************************/      function deal_getInfo(){          document.getElementById("showInfo").innerHTML=this.req.responseText;      }  </script>

【相關教程推薦：AJAX視頻教程】