Question

我有一个长期运行的任务，使用jquery ajax调用。我正在使用block ui plugin to show“loading”。无论如何我可以将进度消息发送回客户端以显示进度并在块ui插件消息上更新。

所以它会显示这一点（因为服务器正在工作）。

“加载第一个来源......” “加载第二个来源......” “装第三个来源......” “解析结果......”

Answer 1

从我所看到的上传内容的情况来看 - 人们创建一个单独的网关并查询它的进度信息，因为它只在服务器端可用。但我认为这不是你个案中最好的事情。

如果您想加载包含进度信息的内容或允许服务器在生成输出时弹出进度信息，那么 http streaming 就是您想要的。它很好地涵盖了 here 。基本上它是一个单一的http请求，服务器以块的形式响应一分钟左右（因此在需要时发送内容），然后打开一个新连接。

这对我来说是一个发现;）

[编辑]

目前有许多更好的技术可供使用，所有这些技术都包含在Socket.IO - Websockets中，其他技术包括 http streaming

Socket.IO是nodeJS的一个模块，但还有其他类似的实现。我已经使用https://github.com/Atmosphere/atmosphere

中的JAVA Socket.IO实现交换了一些数据包

Answer 2

一种方法是使用HTTP处理程序和AJAX与jQuery。

<强> 1。启动服务器端请求

$("#btnCreateInvoice").click(function() {             
       $.ajax({ type: "POST",  url: "YourHttpHandler.ashx",
       contentType: "text/html; charset=utf-8",
       dataType: "html",  
       success: function(data) { start the block UI }
       });
    });

<强> 2。轮询

接下来需要做的是以“t”间隔轮询服务器并获取状态。为此，我们需要在't'时间间隔调用一个函数，该函数将启动对HTTPHandler的AJAX调用以获取状态。

$(function() {
  setInterval(updateStatus, 't');
});

function updateStatus() {
  $.ajax({ type: "POST",  url: "GetStatusHandler.ashx",
       contentType: "text/html; charset=utf-8",
       dataType: "html",  
       success: function(data) { process 'data' here and update the block UI message box }
       });
}

在这种情况下，GetStatusHandler.ashx可以返回完整的innerHtml状态。例如，在第一次调用时，它将返回'Loading First source ...'，然后它可能会返回：
Loding First source ...
加载第二个来源......
等等。

Answer 3

我最近才意识到一个做ajax“推”的项目。您可能想要查看它：

http://www.ape-project.org/

据我所知，还有一些其他项目正在做类似的事情，这是最真实的：“将进度消息发送回客户端”，其他解决方案需要请求轮询进度（仍然非常合法和良好的解决方案）。

Answer 4

我希望每个AJAX请求都返回一个JSON响应，其中包含要请求的消息，数据和下一个URL：{message: "Loading second resource...", data: ..., next_url: "/next_part"}

在第一次AJAX请求之前，将BlockUI消息设置为“正在加载...”。获得响应后，将BlockUI消息设置为从AJAX调用中返回的消息。然后对下一个AJAX调用“next_url”的值，依此类推，循环直到你完成所有任务。

如果您正在加载一个大型数据集，但是它们可能需要执行类似progressive loading design pattern的操作，还可以在获取每个响应时设置进度消息。

Answer 5

您要做的是与Comet类似的内容。传统（“非彗星”）网络服务器不是为这种交易模型设计的，因此不是理想的解决方案。

我的建议是在每个数据源的一个客户端请求中分解处理：

function loadData() {
   // Each call passes callback(id) as a success handler
   fireAsynchronousRequest("source1");
   fireAsynchronousRequest("source2");
   fireAsynchronousRequest("source3");
}

function callback(var source) {
   if (source == "source1") {
       updateStatus("Source 1 loaded");
   }
   else if (source == "source2") {
       updateStatus("Source 2 loaded");
   }
}

这是异步解决方案的一个示例。如果需要同步，可以在callback()中实现状态处理。

Answer 6

我有类似的情况，我用另一种方法解决它。这是一个非常糟糕的工作，我知道所以请不要开始说明它有多糟糕，因为我知道它，但它可以满足我的需要。

我将进度放在服务器端的文件中。例如，我有一个需要做很多工作的process.php，它需要一段时间才能完成，所以用户会感到紧张并关闭浏览器（不太好）。因此process.php将一些输出保存到服务器上的文件中。在调用process.php的页面上，我有一个小div，span或者我想要显示进度的任何内容，但我建议使用div。每隔X毫秒或秒，我从div中的服务器加载另一个脚本，比方说display_info.php 现在display_info.php正在读取process.php输出的文件，内容将显示在div中。

你必须要小心，每个场合，process.php的输出必须是唯一的，否则你会把信息输出搞砸到浏览器。

了Emil

jQuery ajax中是否有进度更新事件？

6 个答案: