使用原生JS封装Ajax

使用原生 的JS封装 Ajax，实现 仿JQuery的Ajax,post,get三种异步请求方式：

var MAjax = {
    //根据浏览器创建异步对象
    createXhr: function () {
        //经测试：IE7.0及以上版本的IE，两种异步创建的两种方式都支持
        //如果XMLHttpRequest存在，则是IE7.0及其它内核，则直接创建异步对象(!==非全等于， === 全等于)
        if (typeof XMLHttpRequest !== 'undefined') { //相当!(typeof XMLHttpRequest === 'undefined')
            return new XMLHttpRequest();
        }
        //如果ActiveObject存在，是IE7.0或以下IE内核，判断其版本，并创建相应的异步对象
        else if (typeof ActiveXObject !== 'undefined') {
            //如果ActiveObject对象的参数类型不是string类型，则判断ie版本并创建异步对象
            var versions = ['MSXML2.XMLHttp.6.0', 'MSXML2.XMLHttp.3.0', 'MSXML2.XMLHttp'];
            for (var i = 0, len = versions.length; i < len; i++) {
                try {
                    //在此创建出错的话，就跳到catch中，否则执行下一句，返回创建成功的对象
                    var xhr = new ActiveXObject(versions[i]);
                    //给当前窗体对象添加一个属性用于判断 是否创建成功了
                    this.IsCreateOk = versions[i];
                    return xhr;
                }
                catch (e) { }
            }
            if (typeof this.IsCreateOk === 'undefined') {
                alert("您的浏览器版本过低，无法创建异步对象，请升级您的浏览器！");
            }
        }

    },

    //将请求参数编码后拼接成url参数：例 name=aa&age=11  传入参数：{name:aa,age:11} 
    encodeData: function (paramters) {
        var data = [];
        for (var name in paramters) {
            //将数组中的数据以=拼接后再添加到data数组中 [name=aa,age=11]
            var _regesp = /%20/g; //空格的正则表达式
            var _value = paramters[name].toString(); //获取值
            data.push(encodeURIComponent(name).replace(_regesp, '+') + "=" + encodeURIComponent(_value).replace(_regesp, '+'));
        }
        //以&将数组元素拼接后返回 如：name=aa&age=11
        return data.join("&");
    },

    //根据响应头类型，获取相对应类型的数据
    responseData: function (request) {
        var responseType = request.getResponseHeader("Content-Type");
        switch (responseType) {
            case 'text/xml':
                return request.responseXML;
            case 'text/json':
            case 'text/javascript':
            case 'application/javascript':
            case 'application/x-javascript':
                return eval('(' + request.responseText + ')');
            default:
                return request.responseText;
        }
    },

    //ajax请求
    ajax: function (options) {
        //method, url, data, success,failure, asyn
        var fn = function () { };
        options.method = options.method.toUpperCase();
        options.url = options.url;
        options.data = this.encodeData(options.data);
        options.success = options.success || fn();
        options.failure = options.failure || fn();
        options.asyn = typeof (options.asyn) == 'undefined' ? true : options.asyn;

        var xhr = this.createXhr();


        //注册回调函数（每当异步请求状态0-4改变的时候，就调用此函数）【一定要在Open之前注册】
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4) {//判断 请求是否完成，响应是否就绪
                if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 300) {//判断返回的响应状态码
                    options.success(MSF.responseData(xhr), xhr.statusText);
                } else {
                    options.failure(xhr.status, xhr.statusText);
                }
            }
        }

        //判断请求类型，并发送请求和请求参数
        switch (options.method) {
            case 'POST':
                xhr.open(options.method, options.url, options.asyn);
                xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); //【在send之前设置请求头】
                xhr.send(options.data);
                break;
            default:
                options.url = options.url + '?' + options.data + '&d=' + Math.random(0, 99); //get请求，给url添加参数
                xhr.open(options.method, options.url, options.asyn);
                xhr.send(null);
                break;
        }
    },

    //get请求
    get: function (url, data, callback) {
        var fn = function () { };
        callback = callback || fn();
        this.url = url + '?' + this.encodeData(data) + '&d=' + Math.random(0, 99);

        //创建异步对象
        var xhr = this.createXhr();

        //注册回调函数（每当异步请求状态0-4改变的时候，就调用此函数）【一定要在Open之前注册】
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4) {//判断 请求是否完成，响应是否就绪
                if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 300) {//判断返回的响应状态码
                    callback(MSF.responseData(xhr), xhr.statusText);
                } else {
                    callback(xhr.status, xhr.statusText);
                }
            }
        }

        //开始异步
        xhr.open('GET', this.url, true);
        xhr.send(null);
    },

    //post请求
    post: function (url, data, callback) {
        this.url = url + "?d=" + Math.random(0, 99);
        callback = callback || function () { };
        this.data = this.encodeData(data);

        var xhr = this.createXhr();

        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4) {//判断 请求是否完成，响应是否就绪
                if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 300) {//判断返回的响应状态码
                    callback(MSF.responseData(xhr), xhr.statusText);
                } else {
                    callback(xhr.status, xhr.statusText);
                }
            }
        }

        xhr.open("POST", this.url, true);
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.send(this.data);
    }
};

使用实例：

//调用：
        MAjax.ajax({
            method: "get",
            url: "GetPaht_Test.aspx",
            data: { "name": "jack", "age": 15 },
            success: function (data,state) { alert(data+"----"+state); },
            failure: function () { alert("请求失败了") }
        });

        MAjax.get(
        "GetPaht_Test.aspx",
        { "name": "jack", "age": 15 },
        function (data, state) { alert(data + "----" + state) }
        );

        MAjax.post(
        "GetPaht_Test.aspx",
        { "name": "jack", "age": 15 },
        function (data, state) { alert(data + "----" + state) }
        );