AJAX 获取请求 - JavaScript

在前端开发中，我们经常需要向服务端获取数据，用于更新界面或执行其他操作。其中一种常用的方式就是 Ajax 请求。

Ajax 请求是什么？

Ajax 是 Asynchronous JavaScript and XML（异步 JavaScript 和 XML）的缩写，通俗来说，就是在不刷新整个页面的情况下，通过 JavaScript 向服务端发送请求并获取数据，并用 JavaScript 更新页面内容。

如何发送 Ajax 请求？

在 JavaScript 中，通过创建 XMLHttpRequest 对象，然后使用其 open()、send() 和 onreadystatechange() 方法来发起 Ajax 请求。

var xhr = new XMLHttpRequest(); // 创建 XMLHttpRequest 对象
xhr.open('GET', '/api/data');  // 通过 open() 方法设置请求方法和请求地址
xhr.send();                    // 发送请求，可以传入请求体数据
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var response = xhr.responseText; // 获取响应内容
    // TODO: 处理响应内容
  }
};

发送请求时需要注意什么？

请求方法

常用的请求方法有 GET 和 POST，它们的区别在于 GET 请求通过 URL 传递参数，而 POST 请求通过请求体传递参数。

请求地址

在开发中，我们通常需要根据环境动态生成请求地址，避免硬编码。另外，对于跨域请求，需要使用 CORS（Cross-Origin Resource Sharing，跨域资源共享）或 JSONP（JSON with Padding，JSON 带填充）方式来处理。

发送请求头信息

通常需要设置 Content-Type、Authorization 等请求头信息以便服务端做出正确的响应。

发送请求体数据

可以通过 send() 方法向服务端发送请求体数据，常用的数据格式有 URLSearchParams、FormData、JSON 等。

如何处理响应内容？

在获取到响应内容后，可以通过 JavaScript 处理响应内容，例如解析 JSON 格式的数据、更新页面内容等。

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var response = xhr.responseText;
    var data = JSON.parse(response);
    // TODO: 处理数据
  }
};

总结

通过 JavaScript 发送 Ajax 请求并获取响应内容是前端开发中的常见操作。需要注意请求方法、请求地址、请求头信息、请求体数据等细节，以及对响应内容进行适当的处理。