如何使用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接口没有提供获取响应进度更新的方法（即使它声称是浏览器的本机XMLHttpRequest对象的超集）。显然，such a use case is inconceivable to the jQuery developers：

  

不提供onreadystatechange机制，因为success，error，complete和statusCode涵盖了所有可能的要求。

通过直接使用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

Answer 2

有几种方法可以解决这个问题，但所有这些方法都需要服务器端更改。一个解决方案（我认为最符合你想象的工作方式）是long polling。

请参阅此quesiton on long polling with PHP and jQuery。

Answer 3

这只是一个你必须要冲出来的想法......

在服务器上，

1. 用户点击网址＃1，
2. 如果没有会话，则会启动会话。
3. 启动生成数据的异步过程。
4. 因为它完成了部分数据，所以它排队了。更简单地说，它将数据放在某个地方。可以是内存中缓存的数据库。
5. 当异步任务生成所有数据时，它会通过使用一些魔术字符串发送文件结束指示。

在服务器上：

1. 同一个用户点击URL＃2（您从会话信息中知道）
2. 你从队列前面给他一大块数据。
3. 每次他点击URL＃2，你都会给他一些更多的数据。
4. 当浏览器最后一次请求并且剩下的全部是文件结束指示时，服务器可以返回一些HTTP结果代码，表示不再有数据，或者它可以返回魔术字符串。

在客户端，

1. 对URL＃1执行ajax请求以启动服务器生成。
2. 反复发出针对URL＃2的请求。
3. 每个结果都会附加到页面元素，以便用户在到达时可以看到它。
4. 当客户端请求返回“不再数据”结果代码（或魔术文件结尾字符串）时，它会退出，向用户请求更多数据和信号，方法是在屏幕上显示所有数据在那里。

那应该适合你。