一直在用jQuery方法来写ajax请求，用的多了，不免对这其中是怎么实现的产生了兴趣，于是乎，小弟闲来无聊研究了一下原生实现ajax请求，网上看了很多前辈们的关于ajax请求的封装方法，也借鉴了很多经验，于是乎就出现了小弟的一个原生JS封装ajax的版本，希望大家看了之后能够明白，下面就是我实现的方法，其中的注释很清晰，方便大家的理解。

<script>

/** * 对封装好的ajax请求进行调用 * */ajax({    url:"", //请求地址    type:'GET',   //请求方式    data:{name:'zhangsan',age :'23',email:'2372734044@qq.com'}, //请求参数    dataType:"json",     // 返回值类型的设定    async:false,   //是否异步    success:function (response,xml) {        console.log(response);   //   此处执行请求成功后的代码    },    fail:function (status) {        console.log('状态码为'+status);   // 此处为执行成功后的代码    }});function ajax(options) {    /**     * 传入方式默认为对象     * */    options = options || {};    /**     * 默认为GET请求     * */    options.type = (options.type || "GET").toUpperCase();    /**     * 返回值类型默认为json     * */    options.dataType = options.dataType || 'json';    /**     * 默认为异步请求     * */    options.async = options.async || true;    /**     * 对需要传入的参数的处理     * */    var params = getParams(options.data);    var xhr;    /**     * 创建一个 ajax请求     * W3C标准和IE标准     */    if (window.XMLHttpRequest){        /**         * W3C标准         * */        xhr = new XMLHttpRequest();    }else{        /**         * IE标准         * @type {ActiveXObject}         */        xhr = new ActiveXObject('Microsoft.XMLHTTP')    }    xhr.onreadystatechange = function () {        if (xhr.readyState == 4){            var status = xhr.status;            if (status >= 200 && status < 300 ){                options.success && options.success(xhr.responseText,xhr.responseXML);            }else{                options.fail && options.fail(status);            }        }    };    if (options.type == 'GET'){        xhr.open("GET",options.url + '?' + params ,options.async);        xhr.send(null)    }else if (options.type == 'POST'){        /**         *打开请求         * */        xhr.open('POST',options.url,options.async);        /**         * POST请求设置请求头         * */        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');        /**         * 发送请求参数         */        xhr.send(params);    }}/** * 对象参数的处理 * @param data * @returns {string} */function getParams(data) {    var arr = [];    for (var param in data){        arr.push(encodeURIComponent(param) + '=' +encodeURIComponent(data[param]));    }    console.log(arr);    arr.push(('randomNumber=' + Math.random()).replace('.'));    console.log(arr);    return arr.join('&');}

</script>

封装以上的方法主要是因为原生js传递请求参数比较麻烦，于是乎改良了一下，希望对大家有帮助，喜欢我的文章的话，就给我来个喜欢吧，

我最喜欢doge了