XHLHttpRequest level 2 新特性

最新推荐文章于 2022-03-24 16:22:39 发布

“玫瑰无原则 ”

最新推荐文章于 2022-03-24 16:22:39 发布

阅读量598

点赞数 6

文章标签： http 网络前端 html javascript

本文链接：https://blog.csdn.net/m0_60273757/article/details/121906606

版权

设置HTTP请求的时限

实例：设置timeout属性

使用FormData对象管理表单数据

实例一：使用FormData对象直接传递参数

设置HTTP请求的时限

timeout属性：设置http请求的时限超出设置的时限之后就会执行处理函数

实例：设置timeout属性

<script>
    var xhr = new XMLHttpRequest();

    //设置超时时间
    xhr.timeout = 3000;//单位毫秒

    //设置超时以后的处理函数
    xhr.ontimeout = function () {
        console.log("请求超时！");
  }

使用FormData对象管理表单数据

FormData对象用以将数据编译成键值对，以便用XHLHttpRequest来发送数据。其主要用于发送表单数据，但亦可用于发送带键数据(keyed data)，而独立于表单使用。想知道更多可以查看官网链接：FormData 对象的使用 - Web API 接口参考 | MDN。

实例一：使用FormData对象直接传递参数

<script>
    //1.创建FormData实例
    var fd = new FormData();

    //2.调用append 函数，向fd中追加数据
    fd.append('uname', '张三');
    fd.append('psw', '123456');

    //实例化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) {
            console.log(JSON.parse(xhr.responseText));
        }
    }
</script>

实例二：使用FormData对象获取<form>表单元素内容传递

    <form action="" id="form1">
        <input type="text" name="uname" id="">
        <input type="password" name="psw">
        <input type="submit" value="提交">
    </form>

    <script>
        //获取表单元素
        var form = document.querySelector('#form1');//从文档获取
        //监听表单元素的submit事件
        form.addEventListener('submit', function (e) {
            e.preventDefault();// 阻止默认提交行为

            //根据form表单创建FormData对象，会自动将表单数据填充到FormData对象中
            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>

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

实例：上传头像

<link rel="stylesheet" href="./bootstrap.css">

<body>

    <input type="file">
    <button>点击上传文件</button>

    <div class="progress" style="margin: 15px; width: 500px;">
        <div class="progress-bar progress-bar-striped active" id="percent">
        </div>
    </div>
    <br>
    <img src="" alt="">

    <script>
        var btu = document.querySelector("button");
        btu.addEventListener("click", function () {
            var files = document.querySelector("input").files;

            if (files.length > 0) {
                //上传了文件
                var fd = new FormData();
                //files是文件的集合
                fd.append('avatar', files[0]);

                var xhr = new XMLHttpRequest();

                //通过监听xhr.upload.onprogress事件，来获取到文件的上传进度
                xhr.upload.onprogress = function (e) {

                    if (e.lengthComputable) {
                        var num = Math.ceil((e.loaded / e.total) * 100);
                        console.log(num);
                        var percent = document.querySelector("#percent");
                        percent.style.width = num + "%";
                        percent.innerHTML = num + "%";
                    }
                }

                xhr.open('POST', 'http://www.liulongbin.top:3006/api/upload/avatar')
                xhr.send(fd);

                xhr.onreadystatechange = function () {
                    if (xhr.readyState === 4 && xhr.status === 200) {
                        var data = JSON.parse(xhr.responseText);
                        if (data.status == 200) {
                            var img = document.querySelector("img");
                            img.src = 'http://www.liulongbin.top:3006' + data.url;
                        } else {
                            return alert("上传失败");
                        }
                    }
                }

            } else {
                //没有上传文件
                return alert("请先上传文件");
            }

        })
    </script>
</body>