前言

今日進行 AJAX 的觀念以及簡單的操作

AJAX

• AJAX = Asynchronous JavaScript And XML = 使用非同步資料請求的縮寫，代表非同步 JS 和 XML
  • 可以允許向伺服器要求資料，但不需要重新載入整個頁面，資料通常以 JSON 的格式傳遞
  • 如： google 搜尋時會自動出現相關文字；輸入帳號頁面會進行檢查是否正確或字數滿足；點選購物車會更新並顯示已經加入

遠端撈取資料

• 資料請求流程：

  • var xhr = new XMLHttpRequest();
  • xhr.open('get','test.json',true);
  • xhr.send(null);

• XMLHttpRequest()：用來建立 AJAX 請求，使用 var xhr = new XMLHttpRequest(); 建立(變數 xhr 名稱可自訂)

• xhr.open('格式','網址',BooLean)

  • '格式'：get 代表讀取資料，post 代表傳送資料
  • '網址'：資料的路徑
  • BooLean：true 代表非同步，不會等資料回傳就繼續下一個動作，一般預設值； false 代表同步，會等資料回傳才進行下一步

• xhr.send('資訊')：若無需要，則使用 null 代表空值

• xhr.readyState：可用 readyState 確認狀態

  • 狀態 0 (UNSENT)：代表已經產生一個 XMLHttpRequest，但是還沒有連結你要撈的資料(代表尚未 open())
  • 狀態 1 (OPENED)：代表已經使用 open() 讀取網址，但還沒有傳送
  • 狀態 2 (HEADERS_RECEIVED)：代表已經使用 send()
  • 狀態 3 (LOADING)：資料目前讀取下載中
  • 狀態 4 (DONE)：已經撈到資料了，數據已完全接收
  • 參考：XMLHttpRequest.readyState
  • 參考：XMLHttpRequest — JavaScript 發送 HTTP 請求 (I)

實作

• 利用六角的 API 進行 get 練習：https://hexschool.github.io/ajaxHomework/data.json

• 開啟 chrome 的 console 進行以下確認

  • var xhr = new XMLHttpRequest();
  • xhr.readyState; // 顯示 0
  • xhr.open('get','https://hexschool.github.io/ajaxHomework/data.json',true);
  • xhr.readyState; // 顯示 1
  • xhr.send(null);
  • xhr.readyState; // 顯示 4
  • xhr.response; // 顯示 "[{"name":"王小名"}]"

• 一開始實作 send() 會跳錯誤 net::ERR_BLOCKED_BY_CLIENT，頁面是練習的 index.html ，另開一個 chrome 的新頁面卻可以成功，經確認後應該是開啟廣告過濾工具的關係，關閉後即可正常 send()

  • 參考：Chrome等瀏覽器下出現net::ERR_BLOCKED_BY_CLIENT的解決辦法

• 送出 send() 後，狀態為 4 (done)，要再次送出send()會要求要先 open() 讓狀態為 1 (opened) 才可以繼續

次回

繼續說明 AJAX