iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 27
1
Modern Web

JavaScript基本功修煉系列 第 27

JavaScript基本功修練:Day27 - AJAX基本概念

對於新手來說,AJAX課題裏比較難懂的部分應該是背後的運作概念,而非程式碼本身。這個課題會分開幾篇,這篇會先整理有關基本概念與一些術語的意思,下篇開始就會集中講實際操作部分(Fetch、axios等等)以及串接API時的常見問題及處理。

今天會整理以下的知識:

  • AJAX基本概念
  • API的意思
  • HTTP請求方法
  • HTTP狀態碼

AJAX基本概念

  • AJAX,英文是Asynchronous JavaScript and XML,Asynchronous是非同步,意思是整個技術都是以非同步方式執行
  • AJAX是一個技術,不是一種格式或語言
  • AJAX技術可以使我們不用刷新頁面,就能更新頁面的資料,令使用者在瀏覽網站時不會被中斷
  • AJAX技術可以更新頁面某部分的資料,例如當使用者按下按鈕後,伺服器只會傳回某部分的資料,我們只需要更新該部分的資料。這樣可降低資料量的傳送。
  • 用AJAX技術所傳送的資料格式可以不同,例如XMLJSON(最常見)

整體流程:

瀏覽器 ----(HTTP request)----> 伺服器 <--> 資料庫
瀏覽器 <----(HTTP response)---- 伺服器 <--> 資料庫

在網頁使用AJAX技術與伺服器互動,最舊的方法是透過XMLhttprequest語法所產生的物件來完成。但因為現時在處理較複雜的需求時,XMLhttprequest語法結構會變得不好閱讀,所以現時比較建議用fetchaxios套件等來取代XMLhttprequest

API的意思

在AJAX這個課題裏,我們經常會聽到「API」這個術語,也常常聽到「API接口」這個詞,它們到底是代表什麼呢?這裏推薦Huli詳細但不難懂的文章,這篇文章真的拯救了對API一知半解的我QQ

文中以USB介面比喻API,USB介面使我們可以連接USB隨身碟和電腦(縱使市面上有各種不同廠商生產的USB隨身碟)。API也一樣,它是用來「串接一個程式和另一個程式」,例子如下:

  • 我的網頁可以用Facebook登入,於是我去串接Facebook提供的API
  • 我的網頁要加入客製化的Google Map,於是我去串接Google Map提供的API

以上例子中,Facebook登入和Google Map地圖,這些都是它們公司自己的功能,如果我要在我寫的程式裏都有這些功能,我就要去串接這些公司提供的API。

這時候我們需要查看這些公司所提供的API文件(API documentation),看看如何串接它們的API。我們稱這種API做Web API,因為我們是透過網絡來傳送資料。這些文件會提供一個網址,這個網址就是我們常常說的「API接口」。同時,文件也會提及我們需要填上的參數,使我們可以向這個網址發出請求,最後令伺服器傳回資料給我們。

例如我想在我的網頁顯示GitHub上某個專案的commit紀錄。在GitHub的API文件中,我會找到它提供的API接口,{}裏的東西是由自己填寫。

此外,圖中可見GitHub也會提供參數,讓我們能更針對去找出特定資料。例如我可以寫成以下的URL,當中用&去區隔開不同的參數:

https://api.github.com/repos/vuejs/vue/commits?per_page=3&sha=dev

以上寫法就是每頁顯示3筆在dev分支的commit紀錄。

HTTP傳輸協定

在談及HTTP方法前,我們需要了解什麼是HTTP。HTTP是一個協定,全寫是超文本傳輸協定 (Hypertext Transfer Protocol)。它統一了客戶端(client side)與伺服器(server side)之間傳輸資料的方法,例如我要瀏覽Facebook頁面,就會做以下的事:

  • 我在瀏覽器輸入Facebook網址,向Facebook伺服器端送出request
  • Facebook伺服器端收到request,查看網址是否存在
  • Facebook伺服器送回response

我這邊的瀏覽器要按特定規範來發出request,之後伺服器也要按特定規範來送回response,這就是HTTP協定。

整個流程就是本文一開始提及的AJAX流程:

瀏覽器 ----(HTTP request)----> 伺服器 <--> 資料庫
瀏覽器 <----(HTTP response)---- 伺服器 <--> 資料庫

HTTP要求(HTTP request)

當我們在瀏覽器發出HTTP要求,就會用到在HTTP協定的規範中定義的不同HTTP請求方法,最常見的有:

  • GET(最常用):請求特定資料
  • POST:提交資料(例子:註冊帳戶、驗證資料等)
  • PUT:取代特定資料,通常是更新整個資料
  • PATCH:修改特定資料,通常是更新部分資料
  • DELETE:刪除特定資料

PUTPATCH都是用來更新資料。差異之處是,PUT是取代整個資料,而PATCH只是更新部分資料。另外注意,HTML的的表單只能用GET或POST方法,不能以此兩個以外的方法。

HTTP訊息(HTTP response)裏的 HTTP狀應碼

伺服器會根據瀏覽器提出的HTTP要求回傳相應的資料。此外,當中也會一併回傳HTTP狀態碼,用作顯示資料傳送的狀態。

以下簡單劃分不同HTTP狀態碼:

  • 2xx:成功 (OK)
  • 3xx:重新導向 (Redirection)
  • 4xx:用戶端錯誤 (Client Error)
  • 5xx:伺服器錯誤 (Server Error)

詳細的HTTP狀態碼可看這篇

我們可以利用這些狀態碼來做錯誤處理。例如在學習XMLhttpresquest時,我們常常會透過if...else判斷status === 200,從而處理錯誤情況:

const xhr = new XMLHttpRequest();
xhr.open('get','https://randomuser.me/api/',true);
xhr.send(null);

//狀態碼:200代表成功。我們利用此狀態碼去做判斷,做到錯誤處理
xhr.onload = () => {
    if(xhr.status === 200){
        console.log(JSON.parse(xhr.responseText)); 
    }else{
        console.log('請求失敗!')
    }
}

總結

AJAX基本概念:

  • AJAX是一個非同步執行的技術
  • 不用刷新頁面就能更新網頁資料,不能中斷使用者瀏覽網頁

API意思:

  • 程式與程式之間的串接
  • API接口是一個網址

HTTP協定:

  • 客戶端與伺服器之間傳輸資料的規範
  • 瀏覽器向伺服器提出HTTP要求(GET、POST、DELETE...)
  • 伺服器除了回傳相應資料,也會回傳HTTP狀態碼

參考資料

AJAX 完整解說系列:基礎觀念
AJAX與Fetch API
輕鬆理解 Ajax 與跨來源請求


上一篇
JavaScript基本功修練:Day26 - Promise的語法糖:async/await
下一篇
JavaScript基本功修練:Day28 - Fetch練習(GET和POST請求)
系列文
JavaScript基本功修煉31

尚未有邦友留言

立即登入留言