在 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 支持等。