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属性取值：

XHR对象收到相应后增加的属性

封装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)
        });
    }
}