XMLHttpRequest Level2的新特性

已于 2022-05-18 16:15:39 修改
阅读量181 收藏
点赞数
分类专栏： ajax 文章标签： ajax
于 2022-03-25 23:04:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_63400611/article/details/123747529
版权

旧版XMLHttpRquest的缺点

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

 

XMLHttpRequest Level2的新功能

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

设置HTTP请求时限

新版本的XMLHttpRequest增加了timeout属性,可以设置Http请求的时限

xhr.timeout = 3000
//等待三秒 超过即请求失败 自动停止Http请求

与之配套的还有一个timeout事件,用来指定回调函数

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

代码示例:

<!DOCTYPE html>
<html lang="zh-CN">

<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>
</head>

<body>
    <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);
            }
        }
    </script>
</body>

</html>

 

FormData对象管理表单数据

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

<script>
    //创建FormData对象
    var fd = new FormData();
    //调用append函数 为FormData添加表单项
    fd.append('uname', 'zs');
    fd.append('upwd', '123456');
    //创建xhr对象
    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'http://www.liulongbin.top:3006/api/formdata');
    //直接提交FormData对象 与提交网页表单的效果一样
    xhr.send(fd)
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            console.log(JSON.parse(xhr.responseText));
        }
    }
</script>

FormData对象也可以用来获取网页表单的值:

<body>
    <form id="form">
        <input type="text" name="uname" autocomplete="off">
        <input type="password" name="upwd">
        <button type="submit">提交</button>
    </form>
    <script>
        //通过DOM操作 获取表单元素
        var form = document.querySelector('#form');
        //监听form表单提交行为
        form.addEventListener('submit', function(e) {
            e.preventDefault();

            //创建FormData 快速获取form表单中的数据 直接将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) {
                    console.log(JSON.parse(xhr.responseText));
                }
            }
        });
    </script>
</body>

 

上传文件

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

实现步骤:

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

定义UI结构

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

验证是否选择了文件

//获取上传文件的按钮
var btnUpload = document.querySelector('#btnUpload');
//为按钮添加click事件监听
btnUpload.addEventListener('click', function() {
    //获取到选择的文件列表
    var files = document.querySelector('#file').files;
    if (files.length <= 0) {
        return alert('请选择要上传的文件!')
    }
    console.log('用户选择了待上传的文件');
})

向FormData中追加文件

//创建一个FormData对象
var fd = new FormData();
//将用户选择的文件添加到FormData中
fd.append('avatar', files[0]);

使用xhr发起上传文件请求

var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://www.liulongbin.top:3006/api/formdata');
xhr.send(fd)

监听onreadystatechange事件

xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var data = JSON.parse(xhr.responseText);
        // console.log(data);
        if (data.status === 200) {
            //上传成功
            alert('上传成功!')
            document.querySelector('#img').src = 'http://www.liulongbin.top:3006' + data.url
        } else {
            //上传失败
            console.log('图片上传失败!', data.message);
        }
    }
}

完整代码示例

<!DOCTYPE html>
<html lang="zh-CN">

<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>
</head>

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

    <script>
        //获取上传文件的按钮
        var btnUpload = document.querySelector('#btnUpload');
        //为按钮添加click事件监听
        btnUpload.addEventListener('click', function() {
            //获取到选择的文件列表
            var files = document.querySelector('#file').files;
            if (files.length <= 0) {
                return alert('请选择要上传的文件!')
            }
            // console.log('用户选择了待上传的文件');
            //创建一个FormData对象
            var fd = new FormData();
            //将用户选择的文件添加到FormData中
            fd.append('avatar', files[0]);

            var xhr = new XMLHttpRequest();
            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);
                    // console.log(data);
                    if (data.status === 200) {
                        //上传成功
                        alert('上传成功!')
                        document.querySelector('#img').src = 'http://www.liulongbin.top:3006' + data.url
                    } else {
                        //上传失败
                        console.log('图片上传失败!', data.message);
                    }
                }
            }
        })
    </script>
</body>

</html>

 

显示文件上传进度

可以通过监听xhr.upload.onprogress事件,来获取到文件的上传进度

基于上一部分的代码演示:

<!DOCTYPE html>
<html lang="zh-CN">

