XMLHttpRequest Level2的新特性

阿大的冰棒

于 2022-11-17 10:07:35 发布

阅读量184

点赞数

文章标签：服务器 javascript 运维

本文链接：https://blog.csdn.net/qq_53582888/article/details/127887670

版权

1 认识XMLHttpRequest Level2

1、认识XMLHttpRequest Level2

只支持文本数据的传输，无法用来读取和上传文件
传送和接收数据时，没有进度信息，只能提示有没有完成

2、XMLHttpRequest Level2的新功能

可以设置HTTP请求的时限
可以使用FormData对象管理表单数据

可以上传文件
可以获得数据传输的进度信息

2 设置HTTP请求时限：

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

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

<script>
        var xhr = new XMLHttpRequest();

        xhr.timeout = 30;
        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>

3 FormData对象管理表单数据

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

<script>
        var fd = new FormData();
        fd.append("name", 'zs');
        fd.append('age', '20');

        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(xhr.responseText);
            }
        }
        
    </script>

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

 <form action="" id="form1">
        <input type="text" name="uname" id="" autocomplete="off">
        <input type="password" name="upwd" id="">
        <button type="submit">提交</button>
    </form>
    <script>
        var form = document.querySelector("#form1");
         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(xhr.responseText);
            }
         }
    </script>

FormData自动添加了setRequestHeader

4 上传文件

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

实现步骤：

1、定义UI结构
2、验证是否选择了文件
3、向FormData 中追加文件
4、使用xhr发起上传文件的请求
5、监听onreadystatechange事件

1、定义UI结构

 <!-- 文件选择框 -->
    <input type="file" name="" id="file1">
    <!-- 提交按钮 -->
    <button id="btnUpload">上传文件</button>
    <!-- img标签，来显示上传成功以后的图片 -->
    <img src="" alt="" id="img" width="800px">

2、验证是否选择了文件

 //获取上传文件的按钮
        var btn = document.querySelector("#btnUpload");
        //为按钮添加点击事件
        btn.addEventListener('click', function(){
            //获取到选择的文件列表
            var files = document.querySelector("#file1").files;
            if(files.length <= 0){
                return alert("请选择要上传的文件");
            }
        })

3、向formdata中追加文件

var fd = new FormData();
fd.append('avatar', files[0]);

注意：avartar不是固定的，要根据接口来

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

上传文件必须使用POST方式

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){
                    //传回的是字符串形式，应该将其变为js对象，便于操作
                    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);
                    }
                }
            }

5 显示文件的上传进度

新版本的XMLHttpRequest对象中，可以通过监听xhr.upload.onprogress事件，来获取到文件的上传进度。语法格式如下:

event三个很重要的属性：

e.lengthComputable：布尔值，表示当前上传的资源是否有可计算的长度

e.loaded：已传输的字节

e.total：需传输的总字节

//监听文件上传进度
         xhr.upload.onprogress = function(e){
            if(e.lengthComputable){
                var progress = Math.ceil((e.loaded/e.total)*100);
                console.log(progress);
            }
         }

<!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="bootstrap/css/bootstrap.css">
</head>
<body>
    <!-- 文件选择框 -->
    <input type="file" name="" id="file1">
    <!-- 提交按钮 -->
    <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">
          45%
        </div>
      </div>
    <!-- img标签，来显示上传成功以后的图片 -->
    <img src="" alt="" id="img" width="800px">
    <script>
        //获取上传文件的按钮
        var btn = document.querySelector("#btnUpload");
        //为按钮添加点击事件
        btn.addEventListener('click', function(){
            //获取到选择的文件列表
            var files = document.querySelector("#file1").files;
            if(files.length <= 0){
                return alert("请选择要上传的文件");
            }

            var fd = new FormData();
            fd.append('avatar', files[0]);

            var xhr = new XMLHttpRequest();

            //监听文件上传进度
            xhr.upload.onprogress = function(e){
                if(e.lengthComputable){
                    var progress = Math.ceil((e.loaded/e.total)*100);
                    console.log(progress);
                    document.querySelector("#percent").style.width = progress + '%';
                    document.querySelector("#percent").innerHTML = progress + '%';
                }
            }
            xhr.upload.onload = function(){
                document.querySelector("#percent").classList.remove('progress-bar', 'progress-bar-striped', 'active');
                document.querySelector("#percent").classList.add('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){
                    //传回的是字符串形式，应该将其变为js对象，便于操作
                    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>
</body>
</html>

阿大的冰棒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
XMLHttpRequest Level2的新特性

1、认识XMLHttpRequest Level2只支持文本数据的传输，无法用来读取和上传文件传送和接收数据时，没有进度信息，只能提示有没有完成2、XMLHttpRequest Level2的新功能可以设置HTTP请求的时限可以使用FormData对象管理表单数据可以上传文件可以获得数据传输的进度信息。
复制链接

扫一扫