什么是XMLHttpRequest？及其详细使用说明
目录
什么是 XMLHttpRequest？
XMLHttpRequest 的基本使用流程：
示例一：使用 XMLHttpRequest 获取数据并显示
HTML 和 JavaScript 代码
代码解释
示例二：发送带有查询参数的请求
HTML 和 JavaScript 代码
代码解释
XMLHttpRequest 的常用方法
总结
XMLHttpRequest 是一种浏览器内置的 JavaScript 对象，它允许浏览器与服务器进行异步通讯，从而无需刷新整个网页即可与服务器交换数据。XMLHttpRequest 最常用于 AJAX（Asynchronous JavaScript and XML）技术中，用来实现动态网页更新，提供更流畅的用户体验。
通过 XMLHttpRequest 对象，开发者可以向服务器发送请求并接收响应，而这些过程都是在后台进行的，用户不会察觉到页面的刷新或重载。最常见的应用场景包括：数据查询、提交表单、动态加载页面内容等。
XMLHttpRequest 的基本使用流程：
- 创建一个
XMLHttpRequest对象； - 配置请求方式（如 GET 或 POST）和请求的 URL 地址；
- 发送请求并监听服务器响应；
- 接收响应并处理数据。
示例一：使用 XMLHttpRequest 获取数据并显示
以下是一个简单的示例，演示如何使用 XMLHttpRequest 发送请求，获取数据并将其显示在网页上。
HTML 和 JavaScript 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>XMLHttpRequest 基础使用</title>
</head>
<body>
<p class="my-p"></p>
<script>
/**
* 目标：使用 XMLHttpRequest 对象与服务器进行通信，获取数据并展示
* 1. 创建 XMLHttpRequest 对象
* 2. 配置请求方法和 URL 地址
* 3. 监听 loadend 事件，接收响应数据
* 4. 发起请求
*/
// 创建 XMLHttpRequest 对象
const xhr = new XMLHttpRequest();
// 配置请求方式及 URL 地址
xhr.open('GET', 'http://hmajax.itheima.net/api/province');
// 监听请求结束事件
xhr.addEventListener('loadend', () => {
// 解析服务器返回的数据
const data = JSON.parse(xhr.response);
// 将数据展示在页面中
document.querySelector('.my-p').innerHTML = data.list.join('<br>');
});
// 发送请求
xhr.send();
</script>
</body>
</html>
代码解释
-
创建
XMLHttpRequest对象：const xhr = new XMLHttpRequest();这行代码创建了一个新的
XMLHttpRequest对象，它将用于发送和接收数据。 -
配置请求方法和 URL：
xhr.open('GET', 'http://hmajax.itheima.net/api/province');使用
open()方法来配置请求。第一个参数是请求方法（在这里是GET），第二个参数是请求的 URL 地址（该 URL 返回一个省份列表）。 -
监听
loadend事件：xhr.addEventListener('loadend', () => { const data = JSON.parse(xhr.response); document.querySelector('.my-p').innerHTML = data.list.join('<br>'); });loadend事件在请求完成后触发。当服务器响应返回时，我们可以通过xhr.response获取响应的内容。然后将 JSON 格式的响应数据解析并显示在网页上。 -
发送请求：
xhr.send();调用
send()方法来实际发送请求到服务器。
示例二：发送带有查询参数的请求
XMLHttpRequest 不仅可以用于简单的 GET 请求，还可以携带查询参数（如搜索关键字、分类等）来获取特定的数据。以下是一个带有查询参数的请求示例。
HTML 和 JavaScript 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>XMLHttpRequest 查询参数</title>
</head>
<body>
<p class="city-p"></p>
<script>
/**
* 目标：使用 XMLHttpRequest 发送带有查询参数的 GET 请求，
* 查询广东省的下属城市列表
*/
const xhr = new XMLHttpRequest();
// 配置 GET 请求，并携带查询参数
xhr.open('GET', 'http://hmajax.itheima.net/api/city?pname=广东省');
// 监听请求结束事件
xhr.addEventListener('loadend', () => {
// 解析服务器返回的数据
const data = JSON.parse(xhr.response);
// 将城市列表展示在页面中
document.querySelector('.city-p').innerHTML = data.list.join('<br>');
});
// 发送请求
xhr.send();
</script>
</body>
</html>
代码解释
-
配置带查询参数的 GET 请求：
xhr.open('GET', 'http://hmajax.itheima.net/api/city?pname=广东省');在
GET请求的 URL 后面附加了查询参数pname=广东省，表示查询广东省下属的城市列表。 -
处理响应并展示城市列表：
document.querySelector('.city-p').innerHTML = data.list.join('<br>');当服务器返回数据后，将返回的城市列表以
<br>标签连接并显示在页面中的<p class="city-p"></p>元素中。
XMLHttpRequest 的常用方法
- open(method, url)：初始化一个请求，
method是请求方式（如 GET 或 POST），url是请求的目标地址。 - send()：发送请求。对于
GET请求，可以直接调用send()；对于POST请求，通常需要先设置请求体（如send(data)）。 - setRequestHeader(header, value)：设置请求头。用于发送请求时指定附加的 HTTP 头部信息。
- addEventListener(event, callback)：监听事件，比如
loadend事件，处理请求的完成。
总结
XMLHttpRequest 是实现异步请求和动态网页更新的基础工具，广泛用于现代网页应用中，尤其是在 AJAX 技术中。通过 XMLHttpRequest，开发者可以从服务器获取数据并更新网页，而无需重新加载整个页面。虽然 XMLHttpRequest 已经被较新的 Fetch API 所取代，但它仍然是学习和理解前端开发中异步请求的一个重要工具。
本示例展示了如何使用 XMLHttpRequest 进行基础的请求操作，以及如何携带查询参数向服务器发送 GET 请求，处理响应数据并动态更新页面内容。