Introduction to JQuery: Part X

In previous article, we discussed few JQuery's AJAX functions. In this article, we will cover $.ajax() and its supporting functions. I used below script, that will explain the Ajax functions.

$(function() {

$.ajaxSetup({ url: 'account/getdata' });// Specify default values for all AJAX requests.

$('#title').ajaxStart(function() { $(this).html('<div>Ajax Call started.</div>'); });//Called on Ajax Call

$('#title').ajaxComplete(function(event, request, settings) { $('<div>Ajax Call Completed.</div>').appendTo($(this)); });// Called on Ajax call completes

$('#title').ajaxStop(function() { $('<div>Ajax Call Stopped.</div>').appendTo($(this)); });//Called when no pending AJAX requests

$('#title').ajaxSuccess(function() { $('<div>Ajax Call Succeed.</div>').appendTo($(this)); });//Called When Request is succeed

$('#title').ajaxError(function(e, xhr, settings, exception) { $('<div>Ajax Call Completed.</div>').appendTo($(this)); });//Called when Error occurs like invalid url...

$.ajax({

type: "POST",

data: { firstname: "test", lastname: "123" },

success: function(data) {

var s = '<div>Loaded ' + data.fullName + '.</div>'; $(s).appendTo($('#title'));

}

}); // Makes a AJAX called

$.ajax({

type: "POST",

data: { firstname: "test", lastname: "1234" },

success: function(data) {

var s = '<div>Loaded ' + data.fullName + '.</div>'; $(s).appendTo($('#title'));

}

}); // Makes a Another AJAX called

});

</script>

ajaxSetup() : This function is used to specify default values to AJAX requests. In above script, the default value of url is given. If any ajax request is missing the url property, than it will be taken from that function as a default value.

ajaxStart() : This function is used to register a handler to be called on first AJAX request.

ajaxComplete(): This function is used to register a handler to be called on AJAX request completion.

ajaxStop(): This function is used to register a handler to be called , when there is no pending AJAX requests.

In above functions, we can give selector or JQuery object as anyone. Similarly, ajaxError() and ajaxSuccess() will be called on success/error of the AJAX request. We will finish this section with ajax(). This function is core for all ajax functions. It's all parameters are optional. It's syntax:

$.ajax(url:' ', data:'', success:function(){}, dataType:'', type:'GET or POST', timeout:in ms.... )

ajax() can handle data types like xml, html, json and text. By default, AJAX requests are made using HTTP GET method.

For complete list of parameters of $.ajax(), refer http://api.jquery.com/jQuery.ajax/ .

In above script, I am making an ajax call over POST and displaying the data after success. We can write callbacks for ajax request beforeSend, error, success and complete events.

We can use ajax() in place of get() function with below syntax:

$.ajax({

url: url,

data: data,

success: success,

dataType: dataType

});

In the same way, post() functionality can be achieved using:

$.ajax({

type: 'POST',

url: url,

data: data,

success: success

dataType: dataType

});

We can use .ajaxSend() function to register a handler to be called before sending Ajax request. It's syntax:

ajaxSend( handler(event, XMLHttpRequest, ajaxOptions) )

Example:

$('#title').ajaxSend(function(e, xr, settings) {alert(settings.url);});

I am ending the things here. In coming articles, we will cover other features of JQuery in depth. I hope this article will be helpful for all.