【学习笔记】AJAX内容拓展

题记——近期回顾《javaScript高级程序设计》ajax章节，发现书中对封装一个ajax库并不完美，结合之前看到博客，对ajax库做一点点的优化。

参考博客：如何去封装一个ajax库

因为AJAX内容比较基础，关于AJAX的历史发展和实现优点可以自行查找资料。

简单来说

我们用AJAX建立动态网页有四条语句：

var xhr = new XMLHttpRequest;
xhr.onreasystatechange = function () {
    if(xhr.readyState == 4 && xhr.status){
   alert(xhr.responseText);
}else {
   alert("Request was unsuccessful" + xhr.status)
}
}
xhr.open("get","url",true);
xhr.send(null);  

AJAX的核心是XHMLHttpRequest，在使用之前应该检测浏览器的兼容问题，因为IE7+、Firefox、Chrome、Safari 以及 Opera均内建 XMLHttpRequest 对象，而IE5 和 IE6 使用 ActiveXObject。所以我们有必要进行判断，让所有浏览器都能正常渲染。

function createXHR() {
        var xhr = null;
        if (window.XMLHttpRequest) {     //处理兼容
            xhr = new XMLHttpRequest;
        } else {
            try {
                xhr = new ActiveXobject("Microsoft.XMLHTTP");
            } catch (e) {
                try {
                    xhr = new ActiveXObject("Msxml2.XMLHTTP");
                }
                catch (e) {
                }
            }
        }
        return xhr;
    }
var xhr = createXHR();

以上就是类似《js高级程序设计》的判断方法，但这样的话，每次创建xhr对象都会执行createXHR函数，每次都要在函数内部进行判断，由于第一次使用就知道了浏览器的支持类型，这样显然造成了不必要的系统开销。按照惰性思维，我们希望createXHR函数第一次执行的时候就把浏览器的支持类型返回，这样后面每次执行就没必要判断了。可以这么做：

function createXHR() {
            var xhr = null,
                flag = false,
                arr = [
                    function () {
                        return new XMLHttpRequest;
                    },
                    function () {
                        return new ActiveXObject("Microsoft.XMLHTTP");
                    },
                    function () {
                        return new ActiveXObject("Msxm12.XMLHTTP");
                    }
                ];
            for (var i = 0; i < arr.length; i++) {
                var curFn = arr[i];
                try {
                    xhr = curFn();
                    //本次循环获取的方法没有出现错误：说明此方法是我想要的，我们下一次直接执行这个方法即可，，这就需要我把createXHR重写为本次循环得到的方法(完成后不需要再判断下面的，直接退出循环即可)
                    createXHR = curFn;
                    flag = true;
                    break;
                } catch (e) {
                    //本次循环获取的方法执行时出现错误：继续执行下一次循环
                }
　　　　　　　　}
             if (!flag) {
                 throw new Error("your browser is not support ajax,please change your browser,try again!");
             }

            return xhr;
        }
var xhr = createXHR();

现在我们可以正常使用xhr这个对象了，但是现在又有一个问题，每次使用AJAX都要编写那四条语句，显得很没有必要。程序员是低效、单调、重复工作的天敌，所以我们必须想一个办法将AJAX封装，以后直接调用这个方法：

    function ajax(options) {
        var _default = {
            url : "",
            type : "get",
            dataType : "json",
            async : true,
            data : null,
            getHeaders : null,
            success : null
        }
        for (var key in options) {
            if (options.hasOwnProperty(key)) {
                _default[key] = options[key];
            }
        }
        //如果当前的请求方式是GET，我们需要在URL的末尾添加随机数清除缓存
        if (_default[type] === "get") {
            _deauult[url].indexOf("?") >= 0 ? _default[url] += "&" :_default[url] += "?";
            _default[url] += "_=" + Math.random();
        }
        var xhr = createXHR();
        xhr.open(_default[type],_default[url],_default[async]);
        xhr.onreadystatechange = function () {
            if (/^2\d{2}$/.test(xhr.status)) {
                if (xhr.readyState === 2) {
                    if (typeof(_default[getHeaders]) === "function") {
                        _default[getHeaders].call(xhr);
                    }

                }
                if (xhr.readyState == 4) {
                    var val = xhr.responseText;
                    if (_default.dataType === "json") {
                        val = "JSON" in window ? JSON.parse(val) : eval("(" + val + ")");
                    }
                    if (typeof(_default[success]) === "function") {
                        _default[success].call(xhr,val);
                    };

                }
            }
        }
        xhr.send(_default[data]);//向请求主体传内容，但open方法中必须使用post请求方式
    }

这就是一个AJAX请求的公共方法，把需要传递的参数值都放在对象options传递进去，再把参数options[key]赋给_default[key]。
PS：vue中经常会用到一个axios库，这个就是对ajax的封装方法，本人水平有限，有错误之处烦请指出