Ajax學習筆記

最近在學php，剛剛入門，用到很多與Ajax相關的交互。Ajax也用了挺久的了，想寫一下學習筆記來記錄一下。今天先簡單寫一下原理和過程。歡迎大家一起探討。

什麼是AJAX

AJAX的全稱是Asynchronous JavaScript and XML。
它是一種基於JavaScript的網頁應用技術。傳統的提交方式會重載整個網頁，而利用AJAX技術可以使JavaScript與Web服務器異步傳輸數據，從而實現不重載整個頁面的情況下，更新局部頁面局部內容。

Ajax實現過程

0. XMLHttpRequest是AJAX的基礎，XMLHTTPRequest()是核心對象，首先要實例化一個XMLHTTPRequest()對象

var xhr = new XMLHTTPRequest();

1. AJAX進行請求，規定請求的類型、URL 以及是否異步處理請求。

xhr.open(method, url, async);

open()方法接收三個參數：

• method：請求的類型；GET 或 POST
• url：文件在服務器上的位置
• async：true（異步）或 false（同步）

AJAX的原理就是Asynchronous異步的，所以第三個參數async爲true。

第一個參數method決定了請求類型，即傳輸數據的方式。

• GET
• 與POST相比，GET 更簡單也更快。但是傳輸數據時會將數據放在地址欄的後面，對客戶端而言不安全。除此之外，GET傳輸數據的大小受限，一般只有2k-8k，因瀏覽器而異。所以在傳輸不敏感信息並且傳輸文件小的情況下，我們可以選擇用GET方式傳輸。
• POST
• POST傳輸是傳輸數據體，是隱式的，相對客戶端較爲安全。但是從另一層面上來說，相對服務器端就有一定的風險了。POST傳輸數據沒有大小限制，但是服務器對上傳的數據有限制，需要手動修改。

2. AJAX向服務器發送請求

xhr.send(string);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

用GET方法傳輸時，send(null)，用POST方法傳輸時，需要用setRequestHeader方法設置請求頭。

3. AJAX響應服務器狀態

AJAX響應服務器狀態涉及XMLHttpRequest對象的三個重要的屬性：onreadystatechange、readyState、status。
readyState存有XMLHttpRequest的狀態。從0到4發生變化：

• 0: 請求未初始化
• 1: 服務器連接已建立
• 2: 請求已接收
• 3: 請求處理中
• 4: 請求已完成，且響應已就緒

每當readyState改變時，就會觸發onreadystatechange事件，在事件中判斷請求是否成功，響應是否就緒，當readyState等於4且狀態爲200時，表示響應已就緒：

xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
        if (xhr.status === 200) {
            obj.success(xhr.responseText);
        }
    }
}

4. 使用 Callback 函數

obj.success(xhr.responseText);

AJAX響應就緒後，對接收到的數據進行後續的操作。

Ajax原生封裝

var ajax = {
    create: function () {
        var xhr;
        if (XMLHttpRequest) {
            xhr = new XMLHttpRequest();
        } else{
            xhr = new ActiveXObject('Microsoft.XMLHTTP');
        }
        return xhr;
    },
    request: function (obj) {
        var xhr = this.create();
        var data = this.changeData(obj.data);
        if (obj.type === 'GET') {
            xhr.open(obj.type, obj.url+'?rand='+Math.random()+'&'+data, true);
            xhr.send(null);
        } else if (obj.type === 'POST') {
            xhr.open(obj.type, obj.url, true);
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
            xhr.send(data);
        }
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    obj.success(xhr.responseText);
                }
            }
        }
    },
    changeData: function (data) {
        var arr = [];
        for (var i in data) {
            arr.push(i+'='+data[i]);
        }
        return arr.join('&');
    }
}
// 調用
ajax.request({
    type: 'POST',
    url: 'weibo.php',
    data: 'act=update',
    success: function(res){
        console.log(res);
    }
});

可以看出調用的形式與jQuery的實現原理相似。