在 JavaScript 中，XMLHttpRequest 对象是一个用于与服务器交换数据的接口，允许在后台与服务器进行异步通信。这使得网页可以在不中断用户交互的情况下从服务器请求数据。
方法
-
open()：用于设置请求的类型、URL和是否异步处理请求。
var xhr = new XMLHttpRequest(); xhr.open('GET', 'example.txt', true); -
send()：用于发送请求。
xhr.send(); -
abort()：用于停止当前的请求。
xhr.abort();
属性
-
readyState：表示请求/响应过程的当前状态，其值可以是以下几个常量：
- 0: 请求未初始化
- 1: 服务器连接已建立
- 2: 请求已接收
- 3: 请求处理中
- 4: 请求已完成，且响应已就绪
-
responseText：以字符串形式返回响应数据。
-
status：返回服务器响应的 HTTP 状态码。
事件
-
readystatechange：当
readyState属性改变时触发。 -
load：当请求成功完成时触发。
-
error：当请求失败时触发。
示例代码
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
console.log(xhr.responseText);
} else {
console.error('Request failed. Status:', xhr.status);
}
}
};
xhr.open('GET', 'example.txt', true);
xhr.send();
在这个例子中，当 readyState 变为 4 并且 status 为 200 时，表示请求成功完成，我们就可以在控制台中看到响应数据。如果请求失败，则会打印出错误信息。
项目案例
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fetch API Example</title>
</head>
<body>
<h1>Fetch API Example</h1>
<input type="text" id="urlInput" placeholder="Enter a URL">
<button onclick="fetchData()">Fetch Data</button>
<div id="content"></div>
<script src="script.js"></script>
</body>
</html>
script.js
function fetchData() {
const urlInput = document.getElementById('urlInput');
const url = urlInput.value;
const content = document.getElementById('content');
fetch(url)
.then(response => {
if (!response.ok) {
throw new Error(`Network response was not ok - ${response.statusText}`);
}
return response.text();
})
.then(data => {
content.innerHTML = data;
})
.catch(error => {
content.innerHTML = `Error: ${error.message}`;
});
}
- 在
index.html中，我们创建了一个输入框和一个按钮。当用户输入一个 URL 并点击按钮时，会触发fetchData函数。 - 在
script.js中，fetchData函数使用fetch API来获取 URL 的内容。如果请求成功，它将内容显示在网页上；如果请求失败，它将错误信息显示在网页上。
这个项目是一个简单的示例，但它展示了如何使用 fetch API 在 JavaScript 中进行网络请求。在实际项目中，您可能需要处理更多的异常情况，例如跨源资源共享（CORS）问题，或者使用其他类型的请求（如 POST 请求）
请注意，虽然 XMLHttpRequest 仍然是一个有效的 API，但现代 JavaScript 开发更倾向于使用 fetch API 或其他库，如 axios 或 jQuery.ajax，因为它们提供了更现代、更简洁的 API 并且支持更多的功能，如请求取消、Promise 支持等。
