jQuery中Ajax實現&封裝一個Ajax工具函數

封裝一個Ajax工具函數

原生JS簡單實現Ajax

一、先寫出調用函數 而後一步步分析封裝

// jQuery裏面的Ajax就是這樣的調用方式
    $.ajax({
            type:'get',                 // 請求方式
            url:'demo.php',             // 後臺處理程序地址接口
            data:{name:'哈哈',age:22},  // 傳輸的數據
            callback:function(data){    // 回調函數
                // data爲獲取到的數據
                console.log(data);
            }
        });

二、引入一個命名空間

// 定義一個命名空間  防止全局污染
var $ = {
        // 傳輸數據處理函數
        joint:function(){},
        ajax:function(){}
};

三、首先對要傳輸的數據進行處理

// data處理函數  將數據處理爲 以key1=value1&key2=value2...格式輸出
    joint:function(data){
        var d = '';
        // 遍歷data數據
        for(var key in data){
            // 拼接爲key1=value1&key2=value2...
            d += key + '=' + data[key] + '&';
        }
        // 去除最後一個&
        d = d.slice(0, -1);
        // 最後返回d
        return d;
    }

四、書寫ajax函數

// ajax
    ajax:function(obj){
        // type無數據時默認爲get
        var type = obj.type || 'get';
        // url無數據時默認爲當前地址
        var url = obj.url || location.pathname;
        // data數據處理 
        var data = this.joint(obj.data);

第一步new

// 實例化
        var xhr = new XMLHttpRequest();
        // 判斷爲get提交時 改變url結構
        if(type == 'get'){
            url = url + '?' + data;
            data = null;
        }

第二個步open

// 發出請求 請求行信息
        xhr.open(type,url);

第三步set

// 判斷爲post提交時
        if(type == 'post'){
            // 爲get提交時能夠不寫
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        }

第四步send

// 發送數據
        xhr.send(data);

監聽響應狀態並處理

xhr.onreadystatechange = function(){
            // 處理成功
            // xhr.readyState = 4時  響應完成
            // xhr.status = 200  成功接收請求
            if(xhr.readyState == 4 && xhr.status ==200){
                // 獲取響應的數據
                var data = xhr.responseText;
                // 獲取響應頭文件中的Content-Type信息
                var ct = xhr.getResponseHeader('Content-Type');
                // 轉小寫
                ct = ct.toLowerCase();
                // 判斷爲響應的爲json格式的數據
                if(ct.indexOf('json') != -1){
                    // 將json格式的數據解析爲JS類型的json數據
                    data = JSON.parse(data);
                    // 判斷爲響應的爲XML格式數據
                }else if(ct.indexOf('xml') != -1){
                    // 獲取XML數據
                    data = xhr.responseXML;
                }
                // 回調函數返回響應的數據
                obj.callback(data);
            }
        }
    }

源代碼下載