Show progress during a long Ajax call

Question

I have a simple website ( http://www.kousenit.com/twitterfollowervalue ) that calculates the amount based on Twitter subscribers. Because the Twitter API only returns 100 followers at a time, the complete process can involve many calls.

At the moment, I have an Ajax call for a method that starts a Twitter loop. The method looks like (Groovy):

def updateFollowers() { def slurper = new XmlSlurper() followers = [] def next = -1 while (next) { def url = "http://api.twitter.com/1/statuses/followers.xml?id=$id&cursor=$next" def response = slurper.parse(url) response.users.user.each { u -> followers << new TwitterUser(... process data ...) } next = response.next_cursor.toBigInteger() } return followers } 

This is called from a controller called renderTTFV.groovy. I call the controller through an Ajax call using the prototype library:

On my webpage in the header section (JavaScript):

 function displayTTFV() { new Ajax.Updater('ttfv','renderTTFV.groovy', {}); } 

and there is a div in the body of the page, which is updated after the call is completed.

Everything works, but the updateFollowers method can take a lot of time. Is there a way to bring back the meaning of progress? For example, I would like to refresh a webpage at each iteration. I know in advance how many iterations will be. I just can't figure out how to refresh the page in the middle of this loop.

Any suggestions would be appreciated.

Answer 1

For a more or less accurate progress report, you have two alternatives:

• Notify the server of your progress.
• Provide the client (browser) with a request for its progress.

Saving a server telling you about progress would be easy to implement. Instead of calling Ajax.Updater you can create an iframe element and change the server for each iteration to generate a response using some javascript to trigger a progress display in the browser and reset this answer. Thus, the browser will execute javascript and continue until the response is complete, so the user will see a progress indicator until it is complete.

Other server approaches are available to tell you about the progress. You can use Bing / Google for Comet servers.

As for the browser to periodically ask about the progress, you can either return some token to the browser for each iteration that the browser will check to see if it is the end result, or if it should transfer it to the server so the server keeps twitter for of the next set of results or somehow saves the state (if you have support for the state of the session that can do this) on your server, which is updated at each iteration and can be polled on a separate request.

I hope the suggestions help.