JavaScript- AJAX執行概念

本文总阅读量次

AJAX執行三步驟

  1. 取槍：產生一個XMLHttpRequest
  2. 上膛：取得要讀取的網址，get(讀取資料)、傳送資料到伺服器
  3. 擊發：傳送send
  4. 回膛：回傳資料到瀏覽器

步驟一（取槍）：產生一個XMLHttpRequest

1
2
3
4

var xhr = new XMLHttpRequest();
xhr.open('get','https://vince.project/data.json',ture)
xhr.send(null);

我們可以經由console得知現在哪個階層

  • 0 - 產生XMLHttpRequest，但沒有連結要撈取的資料
  • 1 - 使用Open()，未傳送資料
  • 2 - 偵測到有send指令
  • 3 - loading
  • 4 - 完成取得資料

步驟二（上膛）：取得要讀取的網址，get(讀取資料)、傳送資料到伺服器

1
xhr.open(‘get’,‘https://vince.project/data.json’,ture)
同步與非同步定義

  • true非同步：
    不會等資料傳回，就讓程式繼續往下跑，等到回傳才會自動回傳，如果載入的資料量入過大，不可能等到資料全部上傳後才顯示程式，因此仍會使用true。

  • false同步：
    等資料傳回來之後才會讓程式碼繼續往下跑

我們可以使用onload事件，確定資料有回傳之後才執行函數內容

1
2
3
4
5
6
7

xhr.onload = function(){
    console.log(xhr.responseText) //顯示資料訊息
    var str = JSON.parse(xhr.responseText); //將回傳資料傳到瀏覽器-字串轉陣列：JSON.parse()
    document.querySelector('.message') //HTML的文字訊息 class="message"
    .textContent = str[0].name //將要抓取的資料顯示於頁面
}

!!!需注意CORS 跨網域撈取資料

一般來說跨網域需要詢問對方有沒有開啟CORS，開啟才有辦法抓取資料，取得API也是相似，ex.高雄市公開json資料便沒有開啟此功能。可使用偵測網址查閱狀態：http://test-cors.org/