在进程运行时更新网页

本文关键字：网页 更新 运行时 进程 | 更新日期: 2023-09-27 18:03:57

我有一个页面，其中发生了大量耗时的函数。我想做的是，随着流程的每一步完成，更新网页，让用户知道刚刚完成了哪一步。基本上，用户提交一个查询，然后服务器查询数据库、处理数据、绘制图像并在页面上显示结果。我想在网页上说什么步骤的功能。它会显示"查询"，然后是"处理"……等。

伪:

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响应?

在进程运行时更新网页

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"}

如果使用AJAX，则需要客户端javascript按一定频率执行AJAX请求，以确定状态是否更新。另一个选择是在客户端使用silverlight，它能够有一个更健壮的事件驱动对话。

都是可行的，也是很好的选择。

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

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

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

相关文章：