iT邦幫忙

2021 iThome 鐵人賽

DAY 6
0

阿修的說文解字

AJAX 的全名是 Asynchronous JavaScript and XML
Asynchronous JavaScript 昨天介紹過了,就是 JS 的非同步處理。
XML 是一種標記語言,一種用來傳輸以及儲存資料的格式,不過現在網頁很少用到了,
現在大部分都是使用 JSON 的格式來傳輸、儲存,而摻在一起就可以做成 AJAX 啦。
簡單解釋 AJAX 就是原本傳送資料需要換頁才能做到,現在可以透過 JS 幫你傳送資料,而且不會換頁。
利用非同步處理的方式來傳送資料可以讓使用者的體驗變好。
當你在瀏覽網頁時,點擊網頁上的超連結,網頁不是「整張」更新而是只有「局部」更新,
那麼該網頁就很有可能有採用了AJAX的方法。

範例

  1. 當你在 IG 上按讚或是留言時,不會跳轉整個畫面,而是只更新那則貼文的狀態。
  2. Rails 的 Turbolinks 就是使用 AJAX 來換頁的,實際上他只抽換 HTML body 的內容,並非整個換頁。
  3. 在 Rails 的寫法(1):使用 js.erb 檔來從局部渲染頁面(render partial),而不是跳轉到其他頁面(redirect_to)。
  4. 在 Rails 的寫法(2):可以藉由 XHR、fetch、axios、Rails.ajax 來打 API,讓網頁能局部更新。

非同步請求資料的方法

每次在 IG 上點擊按讚都是發送一個 XHR = AJAX。
XHR 的全名是 XMLHttpRequest,是一種古老的 API。
使用 XHR 物件可以在自己網頁上讀取遠端的資料,最常見的用途是在註冊頁面驗證「用戶名」及「信箱」是否被重複使用。
除了 XHR 以外,fetch、axios、Rails.ajax 都是非同步請求資料的方法。
XHR 是最原始的方法,使用起來也比較繁瑣,需要設定很多值。
fetch 會比 XHR 好用一點,而 axios 跟 ajax 又比 fetch 更好用。

參考:
[1][JS] AJAX 筆記
[2]Ajax


上一篇
Day 05 JavaScript 同步(Sync) vs 非同步(Async)處理
下一篇
Day 07 JavaScript/Rails API
系列文
網頁前後端寶石庫-礦坑補完計畫30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言