原生js實現Ajax

XMLHttpRequest對象

• 經過ActiveXObject實現（）

  • new ActiveXObject('Microsoft.XMLHTTP')
  • IE5是第一個引入XMLHttpRequest對象的瀏覽器；
  • IE5中,XHR對象是經過MSXML庫中的一個ActiveX對象實現的；
  • IE中可能會遇到3種不一樣版本的XHR對象，即 MSXML2.XMLHttp.6.0, MSXML2.XMLHttp.3.0, MSXML2.XMLHttp；
  • 適用於IE7以前的版本

• 經過XMLHttpRequest構造函數

  • var xhr = new XMLHttpRequest();
  • IE7+、FireFox、Opera、Chrome和Safari都支持原生XMLHttpRequest對象；

生成XMLHttpRequest對象的方法

function createXHR() {
    if (typeof XMLHttpRequest !== 'undefined') {
        return new XMLHttpRequest();
    } else if (typeof ActiveXObject !== 'undefined'){
        // 支持IE7以前的版本
        if (typeof arguments.callee.activeXString !== 'string') {
            var versions = ['MSXML2.XMLHttp.6.0', 'MSXML2.XMLHttp.3.0', 'MSXML2.XMLHttp'];
            for (var i = 0; i < versions.length; i++) {
                try {
                    new ActiveXObject(versions[i]);
                    arguments.callee.activeXString = versions[i];
                    break;
                } catch (e) {
                    //
                }
            }
        }
        return new ActiveXObject(arguments.callee.activeXString);
    } else {
        throw new Error("No XHR Object available!");
    }
}

XHR對象的readyState屬性

• readyState 表示請求/響應過程的當前活動階段；
• readyState值變化將觸發readystatechange事件，利用該事件檢測每次狀態變化後的readyState值；
• 一般只對readyState值爲4的階段感興趣，此時全部數據已就緒；
• 爲了確保跨瀏覽器兼容性，必須在調用open()以前指定readystatechange事件處理程序；

readyState屬性取值：

值	階段	說明
0	未初始化	尚未調用 open() 方法
1	啓動	已調用 send() 方法，正在發送請求
2	發送	send() 方法完成，已收到所有響應內容
3	接收	正在解析響應內容
4	完成	響應內容解析完成，能夠在客戶端調用

XHR對象收到響應後添加的屬性

屬性	說明
responseText	做爲響應主體被返回的文本；
responseXML	若響應內容類型是"text/xml"或"application/xml", 其值包含着響應數據的XML DOM文檔； 對於非XML數據而言，responseXML值爲null
status	響應的HTTP狀態
statusText	HTTP狀態的說明

封裝AJAX方法

/**
 *
 * @param type 請求類型：get,post,...
 * @param url
 * @param dataObj 請求參數：對象字面量{key:value,...}
 * @param callback
 * @param async 是否異步
 */

function ajax(type, url, dataObj, callback, async) {
    var paramsStr = buildParamsStr(dataObj), xhr = null;
    if (type === 'get' && dataObj) {
        url = addURLParams(url, paramsStr);
    }
    xhr = createXHR();
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            var status = xhr.status;
            if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
                console.log(xhr.responseText);
                callback && callback(xhr.responseText);
            } else {
                console.log("請求異常！狀態碼：" + xhr.status);
            }
        }
    };
    xhr.open(type, url, async); // open()方法啓動一個請求以備發送；
    if (type == 'get') {
        xhr.send(null);
    } else {
        xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded;charset=UTF-8');
        xhr.send(paramsStr);
    }
}

encodeURIComponent()方法

• GET請求常常發生查詢字符串格式引起的錯誤；
• 能夠對查詢字符串中每一個參數的名稱和值用encdoeURIComponent()進行編碼；

function buildParamsStr(paramsObj){
    var str = '';
    for (key in paramsObj) {
        // 排除原型中屬性
        if (dataObj.hasOwnProperty(key)) {
            // 對查詢字符串中每一個參數名稱和值用encdoeURIComponent()進行編碼
            str += "&" + encodeURIComponent(key) + "=" + encodeURIComponent(paramsObj[key]);
        }
    }
    return str.slice(1);
}

function addURLParams(url, paramsStr) {
    url += (url.indexOf('?') === -1) ? '?' : '&';
    url += paramsStr + '&' + new Date().getTime();
    return url;
}

---

調用示例

window.onload = function(){
    var btn = document.getElementById("btn1");
    btn.onclick = function(){
        ajax('get', 'a.txt', function fnSucc(str){
            alert(str)
        });
    }
}