Blog

Pulling Out the Big Gun: The Ajax Method

By Don Kiely

Screen Shot 2012-10-18 at 11.46.55 AM  

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.

ajax method 

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.



Don Kiely
Don Kiely is a featured instructor on many of our SQL Server and Visual Studio courses. He is a nationally recognized author, instructor, and consultant specializing in Microsoft technologies. Don has many years of teaching experience, is the author or co-author of several programming books, and has spoken at many industry conferences and user groups. In addition, Don is a consultant for a variety of companies that develop distributed applications for public and private organizations.


This blog entry was originally posted October 18, 2012 by Don Kiely

AJAX Web Development jQuery