Ajax學習筆記

wing324 發布于2019-08-02 12:14 / 1665人閱讀

摘要：最近在學，剛剛入門，用到很多與相關的交互。也用了挺久的了，想寫一下學習筆記來記錄一下。實現過程是的基礎，是核心對象，首先要實例化一個對象進行請求，規定請求的類型以及是否異步處理請求。響應服務器狀態響應服務器狀態涉及對象的三個重要的屬性。

最近在學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的實現原理相似。

GPU云服務器云服務器學習筆記學習筆記一基礎學習筆記深度學習筆記

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/53430.html

Ajax學習筆記

摘要：最近在學，剛剛入門，用到很多與相關的交互。也用了挺久的了，想寫一下學習筆記來記錄一下。實現過程是的基礎，是核心對象，首先要實例化一個對象進行請求，規定請求的類型以及是否異步處理請求。響應服務器狀態響應服務器狀態涉及對象的三個重要的屬性。最近在學php，剛剛入門，用到很多與Ajax相關的交互。Ajax也用了挺久的了，想寫一下學習筆記來記錄一下。今天先簡單寫一下原理和過程。歡迎大家一起探...

Forest10 2019-08-23 14:01 評論0 收藏0
Laravel學習筆記之Demo2——用Ajax來做個ToDoList(待更新)

摘要：抱歉，最近忙，本篇等有時間更新。引言本文基于框架做的一個生成和存儲，主要目的是學習使用框架。書籍基于的，學習時使用框架開發。開發環境備注一直想把這本書的個作為系列分享出來，供初學者學習玩玩。抱歉，最近忙，本篇等有時間更新。引言本文基于Laravel框架做的一個URL生成和存儲demo，主要目的是學習使用Laravel框架。內容基于英文書籍《Packt.Laravel.Applic...

luck 2019-06-27 14:08 評論0 收藏0
網易微專業之《前端開發工程師》學習筆記（1）

摘要：點擊此處了解網易微專業課程前段時間報名參加了網易云課堂微專業課程前端開發工程師，這周課程開始了，正式學習。以下內容為前端開發工程師微專業的第一門課網頁制作的課程學習指南，學習視頻課程后自己整理的學習筆記，會持續更新內容。何為網易微專業？微專業是由網易云課堂聯合各領域知名專家，以就業為導向，精心打造的職業培訓方案。按要求完成學習，考試通過可獲得專業認定證書，令你求職或加薪多一份獨特優...

geekzhou 2019-08-28 18:28 評論0 收藏0
網易微專業之《前端開發工程師》學習筆記（1）

摘要：點擊此處了解網易微專業課程前段時間報名參加了網易云課堂微專業課程前端開發工程師，這周課程開始了，正式學習。以下內容為前端開發工程師微專業的第一門課網頁制作的課程學習指南，學習視頻課程后自己整理的學習筆記，會持續更新內容。何為網易微專業？微專業是由網易云課堂聯合各領域知名專家，以就業為導向，精心打造的職業培訓方案。按要求完成學習，考試通過可獲得專業認定證書，令你求職或加薪多一份獨特優...

劉東 2019-08-01 15:00 評論0 收藏0
ajax學習筆記

摘要：對象是的基礎使用它的和方法將請求發送到服務器或，請求的類型文件在服務器上的位置為異步，為同步將數據發送給服務器，僅用于方法當設為時，即為異步時，規定響應處于事件中的就緒函數的三個重要屬性每次發生改變時就會調用這個函數存儲著的狀態，從到發生變 XMLHttpRequest對象是ajax的基礎使用它的open()和send()方法將請求發送到服務器 var a=3; var requ...

LeviDing 2019-08-20 14:29 評論0 收藏0