js實現原生Ajax的封裝及ajax原理詳解

原理及概念

AJAX即“Asynchronous Javascript And XML”（異步JavaScript和XML），是一種用於創建快速動態網頁的技術。

動態網頁：是指可以通過服務器語言結合數據庫隨時修改數據的網頁。

靜態網頁，隨着html代碼的生成，頁面的內容和顯示效果就基本上不會發生變化了——除非你修改頁面代碼。

AJAX = 異步 JavaScript和XML（標准通用標記語言的子集）。

AJAX 是與服務器交換數據並更新部分網頁的藝術，在不重新加載整個頁面的情況下。

Ajax的優勢

AJAX 在瀏覽器與 Web 服務器之間使用異步數據傳輸（HTTP 請求），這樣就可使網頁從服務器請求少量的信息，而不是整個頁面。

AJAX 可使因特網應用程序更小、更快，更友好。

AJAX 是一種獨立於 Web 服務器軟件的瀏覽器技術。

AJAX 基於下列 Web 標准：

JavaScriptXMLHTMLCSS在 AJAX 中使用的 Web 標准已被良好定義，並被所有的主流瀏覽器支持。AJAX 應用程序獨立於瀏覽器和平台。

Web 應用程序較桌面應用程序有諸多優勢；它們能夠涉及廣大的用戶，它們更易安裝及維護，也更易開發。

不過，因特網應用程序並不像傳統的桌面應用程序那樣完善且友好。

通過 AJAX，因特網應用程序可以變得更完善，更友好。

Ajax的異步

異步：是相對於同步而言的，我們學過的定時器也是異步的一種，也就是其他程序不需要等待定時器的代碼全部執行完畢以后才能執行代碼。因為定時器有可能是無限循環執行代碼的，如果等待定時器執行完畢那么其他的代碼將永遠無法運行。所以異步編程就是相對於其他代碼是獨立完成的。也就是上面所說的ajax是獨立於瀏覽器平台的。

Tip：事件也是異步執行的，事件是發生某件事情后才會執行代碼的。
同步：我們之前所寫的代碼除了定時器和事件大部分都是同步執行的。也就是同一個代碼塊中都是從上到下執行的。

Ajax的工作原理

Ajax 核心對象XMLHttpRequest
var _hr=new window.XMLHttpRequest();
通過該實例化的對象向服務器
發出請求，等待服務器響應
服務器響應完成后客戶端再處理
服務器端響應的數據。
Ajax請求服務器的過程中有5個狀態
0：表示請求服務器之前
1：表示打開遠程服務器鏈接對應open方法
2：表示向服務器發送數據對應send方法
3：表示服務器響應過程中並未結束
4：表示服務器響應完成

/*
 * ajax方法
 */
