ajax mdn - Javascript

介绍

Ajax (Asynchronous JavaScript and XML) 是一种在无需重新加载整个页面的情况下，能够更新部分网页的技术。它使用 JavaScript 和 XML (或 JSON) 实现异步通信。

在这篇文章中，我们将介绍 AJAX 的基本概念，并向您展示如何使用纯 JavaScript 来使用 AJAX。

AJAX 是什么?

AJAX 是一种用于创建动态网页的技术。通过 AJAX，您可以使用纯 JavaScript 来向服务器发送和获取数据，而不会干扰页面的行为。

通常，在使用 AJAX 时，您将创建一个 JavaScript 函数，该函数使用 HTTP GET 或 POST 请求从服务器获取某些数据。将数据返回给 JavaScript，数据通常以 XML 或 JSON 格式返回，然后您可以使用 JavaScript 将数据添加到页面中，而无需重新加载整个页面。

AJAX 最常用于通过异步通信更新页面上的某些内容。

如何使用 AJAX

1. 创建一个 XMLHttpRequest 对象

在 JavaScript 中，您可以使用 XMLHttpRequest 对象来进行 AJAX 交互。

var xhr = new XMLHttpRequest();

2. 使用 XMLHttpRequest 对象发送请求

要使用 AJAX 与服务器交互，您需要调用 XMLHttpRequest 对象的 open() 和 send() 方法。

xhr.open('GET', 'http://www.example.com', true);
xhr.send();

这将创建一个 GET 请求，然后向指定的 URL 发送该请求。

3. 处理服务器响应

当服务器将数据返回给您的 JavaScript 时，可以设置一个回调函数来处理该响应。通常回调函数会在 readyState 值更改时被触发。

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    alert(xhr.responseText);
  }
};

在上面的示例中，我们检查 readyState 是否为 4，并检查状态码是否为 200。如果满足这些条件，我们使用 alert 函数显示服务器响应的文本。

总结

在本文中，我们介绍了 AJAX 的基本概念，并向您展示了如何使用纯 JavaScript 实现 AJAX 交互。要了解有关 AJAX 的更多信息，您可以访问 Mozilla 开发者网络 (MDN) 的 AJAX 文档。