AJAX calls using jQuery

For making ajax call with javascript firstly we need to crate XMLHttpRequest object that is browser dependent then can proceed for ajax call. But jquery has made the things simple as well as with powerful . jQuery provides a rich set of handy methods you can use to Ajaxify your web pages. jQuery provides wrapper methods that shield you from the inner mechanisms of an AJAX request as:

1. GET Request method : jQuery.get( url, [data], [callback], [type] )
2. POST Request method : jQuery.post( url, [data], [callback], [type] )
3. Get JSON : jQuery.getJSON( url, [data], [callback] )
4. AJAX Start/End : jQuery.ajaxStart([callback]), jQuery.ajaxComplete([callback])
5. Serialize html form : serialize(), serializeArray()
6. jQuery.ajax()

1. GET Request method : Loads a remote page using HTTP GET request method. It allows a single callback function to be specified that will be executed when the request is complete (and only if the response has a successful response code).

jQuery.get( url, [data], [callback], [type] )

url: (String) The URL of the page to load.

data (Optional): (Map) Key/value pairs that will be sent to the server.

callback (Optional): (Function) A function to be executed whenever the data is loaded successfully.

type (Optional): (String) Type of data to be returned to callback function: “xml”, “html”, “script”, “json”, “jsonp”, or “text”.

2. POST Request method : 

Sends HTTP Post request.

jQuery.post( url, [data], [callback], [type] )

url: (String) The URL of the page to load.

data (Optional): (Map) Key/value pairs that will be sent to the server.

callback (Optional): (Function) A function to be executed whenever the data is loaded successfully.

type (Optional): (String) Type of data to be returned to callback function: “xml”, “html”, “script”, “json”, “jsonp”, or “text”.

3. Get JSON : 

JavaScript Object Notation (JSON) is a popular light weight format that can be used to get data from server. JSON format is easy to create from the server and easy to parse at client as it is the basic object representation in JavaScript. Normally the data that we get from AJAX is converted in JSON by calling eval () method of JavaScript. But the function provided by JQuery handles this internally and provides direct JSON object as output.

jQuery.getJSON( url, [data], [callback] )

url: (String) The URL of the page to load.

data (Optional): (Map) Key/value pairs that will be sent to the server.

callback (Optional): (Function) A function to be executed whenever the data is loaded successfully.

4. AJAX Start/End : 

While making a sequence of AJAX requests one being dependent on returned data from other request's response in that case it is good to show a progress bar or image to user so that (s)he knows that something is going on. For such case ajax start/end method used.
ajaxStart() method registers a function handler that will be called by jQuery internally whenever an AJAX call is made. If already a request is active than the handler is not called. We can use this method to register a handler function that will display our progress bar.

Similarly ajaxComplete() method can be used to register a handler function which gets called by jQuery when an AJAX request get completed and any other active request are not in progress.

5. Serialize html form :

While submitting a form using AJAX, one has to create a input string that contains the value of all the input elements on the screen. It is very difficult to create this string if your form is very big. Hence we can use jQuery’s serialize() and serializeArray() method to do so.

serialize()
Serializes a set of input elements into a string of data. Serialize is typically used to prepare user input data to be posted to a server. The serialized data is in a standard format that is compatible with almost all server side programming languages and frameworks. In order to work properly serialize requires that form fields have a name attribute. Having only an id will not work.
This value can be sent to server by an AJAX call.

serializeArray()
serializeArray() does the similar job. Except it creates JSON output.

6. jQuery.ajax()

If you need greater flexibility, the full-blown $.ajax() function offers a great number of settings.

For instance, let's say you want to retrieve a list of programming languages from the XML document you used in the previous example. You might want to specify the following options:

1. the request must be an HTTP GET;
2. the page from which the result is returned must not be in the browser's cache;
3. the response returned by the server is of data-type XML;
4. the request is made in html;
5. there must be a function that handles the returned result if all goes well;
6. and, finally, there must be a function that handles errors in case the request is not successful.