一直在用jQuery方法來寫ajax請求配乱，用的多了，不免對這其中是怎么實現(xiàn)的產(chǎn)生了興趣于毙，于是乎敦冬，小弟閑來無聊研究了一下原生實現(xiàn)ajax請求，網(wǎng)上看了很多前輩們的關(guān)于ajax請求的封裝方法唯沮，也借鑒了很多經(jīng)驗脖旱，于是乎就出現(xiàn)了小弟的一個原生JS封裝ajax的版本，希望大家看了之后能夠明白介蛉，下面就是我實現(xiàn)的方法萌庆，其中的注釋很清晰，方便大家的理解币旧。

<script> 
   /**     * 對封裝好的ajax請求進行調(diào)用     * */
    ajax({
        url:"", //請求地址
        type:'GET',   //請求方式
        data:{name:'zhangsan',age :'23',email:'2372734044@qq.com'}, //請求參數(shù)
        dataType:"json",     // 返回值類型的設(shè)定
        async:false,   //是否異步
        success:function (response,xml) {
            console.log(response);   //   此處執(zhí)行請求成功后的代碼
        },
        fail:function (status) {
            console.log('狀態(tài)碼為'+status);   // 此處為執(zhí)行成功后的代碼 
       }    });
    function ajax(options) {
        /**
         * 傳入方式默認為對象
         * */
        options = options || {};
        /**
         * 默認為GET請求
         * */ 
       options.type = (options.type || "GET").toUpperCase(); 
       /**
         * 返回值類型默認為json
         * */
        options.dataType = options.dataType || 'json'; 
       /**
         * 默認為異步請求
         * */ 
       options.async = options.async || true;
        /**
         * 對需要傳入的參數(shù)的處理
         * */
        var params = getParams(options.data);
        var xhr; 
       /**
         * 創(chuàng)建一個 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請求設(shè)置請求頭
             * */
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
            /**
             * 發(fā)送請求參數(shù)
             */
            xhr.send(params);
        }    }
    /**
     * 對象參數(shù)的處理
     * @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傳遞請求參數(shù)比較麻煩践险，于是乎改良了一下，希望對大家有幫助，喜歡我的文章的話巍虫，就給我來個喜歡吧彭则，

我最喜歡doge了

doge.jpg