Ajax with jQuery.ajax() – jQuery API

Before approaching Ajax, I must say that I have seen lots of newbie programmer who are lil bit confused about “What is Ajax?”

But before digging into Ajax, lets review the non-common sense about Ajax

Ajax is  –

a) Not A Programming language 😦

b) Not a pattern

c) Not a Library itself

d) Not a framework itself

e) Not a tool itself

f) Not a function

g) Not a Technology itself, but a group of technologies.

Surprisingly some big guys call Ajax is a programming language!!!! WTF!

Interestingly  from an article at MacWorld: View that portion as Image

The above MacWorld article was written by Michael DeAgonia, Computerworld LOLz!!!

Let’s get into the real story of Ajax

Ajax (shorthand for asynchronous JavaScript and XML) is a programming technique or approach used on the client-side to retrieve data from the server asynchronously in the background without interfering with the display and behavior of the existing page. Data are usually retrieved using the XMLHttpRequest object. Despite the name, the use of XML is not actually required, nor do the requests need to be asynchronous.

AJAX requests are usually faster than regular page loads and allow for a wealth of dynamism within a page. 😀

Now come to the point, we talking about Ajax with jQuery and I am assuming that you have some idea of how to use jQuery.

The jQuery library has a full suite of AJAX capabilities. The functions and methods therein allow us to load data from the server without a browser page refresh.

jQuery.ajax() (Perform an asynchronous HTTP (Ajax) request.)

$.ajax({
type: "POST", //default is "GET" HTTP request method
url: "myProject/myajax.php", //url(String)
data: "call=login&user=foo&pass=bar", //data form of an url query string
timeout: (60*1000), //timeout (in milliseconds) for the request

//function to be called if the request fails.
error: function(XMLHttpRequest, textStatus, errorThrown){
//here goes the error handler codes
},
//function to be called if the request succeeds.
success: function(data, textStatus, XMLHttpRequest){
//here goes the successful response handler codes
//will have the retrieved server response within this function
}
});

Sounds cool 😀

Lets make our jQuery Ajax more handy by using some sort of ajax settings, A default settings can be set Globally for any option with $.ajaxSetup().

jQuery.ajaxSetup()

$.ajaxSetup({
url: "myProject/myajax.php", //my page to process
global: false,
timeout: (60*1000), //set timeout for all your ajax requests
cache: false, //say no to cache 😦
contentType: 'application/x-www-form-urlencoded', //is default actually(no need)
type: "POST" //if you love to post always
error: function(){ myDefaultErrorHandlerFunc(); } //set your default error handler
});
//The avobe setting will act like your global jQuery.ajax() settings throughout the page
//Now simple making ajax requests like below
$.ajax({
data: {'name': 'Tonu'}, //key value paired (JSON style) or can like "call=login&name=Tonu"
success: function(xh){}
});

Awesome 🙂

So using $.ajaxSetup() once, you can place your ajax shortly like above $.ajax({data:”queryString”});  in your code wherever it requires.

Some more jQuery.ajax() usage example:

Load and execute JavaScript file

$.ajax({
   type: "GET",
   url: "test.js",
   dataType: "script"
 });

Sends an xml document as data to the server. By setting the processData option to false, the automatic conversion of data to strings is prevented.

var xmlDocument = [create xml document];
 $.ajax({
   url: "page.php",
   processData: false,
   data: xmlDocument,
   success: handleResponse
 });

Cheers! 😀

What? Boared?!!! Why not take a deep breath and lough out loudly.. 😉