AJAX is an acronym standing for Asynchronous JavaScript and XML and this technology help us to load data from the server without a browser page refresh.

JQuery is a great tool which provides a rich set of AJAX methods to develope next generation web application

Loading simple data:

This is very easy to load any static or dynamic data using JQuery AJAX. JQuery provides load() method to do the job:

Syntax:

[selector].load( URL, [data], [callback] );

• URL: The URL of the server-side resource to which the request is sent. It could be a CGI, ASP, JSP, or PHP script which generates data dynamically or out of a database.
• data: This optional parameter represents an object whose properties are serialized into properly encoded parameters to be passed to the request. If specified, the request is made using the POST method. If omitted, the GET method is used.
• callback: A callback function invoked after the response data has been loaded into the elements of the matched set. The first parameter passed to this function is the response text recieved from the server and second parameter is the status code.

Click on the button to load result.html file:

Getting JSON data:

There would be a situation when server would return JSON string against your request. JQuery utility function getJSON() parses the returned JSON string and makes the resulting string available to the callback function as first parameter to take further action.

Syntax:

[selector].getJSON( URL, [data], [callback] );

• URL: The URL of the server-side resource contacted via the GET method.
• data: An object whose properties serve as the name/value pairs used to construct a query string to be appended to the URL, or a preformatted and encoded query string.
• callback: A function invoked when the request completes. The data value resulting from digesting the response body as a JSON string is passed as the first parameter to this callback, and the status as the second.

Passing data to the Server:

Many times you collect input from the user and you pass that input to the server for further processing. JQuery AJAX made it easy enough to pass collected data to the server using data parameter of any available Ajax method.

Example:

JQuery AJAX Methods:

Following list has JQuery AJAX methods which We can use based your programming need:

• jQuery.ajax( options ) ----Load a remote page using an HTTP request.
• jQuery.ajaxSetup( options ) ----Setup global settings for AJAX requests.
• jQuery.get( url, [data], [callback], [type] ) ----Load a remote page using an HTTP GET request.
• jQuery.getJSON( url, [data], [callback] ) ----Load JSON data using an HTTP GET request.
• jQuery.getScript( url, [callback] ) ----Loads and executes a JavaScript file using an HTTP GET request.
• jQuery.post( url, [data], [callback], [type] ) ----Load a remote page using an HTTP POST request.
• load( url, [data], [callback] ) ----Load HTML from a remote file and inject it into the DOM.

JQuery AJAX Events:

We can call various JQuery methods during the life cycle of AJAX call progress. Based on different events/stages following methods are available:

• ajaxComplete( callback ) ----Attach a function to be executed whenever an AJAX request completes.
• ajaxStart( callback ) ----Attach a function to be executed whenever an AJAX request begins and there is none already active.
• ajaxError( callback ) ----Attach a function to be executed whenever an AJAX request fails.
• ajaxSend( callback ) ----Attach a function to be executed before an AJAX request is sent.
• ajaxStop( callback ) ----Attach a function to be executed whenever all AJAX requests have ended.
• ajaxSuccess( callback ) ----Attach a function to be executed whenever an AJAX request completes successfully.