Calipus Software

What is AJAX and How it works ?

There will be hardly any web application in ear of web 2.0, which does not employ AJAX. Actually, you can’t imagine an interactive application without AJAX. AJAX is an integral part of web development stack. In this tutorial, we shall explain about AJAX and how can we implement AJAX.

Let’s start with what wikipedia says about AJAX.

1. A method for exchanging data asynchronously between browser and server, thereby avoiding page reloads. The XMLHttpRequest (XHR) object is usually used, but sometimes an IFrame object or a dynamically added tag is used instead.

2. A format for the data sent to the browser. Common formats include XML, pre-formatted HTML, plain text, and JavaScript Object Notation (JSON). This data could be created dynamically by some form of server-side scripting.

Basically AJAX enables us to send HTTP requests from client to server and serve back with server’ response and that too with out reloading the web page.

JavaScript does this for you with the help of XMLHttpRequest object, which is responsible for sending the request to server and processing the response.

Though we would not be going into the details of creating such objects in case of different browsers. jQuery ajax() function handles the most of the part.

You don’t need to worry about anything else but just need to have a look at jQuery’ ajax() function and it’s parameters.

Here is the syntax of jQuery ajax function:

[code]
jQuery.ajax( url [, settings ] );
[/code]

First parameter which is named as “url”, is actually an URL in string format, to which request will be sent.

Next parameter which is “settings”, involves a set of key/value pairs, using which AJAX request can be configured accordingly. We shall explore about these parameters but first, let’s try to use ajax function with an example.

// Ajax request to save data on server

[code]
$(‘#submit’).click(function(event) {
event.preventDefault();

$.ajax({
type: "POST",
url: "http://localhost/test/submit.php",
data: { name: "Mike", email: "mike@gmail.com" }
})
.done(function( msg ) {
alert( "Data Saved Successfully: " + msg );
});
});

[/code]

So we can implement jquery’s ajax function with these set of lines(off course you also need to include jQuery library in your page).

Let’s try to understand each parameter one by one.

type : Set the request type and possible options POST, GET and PUT. In case you don’t provide any option then GET is default one.

url : As already explained above, url of the page to be called.

data : It can be either a plain object or string or array. This parameter is responsible for sending data to server and is converted to a query string before sending to server.

done callback : This method is called upon receiving response from server. Please note that success() method is deprecated and use done() method instead.

So you have just learned about making an AJAX call. In our next blog, we shall explore about the various available parameters in jQuery function and will learn more about the fail and always callback.

Leave a Reply