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

時間 2019-12-04

標籤前端單排 ajax 一期欄目 Ajax 简体版

原文原文鏈接

ajax的使用一直是以jQuery爲主，對於底層的實現有點不明覺厲。做爲一個有追求的前端，這是不能夠接受的。便讓咱們今晚好好走進ajax的心裏世界。前端

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
而後來寫一個簡單的demoapp

<span id="ajaxButton" style="cursor: pointer; text-decoration: underline">
  Make a request
</span>


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

    if (!httpRequest) {
        alert('Giving up :( (Cannot create an XMLHTTP instance');
        return false;
    }
    httpRequest.onreaystatechange = function() {
        if (httpRequest.readyState === 4) {
            if (httpRequest.status === 200) {
                alert(httpRequest.responseText);
            } else {
                alert('There was a problem with the request.');
            }
        }
    }
    httpRequest.open('GET', url);
    httpRequest.send();

})()
</script>

愛心小貼士：異步

若是發送請求以後返回的數據格式爲XML時，那麼在IE中須要設置http-header頭， "Content-Type": application/xml 否則IE會拋出一個"Object Expected"的錯誤
若是你沒有http-header Cache-Control: no-cache, 那麼瀏覽器則會緩存請求，不會再發送新的請求。固然你還可使用時間戳之類的形式來使每次請求的url不一樣，來繞過緩存問題。
在閉包中進行ajax相關的操做。

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

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.');
        }
    }
}