Nick Riggs, Web Developer

Making stuff up about web development since last week.

23 October 2014

Subscribe to our RSS feed

Posted in ASP.NETJavaScript August 10, 2009

Implement a simple jQuery plugin that simplifies AJAX-based polling in your web applications

I’m currently working on Html5 application that launches AJAX HTTP requests that can potentially be long running. Furthermore, the user can launch a bunch of them at a time. In a perfect world the application would wait for the server to respond, but that’s not possible since HTTP 1.1 dictates that a browser should have no more than two concurrent connections open to a server. This causes the browser to appear locked up when two long running requests are active.

I decided I would use a polling solution for these long running requests. Basically, when the client sent a request to the server for the data, the server would begin (or continue) it’s work and respond to the client request immediately. The response would contain a data element signalling the client that the server was still working on the request. The client would wait a certain interval and try again, and continue this process until the response contained expected data.

I looked around for a jQuery plugin to help me, but didn’t come up with anything that did exactly what I wanted – so I wrote one. My specific need was that I didn’t want a simple interval based timing, meaning for example: Try every 500 milliseconds. Instead I wanted to scale (over a duration) the amount of time that the client waited before sending subsequent requests. Starting out very low for the many requests that come back almost immediately, and progressing to a much longer wait for the requests that are taking a long time.

I extended the built in jQuery $.ajax(), $.post() and $.get() functions, here is an example of making a polling call with ajaxPolling.js:

$.ajaxPoll({
    url: "/Query/Run",
    type: "POST",
    data: { queryId: 1234 },
    dataType: "json",
    success: function(data) {
        alert(data.result);
    }
});

In this example, the polling code decides when a request represents a completed job by evaluating the default successCondition, which is defined globally as:

successCondition: function(result) {
    if (result != null) {
        try {
            return eval(result)["complete"];
        }
        catch (ex) {
            return false;
        }
    }

    return false;
}

The successCondition can be overridden globally or locally on an single call:

Globally:

$.ajaxPollSettings.successCondition = function(result) {
    return result != null; // custom condition goes here.
}

Locally:

$.ajaxPoll({
    url: "/Query/Run",
    type: "POST",
    data: { queryId: 1234 },
    dataType: "json",
    successCondition: function(result) {
        return result != null; // custom condition goes here.
    },
    success: function(data) {
        alert(data.result);
    }
});

By default, the polling type is “interval”. It’s doing a simple retry event X milliseconds. For my application, I’d like to have a more complicated “timed” set up that starts out retrying at 250 milliseconds and works its way up to retrying every 5,000 milliseconds over 60 seconds. To set this up globally for my application:

$.ajaxPollSettings.pollingType = "timed";
$.ajaxPollSettings.interval = 250;
$.ajaxPollSettings.maxInterval = 5000;
$.ajaxPollSettings.durationUntilMaxInterval = 6000;

Now any calls I make to $.ajaxPoll(), $.getPoll() or $.postPoll() will use my “timed” settings.

This plugin gives me a quick way to add a client side polling solution to my applications. Keep in mind that implemented correctly, the server is involved in this solution as well, meaning that in a best-case scenario: calls made to the server respond almost immediately with either a flag signaling that the server is still working or the actually result. In the future, I’ll post a sample implementation of an ASP.MVC application that works with the plugin.

First Draft Source Code: jQuery ajaxPoll Plugin

See Also: