When using the jQuery client library to make an asynchronous call to the server, there are 6 built-in options available to you - $.ajax(), load(), $.get(), $.getJSON(), $.getScript(), and $.post(). The last 5 of them are simply abstractions of the first, using certain default values for the parameters expected in a call to $.ajax(). This makes life a little easier when we make a request to the server because we can be more explicit in our code and only use those parameters we care about. For example, the following code…

$.get("Services/CustomerService.svc/", function(results) {
    var customers = eval('(' + results + ')');
    var html = $('#template').parseTemplate(customers);
    $('#customer_list').html(html);
});

is a replacement for this code…

$.ajax({
    url: "Services/CustomerService.svc/",
    type: "GET",
    success: function(results) {
        var customers = eval('(' + results + ')');
        var html = $('#template').parseTemplate(customers);
        $('#customer_list').html(html);
    }
});

Both do exactly the same thing, but the first has a more explicit and terse syntax. It’s obvious in the call to $.get() that we are making a simple HTTP GET request to Services/CustomerService.svc/. The second call has a bit more noise but many more options.

So there’s a tradeoff here between ease of use and functionality. The problem in my case was that my services calls were being cached in the browser. But I don’t want them to be cached because the state of my application may change often enough that subsequent request return a different data set. For example, consider this scenario…

function getCustomers() {
    $.get("Services/CustomerService.svc/", function(results) {
        // process customers...
    });
}

function deleteCustomer(customer) {
    $.post("Services/CustomerService.svc/delete/" + customer.CustomerID, function() {
        getCustomers();
    });
}

The deletion of a customer causes a POST to a web service, followed by a subsequent request for an updated data set. Unfortunately, the call to getCustomers() returns the data that was cached during the initial request, leaving the data set on the client unchanged. Obviously we could return a Boolean value from the call to Services/CustomerService.svc/delete and update the client data manually, but that may not always be a good option. So I need to work around the caching problem, which meant going back to good ol’ $.ajax() where we have access to 21 different options for customizing our Ajax call.

To circumvent browser cache, jQuery provides the cache parameter. Simply set it to false and the URL you are calling will be appended with a query string based on the current date & time.

function getCustomers() {
    $.ajax({
        url: "Services/CustomerService.svc/",
        type: "GET",
        cache: false,
        success: function(results) {
            // process customers...
        }
    });
}

By changing this simple parameter you avoid cached data, ensuring that all calls to Services/CustomerService.svc will now return the most current data set.

Check out the jQuery documentation to read more about the methods available for making asynchronous requests to the server, and the different parameters you can use in calls to $.ajax(). There’s also a great post by Rick Strahl which you can find here.