XMLHttpRequest Level2新特性（设置HTTP请求（超时）时限、演示FormData对象的基本使用管理表单数据、使用formdata快速获取表单中的数据、利用XML上传文件）

置顶龙眸

已于 2022-07-07 18:11:16 修改

阅读量1.1k

点赞数 1

分类专栏： ajax 笔记文章标签： http xml javascript jquery bootstrap

于 2022-07-07 18:07:23 首次发布

本文链接：https://blog.csdn.net/weixin_52065872/article/details/125664156

版权

笔记同时被 2 个专栏收录

73 篇文章 1 订阅

订阅专栏

ajax

3 篇文章 0 订阅

订阅专栏

XMLHttpRequest Level2新特性

旧版XMLHttpRequest的缺点

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

XMLHttpRequest Level2新功能

1、可以设置HTTP请求的时限
2、可以使用FormData对象管理表单数据
3、可以上传文件
4、可以获得数据传输的进度信息

设置HTTP请求（超时）时限

<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);
                var result = JSON.parse(xhr.responseText)
                console.log(result);
            }
        }
    </script>

演示FormData对象的基本使用管理表单数据

<script>
        // 1.创建一个formdata表单
        var fd = new FormData()
        // 为Formdata表单添加数据项，调用append函数，向fd追加数据
        fd.append('uname', 'xyw')
        fd.append('upwd', '111222')

        // 创建xhr对象
        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) {
                // var result = JSON.parse(xhr.responseText)
                console.log(JSON.parse(xhr.responseText))
            }
        }
    </script>

使用formdata快速获取表单中的数据

<body>
    <form id="form1">
        名称：<input type="text" name="uname" autocomplete="off"><br>
        密码：<input type="password" name="upwd"><br>
        <button type="submit">提交</button>
    </form>
    <script>
        // 1.通过DOM操作，获取到form表单元素
        var form = document.querySelector('#form1')
        // 监听form表单
        form.addEventListener('submit', function(e) {
            // 阻止表单默认提交行为
            e.preventDefault()


            // 创建formdata，快速获取到form表单数据
            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) {
                    var result = JSON.parse(xhr.responseText)
                    console.log(result);
                }
            }
        })
    </script>
</body>

上传文件并计算文件上传的进度

上传文件实现步骤
1、定义UI结构
2、验证是否选择了文件
3、向FormData中追加文件
4、使用xhr发起上传文件的请求
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>文件上传</title>
    <link rel="stylesheet" href="./lib/bootstrap.css">
    <script src="./lib/jquery.js"></script>
</head>

<body>
    <!-- 一、定义UI结构 -->
    <!-- 1.文件选择框 -->
    <input type="file" id="file1">
    <!-- 2.上传文件按钮 -->
    <button id="btnUpload">上传</button>
    <!-- bootstrap进度条 -->
    <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">
    <script>
        // 1.获取上传文件按钮
        var btnUpload = document.querySelector('#btnUpload')
        // 2.为按钮添加click事件监听
        btnUpload.addEventListener('click', function() {
            // 3.获取到选择的文件列表
            var files = document.querySelector('#file1').files
            if (files.length <= 0) {
                return alert('请选择要上传的文件!')
            }
            // 创建formdata对象
            var fd = new FormData()
            // 将用户选择的文件添加到formdata中
            fd.append('avatar', files[0])
            // 创建xhr对象
            var xhr = new XMLHttpRequest()
            // 显示文件上传进度
            // 监听xhr.upload的onprogress事件
            xhr.upload.onprogress = function(e) {
                // e.lengthComputable是一个布尔值，表示当前上传的资源是否具有可计算的长度
                if (e.lengthComputable) {
                    // e.loaded已传输的字节
                    // e.total需传输的字节
                    // 计算出上传的进度
                    var percentComplete = Math.ceil((e.loaded / e.total) * 100)
                    // 监听上传进度的事件
                    $('#percent')
                        // 设置进度条的宽度
                        .attr('style', 'width:' + percentComplete + '%')
                        // 显示当前的上传进度条百分比
                        .html(percentComplete + '%')
                }
            }
            // 监听上传完成的事件
            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)
            // 监听onreadystatechange事件
            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
                        console.log(data);
                    } else { //上传文件失败
                        console.log(data.message);

                    }

                }
            }
        })
    </script>
</body>

</html>

龙眸

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
XMLHttpRequest Level2新特性（设置HTTP请求（超时）时限、演示FormData对象的基本使用管理表单数据、使用formdata快速获取表单中的数据、利用XML上传文件）

XMLHttpRequest Level2新特性（设置HTTP请求（超时）时限、演示FormData对象的基本使用管理表单数据、使用formdata快速获取表单中的数据、利用XML上传文件）
复制链接

扫一扫