1.旧版XML HttpRequest的缺点
只支持文本数据的传输,无法用来读取和上传文件。
传送和接收数据时,不能显示进度信息,只能提示有没有完成。
2.XML HttpRequest Level2新特性
可以设置HTTP请求的时限
可以使用FormData对象管理表单数据。
可以上传文件
可以获得数据传输的进度信息。
如何设置Http请求的时限:
有时,ajax操作很耗时,而且无法预知要花多少时间。新版本的XML HttpRequest 属性增加了timeout属性,可以设置HTTP请求的时限。
xhr.timeout = 3000
上面的语句,最长的等待时间为3000毫秒。过了这个时限,就自动停止HTTP请求。与之配套的还有一个timeout事件,用来指定回调函数:
xhr.ontimeout = function(event) {
alert('请求超时!')
}
例子:
<!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>Document</title>
</head>
<body>
<script>
var xhr = new XMLHttpRequest()
//设置超时时间
xhr.timeout = 300
//设置超时以后的处理函数
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);
}
}
</script>
</body>
</html>
上传文件:
实现步骤:
1.定义UI结构
<!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>Document</title>
</head>
<body>
<!-- 文件选择框 -->
<input type="file" id="file1" />
<!-- 上传文件 -->
<button id="btnUpload">上传文件</button>
<!-- img标签,用来展示上传成功以后的图片 -->
<img src="" alt="" id="img" width="800" />
</body>
</html>
2.验证是否选择了文件
//获取到文件上传按钮
var btnUpload = document.querySelector('#btnUpload')
//为按钮绑定单击事件处理函数
btnUpload.addEventListener('click', function() {
//获取文件的选择列表
var files = document.querySelector('#file1').files
if(files.length <= 0) {
return alert('请选择要上传的文件!')
}
console.log('用户选择了待上传的文件');
})
3.向FormData中追加文件
//创建一个FormData()对象
var fd = new FormData()
//追加文件
fd.append('avatar',files[0])
4.使用xhr发起上传文件的请求
var xhr = new XMLHttpRequest()
xhr.open('POST','http://www.liulongbin.top:3006/api/upload/avatar')
xhr.send(fd)
5.监听onreadystatechange事件
xhr.onreadystatechange = function() {
if(xhr.readyState === 4 && xhr.status === 200) {
var data = JSON.parse(xhr.responseText)
console.log(data);
if(data.status === 200) {
//上传成功
document.querySelector('#img').src = 'http://www.liulongbin.top:3006' + data.url
} else {
//上传失败
console.log('图片上传失败' + data.message);
}
}
}