Are there progress update events in jQuery ajax?

Question

i have long running task that gets called using jquery ajax. i am using the block ui plugin to show "loading". is there anyway i can send progress messages back to the client to show progress and have that updated on the block ui plugin message.

So it will show this (as the server does its work) . .

"Loading first source . . . "
"Loading second source . . . "
"Loading third source . . . "
"Parsing Results . . . "

Answer 1

From what I've seen for the case of uploading stuff - people create a separate gateway and query it for progress info as it's only avaliable on the server side. But I think it's not the best thing in Your case.

If You want to load stuff with progress information or allow server to pop info on progress while generating output then http streaming is what You want. It's covered nicely here. Basically it's a single http request, to which the server responds in chunks for a minute or so (therefore sending stuff when it wants) and then a new connection is opened.

This was quite a discovery for me ;)

[edit]

Currently there are lots of better techniques avaliable, and all of them are wrapped up in Socket.IO - Websockets with fallbacks to other techniques including http streaming

Socket.IO is a module for nodeJS, but there are other and similar implementations. I have already exchanged some packets with JAVA Socket.IO implementation from https://github.com/Atmosphere/atmosphere

Answer 2

One way is to use HTTP Handlers and AJAX with jQuery.

1. Initiate Server side request

$("#btnCreateInvoice").click(function() {             
       $.ajax({ type: "POST",  url: "YourHttpHandler.ashx",
       contentType: "text/html; charset=utf-8",
       dataType: "html",  
       success: function(data) { start the block UI }
       });
    });

2. Polling

What next you need to do is to poll the server at 't' interval and get the status. For that we need to call a function at 't' interval that would initiate an AJAX call to a HTTPHandler to get the status.

$(function() {
  setInterval(updateStatus, 't');
});

function updateStatus() {
  $.ajax({ type: "POST",  url: "GetStatusHandler.ashx",
       contentType: "text/html; charset=utf-8",
       dataType: "html",  
       success: function(data) { process 'data' here and update the block UI message box }
       });
}

In your case here, the GetStatusHandler.ashx can return the complete innerHtml for status. For eg on the first call it will return 'Loading First source...', then it might return:
Loding First source...
Loading Second source...
and so on.