前端從零單排之AJAX(第一期)

Mertens 發布于2019-08-21 12:17 / 813人閱讀

摘要：作為一個有追求的前端，這是不可以接受的。兩大特性在不刷新頁面的情況下向服務器端發送請求從服務器端接收數據，并進行對應的邏輯處理請求流程首先先建立一個異步請求對象第一步的對象設置已經好了。在閉包中進行相關的操作。

ajax的使用一直是以jQuery為主，對于底層的實現有點不明覺厲。作為一個有追求的前端，這是不可以接受的。便讓我們今晚好好走進ajax的內心世界。

ajax 兩大特性：

在不刷新頁面的情況下向服務器端發送請求

從服務器端接收數據，并進行對應的邏輯處理

ajax 請求流程
step-1
首先先建立一個異步請求對象

var httpRequest
if(window.XMLHttpRequest) {
   httpRequest = new XMLHttpRequest();
} else if(window.ActiveXObject) {
   httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}

step-2
第一步的httpRequest對象設置已經好了。然后我們要做的就是設置我們的請求被響應時的動作

httpRequest.onreadystatechange = function(){
    if(httpRequest.readyState === 4) {
       // everything is good, the response is received   
    } else {
      // still not ready
    }
}

readyState 說明

0 （"UNSENT",未初始化，即httpRequest對象已創建，但是open()方法還沒調用）

1 ("OPENED",載入中，即請求已經open()過了，但是send()方法還沒調用)

2 ("HEADERS_RECEIVED",已載入，即send()過了，但是data數據還沒返回)

3 ("LOADING",動態交互，即data數據已經接收到了，但是responseText內容會獲取)

4 ("DONE",完成，即全部data數據接收成功)

Response 屬性

status (返回狀態碼，比如1/2/3/4/500)

statusText(返回狀態文本，比如OK)

responseType(返回響應的狀態，比如"loading","done")

response (返回響應的具體內容)

responseText(返回響應的具體文本內容)

step-3
然后來寫一個簡單的demo


  Make a request

愛心小貼士：

如果發送請求之后返回的數據格式為XML時，那么在IE中需要設置http-header頭， "Content-Type": application/xml 不然IE會拋出一個"Object Expected"的錯誤

如果你沒有http-header Cache-Control: no-cache, 那么瀏覽器則會緩存請求，不會再發送新的請求。當然你還可以使用時間戳之類的形式來使每次請求的url不同，來繞過緩存問題。

在閉包中進行ajax相關的操作。

返回的數據為JSON時，應對數據進行相應的解析

function alertContents() {
    if(httpRequest.readyState === 4) {
        if(httpRequest.status === 200) {
            var response = JSON.parse(httpRequest.responseText);
        } else {
            alert("There was s problem with the request.");
        }
    }
}

參考資料

MDN AJAX

MDN AJAX Getting Started

Ajax Mistakes

GPU云服務器云服務器從零開始搭建前端數據監控系統 web前端 ajax ajax前端測試工具 ajax前端數據數組代碼

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

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

前端從零單排之Gulp(第二期)

摘要：是個類似于的前端工作流工具，今天就簡單的介紹一下和一些我的使用感受在中安裝全局切換到你的前端工作目錄下確保你的前端工作目錄下有這個文件然后就已經安裝好了，馬上就可以進入簡單的配置了。但是在使用的工作之中會遇到一些問題。 gulp 是個類似于grunt的前端工作流工具，今天就簡單的介紹一下gulp和一些我的使用感受 Installing gulp 在Terminal中安裝全局gulp...

xiaolinbang 2019-08-21 12:17 評論0 收藏0
從零單排之CSS3

摘要：概覽大法好今夜秋風陣陣，霧霾層層。布局選擇多媒體，字體響應就是屌。說起來條目繁多，乍看之下與之前比起來復雜了好多。圓角指的即使一般正式的寫法為效果請看任意一個按鈕即可寫到此處不禁跟大家說，最好還是配合預編譯來寫。 CSS3 概覽 showImg(https://segmentfault.com/img/bVddDt); CSS3大法好今夜秋風陣陣，霧霾層層。不禁讓人想作詩，不過...

劉福 2019-08-28 17:59 評論0 收藏0
前端從零單排之LESS（第四期)

摘要：函數更多的用處在于封裝一些需要加前綴的屬性，或是多個參數的屬性，同時命名一定要足夠的語義化。適當嵌套，以保持的優雅。有時要考慮兼容性，需要避免編譯某條屬性，方法即在值的前面加一個符號具體如下安裝同時推薦在線編譯網站，能夠實時看到效果。 LESS 是一門CSS預編譯語言，猶記得當初打算使用CSS預編譯語言的時候，可選的有SASS、LESS、Stylus三門，剛好那個時候在學習bootst...

Drummor 2019-08-28 17:55 評論0 收藏0
從零開始單排學設計模式「UML類圖」定級賽

摘要：從零開始單排學設計模式的國服排位之旅，今天正式開啟目前段位定級賽這篇文章來總結下類圖，本來不打算講類圖的，因為我在學習設計模式的時候，一遇到有關的就會自動忽略，一看感覺就很復雜。關聯關系用實現箭頭來表示。閱讀本文大概需要 3.5 分鐘。本篇是設計模式系列的開篇，雖然之前也寫過相應的文章，但是因為種種原因后來斷掉了，而且發現之前寫的內容也很渣，不夠系統。所以現在打算重寫，加上距離現...

Loong_T 2019-08-16 15:04 評論0 收藏0
從零單排系列之寫一個類vue框架(一)

摘要：因為我希望這是一個系列的文章，所以開始之前先簡單說一下，我幾乎沒用過這個框架寫過項目，所以文章中難免會有一些比較外行的說法。先整理用法，然后再整理自己的框架。因為我希望這是一個系列的文章，所以開始之前先簡單說一下，我幾乎沒用過vue這個框架寫過項目，所以文章中難免會有一些比較外行的說法。當然，我用過一些時間的angular，也曾經解決過一些同行們vue方面的問題。所以如果有人原因看的...

raise_yang 2019-08-23 18:26 評論0 收藏0