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.
<script type="text/javascript">
$(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.
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.