jquery-ajax

AJAX is an acronym for Asynchronous JavaScript and XML, and this technology helps us download data from the server without refreshing the browser page.

If you are new to AJAX, I would recommend that you go through our Ajax tutorial before proceeding.

jQuery is a great tool that provides a rich set of AJAX methods for developing next generation web applications.

Loading simple data

It's very easy to load any static or dynamic data using jQuery AJAX. jQuery provides load() method to do the job −

Syntax

Here is the simple syntax for the load() method −

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

Here is a description of all options −

• URL - The URL of the server-side resource to which the request is sent. It can be a CGI, ASP, JSP or PHP script that generates data dynamically or from 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 is a callback function called after the response data has been loaded into the elements of the corresponding set. The first parameter passed to this function is the response text received from the server, and the second parameter is the status code.

URL - The URL of the server-side resource to which the request is sent. It can be a CGI, ASP, JSP or PHP script that generates data dynamically or from 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 is a callback function called after the response data has been loaded into the elements of the corresponding set. The first parameter passed to this function is the response text received from the server, and the second parameter is the status code.

example

Consider the following HTML file with a little jQuery encoding:

Getting JSON data

There may be a situation where the server will return a JSON string against your request. The jQuery getJSON() utility function parses the returned JSON string and makes the resulting string available to the callback function as the first parameter for further action.

Syntax

Here is the simple syntax for getJSON() method −

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

Here is a description of all options −

• URL - The URL of the server-side resource that the GET method contacted.

• data is an object whose properties serve as name/value pairs used to create a query string to be appended to a URL, or a pre-formatted and encoded query string.

• callback - the function is called after the request is completed. The data value resulting from digesting the response body as a JSON string is passed as the first parameter to this callback, and the state as the second.

URL - The URL of the server-side resource that the GET method contacted.

data is an object whose properties serve as name/value pairs used to create a query string to be appended to a URL, or a pre-formatted and encoded query string.

callback - the function is called after the request is completed. The data value resulting from digesting the response body as a JSON string is passed as the first parameter to this callback, and the state as the second.

Transferring data to the server

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

example

This example demonstrates how user input can be passed to a web server script which will send the same result back and we will print it −

 l