什麼是ajax重構

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

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

什麼是ajax重構

重構（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重構的詳細內容。更多資訊請關注PHP中文網其他相關文章！