原生ajax+封裝ajax+使用方法

剛開始接觸ajax覺得很深奧，看了教學視頻也一蒙一蒙的，後來自己親身使用了下終於有所開竅，下面來說說我的思路

ajax分爲get、post兩種方式，只要記住運行的五個步驟就行了

1、創建XMLHttpRequest對象；

2、使用對象open方法，放置—請求方式：get/post，api，async；

3、使用對象send方法，放置—所要發送的數據；

4、執行onreadystatechange回調函數，函數內判斷對象readyState和status的狀態；

     readyState（狀態值）：ajax的運行步驟，無論訪問是否成功都會響應的步驟，五個值（0-4）；

                                 取值：0、請求未初始化（沒有執行open()方法和send()方法）；

                                            1、服務器已連接，正在發送請求；

                                            2、請求接收；

                                            3、請求處理，解析響應內容；

                                            4、請求完成，解析完成，數據可以調用；

    status（狀態碼）：無論請求是否成功，http協議返回的信息，來判斷服務器狀態；

                        取值：1XX、信息響應（服務器接收到請求並且處理）；

                                   2XX、處理成功響應的信息；

                                   3XX、重定向響應（需要對信息進行進一步處理）；

                                   4XX、客戶端錯誤（請求語法錯誤不能被執行）；

                                   5XX、服務器錯誤（執行請求失敗）；

貼上四個步驟的代碼：

// 第一步：創建對象
var xhr = null;
// 根據瀏覽器創建兼容的XMLHttpRequest對象
if(window.XMLHttpRequest) {
    // 兼容火狐、谷歌
    xhr = new XMLHttpRequest();
} else {
    // 兼容ie
    xhr = new ActiveXObject('Microsoft.XMLHTTP');
}

// 第二步：執行open函數
xhr.open('get/post', url, async); // async取值true（同步）/false（異步）

// 第三步：執行send函數
xhr.send(null); // 需要發送的數據

// 第四步：執行回調函數
xhr.onreadystatechange = function() {
    // 同時滿足狀態值和狀態碼請求訪問成功
    if(xhr.readyState == 4 && xhr.status == 200) {
        // 打印返回數據
        console.log(xhr.responseText);
    }
}

上面是最基本的代碼，下面來封裝一下，技術不佳，潦草能用，尚待完善

function ajax(option) {
    // 實例化對象
    option = option || {};
    // 默認type爲GET
    option.type = option.type.toUpperCase() || 'GET';
    // 接口
    option.url = option.url || '';
    // 默認異步
    option.async = option.async || true;
    // 發送數據
    option.data = option.data || {};
    // success
    option.success = option.success || function() {};

    // 創建xhr對象
    var xhr = null;
    if(window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    } else {
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }

    // 處理需要發送的參數
    var params = [];
    for (var key in option.data) {
        params.push(key + '=' + option.data[key] + '&');
    }

    // 判斷type
    if (option.type.toUpperCase() === 'GET') {
        xhr.open(option.type, option.url, option.async);
        xhr.send(null);
    } else if (option.type.toUpperCase() === 'POST') {
        xhr.open(option.type, option.url, option.async);
        // 設置響應頭
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8');
        xhr.send(params);
    }

    // 執行回調
    xhr.onreadystatechange = function() {
        if(xhr.readyState == 4) {
            if(xhr.status == 200) {
                option.success(xhr.responseText);
            }
        }
    }
}

使用方法：

var data = {
            type: 'get',
            url: './api.php',
            success: function(data) {
                console.log(data);
            }
        };
ajax(data);