LearnNowOnline

Blog

Pulling Out the Big Gun: The Ajax Method

Excerpt by Don Kiely | October 18, 2012

All of the Ajax features in jQuery are convenience methods that make using Ajax fairly easy for the most common scenarios. But when those convenience methods don't work for you, you can pull out the big Ajax gun in jQuery: the ajax method. This is the method that all of the convenience methods ultimately use to make the actual call to the server. They do this by performing all the setup necessary and setting default values for various arguments that work for the particular Ajax task at hand.

You can make use of the ajax method directly to handle the scenarios not easily handled-or not handled at all-by the convenience methods. It has the deceptively simple syntaxes shown in the following code, taking just one or two arguments, url and options. With the first syntax option, you can pass the URL for the Web service and optionally follow it with as many option settings as you need. Or you can just pass a value for the options argument, one of which could be the url. This method is the embodiment of the saying that the devil is in the details, and providing the right options for what you want to do is the details you need to wade through to make the method work for you.

jQuery.ajax( url, [ options ] )

jQuery.ajax( options )

Let's look at a simple example of using the ajax method by rewriting the 'Hello World' sample below. Here is the code from that sample:

$(function () {

$('#buttonSays').click(function () {

$('div').load('AjaxServices.asmx/HelloWorld');

});

});

The HelloWorldAjax.html page in the sample project uses the ajax method directly to make the Ajax call to the server. It uses the type option to make a GET call and the url option to specify the location of the Web service. Like the get and post methods, the ajax method is a utility function that doesn't directly update a matched set of elements, so the method call uses the success event option to define a function to update the div elements on the page with the response text. This anonymous function uses the text method of the response object to extract the text from the XML returned from the Web service method and the html method to update the div elements.

$(function () {

 $('#buttonSays').click(function () {

 $.ajax({

 type: 'GET',

 url: 'AjaxServices.asmx/HelloWorld',

 success: function (response) {

 $('div').html($(response).text());

 }

 });

 });

});

The figure below shows the results of clicking the Get Info button on the page, where the code updates the three div elements on the page.

As you can see, using the ajax method is more complex than using the load method, both because you have to provide appropriate option values as well as because the method doesn't directly update a matched set of elements. You have to write a function for the success event to update the page.