首页 > 其他分享> > XMLHttpRequest Levenl2 的新特性

XMLHttpRequest Levenl2 的新特性

2022-05-03 09:35:14 作者：互联网

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>

标签：XMLHttpRequest,xhr,FormData,特性,表单,Levenl2,fd,var
来源： https://www.cnblogs.com/zhengwenfang/p/16216451.html