JavaScript - Ajax

Ajax(Asynchronous JavaScript and XML) 是一种 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 的性质，无需任何身份验证。我们的目标是在 JavaScript-Ajax 环境下使用这些 API/端点。

使用 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:
' + responseData;
      }
    };
    xhr.send();
  }
</script>
</body>
</html>

使用 Fetch API

Fetch API 是 XMLHttpRequest 的现代替代方案，它提供了更直接、更强大的语法;它返回 Promises，从而增强了异步操作的直观处理。它支持丰富的 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:
' + formattedData;
      })
      .catch(error => {
        document.getElementById('result').innerText = 'Fetch API Error: ' + error.message;
      });
  }
</script>
</body>
</html>

使用 Axios

Axios 专为发送 HTTP 请求而设计，现已成为一款广受欢迎的 JavaScript 库。它的流行很大程度上归功于其简洁明了的语法:基于 Promises 构建;此外，它还拥有自动 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:
' + 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:
' + 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、Amazon、Netflix、GitHub、LinkedIn、YouTube、Microsoft Office Online 和 Uber。Ajax 用于实时更新、动态内容加载以及在各自平台上的无缝交互。