XMLHttpRequest Levenl2 的新特性
4、XMLHttpRequest Levenl2 的新特性
4.1、认识 XMLHttpRequest Levenl2 的新特性
4.1.1、旧版 XMLHttpRequest的缺点
只支持文本数据的传输，无法用来读取和上传文件
传送和接收数据时，没有进度信息，只能提示有没有完成
4.1.2、XMLHttpRequest Levenl2 的新功能
可以设置HITP请求的时限
可以使用FormData对象管理表单数据
可以上传文件
可以获得数据传输的进度信息
4.2、设置HTTP请求时限
有时，Ajax操作很耗时，而且无法预知要花多少时间。如果网速很慢，用户可能要等很久。新版本的XMLHttpRequest对象，增加了timeout属性，可以设置 HTTP请求的时限:
xhr.timeout = 3000上面的语句，将最长等待时间设为3000毫秒。过了这个时限，就自动停止HTTP请求。与之配套的还有一个timeout事件，用来指定回调函数:
xhr.ontimeout = function(event){
alert('请求超时')
}4.3、FormData 对象管理表单数据
Ajax 操作往往用来提交表单数据。为了方便表单处理，HTML5新增了一个FormData对象，可以模拟表单操作
// 1.创建 FormData对象
var fd = new FormData()
fd.append('uname', 'zs')
fd.append('nuwd', '12345')
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) {
console.log(JSON.parse(xhr.responseText));
}
}也可以获取网页表单的值，示例代码如下
<body>
<form id="from">
<input type="text" name="name" autocomplete="off">
<input type="password" name="upwd">
<button type="submit">提交</button>
</form>
</body>
<script>
// 通过 DOM 操作，获取到 from 表单元素
var form = document.querySelector('#from')
form.addEventListener('submit', function (e) {
// 阻止表单默认行为
e.preventDefault()
// 创建 FormData， 快速获取到 from对象
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) {
console.log(JSON.parse(xhr.responseText));
}
}
})
</script>