37、演示如何使用JavaScript发送AJAX请求，获取远程数据并更新网页内容

第37课：使用JavaScript发送AJAX请求，获取远程数据并更新网页内容

在前端开发中，页面与服务器之间的数据交互显得尤为重要。在传统的开发方式中，一般是通过页面对服务器发送HTTP请求，然后服务器返回HTML页面或者JSON数据，最后页面再将数据渲染出来。而在现在，我们使用更加优秀的技术——AJAX（异步JavaScript和XML）来完成数据交互。

AJAX是基于XMLHttpRequest对象的技术，它能够在不重载页面的情况下向服务器发送请求，并且局部刷新页面中的数据，提升用户体验。在本课中，我们将学习如何在JavaScript中使用AJAX进行远程数据请求，并将数据用于更新网页内容的操作。

首先，我们要明确的是在JavaScript中如何使用AJAX发送请求。通过创建XMLHttpRequest对象，我们就能够发送HTTP请求并获取服务器返回的数据。以下是一个基本的AJAX请求示例：

var xhr = new XMLHttpRequest(); // 创建XMLHttpRequest对象
xhr.open('GET', 'https://api.example.com/user/william', true); // 配置请求
xhr.onreadystatechange = function() { // 监听请求状态
  if(xhr.readyState == 4 && xhr.status == 200) {
    var data = xhr.responseText; // 获取服务器返回的数据
    console.log(data);
  }
};
xhr.send(); // 发送请求

以上是一个简单的AJAX请求示例，我们可以看到首先创建了XMLHttpRequest对象，然后通过open()方法进行请求的配置，这里我们请求了地址为'https://api.example.com/user/william'的资源，请求方式为GET，最后一个参数表示是异步请求。接下来通过onreadystatechange函数监听请求状态，当请求成功并返回的状态码为200时，就将服务器返回的数据保存下来，并进行处理（这里只是输出到控制台）。最后通过send()方法发送请求。

实际开发中，我们会经常遇到需要在发送请求时传递一些参数的情况（如POST请求），在这种情况下，我们可以给open()方法传递第三个参数也就是async参数为true后添加如下的代码：

xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); // 添加HTTP头
xhr.send("name=William&age=20"); // 发送请求体

这段代码中，我们使用了setRequestHeader()方法设置HTTP头，send()方法中传递请求体参数。

以上就是关于AJAX请求的介绍，有更多需要学习的知识请继续深入学习AJAX相关的内容。

• Ajax 请求是一种在后台与服务器交换数据的技术，使得网页可以异步更新内容而不需重新加载。
• 它可以让网页实现异步加载数据和内容，从而提升用户体验。
• Ajax 与它的服务器进行少量的后台通信，让 web 应用更加迅速地响应用户输入，并减轻了不必要的带宽负担。
• Ajax 最重要的功能之一是其不用重新加载整个页面就可以获取和显示数据的能力。