本文已搬家到筆者自己的部落格嘍，有興趣的可以點這個連結～

前言

從今天開始的文章會分別用三種不同的方式來實作 非同步 ，早期 jQuery 還沒有出來之前，要實作 AJAX 只能倚賴 XMLHttpRequest ，寫法會長類似這樣。

var xhttp = new XMLHttpRequest();
// 當readyState改變就會呼叫此function
xhttp.onreadystatechange = function() {
  // readyState === 4 代表 DONE、status === 200 代表成功收到資料
  if (this.readyState === 4 && this.status === 200) {
    // do something
  }
};
xhttp.open("GET", "url", true);
xhttp.send();

從上面的程式碼可以發現真的蠻麻煩的，寫了一大堆程式碼而且還要進行 readyState 以及 http status code 的判斷，所以早期 AJAX 的寫法真的讓人不敢恭維，直到 jQuery 問世後才漸漸地讓人接受 AJAX ，筆者今天就是要來介紹 jQuery 的 AJAX API ，廢話不多說馬上開始吧！

http method

在開始正式進入 AJAX 實作之前先來了解一下什麼是 http method 吧！

在前言的 XMLHttpRequest 範例程式碼可以看到 xhttp.open("GET", "url", true);，這行程式碼裡面提到的 GET 其實就是一種 http method 喔！

想要將資料從前端傳到後端、後端傳到前端都必須要依賴 http method 提供的方法來進行資料的傳輸，而 http method 最常用的方法可以分為以下四種。

• GET

  GET 的請求應用於從後端取得資料。

• POST

  POST 的請求用於提交資料至後端。

• PATCH

  PATCH 的請求用於套用資料至後端修改。

• DELETE

  DELETE 的請求用於刪除後端指定資料。

HTTP Status Code

HTTP status code 是用來判斷前後端在傳遞資料的過程中是否成功的重要狀態代碼，而 HTTP status code 可分為以下四大類，這邊筆者就不一一列出每個系列裡面的 status code 了，只列出幾個在判斷上面比較常用到的 status code 。

• 2XX系列

  2XX系列代表 server 端有成功接受到請求。

  • 200 OK

    請求已成功，且馬上回傳資料。

• 3XX系列

  3XX系列代表重新導向，這類的 status code 需要 client 端進行更進一步的操作才能完成請求，譬如登入後會重新導向至首頁之類的操作。

• 4XX系列

  4XX系列代表 client 端有錯誤。

  • 404 Not Found

    這個 status code 想必大家應該都看過吧XD

    只要頁面不存在通常都會顯示這段文字，其實我們在瀏覽網頁的過程中就是一種請求喔！而這個請求在 http method 裡就是 GET 的表現，所以只要看到 404 Not Found 基本上就是前端有問題了。

• 5XX系列

  5XX系列代表 server 端在處理請求的過程中有錯誤，看到這類代表不用檢查自己程式碼是否有寫錯，趕快跟後端工程師反應吧XD

$.ajax()

在講完那麼多的 http 相關概念後終於要正式進入 $.ajax() 的教學了，不得不說前後端溝通真的要先了解一堆基礎知識XD

$.ajax() 為 jQuery 自己創造出來用來進行 AJAX 的 API ，寫法比上面介紹的 XMLHttpRequest 來的精簡多了， $.ajax() 要寫的也不是 callback function 而是 JSON Object ，所以也讓更多人開始利用 $.ajax() 來進行前後端的資料傳輸。

$.ajax() 的參數基本上會用到的有以下幾種：

• url

  API 網址，也可以寫上檔案名稱，這邊的檔案名稱可以用絕對路徑或相對路徑來填寫。

• type

  填入 http method ，預設為 GET 。

• success

  當回傳 200 OK 時就會進入 success 這邊要填寫 callback function 來處理回傳後的資料。

• error

  只要不是回傳成功就會進入 error 這邊要填寫 callback function 來處理回傳後的錯誤資料。

總結

最後讓我們簡單練習一下 $.ajax() 的寫法吧！這邊筆者分享一個網站，裡面提供了非常多的 public apis，讀者可以隨便找一個不用認證就可以使用的 API 來練習一下 AJAX ，而筆者使用的是 iTunes Search API，最後就用這個小練習來總結一下上面提到的 $.ajax() 吧！