XHR Level2的新特性
作者：互联网
一、了解
1.旧版XMLHttpRequest的缺点
只支持文本数据的传输，无法用来读取和上传文件
传送和接收数据时，没有进度信息，只能提示有没有完成
2.XMLHttpRequest Level2的新功能
可以设置HTTP请求的时限
可以使用FormData对象管理表单数据
可以上传文件
可以获得数据传输的进度信息
二、设置HTTP请求时限（最后整体代码放在下面）
有时，Ajax操作很耗时，而且无法预知要花多少时间。如果网速很慢，用户可能要等很久。新版本的XMLHttpRequest对象，增加了timeout属性，可以设置HTTP请求的时限:
上面的语句，将最长等待时间设为3000毫秒。过了这个时限，就自动停止HTTP请求。与之配套的还有一个timeout事件，用来指定回调函数:
代码示例：
<!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>
</body>
<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);
}
}
</script>
</html>
三、FormData对象管理表单数据
Ajax操作往往用来提交表单数据。为了方便表单处理，HTMLS新增了一个FormData对象，可以模拟表单操作:
代码示例：
<!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>
</body>
<script>
// 1.创建formData实例
var fd = new FormData()
// 2.调用append函数，向fd中追加数据
fd.append('uname', 'zs')
fd.append('upwd', '123456')
var xhr = new XMLHttpRequest()
xhr.open('POST', 'http://www.liulongbin.top:3006/api/formdata')
xhr.send()
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(JSON.parse(xhr.responseText));
}
}
</script>
</html>
FormData对象也可以用来获取网页表单的值，示例代码如下:
示例代码:
<!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>
<form id="from1">
<input type="text" name="uname" autocomplete="off">
<input type="password" name="upwd">
<button type="submit">提交</button>
</form>
</body>
<script>
// 1，通过DOM操作，获取到form表单元素
var form = document.querySelector('#form1')
form.addEventListener('submit', function (e) {
// 阻止默认提交行为
e.preventDefault()
// 创建FormData，快速获取到 form表单中的数据
var fd = new FromData(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) {
console.log(JSON.parse(xhr.statusText));
}
}
})
</script>
</html>
四、上传文件
新版XMLHttpRequest对象，不仅可以发送文本信息，还可以上传文件。
实现步骤:
1.定义UI结构
2.验证是否选择了文件
3.向FormData中追加文件
4.使用xhr 发起上传文件的请求
5.监听onreadystatechange事件
定义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>
<!-- 1.文件选择框 -->
<input type="file" id="file1">
<!-- 2.上传文件的按钮 -->
<button id="btnUpload">上传文件</button>
<br />
<!-- 3.img标签 来显示上传成功以后的图片 -->
<img src="" alt="" id="img" width="800">
</body>
</html>
2.验证是否选择了文件
代码示例：
<!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>
<!-- 1.文件选择框 -->
<input type="file" id="file1">
<!-- 2.上传文件的按钮 -->
<button id="btnUpload">上传文件</button>
<br />
<!-- 3.img标签 来显示上传成功以后的图片 -->
<img src="" alt="" id="img" width="800">
</body>
<script>
// 1.获取到文件上传按钮
var btnUpload = document.querySelector('#btnUpload')
// 2.为按钮绑定单击事件处理函数
btnUpload.addEventListener('click', function () {
// 3.获取到用户选择的文件列表
var files = document.querySelector('#file1').files
if (files.length <= 0) {
return alert('请选择要上传的文件！')
}
console.log('用户选择了待上传的文件');
})
</script>
</html>
3.向FormData中追加文件
示例代码：
<!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>
<!-- 1.文件选择框 -->
<input type="file" id="file1">
<!-- 2.上传文件的按钮 -->
<button id="btnUpload">上传文件</button>
<br />
<!-- 3.img标签 来显示上传成功以后的图片 -->
<img src="" alt="" id="img" width="800">
</body>
<script>
// 1.获取到文件上传按钮
var btnUpload = document.querySelector('#btnUpload')
// 2.为按钮绑定单击事件处理函数
btnUpload.addEventListener('click', function () {
// 3.获取到用户选择的文件列表
var files = document.querySelector('#file1').files
if (files.length <= 0) {
return alert('请选择要上传的文件！')
}
var fd = new FormData()
// 将用户选择的文件 添加到FormData中
fd.append('avatar', files[0])
})
</script>
</html>
4.使用xhr发起上传文件的请求
示例代码：
<!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>
<!-- 1.文件选择框 -->
<input type="file" id="file1">
<!-- 2.上传文件的按钮 -->
<button id="btnUpload">上传文件</button>
<br />
<!-- 3.img标签 来显示上传成功以后的图片 -->
<img src="" alt="" id="img" width="800">
</body>
<script>
// 1.获取到文件上传按钮
var btnUpload = document.querySelector('#btnUpload')
// 2.为按钮绑定单击事件处理函数
btnUpload.addEventListener('click', function () {
// 3.获取到用户选择的文件列表
var files = document.querySelector('#file1').files
if (files.length <= 0) {
return alert('请选择要上传的文件！')
}
var fd = new FormData()
// 将用户选择的文件 添加到FormData中
fd.append('avatar', files[0])
var xhr = new XMLHttpRequest()
xhr.open('POST', 'http://www.liulongbin.top:3006/api/upload/avatar')
xhr.send(fd)
})
</script>
</html>
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>Document</title>
</head>
<body>
<!-- 1.文件选择框 -->
<input type="file" id="file1">
<!-- 2.上传文件的按钮 -->
<button id="btnUpload">上传文件</button>
<br />
<!-- 3.img标签 来显示上传成功以后的图片 -->
<img src="" alt="" id="img" width="800">
</body>
<script>
// 1.获取到文件上传按钮
var btnUpload = document.querySelector('#btnUpload')
// 2.为按钮绑定单击事件处理函数
btnUpload.addEventListener('click', function () {
// 3.获取到用户选择的文件列表
var files = document.querySelector('#file1').files
if (files.length <= 0) {
return alert('请选择要上传的文件！')
}
var fd = new FormData()
// 将用户选择的文件 添加到FormData中
fd.append('avatar', files[0])
var xhr = new XMLHttpRequest()
xhr.open('POST', 'http://www.liulongbin.top:3006/api/upload/avatar')
xhr.send(fd)
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
} else {
// 上传失败
console.log('上传失败' + data.message);
}
}
}
})
</script>
</html>
五、显示文件上传进度
新版本的XMLHttpRequest对象中，可以通过监听xhr.upload.onprogress事件，来获取到文件的上传进度.
示例代码：
<!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>
<link rel="stylesheet" href="/js文件/bootstrap.css">
<script src="/js文件/jquery-3.6.0.js"></script>
</head>
<body>
<!-- 1.文件选择框 -->
<input type="file" id="file1">
<!-- 2.上传文件的按钮 -->
<button id="btnUpload">上传文件</button>
<!-- 进度条 -->
<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">
</body>
<script>
// 1.获取到文件上传按钮
var btnUpload = document.querySelector('#btnUpload')
// 2.为按钮绑定单击事件处理函数
btnUpload.addEventListener('click', function () {
// 3.获取到用户选择的文件列表
var files = document.querySelector('#file1').files
if (files.length <= 0) {
return alert('请选择要上传的文件！')
}
var fd = new FormData()
// 将用户选择的文件 添加到FormData中
fd.append('avatar', files[0])
var xhr = new XMLHttpRequest()
// 监听文件上传的进度
xhr.upload.onprogress = function (e) {
if (e.lengthComputable) {
// 计算出上传的进度
var procentComplete = Math.ceil((e.loaded / e.total) * 100)
console.log(procentComplete);
// 动态设置进度条
$('#percent').attr('style', 'width:' + procentComplete + '%;').html(procentComplete + '%')
}
}
xhr.open('POST', 'http://www.liulongbin.top:3006/api/upload/avatar')
xhr.send(fd)
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
} else {
// 上传失败
console.log('上传失败' + data.message);
}
}
}
})
</script>
</html>
4.监听上传完成的事件
整体代码：
<!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>
<link rel="stylesheet" href="/js文件/bootstrap.css">
<script src="/js文件/jquery-3.6.0.js"></script>
</head>
<body>
<!-- 1.文件选择框 -->
<input type="file" id="file1">
<!-- 2.上传文件的按钮 -->
<button id="btnUpload">上传文件</button>
<!-- 进度条 -->
<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">
</body>
<script>
// 1.获取到文件上传按钮
var btnUpload = document.querySelector('#btnUpload')
// 2.为按钮绑定单击事件处理函数
btnUpload.addEventListener('click', function () {
// 3.获取到用户选择的文件列表
var files = document.querySelector('#file1').files
if (files.length <= 0) {
return alert('请选择要上传的文件！')
}
var fd = new FormData()
// 将用户选择的文件 添加到FormData中
fd.append('avatar', files[0])
var xhr = new XMLHttpRequest()
// 监听文件上传的进度
xhr.upload.onprogress = function (e) {
if (e.lengthComputable) {
// 计算出上传的进度
var procentComplete = Math.ceil((e.loaded / e.total) * 100)
console.log(procentComplete);
// 动态设置进度条
$('#percent').attr('style', 'width:' + procentComplete + '%;').html(procentComplete + '%')
}
}
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)
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
} else {
// 上传失败
console.log('上传失败' + data.message);
}
}
}
})
</script>
</html>
标签：files,文件,xhr,btnUpload,特性,XHR,Level2,var,上传 来源： https://www.cnblogs.com/lxr0606/p/16216455.html