Question

我有一个页面，其中发生了大量耗时的功能。我想要做的是在完成流程的每个步骤后，更新网页以让用户知道刚刚完成的步骤。本质上，用户提交查询，然后服务器查询数据库，处理数据，绘制图像并在页面上显示结果。我希望网页说明该功能的步骤。它会说，“查询”然后“处理”......等等。

伪：

protected void Search(object sender, EventArgs e){

    //display that the process has begun
    List queryResults = Query()
    //display that the query is finished
    foreach(item in queryResults){
       ProcessItem(item)
       //display that item has been processed
       Render(item)
       //display item has been rendered
    }

}

我已经研究过使用Ajax来更新页面而不重新加载它，但是从我的简单理解（对Ajax的零经验），客户端将从服务器请求一个文件。 Ajax是我需要的工具吗？如果是这样，这是否意味着在评论区域我会向客户发送ajax响应？

Answer 1

如果您使用AJAX，您需要让客户端javascript在频率上执行ajax请求，以查明状态是否更新。另一种选择是在客户端上使用silverlight，它能够进行更强大的事件驱动对话。

两者都是可行的和良好的选择。

以下是silverlight + wcf的一般入门空间： http://www.silverlight.net/learn/advanced-techniques/wcf-ria-services/get-started-with-wcf-ria-services

Answer 2

定期轮询的ajax请求是最常见的选项，或者您可以关闭http响应的缓冲并在单个http请求中将状态更新流回客户端。如果这是一个长时间运行的操作，您需要在后一种情况下仔细考虑用户体验和可伸缩性。

Html 5 WebSockets也将解决这个特定的场景。但是，我不确定在当前的Html 5兼容浏览器中这些状态是什么状态。

Answer 3

Web服务器无法将未经请求的数据推送到客户端;他们服从请求 - 响应周期。另一种方法是使用消息队列，复杂性显着增加。

来自客户的投票并不是那么糟糕; Web服务器擅长处理许多短请求，并且2或3秒的轮询间隔应该足够快。

这是我喜欢使用的轮询方法。它异步地等待响应再次轮询之前返回（需要jQuery）：

function poll(url, task, progressBar, resultsCallback, 
        timeoutMillis, pollIntervalMillis) {
    $.ajax({
        url: url,
        type: 'GET',
        dataType: 'json',
        timeout: timeoutMillis,
        data: 'action=poll&task='+task,
        success: (function(response, status, xhr) {
            if ('progress' in response) {

                // update the UI with the progress
                progressBar.setValue(response.progress);
            }
            if ('status' in response) {
                if (response.status == 'pending') {

                    // task is not finished, continue polling
                    setTimeout((function() {
                        poll(url, task, progressBar, resultsCallback, 
                                timeoutMillis, pollIntervalMillis);
                    }), pollIntervalMillis);
                }
                else {

                    // task completed
                    if (response.status == 'cancelled') {
                        progressBar.setColor('red');
                        progressBar.setText("Task '"+task+"' was cancelled");
                    }
                    else {
                        progressBar.setColor('green');
                        progressBar.setText("Task '"+task+"' complete");
                    }

                    // GET the results
                    $.ajax({
                        url: url,
                        type: 'GET',
                        timeout: timeoutMillis,
                        data: 'action=results&task='+task,
                        success: (function(response, status, xhr) {
                            resultsCallback(response, status, xhr);
                        }),
                        error: error
                    });
                }
            }
        }),
        error: error
    });

    function error(xhr, status, err) {
        alert('Failure to communicate with server: ' + status + ', ' + err);
    }
}

您的服务器端代码应该响应民意调查：

{"progress" : 42, "status" : "pending"}

将流程更新为网页运行

3 个答案: