个人微信管理工具wordpress谷歌seo
目录
- 一、介绍
- 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