AJAX-快速指南

什么是 AJAX

AJAX，全称 Asynchronous JavaScript And XML（异步 JavaScript 和 XML），是一种用于创建快速动态网页的技术。AJAX 操作允许Web 页面异步地从服务器获取数据并更新内容，而不需要重新加载整个页面。

AJAX 的优点

• 减轻服务器压力：只更新需要更新的部分，不需要每次都重新加载页面；
• 快速响应：通过异步方式请求和处理数据，减少用户等待时间；
• 提高用户体验：页面更新不会造成闪烁，用户感觉更流畅。

AJAX 原理

AJAX 是通过 XMLHttpRequest 对象与服务器进行数据交互。当需要从服务器端获取数据时，JavaScript 发送一个 XMLHttpRequest 请求到服务器端。服务器端接收请求后，使用 HTTP 协议返回客户端需要的数据。JavaScript 接收到服务器端返回的数据，然后对网页进行相应的更新。

AJAX 使用

发送请求

通过 XMLHttpRequest 对象发送请求，代码如下：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/someapi', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.send();

处理响应

通过 readyState 属性可以获取 XMLHttpRequest 对象的状态。状态码如下：

• 0：未调用 open() 方法；
• 1：open() 方法已调用，但是 send() 方法未调用；
• 2：send() 方法已调用，但服务器尚未响应；
• 3：服务器返回部分数据；
• 4：服务器返回全部数据。

通过 status 属性可以获取服务器的 HTTP 状态码。如果状态码为 200，则表示请求成功。

通过 responseText 属性可以获取服务器返回的数据，该属性的值为字符串形式。

发送 POST 请求

发送 POST 请求时，需要在 send() 方法中传递需要发送的数据。示例代码如下：

var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://example.com/someapi', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.send('key1=value1&key2=value2');

发送 JSON 数据

发送 JSON 数据时，需要设置请求头的 Content-Type 属性为 application/json。示例代码如下：

var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://example.com/someapi', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
var data = JSON.stringify({
  key1: 'value1',
  key2: 'value2'
});
xhr.send(data);

总结

通过本文的学习，我们了解了 AJAX 的定义、优点、原理和使用方法。同时，我们还介绍了如何发送请求、处理响应、发送 POST 请求和发送 JSON 数据。AJAX 技术已经成为现代 Web 开发中必不可少的一部分，通过 AJAX 技术，我们可以大幅度提高用户体验和页面性能。