成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

Mertens / 856人閱讀

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

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

ajax 兩大特性：

在不刷新頁面的情況下向服務(wù)器端發(fā)送請求

從服務(wù)器端接收數(shù)據(jù)，并進行對應(yīng)的邏輯處理

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

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

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

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

readyState 說明

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

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

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

3 ("LOADING",動態(tài)交互，即data數(shù)據(jù)已經(jīng)接收到了，但是responseText內(nèi)容會獲取)

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

Response 屬性

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

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

responseType(返回響應(yīng)的狀態(tài)， 比如"loading","done")

response (返回響應(yīng)的具體內(nèi)容)

responseText(返回響應(yīng)的具體文本內(nèi)容)

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


  Make a request

愛心小貼士：

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

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

在閉包中進行ajax相關(guān)的操作。

返回的數(shù)據(jù)為JSON時，應(yīng)對數(shù)據(jù)進行相應(yīng)的解析

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

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

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/87537.html

相關(guān)文章

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

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

    xiaolinbang 評論0 收藏0

  • 從零單排之CSS3

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

    劉福 評論0 收藏0

  • 前端從零單排之LESS（第四期)

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

    Drummor 評論0 收藏0

  • 從零開始單排學(xué)設(shè)計模式「UML類圖」定級賽

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

    Loong_T 評論0 收藏0

  • 從零單排系列之寫一個類vue框架(一)

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

    raise_yang 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<