Javascript 简明教程

JavaScript - Ajax

异步 JavaScript 和 XML (Ajax) 是一种 Web 开发技术：它支持服务器和网页之间的动态、交互式通信，而无需完全重新加载页面。描述符“异步”强调数据交换可以在后台发生，而无需中断用户体验。与其静候整个页面刷新；Ajax 增强了对网页特定部分的实时更新，从而产生更无缝、响应更快的界面。

How Ajax works?

在启用动态更新中发挥核心作用的，无需完全重新加载页面，是在 JavaScript 的 Ajax 功能中的 XMLHttpRequest 对象。这个特殊进程允许服务器和网页之间进行异步通信。服务器在收到该对象发送的请求后使用数据（通常是 JSON 或 XML 格式）来响应。处理数据是 JavaScript 的任务；它实时更新网页的特定部分。异步特性对于现代 Web 开发来说是至关重要的，它确保这些操作在后台进行，从而通过允许以异步方式获取和发送数据来提高交互性。

在此处，我们将探索 Ajax 以获得对它的更深层次的理解。

有 4 种方法用于对 Ajax 进行调用或在 JavaScript 中实现 Ajax，这 4 种方法如下：

  1. XMLHttpRequest (Older Approach)

  2. Fetch API (Modern Approach)

  3. Axios（用于 HTTP 请求的库）

  4. jQuery Ajax

在所有用于理解示例的示例中，我们都将使用 JSONPlaceholder。

JSONPlaceholder 是一个开源的模拟 REST API 提供程序，可让开发人员测试其原型应用程序。它为多个资源（例如用户、帖子、评论等）返回虚假/虚拟数据。JSONPlaceholder 的 API 端点可通过 HTTP 请求实现，并且这些端点将模拟真实 API 的本质，而无需身份验证。我们在本文中的目标是使用这些 API/端点来理解 Javascript-Ajax。

Using XMLHttpRequest

使用 XMLHttpRequest 的原生 JavaScript 方法代表了该异步请求最老的方法。它依赖于 XMLHttpRequest 对象来创建和发送 HTTP 请求。该方法涉及设置回调函数来处理请求的各种状态，使其适用于较简单的场景。但是，与更现代的方法相比，它具有一些局限性。

Example

<!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>

Using Fetch API

Fetch API 是 XMLHttpRequest 的现代替代方法，它提供了一种更加直接、功能更强大的语法；它返回 Promise，从而增强了对异步操作的直观处理。支持广泛的 HTTP 方法和标头：这为开发人员提供了一种更简洁、更简洁的方法来进行异步请求。当代 JavaScript 应用程序通常更喜欢它，因为它清晰且易于使用。

Example

<!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>

Using Axios

专为发出 HTTP 请求而设计的 Axios 成为流行的 JavaScript 库。其流行在很大程度上归功于其简洁明确的语法：在 Promise 的基础上构建；此外，它还拥有自动 JSON 数据转换支持功能，使其区别于该领域的其他库。Axios 不仅提供基本功能，还提供了高级功能，例如请求和响应拦截器，这是一个在现代 Web 开发环境中管理 AJAX 操作的强大选择。

Example

<!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>

Using Ajax jQuery

jQuery 中的 $.ajax 方法简化了 AJAX 请求流程：它以前是一种流行的方法；然而，随着现代 JavaScript 的兴起，它的使用量已有所下降。jQuery Ajax 提供了一致且跨浏览器兼容的界面，因此对于由于它提供的这些优势而已经使用或需要 jQuery 特定功能的项目，它仍然适用。但是，对于新项目，现代替代方法可能是首选。

Example

<!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 Use Cases

在实际场景中，开发人员通常采用 Ajax 来创建具有响应性和交互性的 Web 应用程序。一个相关的示例：社交媒体平台；在这里，由于 Ajax，用户可以在后台添加或加载新评论，而不必刷新整个页面。动态更新确保了顺畅和不间断的用户体验，允许个人无缝地参与内容和彼此互动。此过程产生了一个更加响应和引人入胜的平台；它放大了用户交互，从而提高了满意度。

利用 Ajax 增强用户体验的知名公司包括 Google（Gmail、地图）、Facebook、Twitter、Amazon、Netflix、GitHub、LinkedIn、YouTube、Microsoft Office Online 和 Uber。Ajax 用于在各自平台上进行实时更新、动态内容加载和无缝交互。