<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>
</head>

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

    <script>
        //获取上传文件的按钮
        var btnUpload = document.querySelector('#btnUpload');
        //为按钮添加click事件监听
        btnUpload.addEventListener('click', function() {
            //获取到选择的文件列表
            var files = document.querySelector('#file').files;
            if (files.length <= 0) {
                return alert('请选择要上传的文件!')
            }
            // console.log('用户选择了待上传的文件');
            //创建一个FormData对象
            var fd = new FormData();
            //将用户选择的文件添加到FormData中
            fd.append('avatar', files[0]);

            var xhr = new XMLHttpRequest();
            onprogress(xhr);
            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);
                    // console.log(data);
                    if (data.status === 200) {
                        //上传成功
                        alert('上传成功!')
                        document.querySelector('#img').src = 'http://www.liulongbin.top:3006' + data.url
                    } else {
                        //上传失败
                        console.log('图片上传失败!', data.message);
                    }
                }
            }
        })

        //监听文件上传进度
        function onprogress(xhr) {
            xhr.upload.onprogress = function(e) {
                //e.lengthComputable 是一个布尔值 表示当前上传的资源是否具有可计算的长度
                if (e.lengthComputable) {
                    //e.loaded 已传输的子节
                    //e.total  需要传输的子节
                    //Math.ceil()对一个数进行向上舍入
                    var percentComplete = Math.ceil((e.loaded / e.total) * 100);
                    console.log(percentComplete);
                }
            }
        }
    </script>
</body>

</html>

可以在F12控制台中选择'网络',调节网络环境,便于查看上传进度

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbTBfNjM0MDA2MTE=,size_20,color_FFFFFF,t_70,g_se,x_16

 可视化进度条需要导入的库

bootstrap库,选择其中带动画的进度条效果

<div class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
    <span class="sr-only">45% Complete</span>
  </div>
</div>

实现后完整代码

<!DOCTYPE html>
<html lang="zh-CN">

<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="../../js/bootstrap/css/bootstrap.css">
    <script src="../../js/jQuery.js"></script>
</head>

<body>
    <!--文件选择框-->
    <input type="file" id="file">
    <!--上传按钮-->
    <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 />
    <!--显示上传到服务器上的图片-->
    <img src="" alt="" id="img" width="500">

    <script>
        //获取上传文件的按钮
        var btnUpload = document.querySelector('#btnUpload');
        //为按钮添加click事件监听
        btnUpload.addEventListener('click', function() {
            //获取到选择的文件列表
            var files = document.querySelector('#file').files;
            if (files.length <= 0) {
                return alert('请选择要上传的文件!')
            }
            // console.log('用户选择了待上传的文件');
            //创建一个FormData对象
            var fd = new FormData();
            //将用户选择的文件添加到FormData中
            fd.append('avatar', files[0]);

            var xhr = new XMLHttpRequest();

            //监听文件上传进度
            xhr.upload.onprogress = function(e) {
                //e.lengthComputable 是一个布尔值 表示当前上传的资源是否具有可计算的长度
                if (e.lengthComputable) {
                    //e.loaded 已传输的子节
                    //e.total  需要传输的子节
                    //Math.ceil()对一个数进行向上舍入
                    var percentComplete = Math.ceil((e.loaded / e.total) * 100);
                    // console.log(percentComplete);
                    //attr() 方法设置或返回被选元素的属性值
                    //动态设置进度条
                    $('#percent').attr('style', 'width: ' + percentComplete + '%').html(percentComplete + '%')
                }
            }
            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);
                    // console.log(data);
                    if (data.status === 200) {
                        //上传成功
                        alert('上传成功!')
                        document.querySelector('#img').src = 'http://www.liulongbin.top:3006' + data.url
                    } else {
                        //上传失败
                        console.log('图片上传失败!', data.message);
                    }
                }
            }
        })
    </script>
</body>

</html>

监听上传完成的事件

xhr.upload.onload = function() {
    $('#percent').removeClass().addClass('progress-bar progress-bar-success')
}

 

本小节最终代码

<!DOCTYPE html>
<html lang="zh-CN">

<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="../../js/bootstrap/css/bootstrap.css">
    <script src="../../js/jQuery.js"></script>
</head>