var Ajax = function() {
    var that = this;
    // 創建異步請求對象方法
    that.createXHR = function() {
        if (window.XMLHttpRequest) { // IE7+、Firefox、Opera、Chrome 和Safari
            return new XMLHttpRequest();
        } else if (window.ActiveXObject) { // IE6 及以下
            var versions = [ 'MSXML2.XMLHttp', 'Microsoft.XMLHTTP' ];
            for (var i = 0, len = versions.length; i < len; i++) {
                try {
                    return new ActiveXObject(version[i]);
                    break;
                } catch (e) {
                    // 跳過
                }
            }
        } else {
            throw new Error('瀏覽器不支持XHR對象！');
        }
    }
    // 初始化數據方法
    that.init = function(obj) {
        // 初始化數據
        var objAdapter = {
            method : 'get',
            data : {},
            success : function() {
            },
            complete : function() {
            },
            error : function(s) {
                alert('status:' + s + 'error!');
            },
            async : true
        }
        // 通過使用JS隨機字符串解決IE瀏覽器第二次默認獲取緩存的問題
        that.url = obj.url + '?rand=' + Math.random();
        that.method = obj.method || objAdapter.method;
        that.data = that.params(obj.data) || that.params(objAdapter.data);
        that.async = obj.async || objAdapter.async;
        that.complete = obj.complete || objAdapter.complete;
        that.success = obj.success || objAdapter.success;
        that.error = obj.error || objAdapter.error;
    }
    // ajax異步調用
    that.ajax = function(obj) {
        that.method = obj.method || 'get';
        if (obj.method === 'post') {
            that.post(obj);
        } else {
            that.get(obj);
        }
    }
    // post方法
    that.post = function(obj) {
        var xhr = that.createXHR(); // 創建XHR對象
        that.init(obj);
        that.method = 'post';
        if (that.async === true) { // true表示異步，false表示同步
            // 使用異步調用的時候，需要觸發readystatechange 事件
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4) { // 判斷對象的狀態是否交互完成
                    that.callback(obj, this); // 回調
                }
            };
        }
        // 在使用XHR對象時，必須先調用open()方法，
        // 它接受三個參數：請求類型(get、post)、請求的URL和表示是否異步。
        xhr.open(that.method, that.url, that.async);
        // post方式需要自己設置http的請求頭，來模仿表單提交。
        // 放在open方法之后，send方法之前。
        xhr.setRequestHeader('Content-Type',
                'application/x-www-form-urlencoded');
        xhr.send(that.data); // post方式將數據放在send()方法里
        if (that.async === false) { // 同步
            that.callback(obj, this); // 回調
        }
    };
    // get方法
    that.get = function(obj) {
        var xhr = that.createXHR(); // 創建XHR對象
        that.init(obj);
        if (that.async === true) { // true表示異步，false表示同步
            // 使用異步調用的時候，需要觸發readystatechange 事件
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4) { // 判斷對象的狀態是否交互完成
                    that.callback(obj, this); // 回調
                }
            };
        }
        // 若是GET請求，則將數據加到url后面
        that.url += that.url.indexOf('?') == -1 ? '?' + that.data : '&'
                + that.data;
        // 在使用XHR對象時，必須先調用open()方法，
        // 它接受三個參數：請求類型(get、post)、請求的URL和表示是否異步。
        xhr.open(that.method, that.url, that.async);
        xhr.send(null); // get方式則填null
        if (that.async === false) { // 同步
            that.callback(obj, this); // 回調
        }
    }
    // 請求成功后，回調方法
    that.callback = function(obj, xhr) {
        if (xhr.status == 200) { // 判斷http的交互是否成功，200表示成功
            obj.success(xhr.responseText); // 回調傳遞參數
        } else {
            alert('獲取數據錯誤！錯誤代號：' + xhr.status + '，錯誤信息：' + xhr.statusText);
        }
    }
    // 數據轉換
    that.params = function(data) {
        var arr = [];
        for ( var i in data) {
            // 特殊字符傳參產生的問題可以使用encodeURIComponent()進行編碼處理
            arr.push(encodeURIComponent(i) + '=' + encodeURIComponent(data[i]));
        }
        return arr.join('&');
    }
    return {
        post : that.post,
        get : that.get,
        ajax : that.ajax
    }
}

將以上代碼寫入一個js文件中，在HTML文件引用。

封裝ajax使用案例：

Ajax().post({

　　url: 'ajax.php',
　　　　data: {
　　　　'name': 'JR',
　　　　'age': 22
　　},
　　success: function(message) {
　　console.log(message);
},
async: true
});

function listPrain() {
    Ajax()
            .post(
                    {
                        url : 'fileMana/listSite/',
                        success : function(data) {
                            var items = JSON.parse(data);
                            if (items.data.length > 0) {
                                for (var i = 0; i < items.data.length; i++) {
                                    $("#sid").append(
                                            "<option value='" + items.data[i].id
                                                    + "'>" + items.data[i].prain
                                                    + "</option>");
                                }
                            } else {
                                // 無可用站點
                            }
                            $(document).ready(function() {
                                $('#sid').multiselect();
                            });
                        },
                        async : true
                    });
}