什麼是ajax重構

ajax重構指的是在不改變軟體現有功能的基礎上，通過調整程式程式碼改善軟體的品質、效能，使其程式的設計模式和架構更合理，提高軟體的擴充套件性和維護性；Ajax的實現主要依賴於XMLHttpRequest物件，由於該物件的範例在處理事件完成後就會被銷燬，所以在需要呼叫它的時候就要重新構建。

本文操作環境：windows10系統、javascript1.8.5&&html5版、Dell G3電腦。

重構（Refactoring）就是在不改變軟體現有功能的基礎上，通過調整程式程式碼改善軟體的品質、效能，使其程式的設計模式和架構更趨合理，提高軟體的擴充套件性和維護性。

Ajax的核心物件是XMLHttpReguest，也就是說我們通過Ajax與伺服器進行互動，就必須要構建XMLHttpRequest這個物件。

但是在頁面之中通過Ajax與伺服器進行互動，在互動之後XMLHttpReguest這個物件就會被銷燬。

所以我們頁面再次通過Ajax與伺服器進行互動，還需要重新的構建XMLHttpRequest這個物件。

那麼XMLHttpReguest這個物件的建立，我們需要考慮到瀏覽器的相容性，所以說XMLHttpReguest的建立也是非常繁瑣的，需要根據不同瀏覽器的型別，來進行不同方式的建立。

那麼如果說我們在很多的頁面都應用到了Ajax這種技術，我們在很多的頁面當中都要來建立這個物件，這就體現不出OO(物件導向這種風格，程式碼的重複利用)，物件導向中提倡程式碼的重用，所以說我們通常情況下都會通過Ajax重構，來封裝XMLHttpReguest這個物件以及封裝一些對Ajax請求進行處理的通用方法，那麼我們在編寫程式碼的時候就可以直接來參照這個物件，從而來達到程式碼的重用，也節省了這個物件的建立時間

Ajax重構步驟

1)建立一個單獨的JS檔案，名字為AjaxRequest.js ，並且在該檔案中編寫重構Ajax所需的程式碼

2)在需要應用Ajax的頁面中包括剛剛建立的AjaxRequest.js檔案

3)在應用Ajax的頁面中編寫錯誤處理的方法，範例化Ajax物件的方法和回撥函數

在jsp或html頁面之中我們編寫一段JavaScript的指令碼程式碼，那麼可以在當前的頁面當中直接編寫JavaScript指令碼程式碼。也可以使用另外一種方式：建立js檔案，然後將這個js檔案引入到我們所編寫的jsp或者是html頁面當中

範例如下：

（1）建立一個單獨的JS檔案，命名為AjaxRequest.js，並且在該檔案中編寫重構Ajax所需要的程式碼。

 var net = new Object();    //建立一個全域性變數net
 //編寫建構函式
 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){
         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);    //傳送請求
         }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);
 }

（2）在需要應用的Ajax的頁面中應用一下的語句包括（1）中建立的JS檔案

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

（3）在應用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>

【相關教學推薦：AJAX視訊教學】

以上就是什麼是ajax重構的詳細內容，更多請關注TW511.COM其它相關文章！