XMLHttpRequest 教程
最后修改于 2023 年 10 月 18 日
在本文中，我们将展示如何使用 JavaScript 中的 XMLHttpRequest 发出 HTTP 请求。
XMLHttpRequest
XMLHttpRequest 是一个内置的浏览器对象，允许在 JavaScript 中发出 HTTP 请求。 XMLHttpRequest API 提供了客户端功能，用于在客户端和服务器之间传输数据。它提供了一种简单的方法，无需完全刷新页面即可从 URL 检索数据。
因此，网页只需更新页面的一部分，而不会中断用户正在做的事情。XMLHttpRequest 在 AJAX 编程中被大量使用。XMLHttpRequest 以两种操作模式运行：同步和异步。 尽管如此命名，XMLHttpRequest 可以在任何数据上运行，而不仅仅是 XML。
XMLHttpRequest 示例
以下示例创建一个对测试网站的请求，并返回当前日期和时间。
fetch_time.js
let getJSON = (url, callback) => {
let xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'json';
xhr.onload = () => {
let status = xhr.status;
if (status == 200) {
callback(null, xhr.response);
} else {
callback(status);
}
};
xhr.send();
};
getJSON('http://time.jsontest.com', (err, data) => {
if (err != null) {
console.error(err);
} else {
let text = `Date: ${data.date}
Time: ${data.time}
Unix time: ${data.milliseconds_since_epoch}`
console.log(text);
}
});
此示例使用 XMLHttpRequest 读取 JSON 数据。
let xhr = new XMLHttpRequest();
创建一个新的 XMLHttpRequest 实例。
xhr.open('GET', url, true);
open 方法初始化对指定 URL 的 GET 请求。 第三个参数 true 使其成为异步请求。
xhr.responseType = 'json';
responseType 值定义响应类型。
xhr.onload = function() {
var status = xhr.status;
if (status == 200) {
callback(null, xhr.response);
} else {
callback(status);
}
};
在 onload 方法内部，我们等待来自服务器的响应。
xhr.send();
send 方法发送请求； 默认情况下，该请求是异步的。
let text = `Date: ${data.date}
Time: ${data.time}
Unix time: ${data.milliseconds_since_epoch}`
console.log(text);
我们将日期、时间和 Unix 时间戳记录到控制台。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Consume XML request</title>
<script src="fetch_time.js"></script>
</head>
<body>
</body>
</html>
代码被加载到 HTML 页面中。 在浏览器中加载页面后，我们进入浏览器控制台，该控制台在开发者工具中可用。
来源
在本文中，我们使用 XMLHttpRequest 在 JavaScript 中创建了一个 HTTP 请求。