jQax – A Simple jQuery Ajax Wrapper with Loading Notification

If you just want a simple way of connecting your web page to a .NET web service or page method using ajax, then the following snippet of javascript is for you. By the way, if you place a div with an id of “divLoader” somewhere on your page, it will automatically fade in during loading and fade out when its complete.

UPDATE: I’ve created a jQuery plugin version of this code which I’ve blogged about here!

Yeah, Yeah, What do I copy?

The full code is below:

That’s all well and good, but how do I use it?

Well Its quite simple, if you have a page method or web service you call It like so (the call using the GET method is much the same):

jQax.CallWebServiceWithJSON(
    "MyPage.aspx/MyMethod",
    {
        parameterName: "parameterValue",
        horses: 40
    },  // can be any javascript object (if json2.js is enabled), otherwise you must pass in a json string
    true, // shows the divLoader
    "Custom Text for Loader...", // use null for default
    function(data, eventArgs) { // This is called on success
        // data is exactly whats returned by the server
        // quick and easy JSON parsing can be done like so:

        var result = $.parseJSON(data);

        // Deal with result here
    });

To enable automatic JSON serialization you must download the following and add it to your head section:

json2.js from http://www.json.org/json2.js

Page Methods must be setup like this!

If you want to use page methods with your fancy new ajax wrapper, you need to ensure the following two things:

Your page methods are static
Your page methods are decorated with the [WebMethod] attribute, found in the System.Web.Services namespace

Like so: [WebMethod] public static string MyMethod(string parameterName, string horses) { // Keep in mind, everything comes in and goes out as a string

    return parameterName + horses;
}

If you need more help…

Here are some links to help you out with some more complex uses of the above code:

Javascript Classes are a Best Practice for Cleaner Javascript – This explains why my javascript is laid out the way it is.
How to return multiple formats with WCF including XML, JSON and ATOM – A very quick guide on how to return different formats with WCF (Web Services).
5 Lifesaving Tips for Creating a WCF RESTful API in .NET 4 – In case you are using WCF, here are some tips so you don’t go through the same pain I did.