XHR 创建对象学习笔记
概述
XHR（XMLHttpRequest）是一种在客户端和服务器之间进行 HTTP 通信的技术。通过创建 XHR 对象，可以在不重新加载页面的情况下从服务器获取数据、更新网页内容，以及实现其他与 HTTP 有关的操作。
创建 XHR 对象
要使用 XHR 技术，首先需要创建一个 XHR 对象。可以通过以下代码创建一个基本的 XHR 对象：
javascriptCopy Codevar xhr = new XMLHttpRequest();
发送请求
创建了 XHR 对象后，可以使用该对象向服务器发送请求。对于简单的 GET 请求，可以使用以下代码：
javascriptCopy Codexhr.open('GET', '/path/to/resource', true);
xhr.send();
该代码将会向服务器发送一个 GET 请求，请求的资源路径为 /path/to/resource。第三个参数 true 表示该请求是异步的，即不会阻塞页面其他操作。
对于 POST 请求，可以使用以下代码：
javascriptCopy Codexhr.open('POST', '/path/to/resource', true);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.send('foo=bar&baz=qux');
该代码将会向服务器发送一个 POST 请求，请求的资源路径为 /path/to/resource。setRequestHeader 方法用于设置请求头信息，send 方法的参数则表示请求体中包含的数据。
接收响应
当 XHR 对象接收到服务器返回的响应后，会触发 readystatechange 事件。可以通过监视该事件来获取服务器返回的数据。以下是一个处理响应的基本示例：
javascriptCopy Codexhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
}
该代码将会在 XHR 对象接收到完整的响应后，检查状态码是否为 200（成功），然后将响应结果输出到控制台中。
示例
以下是一个使用 XHR 技术实现图片预览功能的示例：
htmlCopy Code<!DOCTYPE html>
<html>
<head>
<title>Image Preview Example</title>
</head>
<body>
<input type="file" id="fileInput">
<img id="previewImg" src="placeholder.png">
<script>
var fileInput = document.getElementById('fileInput');
var previewImg = document.getElementById('previewImg');
fileInput.addEventListener('change', function() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
previewImg.src = URL.createObjectURL(xhr.response);
}
};
xhr.open('GET', URL.createObjectURL(fileInput.files[0]), true);
xhr.responseType = 'blob';
xhr.send();
});
</script>
</body>
</html>
该示例展示了如何在用户选择文件后，使用 XHR 技术将文件内容转换成 Blob 对象，并将其作为预览图片的源。