XMLHttpRequest Level2新特性
旧版XMLHttpRequest的缺点
1、只支持文本数据的传输，无法用来读取和上传文件
2、传送和接收数据时，没有进度信息，只能提示没有完成
XMLHttpRequest Level2新功能
1、可以设置HTTP请求的时限
2、可以使用FormData对象管理表单数据
3、可以上传文件
4、可以获得数据传输的进度信息
设置HTTP请求（超时）时限
<script>
var xhr = new XMLHttpRequest()
// 设置超时时限
xhr.timeout = 3000
// 设置超时以后的处理函数
xhr.ontimeout = function() {
console.log('请求超时！');
}
xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks')
xhr.send()
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
// console.log(xhr.responseText);
var result = JSON.parse(xhr.responseText)
console.log(result);
}
}
</script>
演示FormData对象的基本使用管理表单数据
<script>
// 1.创建一个formdata表单
var fd = new FormData()
// 为Formdata表单添加数据项，调用append函数，向fd追加数据
fd.append('uname', 'xyw')
fd.append('upwd', '111222')
// 创建xhr对象
var xhr = new XMLHttpRequest()
xhr.open('POST', 'http://www.liulongbin.top:3006/api/formdata')
xhr.send(fd)
// 监听
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// var result = JSON.parse(xhr.responseText)
console.log(JSON.parse(xhr.responseText))
}
}
</script>
使用formdata快速获取表单中的数据
<body>
<form id="form1">
名称：<input type="text" name="uname" autocomplete="off"><br>
密码：<input type="password" name="upwd"><br>
<button type="submit">提交</button>
</form>
<script>
// 1.通过DOM操作，获取到form表单元素
var form = document.querySelector('#form1')
// 监听form表单
form.addEventListener('submit', function(e) {
// 阻止表单默认提交行为
e.preventDefault()
// 创建formdata，快速获取到form表单数据
var fd = new FormData(form)
var xhr = new XMLHttpRequest()
xhr.open('POST', 'http://www.liulongbin.top:3006/api/formdata')
xhr.send(fd)
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var result = JSON.parse(xhr.responseText)
console.log(result);
}
}
})
</script>
</body>
上传文件并计算文件上传的进度
上传文件实现步骤
1、定义UI结构
2、验证是否选择了文件
3、向FormData中追加文件
4、使用xhr发起上传文件的请求
5、监听onreadystatechange事件
具体代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文件上传</title>
<link rel="stylesheet" href="./lib/bootstrap.css">
<script src="./lib/jquery.js"></script>
</head>
<body>
<!-- 一、定义UI结构 -->
<!-- 1.文件选择框 -->
<input type="file" id="file1">
<!-- 2.上传文件按钮 -->
<button id="btnUpload">上传</button>
<!-- bootstrap进度条 -->
<div class="progress" style="width: 500px; margin: 15px 10px;">
<div class="progress-bar progress-bar-striped active" style="width: 0%" id="percent">
0%
</div>
</div>
<br />
<!-- 3.img标签，来显示上传成功以后的图片 -->
<img src="" alt="" id="img" width="800">
<script>
// 1.获取上传文件按钮
var btnUpload = document.querySelector('#btnUpload')
// 2.为按钮添加click事件监听
btnUpload.addEventListener('click', function() {
// 3.获取到选择的文件列表
var files = document.querySelector('#file1').files
if (files.length <= 0) {
return alert('请选择要上传的文件!')
}
// 创建formdata对象
var fd = new FormData()
// 将用户选择的文件添加到formdata中
fd.append('avatar', files[0])
// 创建xhr对象
var xhr = new XMLHttpRequest()
// 显示文件上传进度
// 监听xhr.upload的onprogress事件
xhr.upload.onprogress = function(e) {
// e.lengthComputable是一个布尔值，表示当前上传的资源是否具有可计算的长度
if (e.lengthComputable) {
// e.loaded已传输的字节
// e.total需传输的字节
// 计算出上传的进度
var percentComplete = Math.ceil((e.loaded / e.total) * 100)
// 监听上传进度的事件
$('#percent')
// 设置进度条的宽度
.attr('style', 'width:' + percentComplete + '%')
// 显示当前的上传进度条百分比
.html(percentComplete + '%')
}
}
// 监听上传完成的事件
xhr.upload.onload = function() {
$('#percent')
// 移除上传中的类样式
.removeClass()
// 添加上传完成的类样式
.addClass('progress-bar progress-bar-success')
}
xhr.open('POST', 'http://www.liulongbin.top:3006/api/upload/avatar')
xhr.send(fd)
// 监听onreadystatechange事件
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var data = JSON.parse(xhr.responseText)
if (data.status === 200) { //上传文件成功
document.querySelector('#img').src = 'http://www.liulongbin.top:3006' + data.url
console.log(data);
} else { //上传文件失败
console.log(data.message);
}
}
}
})
</script>
</body>
</html>
