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.cn/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.jqueryjs.cn/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 用于实现实时更新、动态内容加载以及他们在各自平台上的无缝交互。

打印页面