XMLHttpRequest介绍
目录
- 一、介绍
-
- 1.创建 XMLHttpRequest
- 2.初始化
- 3.发送请求
- 4.获取响应
- 5.响应类型
- 二、发送GET请求示例
- 三、发送POST请求示例
- 四、发送POST请求下载文件示例
- 五、发送POST请求上传文件示例
一、介绍
1.创建 XMLHttpRequest
let xhr = new XMLHttpRequest();
2.初始化
xhr.open(method, URL, [async, user, password])
使用 open 方法进行一些初始化配置，method 和 URL 是必传的，其余的是可选的。
参数说明：
method —— HTTP 方法。通常是 “GET” 或 “POST”，小写也可。
URL —— 要请求的 URL，通常是一个字符串，也可以是 URL 对象。
async —— 是否同步。如果不传默认为true，如果显式地设置为 false，那么请求将会以同步的方式处理。
user，password —— HTTP 基本身份验证（如果需要的话）的登录名和密码。
3.发送请求
xhr.send([body])
使用 send 方法就会建立连接，发送请求。
参数说明：
body 是可选的，是 POST 请求方式的请求体。
即如果你上面的 xhr.open 里 method 是 使用的是 GET 请求 ，那么 body 参数是不需要的 ；
如果你上面的 xhr.open 里 method 是 使用的是 POST 请求，那么请求体就是 body 。
4.获取响应
下面这三个事件是最常用的：
- load —— 当请求完成（即使 HTTP 状态为 400 或 500 等），并且响应已完全下载。
- error —— 当无法发出请求，例如网络中断或者无效的 URL。
- progress —— 在下载响应期间定期触发，报告已经下载了多少。
xhr.onload = function() { //请求正常发出时
alert(`状态码: ${xhr.status} 结果： ${xhr.response}`);
};
xhr.onerror = function() { // 仅在根本无法发出请求时触发
alert(`网络错误`);
};
xhr.onprogress = function(event) { // 定期触发，一般用于下载文件之类的返回下载进度
// event.loaded —— 已经下载了多少字节
// event.lengthComputable = true，当服务器发送了 Content-Length header 时
// event.total —— 总字节数（如果 lengthComputable 为 true）
alert(`总字节数： ${event.total} 已下载字节数： ${event.loaded} `);
};
5.响应类型
我们可以使用 xhr.responseType 属性来设置响应格式：
- “”（默认）—— 响应格式为字符串
- “text” —— 响应格式为字符串
- “arraybuffer” —— 响应格式为 ArrayBuffer（对于二进制数据，请参见 ArrayBuffer，二进制数组）
- “blob” —— 响应格式为 Blob（对于二进制数据，请参见 Blob），即文件数据
- “document” —— 响应格式为 XML document（可以使用 XPath 和其他 XML 方法）或 HTML document（基于接收数据的 MIME 类型）
- “json” —— 响应格式为 JSON（自动解析）
let xhr = new XMLHttpRequest();
xhr.open('GET', '/article/xmlhttprequest/example/json');
xhr.responseType = 'json';
xhr.send();
// 响应为 {"message": "Hello, world!"}
xhr.onload = function() {
let responseObj = xhr.response;
alert(responseObj.message); // Hello, world!
};
注意：
在旧的脚本中，你可能会看到
xhr.responseText，甚至会看到xhr.responseXML属性。它们是由于历史原因而存在的，以获取字符串或 XML 文档。如今，我们应该在
xhr.responseType中设置格式，然后就能获取如上所示的xhr.response了。
二、发送GET请求示例
let xhr = new XMLHttpRequest();
xhr.open("GET", "http://localhost:8081/apiList/v1/worldAddressAnalysis?country=中国");
xhr.send();
//请求正常发出时
xhr.onload = function () {
alert(`状态码: ${xhr.status} 结果： ${xhr.response}`);
};
// 仅在根本无法发出请求时触发
xhr.onerror = function () {
alert(`网络错误`);
};
三、发送POST请求示例
let xhr = new XMLHttpRequest();
xhr.open("POST", "http://localhost:8081/apiList/v1/calculator");
xhr.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
//post 请求体参数
let param = {calculatorStr: "8*8-4"};
xhr.send(JSON.stringify(param));
//请求正常发出时
xhr.onload = function () {
alert(`状态码: ${xhr.status} 结果： ${xhr.response}`);
};
// 仅在根本无法发出请求时触发
xhr.onerror = function () {
alert(`网络错误`);
};
四、发送POST请求下载文件示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button id="btn">下载文件</button>
<script>
let btn = document.querySelector("#btn");
btn.addEventListener("click", () => {
let xhr = new XMLHttpRequest();
xhr.open("POST", "http://localhost:8081/apiList/v1/downloadExcel");
//设置请求头和响应类型
xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
xhr.responseType = 'blob';
//设置请求体参数
let param = { "fileName": "测试", "tableHeader": ["年级", "班级", "班主任", "男生人数", "女生人数", "语文平均分"] };
xhr.send(JSON.stringify(param));
//请求正常发出时
xhr.onload = function () {
if (xhr.status === 200) {
// 获取文件blob数据并保存
saveAs(xhr.response, "download.xlsx");
}
};
// 仅在根本无法发出请求时触发
xhr.onerror = function () {
alert(`网络错误`);
};
// 定期触发 查看下载进度
xhr.onprogress = function (event) {
alert(`总字节数： ${event.total} 已下载字节数： ${event.loaded} `);
};
});
function saveAs(data, name) {
var urlObject = window.URL || window.webkitURL || window;
var export_blob = new Blob([data]);
var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a')
save_link.href = urlObject.createObjectURL(export_blob);
save_link.download = name;
save_link.click();
}
</script>
</body>
</html>
五、发送POST请求上传文件示例
假设我 springboot 上传文件的接口如下:
@ApiOperation("文件上传到jar包所在服务器")
@PostMapping(value = "/v1/fileSelfUpload1", consumes = MediaType.MULTIPART_FORM_DATA_VALUE)
public JSONObject fileSelfUpload1(@RequestParam String filePath, @RequestParam(value = "file", required = true) MultipartFile file) {
return userConsumer.fileSelfUpload(filePath, file);
}
使用 XMLHttpRequest 上传文件示例如下：
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shopping list example</title>
<style>
li {
margin-bottom: 10px;
}
li button {
font-size: 8px;
margin-left: 20px;
color: #666;
}
</style>
</head>
<body>
<div class="container">
<input type="file" name="doc" id="doc">
<button type="submit" id="submit">提交</button>
</div>
<script>
var doc = document.querySelector('#doc')
var subbtn = document.querySelector('#submit')
subbtn.addEventListener('click', function (e) {
// 获取上传的文件,数组
let filedata = doc.files
//先判断是否已经上传文件
if (filedata.length <= 0) {
return alert('请上传文件')
}
//通过FormData可以获取表单数据，也可以通过append添加数据，最后把FormData实例对象直接 上传发送请求
let fd = new FormData()
fd.append('file', filedata[0])
fd.append('filePath', '/user/save/')
const xhr = new XMLHttpRequest()
xhr.open('POST', 'http://localhost:8081/apiList/v1/fileSelfUpload1')
xhr.send(fd)
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log('上传成功');
}
}
})
</script>
</body>
</html>
参考：
XMLHttpRequest
XMLHttpRequest api