iT邦幫忙

1

JavaScript 基礎知識 - Ajax(上)

當我們在重新刷新一個頁面時,即使使用者沒新增任何內容,瀏覽器也會重新的去撈取許多資料
為了減輕這樣的 loading,於是就有了 Ajax 技術

例如,在任何平台註冊一個帳號時,要檢查帳號是否有被使用過,我們只需用 Ajax 技術,詢問遠端的伺服器,不同於以往要重新刷新頁面詢問遠端伺服器,再撈取相同的資料

首先我們先建立一個 XMLHttpRequest 物件:
這裡依照不同的步驟分別在 console 查看 XMLHttpRequest 物件的 readyState 狀態

const xhr = new XMLHttpRequest();

此時在 console 查看,readyState 會是 0,代表已經新增了一個 XMLHttpRequest 物件,但還沒連結到要撈取的資料

接著使用 open 方法:

xhr.open('get','https://hexschool.github.io/ajaxHomework/data.json',true);

而 open() 分別要帶三個參數
第一個是 get(讀取資料) 或 post(傳送資料)
第二個是要連結的網址
第三個是同步與非同步(後面在說明)
這裡我們要讀取資料所以使用 get

此時在 console 查看,readyState 會是 1,代表已經用了 open(),但還沒有把資料傳送過去

接著使用 send 方法:

xhr.send(null);

因為我們只是要讀取資料而已,所以傳送空值
此時在 console 查看,readyState 會是 4,代表已經完全撈取到資料,數據已經接收到
這時候查看 responseText 會發現資料已經被帶進來了

另外補充 readyState 的 2 & 3:
readyState = 2,代表偵測到用了 send()
readyState = 3,代表資料過於龐大還在 loading 中

上述撈取完資料後,接著我們就要去做資料的處理
這時候如果在 console 查看 xhr.responseText 會發現是空的
這個就是非同步的觀念,也是 open() 的第三個參數
當參數為 true 代表非同步,不會等資料傳送回來,就會讓程式碼繼續往下跑,等到回傳才會自動回傳
當參數為 false 代表同步,等資料傳送回來,才會讓程式碼繼續往下跑

當然如果要快速解決上面的問題,把第三個參數改成 false 即可
但許多情況會採用非同步的設計,因為有時候撈取的資料過大,不可能等資料傳送回來才去執行後面的程式碼

所以可以使用 onload 方法,代表資料成功傳送回來即會觸發此方法

xhr.onload = function(){
    let str = JSON.parse(xhr.responseText);
    console.log(str[0].name);
}

這時候 console 就會有資料了
但是傳送回來的資料型態會是字串,需把它轉回去 JSON 格式來做處理
所以上述使用 JSON.parse() 來轉回去 JSON 格式,進行資料的處理

綜合以上的結論:

  1. 建立一個 XMLHttpRequest
  2. 傳送資料到遠端伺服器
  3. 回傳資料到自己的瀏覽器
  4. 處理撈取到的資料

補充:
在執行 onload 的時候,可以透過判斷 xhr.status 的狀態碼,來進一步確認資料是否有撈取成功,若為 200 代表成功,404 則為失敗

xhr.onload = function(){
    if(xhr.status == 200){
        ....
    }
}

尚未有邦友留言

立即登入留言