用 AJAX 跟 Form 表單發 request 的差異

小知識大學問。

Form

在 devtool 上的 type 會是：document

最大的問題是「會換頁」，原因是瀏覽器一拿到 response 時就會 render 出來。

另外要注意這種發 request 的方法是透過 HTML，跟 JavaScript 一點關係都沒有。

AJAX

在 devtool 上的 type 會是：xhr

最大的優點是「不會換頁」，瀏覽器拿到 response 後會「傳給 JavaScript」而不是直接 render 出來。

簡單示範：

const request = new XMLHttpRequest()

// 拿到 response 的處理
request.addEventListener('load', function() {
      if (request.status >= 200 && request.status < 400) {
        console.log('success')
        console.log(request.responseText)
      } else {
        console.log('err')\
  }
})
// 沒有拿到 response，代表出錯
request.addEventListener('error', function() {
  console.log('err')
})
/*
  @param1: 要使用的 HTTP method
  @param2: 要發到哪裡
  @param3: 非同步（true） or 同步（false）
*/
request.open('GET', 'https://reqres.in/api/users/1', true)
/* 
  執行到這一行就會發 request 了，
  所以 event listener 一定要寫在前面
*/
request.send()

要注意一下 response 會被綁在 XMLHttpRequest 的屬性上，不像在 Node.js 裡用 request 套件是傳到 callback 裡面。