Обновление веб-страницы при запуске процесса

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-запроса с регулярным интервалом является наиболее распространенным вариантом, или вы можете отключить буферизацию HTTP-ответа и направить обновления статуса обратно клиенту в рамках одного http-запроса. Если это длительная операция, в последнем сценарии необходимо внимательно изучить взаимодействие с пользователем и масштабируемость.

HTML 5 WebSockets будет также учитывать этот конкретный сценарий. Однако я не уверен, в каком состоянии они находятся в текущей версии браузеров, совместимых с HTML 5.

Answer 2

Веб-серверы не могут передавать незапрошенные данные клиенту; они подчиняются циклу запрос-ответ. Альтернативой является использование очереди сообщений со значительным увеличением сложности.

Опрос от клиента не так уж и плох; веб-серверы отлично справляются со многими короткими запросами, и интервал опроса в 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"}

Answer 3

Если вы сделали это с AJAX, вам понадобится клиентский javascript, выполняющий ajax-запрос с частотой, чтобы узнать, обновлено ли состояние или нет.Другой вариант - использование Silverlight на клиенте, он может вести более надежный диалог, управляемый событиями.

Оба варианта жизнеспособны и хороши.

Вот ваше общее начальное пространство для silverlight + wcf: http://www.silverlight.net/learn/advanced-techniques/wcf-ria-services/get-started-with-wcf-ria-services