ansaurus

Question

how to show progress immediately using ajax?

Answer 1

A:

Couple of remarks about your code:

You need to start a new thread to perform the lengthy operation and return immediately and not block the worker thread
You are using the cache to track progress, which is not reliable. ASP.NET can evict the cache under different circumstances like for example running low on memory, etc...

Here's an example I've put:

public class WebService : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "application/x-javascript";
        var id = context.Request["id"];

        if (string.IsNullOrEmpty(id))
        {
            id = Guid.NewGuid().ToString();
            context.Application[id] = 0;
            new Thread(() =>
            {
                for (int progress = 0; progress < 100; progress++)
                {
                    context.Application[id] = progress;
                    Thread.Sleep(100);
                }
                context.Application.Remove(id);
            }).Start();
        }

        var serializer = new JavaScriptSerializer();
        context.Response.Write(serializer.Serialize(new
        {
            id = id,
            error = false,
            progress = context.Application[id] ?? 100
        }));
    }

    public bool IsReusable
    {
        get { return false; }
    }
}

And the client:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;
<script type="text/javascript">
    var intervalId = null;
    $(function () {
        $('button').click(function () {
            $(this).attr('disabled', 'disabled').text('processing...');
            $.getJSON('/webservice.ashx', function (result) {
                intervalId = setInterval(function () {
                    poll(result.id);
                }, 1000);
            });

        });
    });

    function poll(taskId) {
        $.getJSON('/webservice.ashx', { id: taskId }, function (result) {
            if (result.progress >= 100) {
                clearInterval(intervalId);
                $('button').removeAttr('disabled').text('start');
            }
            $('#progress').html(result.progress + '%');
        });
    }
</script>
</head>
<body>
    <button>start</button>
    <div id="progress"></div>
 </body>
</html>

Darin Dimitrov 2010-09-11 09:25:21

hi, Darin Dimitrov, I tested your code had some trouble， and i modified some code support jsonp, it work well, thank you very much!code: string jsoncallback = string.Empty; if (!string.IsNullOrEmpty(context.Request["jsoncallback"])) jsoncallback = context.Request["jsoncallback"].ToString().Trim();//.... context.Response.Write(jsoncallback + "(" + serializer.Serialize(new { id = id, error = false, progress = context.Application[id] ?? 100 }) + ")");

2010-09-27 16:14:48

'/webservice.ashx' -> '/webservice.ashx?jsoncallback=?'

2010-09-27 16:16:57

ansaurus

tags:

views:

answers:

how to show progress immediately using ajax?

related questions