Ajax學(xué)習(xí)筆記

Forest10 發(fā)布于2019-08-23 14:01 / 3424人閱讀

摘要：最近在學(xué)，剛剛?cè)腴T，用到很多與相關(guān)的交互。也用了挺久的了，想寫一下學(xué)習(xí)筆記來記錄一下。實(shí)現(xiàn)過程是的基礎(chǔ)，是核心對(duì)象，首先要實(shí)例化一個(gè)對(duì)象進(jìn)行請(qǐng)求，規(guī)定請(qǐng)求的類型以及是否異步處理請(qǐng)求。響應(yīng)服務(wù)器狀態(tài)響應(yīng)服務(wù)器狀態(tài)涉及對(duì)象的三個(gè)重要的屬性。

最近在學(xué)php，剛剛?cè)腴T，用到很多與Ajax相關(guān)的交互。Ajax也用了挺久的了，想寫一下學(xué)習(xí)筆記來記錄一下。今天先簡(jiǎn)單寫一下原理和過程。歡迎大家一起探討。

什么是AJAX

AJAX的全稱是Asynchronous JavaScript and XML。
它是一種基于JavaScript的網(wǎng)頁應(yīng)用技術(shù)。傳統(tǒng)的提交方式會(huì)重載整個(gè)網(wǎng)頁，而利用AJAX技術(shù)可以使JavaScript與Web服務(wù)器異步傳輸數(shù)據(jù)，從而實(shí)現(xiàn)不重載整個(gè)頁面的情況下，更新局部頁面局部?jī)?nèi)容。

Ajax實(shí)現(xiàn)過程 0. XMLHttpRequest是AJAX的基礎(chǔ)，XMLHTTPRequest()是核心對(duì)象，首先要實(shí)例化一個(gè)XMLHTTPRequest()對(duì)象

var xhr = new XMLHTTPRequest();

1. AJAX進(jìn)行請(qǐng)求，規(guī)定請(qǐng)求的類型、URL 以及是否異步處理請(qǐng)求。

xhr.open(method, url, async);

open()方法接收三個(gè)參數(shù)：

method：請(qǐng)求的類型；GET 或 POST

url：文件在服務(wù)器上的位置

async：true（異步）或 false（同步）

AJAX的原理就是Asynchronous異步的，所以第三個(gè)參數(shù)async為true。

第一個(gè)參數(shù)method決定了請(qǐng)求類型，即傳輸數(shù)據(jù)的方式。

GET

與POST相比，GET 更簡(jiǎn)單也更快。但是傳輸數(shù)據(jù)時(shí)會(huì)將數(shù)據(jù)放在地址欄的后面，對(duì)客戶端而言不安全。除此之外，GET傳輸數(shù)據(jù)的大小受限，一般只有2k-8k，因?yàn)g覽器而異。所以在傳輸不敏感信息并且傳輸文件小的情況下，我們可以選擇用GET方式傳輸。

POST

POST傳輸是傳輸數(shù)據(jù)體，是隱式的，相對(duì)客戶端較為安全。但是從另一層面上來說，相對(duì)服務(wù)器端就有一定的風(fēng)險(xiǎn)了。POST傳輸數(shù)據(jù)沒有大小限制，但是服務(wù)器對(duì)上傳的數(shù)據(jù)有限制，需要手動(dòng)修改。

2. AJAX向服務(wù)器發(fā)送請(qǐng)求

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

用GET方法傳輸時(shí)，send(null)，用POST方法傳輸時(shí)，需要用setRequestHeader方法設(shè)置請(qǐng)求頭。

3. AJAX響應(yīng)服務(wù)器狀態(tài)

AJAX響應(yīng)服務(wù)器狀態(tài)涉及XMLHttpRequest對(duì)象的三個(gè)重要的屬性：onreadystatechange、readyState、status。
readyState存有XMLHttpRequest的狀態(tài)。從0到4發(fā)生變化：

0: 請(qǐng)求未初始化

1: 服務(wù)器連接已建立

2: 請(qǐng)求已接收

3: 請(qǐng)求處理中

4: 請(qǐng)求已完成，且響應(yīng)已就緒

每當(dāng)readyState改變時(shí)，就會(huì)觸發(fā)onreadystatechange事件，在事件中判斷請(qǐng)求是否成功，響應(yīng)是否就緒，當(dāng)readyState等于4且狀態(tài)為200時(shí)，表示響應(yīng)已就緒：

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

4. 使用 Callback 函數(shù)

obj.success(xhr.responseText);

AJAX響應(yīng)就緒后，對(duì)接收到的數(shù)據(jù)進(jìn)行后續(xù)的操作。

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("&");
    }
}
// 調(diào)用
ajax.request({
    type: "POST",
    url: "weibo.php",
    data: "act=update",
    success: function(res){
        console.log(res);
    }
});

可以看出調(diào)用的形式與jQuery的實(shí)現(xiàn)原理相似。