封裝JS實現Ajax

這兩天仔細理解了一下Ajax,然後整理封裝了一下，如果有什麼不對的地方，請指教，謝謝！

AJAX

AJAX = Asynchronous JavaScript and XML（非同步 JavaScript 和 XML）。

AJAX 不是新的程式設計語言，而是一種使用現有標準的新方法。

AJAX 是與伺服器交換資料並更新部分網頁的藝術，在不重新載入整個頁面的情況下。

XHR 的出現，提供了向伺服器發送請求和解析伺服器響應提供了流暢的介面。能夠以非同步方式從伺服器擷取更多的資訊，這就意味著，使用者只要觸發某一事件，在不重新整理網頁的情況下，補救伺服器最新的資料。
雖然Ajax 中的x 代表的是XML，但Ajax 通訊和資料格式無關，也就是說這種技術不一定使用XML。

詳細標準可以去W3C：http://www.w3school.com.cn/ajax/ajax_intro.asp

首先是建立一個XHR對象：

function createXHR() {
     if( typeof XMLHttpRequst !== 'undefined') { 
            return new XMLHttpRequest(); 
        } else if( typeof ActiveXObject !== 'undefined') {//否則判斷ActiveXObject ,IE6及以下
            if( typeof arguments.callee.activeXString != 'string') {
                var versions = ['MSXML2.XMLHTTP.6.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP'];
                for(var i = 0, len = versions.length; i < len; i++) {
                    try {
                         new ActiveXObject(versions[i]);
                         arguments.callee.activeXString = versions[i];
                         break;
                    } catch(ex) {
                        //跳過
                    }
                }
            }
            return new ActiveXObject(arguments.callee.activeXString);
        } else{
            throw new Error('No XHR object available');
        }
}

IE7+、Firefox、Opera、Chrome 和Safari 都支援原生的XHR 對象，在這些瀏覽器中建立XHR 對象可以直接執行個體化XMLHttpRequest 即可，如果是IE6 及以下，那麼我們必須還需要使用ActiveX 對象通過MSXML 庫來實現。在低版本IE 瀏覽器可能會遇到三種不同版本的XHR 對象，即MSXML2.XMLHttp、MSXML2.XMLHttp.3.0、MSXML2.XMLHttp.6.0。將這三個不同版本放在一個數組 裡，然後迴圈嘗試建立一個XHR對象，成功則跳出迴圈，若都不支援則拋出一個錯誤。具體可以查閱JavaScript 進階程式設計（第3版）。

這裡我們要進行封裝，然後通過引入調用：

//調用ajax
JR.ajax({
    method : 'post',
    url : 'demo.php',
    data : {
        'name' : 'JR',
        'age' : 22
    },
    timeout : 5000,
    success : function (response) {
        alert(response);
    },
    error : function (status,statusText) {
        alert('擷取資料錯誤！錯誤代號：' + status + '，錯誤資訊：' + statusText);
    },
    complete : function () {
        alert("請求完成");
    },
    async : true
});

對於封裝，自己搜尋了一些資料，但還是不是很透徹，所以如果我的封裝方式有問題，還望指正，非常感謝！

