javascript - 如何使用 JQuery 将动态内容加载到 DIV 中

Question

我有一个 div:

<div id="content"></div>

当页面加载时，我调用 .load()。此加载需要大约 10 分钟才能完成，在执行期间，其 PHP 文件会返回一些有关执行状态的信息，类似于 Linux 加载。我想将此信息动态地放入 div #content 中，但 .load() 仅在执行结束时放置。有人可以帮我做这个吗？

.load() 调用:

$("#content").load("/admin/ajax/analyse.php");

Answer 1

jQuery 的 ajax 接口(interface)不提供获取响应进度更新的方法(即使它声称是浏览器 native XMLHttpRequest 对象的超集)。显然，such a use case is inconceivable to the jQuery developers :

No onreadystatechange mechanism is provided, however, since success, error, complete and statusCode cover all conceivable requirements.

通过直接使用 XMLHttpRequest，您可以在 onreadystatechange 事件处理程序中读取响应的当前进度:

var xhr = new XMLHttpRequest();
xhr.open("GET", "/admin/ajax/analyse.php", true);
xhr.onreadystatechange = function receiveUpdate(e) {
    $("#content").html(this.responseText);
}
xhr.send();

这适用于大多数浏览器的最新版本，包括 IE 10、Chrome 和 Firefox。

演示:

• Send response continually for 10 minutes
• Pause several minutes between sending data over 15 minutes