原生js封裝ajax

為什麼要封裝ajax？

答：一個網頁裡面會發送很多的ajax請求 而且所有的ajax的代碼幾乎一樣，也就那五步個驟（上文已經講過），是以将ajax封裝需要用的時候直接調用，節省代碼時間。

首先我們知道需要傳的參數都有什麼：

①請求方式：type。

②請求路徑：url。

③傳入的值/資料：data。

④成功之後接受傳回體：success。

⑤傳回體的資料類型：dataType。

進行封裝：

第一步建立請求對象：

var xhr = new XMLHttpRequest();
           

第二步判斷是否為get方式，是則進行值得拼接:

if(params.type == "get") {
                params.url += "?" + params.data;
            }
           

第三步調用open方法：

xhr.open(params.type, params.url)

第四步在判斷是否為post請求方式，是則設定表頭再發送請求且傳值：

if(params.type  == "get") {
                xhr.send();
            } else {
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                xhr.send(params.data);
            }

           

第五步監聽響應完成事件：

xhr.onreadystatechange = function() {
                if(xhr.readyState == 4 && xhr.status == 200) {
                    var res = xhr.responseText;
                    // 判斷資料類型是json字元串還是語言
                    if(params.dataType == "json") {
                     // 将資料轉換為對象
                        res = JSON.parse(res);
                    } else if(params.dataType == "XML") {
                        // 建立轉換對象
                        var parser = new DOMParser();
                        // 對XML資料進行轉換
                        res = parser.parseFromString(res, "text/xml");
                    } else {
                        res = xhr.responseText;
                    }

           

第六步請求完成：

params.success(res);
           

封裝完成：

OVERRRRRRRR！