Most of the Ajax features in jQuery, such as the very easy-to-use load, get, and post methods, 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 the convenience methods ultimately use to make the actual call to the server. They do this by performing all the necessary setup and setting default values for various arguments that work for the particular Ajax task at hand.
You can use the ajax method directly to handle the scenarios not easily handled—or not handled at all—by the convenience methods. The ajax method has the deceptively simple syntaxes shown below, taking just one or two arguments, url and options. With the first syntax option, you can pass the URL for the target 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 )
If you look at the documentation for the ajax method on the jquery.com website, you'll find that there are more than 30 option settings you can use. There are a handful of options you'll use all the time, and many more that handle various esoteric situations. There are options that let you define event functions, control the response data format, give you access to the underlying XHR object, define additional request headers, and many, many more.
As you explore the options, it becomes easy to appreciate all the work that the convenience methods do for you. On the other hand, it is nice to have the option to use the ajax method directly.
Using the ajax Method
Let's look at a simple example of using the ajax method by writing a Hello World application. The page calls the HelloWorld web service method to return a string. One way to do this is to use the very simple load method within a page:
$(function () {
$('#buttonSays').click(function () {
$('div').load('AjaxServices.asmx/HelloWorld');
});
});
But you can also use the ajax method directly to make the Ajax call to the server. The following code 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 screenshot below shows the results of clicking the Get Info button on the page. The result is the same as the earlier sample using the load method, where the code updates the three div elements on the page. The web service increments the number with each call, so that you know how many times it has run.
"Hello World" application using jQuery's ajax method