iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 27
0
Modern Web

用30天了解javascript系列 第 27

[用30天了解javascript]Day27.AJAX

Asynchronous JavaScript and XML(AJAX,非同步的JavaScript與XML技術)

  • 不需要重新載入整個頁面,就能對網頁某部分做更新
  • 異步發送、請求數據,快速建立動態網頁的技術,減少等待時間,提高用戶體驗
  • 常用的 AJAX 資料交換格式是 JSON

AJAX運作原理

通過XMLHttpRequest對象來向服務器發異步請求,從服務器獲得數據,然後用JavaScript來操作DOM而更新頁面
https://ithelp.ithome.com.tw/upload/images/20200927/201120536HNvzIru9a.png
圖片來源:https://www.cnblogs.com/peng19920430/p/10958765.html

AJAX使用

XHR對象

  1. 創建Ajax核心對象XMLHttpRequest

    //IE9及以上
    var xhr = new XMLHttpRequest()
    //IE9以下
    var xhr = new ActiveXObject('Mricosoft.XMLHTTP')
    
  2. 向伺服器發送請求

    • .open()

      請求類型,url是否以同步/非同步請求

      xhr.open(method、url、async)
      

      method:get(讀取資料)、post(傳送資料到伺服器)

      url:api請求網址
      async:true(非同步): 不會資料傳回來,就讓程式繼續往下跑,等到回傳才會自動回傳;false(同步): 會等資料傳回來,才讓程式繼續往下跑

    • .send()

      請求發送到伺服器

      xhr.send(string)
      

XHR接收回應

  • responseXML:獲得XML形式
  • responseText:獲得字串形式

XHR狀態

readyState?

用來標示當前XMLHttpRequest處於麼狀態,共有5個值

0 - 以產生一個XMLHttpRequest,但還沒有連結你要的資料
1 - 你用了open(),但你還沒有把資料傳過去
2 - 偵測到你有用send
3 - loading 中
4 - 你撈到資料了,數據已經完全接受到了

status?

HTTP狀態碼,是伺服器對瀏覽器請求的回應,分別用三個數字表示,第一個數字為狀態碼類型。共分為五種

  • 1xx (Informational) — 資
  • 2xx (Successful) — 成功
  • 3xx (Redirection) — 重新導向
  • 4xx (Client Error) — 客戶端 錯誤
  • 5xx (Server Error) — 伺服端 錯誤

http狀態碼詳細資訊可參考w3school :https://www.w3school.com.cn/tags/html_ref_httpmessages.asp


上一篇
[用30天了解javascript]Day26.傳輸資料格式JSON 、XML
下一篇
[ 用30天了解javascript]Day28.模板字串(Template literals)
系列文
用30天了解javascript30

尚未有邦友留言

立即登入留言