JavaScript - Ajax

非同步 JavaScript 和 XML (Ajax) 代表了一種 Web 開發技術：它使伺服器和網頁之間能夠進行動態、互動式的通訊，而無需重新載入整個頁面。描述符“非同步”強調資料交換可以在後臺發生，而不會中斷使用者體驗。Ajax 使得能夠即時更新網頁的特定部分，而不是空閒地等待整個頁面重新整理，從而產生更流暢、更響應的介面。

Ajax 如何工作？

在無需完全重新載入頁面的情況下實現動態更新的關鍵作用在於 JavaScript 中 Ajax 功能內的 XMLHttpRequest 物件。此特定過程允許伺服器和網頁之間進行非同步通訊。當接收到此物件傳送的請求時，伺服器會以資料（通常為 JSON 或 XML 格式）進行響應。處理這些資料是 JavaScript 的任務；它會即時更新網頁的特定部分。非同步特性是現代 Web 開發的關鍵特性，它確保這些操作在後臺以不顯眼的方式發生，從而透過允許非同步獲取和傳送資料來增強互動性。

在這裡，我們將探索 Ajax 以更深入地瞭解它。

有 4 種方法可以進行 Ajax 呼叫或在 JavaScript 中實現 Ajax，它們是

XMLHttpRequest（較舊的方法）
Fetch API（現代方法）
Axios（用於 HTTP 請求的庫）
jQuery Ajax

為了理解起見，我們將在所有示例中使用 JSONPlaceholder。

JSONPlaceholder 是一款開源的模擬 REST API 提供商，它允許開發人員測試其原型應用程式。它為各種資源（如使用者、帖子、評論等）返回虛假/虛擬資料。JSONPlaceholder 的 API 端點可以使用 HTTP 請求建立，它們將模擬真實 API 的特性，而無需任何身份驗證。我們在這裡的目標是使用這些 API/端點來理解 Javascript-Ajax。

使用 XMLHttpRequest

使用 XMLHttpRequest 的原生 JavaScript 方法是非同步請求的最古老方法。它依賴於 XMLHttpRequest 物件來建立和傳送 HTTP 請求。此方法涉及設定回撥函式以處理請求的各種狀態，使其適用於更簡單的場景。但是，與更現代的方法相比，它有一些侷限性。

示例

<!DOCTYPE html>
<html lang="en">
<body>
<p>Native XMLHttpRequest Example</p>
<button onclick="nativeAjax()">Make Request</button>
<pre id="result"></pre>
<script>
  function nativeAjax() {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'https://jsonplaceholder.typicode.com/users/2', true);
    xhr.onreadystatechange = function () {
      if (xhr.readyState == 4 && xhr.status == 200) {
        var responseData = JSON.stringify(JSON.parse(xhr.responseText), null, 2);
        document.getElementById('result').innerText = 'Native XMLHttpRequest:\n' + responseData;
      }
    };
    xhr.send();
  }
</script>
</body>
</html>

使用 Fetch API

Fetch API 提供了 XMLHttpRequest 的現代替代方案，它提供了更直接、更強大的語法；它返回 Promise，從而增強了對非同步操作的直觀處理。支援大量 HTTP 方法和標頭：這為開發人員提供了一種更簡潔、更簡潔的方法來發出非同步請求。當代 JavaScript 應用程式通常因為它清晰易用而更喜歡它。

示例

<!DOCTYPE html>
<html>
<body>
<h1>Fetch API Example</h1>
<button onclick="fetchApi()">Make Request</button>
<pre id="result"></pre>
<script>
  function fetchApi() {
    fetch('https://jsonplaceholder.typicode.com/users/3')
      .then(response => {
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        return response.json();
      })
      .then(data => {
        var formattedData = JSON.stringify(data, null, 2);
        document.getElementById('result').innerText = 'Fetch API:\n' + formattedData;
      })
      .catch(error => {
        document.getElementById('result').innerText = 'Fetch API Error: ' + error.message;
      });
  }
</script>
</body>
</html>

使用 Axios

Axios 是一款用於發出 HTTP 請求的流行 JavaScript 庫。它的流行很大程度上歸因於其簡潔明瞭的語法：構建在 Promise 之上；此外，它還擁有自動 JSON 資料轉換支援功能，使其在該領域的庫中脫穎而出。Axios 提供的功能不僅僅是基本功能，它還提供了諸如請求和響應攔截器等高階功能，這是在現代 Web 開發環境中管理 AJAX 操作的可靠選擇。

示例

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<h1>Axios Example</h1>
<button onclick="axiosExample()">Make Request</button>
<pre id="result3"></pre>
<script>
  function axiosExample() {
    axios.get('https://jsonplaceholder.typicode.com/users/5')
      .then(response => {
        var formattedData = JSON.stringify(response.data, null, 2);
        document.getElementById('result3').innerText = 'Axios:\n' + formattedData;
      })
      .catch(error => {
        document.getElementById('result3').innerText = 'Axios Error: ' + error.message;
      });
  }
</script>
</body>
</html>

使用 Ajax jQuery

jQuery 中的 $.ajax 方法簡化了 AJAX 請求過程：這是一種之前很流行的方法；但是，隨著現代 JavaScript 的興起，其使用量有所減少。jQuery Ajax 提供了一個一致且跨瀏覽器相容的介面，由於其提供的這些優勢，它仍然適用於已經使用或需要 jQuery 特定功能的專案。但是，對於新專案，可能更喜歡現代的替代方案。

示例

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>
<h1>jQuery Ajax Example</h1>
<button onclick="jqueryAjax()">Make Request</button>
<pre id="result4"></pre>
<script>
  function jqueryAjax() {
    $.ajax({
      url: 'https://jsonplaceholder.typicode.com/users/7',
      method: 'GET',
      dataType: 'json',
      success: function (data) {
        var formattedData = JSON.stringify(data, null, 2);
        document.getElementById('result4').innerText = 'jQuery Ajax:\n' + formattedData;
      },
      error: function (xhr, status, error) {
        document.getElementById('result4').innerText = 'jQuery Ajax Error: ' + error;
      }
    });
  }
</script>
</body>
</html>

Ajax 用例

在現實場景中，開發人員通常使用 Ajax 來建立響應性和互動性強的 Web 應用程式。一個相關的示例：社交媒體平臺；在這裡，使用者能夠（藉助 Ajax）在後臺新增或載入新評論，而無需重新整理整個頁面。動態更新確保使用者體驗流暢且無中斷，允許使用者無縫地與內容和彼此互動。此過程產生了一個更具響應性和吸引力的平臺；它增強了使用者互動，從而提高了滿意度。

許多知名公司都利用 Ajax 來提升使用者體驗，例如 Google（Gmail、地圖）、Facebook、Twitter、亞馬遜、Netflix、GitHub、LinkedIn、YouTube、Microsoft Office Online 和 Uber。Ajax 用於實現即時更新、動態內容載入以及他們在各自平臺上的無縫互動。

列印頁面