<body>
    <!--文件选择框-->
    <input type="file" id="file">
    <!--上传按钮-->
    <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 />
    <!--显示上传到服务器上的图片-->
    <img src="" alt="" id="img" width="500">

    <script>
        //获取上传文件的按钮
        var btnUpload = document.querySelector('#btnUpload');
        //为按钮添加click事件监听
        btnUpload.addEventListener('click', function() {
            //再次传输时还原进度条样式
            $('#percent').removeClass().addClass('progress-bar progress-bar-striped active')
                //获取到选择的文件列表
            var files = document.querySelector('#file').files;
            if (files.length <= 0) {
                return alert('请选择要上传的文件!')
            }
            // console.log('用户选择了待上传的文件');
            //创建一个FormData对象
            var fd = new FormData();
            //将用户选择的文件添加到FormData中
            fd.append('avatar', files[0]);

            var xhr = new XMLHttpRequest();

            //监听文件上传进度
            xhr.upload.onprogress = function(e) {
                //e.lengthComputable 是一个布尔值 表示当前上传的资源是否具有可计算的长度
                if (e.lengthComputable) {
                    //e.loaded 已传输的子节
                    //e.total  需要传输的子节
                    //Math.ceil()对一个数进行向上舍入
                    var percentComplete = Math.ceil((e.loaded / e.total) * 100);
                    // console.log(percentComplete);
                    //attr() 方法设置或返回被选元素的属性值
                    //动态设置进度条
                    $('#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);
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    var data = JSON.parse(xhr.responseText);
                    // console.log(data);
                    if (data.status === 200) {
                        //上传成功
                        alert('上传成功!')
                        document.querySelector('#img').src = 'http://www.liulongbin.top:3006' + data.url
                    } else {
                        //上传失败
                        console.log('图片上传失败!', data.message);
                    }
                }
            }
        })
    </script>
</body>

</html>

 

 

m0_63400611
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
XMLHttpRequest设置超时
chibeng0752的博客
06-01 2754
下面是一种解决方法，就是利用setTimeout和clearTimeout方法，思路如下：在调用XMLHttpRequest的send方法后，调用setTimeout方法，设置超时时间值。在调用成功的方法内，调用clearTimeout()方法清除超时设置 functioncreate...
XMLHttpRequest Level2新特性---上传文件
KAMHUNCHAN的博客
05-06 169
FormData模拟，管理表单提交： 验证是否选中了文件： 上传文件进度： 进度条可以使用第三方库渲染
XMLHttpRequest超时事件
#维多利亚的秘密#
06-21 5944
《IE8 & 9开发实战：基于下一代IE的应用开发》第3章用AJAX和JSON来丰富Web应用程序的功能，本章将介绍Internet Explorer中的一些新功能和经过升级的功能，使开发人员能够增强动态Web应用程序的功能，并使其更为流畅。我们将会讨论兼容性和互操作性场景，重点讨论IE中可能会对现有应用程序产生影响的产品变化，并提供一些有用的详尽示例，用来演示如何将网站与IE中经过更新的AJAX
给XMLHttpRequest设置超时时间
印度阿三的专栏
03-05 2636
function createXMLHttpRequest() {    var request = false;    if(window.XMLHttpRequest) {        request = new XMLHttpRequest();        if(request.overrideMimeType) {            request.overrideMimeTyp
HTTP超时时间设置
最新发布
johnllllll的博客
05-11 1826
在进行超时时间设置之前我们需要了解一次http请求经历的过程在客户端和服务器之间通常有一层网关来负责路由和负载均衡：DNS和TCP的超时时间通常由系统指定，DNS默认为5s，TCP建了超时默认为127s。
XMLHttpRequest Level 2 使用指南
11-24
新版本的XMLHttpRequest Level 2 解决了这些问题，引入了多个关键特性： 1. **二进制数据处理**：新版本支持ArrayBuffer和Blob类型，允许开发者处理服务器返回的二进制数据，如图像、音频或视频文件。通过`response...
XMLHttpRequest
04-28
11. **新的XMLHttpRequest Level 2特性**：包括支持更多HTTP方法（如PUT、DELETE）、上传进度事件、Blob和ArrayBuffer响应类型以及更多响应头。 XMLHttpRequest是现代Web开发中的基础工具，它使得网页可以动态地...
xenonstack-module-level2
03-25
2. **HTML5的新特性**：HTML5引入了许多新功能，如语义化标签（如、、等），媒体元素（如和），以及离线存储等，这些都增强了在Xenonstack中创建现代、功能丰富的云服务界面的能力。 3. **CSS（Cascading Style ...
前端网络基础-通过XMLHttpRequest实现AJAX (二)
2201_75294326的博客
04-15 710
前端面试题汇总前端面试题是我面试过程中遇到的面试题，每一次面试后我都会复盘总结。
http超时设置
热门推荐
赶路人儿
07-27 2万+
http协议中可以设置超时(连接超时、响应超时)，具体设置情景如下： 1、java api的方式： JDK 1.5以前的版本，只能通过设置两个系统属性来控制网络超时： String szUrl = “http://www.ee2ee.com/”; URL url = new URL(szUrl); HttpURLConnection urlCon = (HttpURLConnection...
js xmlhttp ajax 超时时间,如何为XMLHttpRequest设置超时和ontimeout？
weixin_34570232的博客
08-06 884
覆盖XMLHttpRequest用自己的版本。 我不建议这样做，但有时如果您需要直接与使用XMLHttpRequest的代码集成，您可能会觉得您需要这样做。例如： (function() {var realXMLHttpRequest = XMLHttpRequest;XMLHttpRequest = function fakeXMLHttpRequest() {realXMLHttpReques...
IE8+中XMLHttpRequest支持timeout属性及ontimeout事件
weixin_34242819的博客
05-02 465
不久前我写了一个Ajax工具库。这篇是对请求超时处理的补充。IE8/9的XMLHttpRequest对象已经增加这方面的支持了。IE10 pre1测试也支持。如果W3C能将这两个东东标准化多好啊，不用那么的hack方式实现了。 XMLHttpRequest的timeout属性可以设置，表示在等待响应多少毫秒之后终止。 即如果在规定的时间内浏览器没有收到响应，那么就触发timeout事件，给xhr...
详细解读XMLHttpRequest（一）同步请求和异步请求
w88529593的专栏
09-19 1万+
XMLHttpRequest 让发送一个HTTP请求变得非常容易。你只需要简单的创建一个请求对象实例，打开一个URL，然后发送这个请求。当传输完毕后，结果的HTTP状态以及返回的响应内容也可以从请求对象中获取。 通过XMLHttpRequest生成的请求可以有两种方式来获取数据，异步模式或同步模式。请求的类型是由这个XMLHttpRequest对象的open()方法的第三个参数async的值
关于前端http请求timeout总结
pingqizhendi的博客
03-07 1万+
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Ma...
js xmlhttp ajax 超时时间,XMLHttpRequest设置超时
weixin_28912017的博客
08-06 1206
下面是一种解决方法，就是利用setTimeout和clearTimeout方法，思路如下：在调用XMLHttpRequest的send方法后，调用setTimeout方法，设置超时时间值。在调用成功的方法内，调用clearTimeout()方法清除超时设置functioncreateXMLHttpRequest(){varrequest=false;if(window.XMLHttpRe...
使用XMLHttpRequest 实现http 终止请求和超时
新的启程的博客
03-17 1万+
可以通过调用XMLHttpRequest对象的abort方法来取消正在进行的http请求 abort方法在所有的XMLHttpRequest版本和XHR2中可用，调用abort方法在这个对象上触发abort事件//终止请求和超时 function timeedGetText(url,timeout,callback){ var xhr = new XMLHttpRequest();
Javascript （Ajax）给XMLHttpRequest设置超时时间
KylinBL的专栏
10-13 8446
<br />在Web开发中，经常要用到Ajax技术，有时因为功能很简单，不想利用现成的框架，就只是想利用XMLHttpRequest来手动处理Ajax功能，这时，会遇到一个很现实的问题，就是Ajax请求的超时问题。如果我们利用Jquery这样的框架，是可以直接设定超时时间的，但是XMLHttpRequest对象并没有设置超时的属性，怎么办呢？总不能让页面一直请求吧？@_@<br />下面是一种解决方法，就是利用setTimeout和clearTimeout方法，思路如下：在调用XMLHttpRequest的
XMLHttpRequest实现终止请求和超时
下一站，幸福
04-15 1万+
这里是使用的XMLHttpRequest2中的API，口蹄疫通过XMLHttpRequest对象的 abort( )方法 来取消正在进行的HTTP请求，abort( )方法是在XMLHttpRequest和XMLHttpRequest2中都可用的，调用abort( )方法在这个对象上触发abort事件。调用abort( )的主要原因是完成像取消或超时请求消耗的是啊进太长或当响应变得无关时的情况 例
jQuery与Ajax基础教程：Struts2与Hibernate结合实践
5. **Ajax**：jQuery的`.ajax()`方法是实现异步数据交换的关键，它支持GET和POST请求，以及JSONP、XMLHttpRequest Level 2等多种数据格式。`.load()`, `.get()`, `.post()`等函数则是更简单的Ajax操作接口。 6. **...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值