c# get progress updates from single ajax call

Question

I'm trying to do an AJAX (JQuery) call and the URL will periodically send responses back to the browser but I just want to know how to capture the responses.

html js:

$.ajax({
            type: 'GET',
            datatype: 'json',
            url: Progess.ashx,
            success: function (data) {
                if (data.Working) {
                    $('#txt_test').val('Working on: ' + data.Current + '/' + data.Final);
                }
                else {
                    if (data.Success) {
                        alert('finished');
                    }
                }
            },                
            error: function () { alert('unable to call Progress.ashx and return valid JSON results'); }
        });

My ASP.NET Handler:

public void ProcessRequest (HttpContext context) {        
    for (int i = 0; i < 20; i++)
    {
        ProgressRespond(true, "", context, 0, 19, i, true);
        System.Threading.Thread.Sleep(1000);
    }
    ProgressRespond(true, "", context, 0, 19, 19, false);
}

public void ProgressRespond(bool success, string message, HttpContext context, int initial, int final, int current, bool working, object obj = null)
{
    ProgressClass response = new ProgressClass();
    response.Success = success;
    response.Message = message;
    response.Initial = initial;
    response.Final = final;
    response.Current = current;
    response.Working = working;
    response.Data = obj;
    string jsonString = JsonConvert.SerializeObject(response, new JsonSerializerSettings { DateTimeZoneHandling = DateTimeZoneHandling.Local });
    context.Response.ContentType = "application/json";
    context.Response.ContentEncoding = System.Text.Encoding.UTF8;
    context.Response.Clear();
    context.Response.Write(jsonString);
    if (success)
        context.Response.End();
    else
        context.Response.Flush();
}

private class ProgressClass
{
    public int Initial { set; get; }
    public int Final { set; get; }
    public int Current { set; get; }
    public bool Working { set; get; }
    public bool Success { set; get; }
    public string Message { set; get; }
    public object Data { set; get; }
}

I'm hoping somewhere in the AJAX function I can capture each of the responses and utilize the data returned before the final response. The 'success' callback only seem to fire when it receives the Response.End() from the handler but nothing in between.

I'm basically trying to implement Comet using JQuery AJAX. Is that possible?

Thanks.

score 0 · Answer 1 · edited May 23 '17 at 12:12

0

I'm guessing you are trying to create something like a modern "socket". I found a similar post related to Comet, Ajax, and Sockets that might help.

edited May 23 '17 at 12:12

Community

1
1

answered Jan 07 '15 at 05:04

Cryptc

2,959
1
18
18

1

Please post the answer here. Links might break over time. – Hawk Jan 07 '15 at 05:11

qamar · Answer 2 · 2015-01-07T05:24:08.107

Just thinking out loud, what you need is a jquery promise object which notify in progress state for an ajax call. Here is the API for in progress:

According to jquery deferred.progress( progressCallbacks ) does : " Add handlers to be called when the Deferred object generates progress notifications." Some guys did some fiddle stuff to show how it works you can get the jsFiddle here http://jsfiddle.net/hodgepodge/Xv8nD/

In case link dies the content of his jsFiddle is here:

var countUpTimer;
var countUp_number = -10;
var deferred = $.Deferred();
var promise = deferred.promise();

$(document).ready(function () {
    $("#progressbar").progressbar();
    $("#progressbar").css({
        'background': 'LightYellow'
    });
    $("#progressbar > div").css({
        'background': 'Orange'
    });

    $("#fail").click(function () {
        deferred.reject();
    });

    function result() {
        alert("Done!");
    }

    function failed() {
        $("#progressbar").css({
            'background': 'red'
        });
    }

    function inProgress() {
        $("#progressbar").progressbar({
            value: countUp_number
        });
        $("#progressbar > span").html(countUp_number + "%");
    }

    function countUp() {
        if (countUp_number < 100) {
            countUp_number += 10;
            deferred.notify();
            countUpTimer = setTimeout(countUp, 500);
        } else {
            deferred.resolve();
        }
    }

    promise.done(result);
    promise.fail(failed);
    promise.progress(inProgress);

    countUp();
});

****************Html*************************

<div id="progressbar" style="margin: 0px 0px 16px 0px;"><span style="position: absolute;text-align: center;margin: 5px 0 0 45%;"></span>

c# get progress updates from single ajax call

2 Answers2