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

wing324 發(fā)布于2019-08-02 12:14 / 1671人閱讀

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

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

什么是AJAX

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

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

var xhr = new XMLHTTPRequest();

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

xhr.open(method, url, async);

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

method：請求的類型；GET 或 POST

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

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

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

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

GET

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

POST

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

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

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

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

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

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

0: 請求未初始化

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

2: 請求已接收

3: 請求處理中

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

每當(dāng)readyState改變時，就會觸發(fā)onreadystatechange事件，在事件中判斷請求是否成功，響應(yīng)是否就緒，當(dāng)readyState等于4且狀態(tài)為200時，表示響應(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)就緒后，對接收到的數(shù)據(jù)進行后續(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的實現(xiàn)原理相似。

云服務(wù)器 GPU云服務(wù)器學(xué)習(xí)筆記學(xué)習(xí)筆記一基礎(chǔ)學(xué)習(xí)筆記深度學(xué)習(xí)筆記

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/53430.html

發(fā)表評論

登陸后可評論

0條評論

wing324

男|高級講師

我要關(guān)注我要私信

TA的文章

實現(xiàn)出棧入棧以及獲取棧中最小值，主要是獲取最小值

閱讀 2958·2021-11-24 09:39
2021最新jmeter接口測試入門到精通實戰(zhàn)講解，手把手教學(xué)

閱讀 2869·2021-09-29 09:34
RUNIDC：香港E3服務(wù)器$30/月起,臺灣E3服務(wù)器$50/月起

閱讀 3560·2021-09-24 10:23
如何計算網(wǎng)絡(luò)號和主機號-如何計算IP地址的網(wǎng)絡(luò)號和主機號？

閱讀 1746·2021-09-22 15:41
解決移動端一像素問題的Vue指令

閱讀 1701·2019-08-30 15:55
提高開發(fā)效率之VS Code基礎(chǔ)配置篇

閱讀 3516·2019-08-30 13:58
CSS3 transform 詳解

閱讀 2624·2019-08-30 13:11
CSS3新特性學(xué)習(xí)

閱讀 1669·2019-08-29 12:31

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

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

相關(guān)文章