Ajax---XHR level2 新特性

1. xhr新特性 设置http请求的时限

有时，Ajax 操作很耗时，而且无法预知要花多少时间。如果网速很慢，用户可能要等很久。新版本的 XMLHttpRequest 对象，增加了 timeout 属性，可以设置 HTTP 请求的时限：

xhr.timeout = 3000

上面的语句，将最长等待时间设为 3000 毫秒。过了这个时限，就自动停止HTTP请求。与之配套的还有一个 ontimeout 事件，用来指定回调函数：

xhr.ontimeout = function(event){
     alert('请求超时！')
 }

使用如下：

<script>
        let xhr = new XMLHttpRequest()
        xhr.open('get' , 'http://www.liulongbin.top:3006/api/getbooks')

        //设置超时时限
        xhr.timeout = 300
        //调用超时时限 超时后执行下列代码
        xhr.ontimeout = function () {
            console.log('请求超时了！')
        }

        xhr.send()
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status ===200) {
                console.log(xhr.responseText)
            }
        }
    </script>

2.FormData对象管理表单数据

Ajax 操作往往用来提交表单数据。为了方便表单处理，HTML5 新增了一个 FormData 对象，可以模拟表单操作：

<script>
        //先创建formdata实例
        let fd = new FormData()
        //再调用append函数 向fd里面追加数据
        fd.append('uname','zs')
        fd.append('age',18)

        let xhr = new XMLHttpRequest()
        xhr.open('post' , 'http://www.liulongbin.top:3006/api/formdata')
        //需要发送的数据在上面都追加给了fd
        xhr.send(fd)
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status ===200 ) {
                console.log(JSON.parse(xhr.responseText))
            }
        }
    </script>

效果如下：

FormData对象也可以用来获取网页表单的值，示例代码如下：

<form id="form1">
        <input type="text" name="uname" autocomplete="off">
        <input type="password" name="upwd">
        <button type="submit">提交</button>
</form> 

  <script>
        //获取元素
        let form = document.querySelector('#form1')
        form.addEventListener('submit' , function (e) {
            //阻止表单的默认提交行为
            e.preventDefault()

            //创建formdata
            //将form表单的数据给到fd
            let fd = new FormData(form)

            let xhr = new XMLHttpRequest()
            xhr.open('post' , 'http://www.liulongbin.top:3006/api/formdata')
            //需要发送的数据在上面都追加给了fd
            xhr.send(fd)
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status ===200 ) {
                    console.log(JSON.parse(xhr.responseText))
                }
            }
            })
    </script>

效果如下：

3.上传文件

新版 XMLHttpRequest 对象，不仅可以发送文本信息，还可以上传文件。

实现步骤：

1. 定义 UI 结构

2. 验证是否选择了文件

3. 向 FormData 中追加文件

4. 使用 xhr 发起上传文件的请求

5. 监听 onreadystatechange 事件

---

1.定义 UI 结构

<!-- 1. 文件选择框 -->
    <input type="file" id="file1" />
    <!-- 2. 上传按钮 -->
    <button id="btnUpload">上传文件</button>
    <br />
    <!-- 3. 显示上传到服务器上的图片 -->
    <img src="" alt="" id="img" width="800" />

2.验证是否选择了文件

 // 1. 获取上传文件的按钮
 let btnUpload = document.querySelector('#btnUpload')
 // 2. 为按钮添加 click 事件监听
 btnUpload.addEventListener('click', function() {
     // 3. 获取到选择的文件列表
     let files = document.querySelector('#file1').files
     if (files.length <= 0) {
         return alert('请选择要上传的文件！')
     }
     // ...后续业务逻辑
 })

3.向 FormData 中追加文件

// 1. 创建 FormData 对象
 let fd = new FormData()
 // 2. 向 FormData 中追加文件
 fd.append('avatar', files[0])

4.使用 xhr 发起上传文件的请求

// 1. 创建 xhr 对象
 let xhr = new XMLHttpRequest()
 // 2. 调用 open 函数，指定请求类型与URL地址。其中，请求类型必须为 POST
 xhr.open('POST', 'http://www.liulongbin.top:3006/api/upload/avatar')
 // 3. 发起请求
 xhr.send(fd)

5.监听 onreadystatechange 事件

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    let data = JSON.parse(xhr.responseText)
    if (data.status === 200) { // 上传文件成功
      // 将服务器返回的图片地址，设置为 <img> 标签的 src 属性
      document.querySelector('#img').src = 'http://www.liulongbin.top:3006' + data.url
    } else { // 上传文件失败
      console.log(data.message)
    }
  }
}