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

Mertens 發(fā)布于2019-08-21 12:17 / 810人閱讀

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

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

ajax 兩大特性：

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

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

ajax 請(qǐng)求流程
step-1
首先先建立一個(gè)異步請(qǐng)求對(duì)象

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

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

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

readyState 說(shuō)明

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

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

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

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

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
然后來(lái)寫(xiě)一個(gè)簡(jiǎn)單的demo


  Make a request

愛(ài)心小貼士：

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

如果你沒(méi)有http-header Cache-Control: no-cache, 那么瀏覽器則會(huì)緩存請(qǐng)求，不會(huì)再發(fā)送新的請(qǐng)求。當(dāng)然你還可以使用時(shí)間戳之類的形式來(lái)使每次請(qǐng)求的url不同，來(lái)繞過(guò)緩存問(wèn)題。

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

返回的數(shù)據(jù)為JSON時(shí)，應(yīng)對(duì)數(shù)據(jù)進(jìn)行相應(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