JR.ajax = function(obj){
    //初始化對象，沒填某項時使用預設值代替
    obj = { 
            //要求方法，預設POST
            method: obj.method "POST", 
            //請求的URL 
            url:obj.url "", 
            //發送的請求資料參數 
            data: obj.data "",
            //請求逾時的時間，預設5秒
            timeout: obj.timeout 5000, 
            //請求成功時執行的函數
            success: obj.success function(){}, 
            //請求失敗時執行的函數 
            error: obj.error function(){}, 
            //請求完成（不管成功還是失敗都會調用）時執行的函數 
            complete: obj.complete function(){}, 
            //同步還是非同步，預設非同步
            async : obj.async true
        }; 
    //建立XHR對象
    var xhr = (function(){
        if( typeof XMLHttpRequst !== 'undefined') { 
            return new XMLHttpRequest(); 
        } else if( typeof ActiveXObject !== 'undefined') {//否則判斷ActiveXObject
            if( typeof arguments.callee.activeXString != 'string') {
                var versions = ['MSXML2.XMLHTTP.6.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP'];
                for(var i = 0, len = versions.length; i < len; i++) {
                    try {
                         new ActiveXObject(versions[i]);
                         arguments.callee.activeXString = versions[i];
                         break;
                    } catch(ex) {
                        //跳過
                    }
                }
            }
            return new ActiveXObject(arguments.callee.activeXString);
        } else{
            throw new Error('No XHR object available');
        }
    })();
    var requestDone = false,//標誌請求是否完成
    //通過使用JS隨機字串解決IE瀏覽器第二次預設擷取緩衝的問題
    obj.url = obj.url + '?rand=' + Math.random();
   //將名值對轉換成字串
    obj.data = (function(data){
        var arr = [];
        for (var i in data) {
            //特殊字元傳參產生的問題可以使用encodeURIComponent()進行編碼處理
            arr.push(encodeURIComponent(i) + '=' + encodeURIComponent(data[i]));
        }
        return arr.join('&');
    })(obj.data);
    //若是GET請求，則將資料加到url後面
    if (obj.data !== '' && obj.method === 'get') {
        obj.url += obj.url.indexOf('?') == -1 ? '?' + obj.data : '&' + obj.data;
    }
    //在使用XHR對象時，必須先調用open()方法，
    //它接受三個參數：請求類型(get、post)、請求的URL和表示是否非同步。
    xhr.open(obj.method, obj.url, obj.async);
    //初始化一個5秒的回呼函數，用於取消請求（如果尚未完成的話） 
    setTimeout(function(){ 
        requestDone = true; 
    }, obj.timeout);

    if (obj.async === true) {  //true表示非同步，false表示同步
        //使用非同步呼叫的時候，需要觸發readystatechange 事件
        //監聽文檔狀態的更新 
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && !requestDone) {   //判斷對象的狀態是否互動完成
                callback();         //回調
            }
        };
    }
    if (obj.method === 'post') {
        //post方式需要自己設定http的要求標頭，來模仿表單提交。
        //放在open方法之後，send方法之前。
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.send(obj.data);        //post方式將資料放在send()方法裡
    } else {
        xhr.send(null);        //get方式則填null
    }
    if (obj.async === false) {  //同步
        callback();
    }
    function callback() {
        if (xhr.status == 200) {  //判斷http的互動是否成功，200表示成功
            obj.success(xhr.responseText);            //成功
        } else {
            obj.error(xhr.status,xhr.statusText)    //失敗
        }
        //調用完成回呼函數 
        opt.complete();
        //避免記憶體流失，清理文檔 
        xhr = null;
    }

    return this;
};

如果有自己封裝的JS庫的話，這個可以作為一個外掛程式引入，至於這點，我將繼續努力，將常用到的JS方法封裝成自己的JS庫，加油！

PS：Ajax請求中POST方式和GET方式的對比:

POST方式	GET方式
每次都執行	同一個地址不重複執行
不可緩衝	可被緩衝
通過HTTP POST機制，將表單內各個欄位與其內容放置在HTML HEADER內一起傳送到action屬性所指的URL地址，使用者看不到這個過程	把參數資料隊列加到提交表單的action屬性所指的URL中，值和表單內各個欄位一 一對應，在URL中可以看到
伺服器端用Request.Form 擷取提交的資料	伺服器端用Request.QueryString 擷取變數的值
傳送的資料量較大，一般被預設為不受限制，但理論上，因伺服器的不同而異	傳送的資料量較小，不能大於2KB
安全性較高	安全性非常低
method 為post時，action頁面後邊帶的參數列表不忽視，故不一樣	method 為get時，action頁面後邊帶的參數列表會被忽視
資料是放在HTTP主體中的，其組織方式不止一種，有&串連方式，也有分隔字元方式，可隱藏參數，傳遞大批資料，比較方便	它將資料添加到URL中，通過這種方式傳遞到伺服器，通常利用一個問號？代表URL地址的結尾與資料參數的開端，後面的參數每一個資料參數以“名稱=值”的形式出現，參數之間用&區分