ajax百分比加载特效,如何以ajax响应的百分比显示加载状态？

Om Shankar..

42

有两种方法可以显示实际百分比.简单地说...

一个旧的学校原生JavaScript或jQuery ajax,你也需要服务器支持,一个不同的URL,可以给你更新.并且你会在一段时间内继续点击该URL.

HTML5浏览器中的两个现代原生本地JavaScript,支持XMLHTTPRequest2,也称为AJAX 2,由新的Web和HTML5标准定义.

如果两个,欢迎来到新网!

浏览器中添加了多个功能,可增强连接性 - 这是HTML5功能的一部分.

XMLHTTPRequest2支持AJAX中的事件,这些事件可以帮助监控JavaScript本身的进度以及许多其他事情.您可以通过监控实际进度来显示实际百分比:

var oReq = new XMLHttpRequest();

oReq.addEventListener("progress", updateProgress, false);

oReq.addEventListener("load", transferComplete, false);

oReq.addEventListener("error", transferFailed, false);

oReq.addEventListener("abort", transferCanceled, false);

oReq.open();

然后你可以定义上面附带的处理程序(在你的情况下进展):

function updateProgress (oEvent) {

if (oEvent.lengthComputable) {

var percentComplete = oEvent.loaded / oEvent.total;

// ...

} else {

// Unable to compute progress information since the total size is unknown

}

}

jQuery也可用于第二种情况.毕竟,jQuery可以帮助您减少代码,更多地做!

希望你专注于HTML5和新的网络解决方案,我会指出你采用这个解决方案的Mozilla DOC - 监控AJAX的进展.

每个浏览器现在都有一个Web文档(如上面的Mozilla文档),此外,所有这些文档都为一个名为Web Platform的常见企业以及其他有影响力的Web和Internet巨头做出贡献,以获得常见的更新Web文档.这是一项正在进行的工作,因此并不完整.

此外,旧的AJAX中没有用于监视进度的本机功能.

在旧式的方式中,您必须创建一个间隔函数,该函数将继续点击单独的URL以获取进度更新.您的服务器还必须更新进度并将其作为来自其他端口的URL的响应发送.