JavaScript Ajax与Comet——“进度事件”的注意要点

ad6623 发布于2019-08-19 17:40 / 2587人阅读

摘要：有以下个进度事件在接收到响应数据的第一个字节时触发。在接收响应数据期间持续的触发在请求发生错误时触发在因调用方法而终止连接时触发在接收到完整的响应数据时触发在通信完成或者触发，，事件后触发。

有以下6个进度事件：

loadstart: 在接收到响应数据的第一个字节时触发。

progress: 在接收响应数据期间持续的触发

error: 在请求发生错误时触发

abort: 在因调用abort() 方法而终止连接时触发

load: 在接收到完整的响应数据时触发

loadend: 在通信完成或者触发error， abort， load事件后触发。

现在所有的主流浏览器都支持load事件，前五个除了IE其他的都支持

load事件

下面是使用示例：

xhr.onload = function() {
    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
        alert(xhr.responseText);
    } else {
        alert("Request was unsuccessful:" + xhr.status);
    }
}

放到open方法之前。

如：

var xhr = new XMLHttpRequest();
// xhr.onreadystatechange = function () {
//     if (xhr.readyState == 4) {
//         if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
//             console.log(xhr.responseText);
//         } else {
//             console.log("error");
//         }    
//     }
// };
xhr.onload = function () {
    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
        console.log(xhr.responseText);
    } else {
        console.log("error");
    }
};
xhr.open("get", "getexample.php", true);
xhr.send(null);

响应接收完毕后将触发load事件，因此也就没有必要去检查readyState属性了。

progress事件

onprogress事件处理程序会接收一个event对象，其target属性是XHR对象，但包含着三个额外属性：

lengthComputable

position

totalSize

其中lengthComputable表示进度信息是否可用的布尔值，position表示已经接收的字节数，totalSize表示根据Content-Length响应头部确定的预期字节数。

根据这些信息，就可以创建一个进度指示器：

xhr.onprogress = function () {
    if (event.lengthComputable) {
        document.getElementById("status").innerHTML = "Received " + event.position + " of " + event.totalSize + " bytes.";
    }
};

要注意的是position已改为loaded;totalSize已改为total。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78762.html

JavaScript Ajax与Comet——“XMLHttpRequest2级”的注意要点

摘要：并非所有的浏览器都完整的实现了级的规范，但是所有的浏览器都实现了它部分的规范。超时设定唯一支持的超时设定事件，对象的事件。方法用于重写响应的类型。它能强迫服务器返回的数据类型给些为本方法提供的类型。并非所有的浏览器都完整的实现了XMLHttpRequest 2 级的规范，但是所有的浏览器都实现了它部分的规范。 FormData FormData类型 append()向其添加数据，...

melody_lql 2019-08-21 13:29 评论0 收藏0
JavaScript Ajax与Comet——“其他跨域技术”的注意要点

摘要：由两部分组成回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数，回调函数的名字一般是在请求中指定的。下面是以个的例子回调函数的名字就是是通过动态的元素来使用的，使用时可以为属性指定一个跨域。是为与其他传递消息的很相似。图像Ping技术根据一个网页可以从任何网页中加载图像而不用担心使用跨域的原理，我们可以动态的创建图像，使用他们的onload和onerror事件处理程序...

Hwg 2019-08-19 17:40 评论0 收藏0
JavaScript Ajax与Comet——“XMLHttpRequest对象”的注意要点

摘要：在中，对象是通过库中的对象实现的。可以检测对象的属性，该属性表示请求响应过程的当前活动阶段。已经调用但尚未接收到响应接收。由于内存原因，不建议重用对象。头部信息对象提供了操作请求头部和响应头部信息的方法。建议使用自定义的头部名称。在IE5中，XHR对象是通过MSXML库中的ActiveX对象实现的。在IE中可能会遇到三种不同版本的XHR对象，即MSXML2.XMLHttp、MSXML...

Martin91 2019-08-19 17:39 评论0 收藏0
JavaScript Ajax与Comet——“跨源资源共享”的注意要点

摘要：注意请求和响应都不包含信息。对象的安全机制部分实现了的规范。请求返回后会触发事件，响应数据保存在属性中。无论是同源请求还是跨域请求，对于本地资源最好使用相对，在访问远程资源时再使用绝对。发送请求之后，服务器决定是否允许这种类型的请求。通过XHR实现Ajax通信的一个主要限制，来源于跨域安全策略。在默认情况下，Ajax只能访问与包含它的页面位于同一个域中的资源。但是有时也需要一些跨域的...

haobowd 2019-08-19 17:40 评论0 收藏0
高程3总结#第21章Ajax与Comet

摘要：页面发起一个到服务器的请求，然后服务器一直保持连接打开，直到有数据可发送。 Ajax与Comet XMLHttpRequest对象 IE5是第一款引入XHR对象的浏览器，在IE5中，XHR对象是通过MSXML库中的一个ActiveX对象实现的 //适用于 IE7 之前的版本 function createXHR(){ if (typeof arguments.callee.acti...

MudOnTire 2019-08-23 12:12 评论0 收藏0