« Previous | 1 | 2 | 3 | Next »

JQUERY - AJAX

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

If you are new with AJAX, I would recommend you go through our Ajax Tutorial before proceeding further.

JQuery is a great tool which provides a rich set of AJAX methods to develop 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

Here is the simple syntax for load() method:

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

Here is the description of all the parameters:

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 received from the server and second parameter is the status code.

Example

Consider the following HTML file with a small JQuery coding:

Here load() initiates an Ajax request to the specified URL /jquery/result.html file. After loading this file, all the content would be populated inside <div> tagged with ID stage. Assuming, our /jquery/result.html file has just one HTML line:

<h1>THIS IS RESULT...</h1>

When you click the given button, then result.html file gets loaded.

Click on the button to load result.html file:

STAGE

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

Here is the simple syntax for getJSON() method:

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

Here is the description of all the parameters:

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.

Example

Consider the following HTML file with a small JQuery coding:

<html>
<head>
<title>the title</title>
<script type="text/javascript"
src="/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#driver").click(function(event){
$.getJSON('/jquery/result.json', function(jd) {
$('#stage').html('<p> Name: ' + jd.name + '</p>');
$('#stage').append('<p>Age : ' + jd.age+ '</p>');
$('#stage').append('<p> Sex: ' + jd.sex+ '</p>');
});
});
});
</script>
</head>
<body>
<p>Click on the button to load result.html file:</p>
<div id="stage" style="background-color:blue;">
STAGE
</div>
<input type="button" id="driver" value="Load Data" />
</body>
</html>

Here JQuery utility method getJSON() initiates an Ajax request to the specified URL/jquery/result.json file. After loading this file, all the content would be passed to the callback function which finally would be populated inside <div> tagged with ID stage. Assuming, our /jquery/result.json file has following json formatted content:

{
"name": "Zara Ali",
"age" : "67",
"sex": "female"
}

When you click the given button, then result.html file gets loaded.

Click on the button to load result.html file:

STAGE

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

This example demonstrates how user can pass input to a web server script which would send the same result back and we would print it:

Here is the code written in result.php script:

<?php
if( $_REQUEST["name"] )
{
$name = $_REQUEST['name'];
echo "Welcome ". $name;
}
?>

Now you can enter any text in the given input box and then click "Show Result" button to see what you have entered in the input box.

Enter your name and click on the button:

STAGE

JQuery AJAX Methods

You have seen basic concept of AJAX using JQuery. Following table lists down all important JQuery AJAX methods which you can use based your programming need:

S.No.	Methods & Description
1	jQuery.ajax( options ) Load a remote page using an HTTP request.
2	jQuery.ajaxSetup( options ) Setup global settings for AJAX requests.
3	jQuery.get( url, [data], [callback], [type] ) Load a remote page using an HTTP GET request.
4	jQuery.getJSON( url, [data], [callback] ) Load JSON data using an HTTP GET request.
5	jQuery.getScript( url, [callback] ) Loads and executes a JavaScript file using an HTTP GET request.
6	jQuery.post( url, [data], [callback], [type] ) Load a remote page using an HTTP POST request.
7	load( url, [data], [callback] ) Load HTML from a remote file and inject it into the DOM.
8	serialize( ) Serializes a set of input elements into a string of data.
9	serializeArray( ) Serializes all forms and form elements like the .serialize() method but returns a JSON data structure for you to work with.

jQuery.ajax( options ) Method

The jQuery.ajax( options ) method loads a remote page using an HTTP request. $.ajax() returns the XMLHttpRequest that it creates. In most cases you won't need that object to manipulate directly, but it is available if you need to abort the request manually.

Syntax

Here is the simple syntax to use this method:

$.ajax( options )

Parameters

Here is the description of all the parameters used by this method:

options: A set of key/value pairs that configure the Ajax request. All options are optional.

Here is the list of option which could be used as key/value pairs. Except URL, rest of the parameters are optional:

S.No.	Option & Description
1	async A Boolean indicating whether to perform the request asynchronously. The default value is true.
2	beforeSend A callback function that is executed before the request is sent.
3	complete A callback function that executes whenever the request finishes.
4	contentType A string containing a MIME content type to set for the request. The default value is application/x-www-form-urlencoded.
5	data A map or string that is sent to the server with the request.
6	dataFilter A function to be used to handle the raw responsed data of XMLHttpRequest. This is a pre-filtering function to sanitize the response.
7	dataType A string defining the type of data expected back from the server (xml, html, json, or script).
8	error A callback function that is executed if the request fails.
9	Global A Boolean indicating whether global AJAX event handlers will be triggered by this request. The default value is true.
10	ifModified A Boolean indicating whether the server should check if the page is modified before responding to the request.
11	Jsonp Override the callback function name in a jsonp request.
12	Password A password to be used in response to an HTTP access authentication request.
13	processData A Boolean indicating whether to convert the submitted data from an object form into a query-string form. The default value is true.
14	success A callback function that is executed if the request succeeds.
15	Timeout Number of milliseconds after which the request will time out in failure.
16	timeout Set a local timeout (in milliseconds) for the request.
17	type A string defining the HTTP method to use for the request (GET or POST). The default value is GET.
18	url A string containing the URL to which the request is sent.
19	username A username to be used in response to an HTTP access authentication request.
20	xhr Callback for creating the XMLHttpRequest object. Defaults to the ActiveXObject when available (IE), the XMLHttpRequest otherwise.

Example

Assuming we have following HTML content in /jquery/result.html file:

<h1>THIS IS RESULT...</h1>

Following is a simple example showing the usage of this method. Here we make use of success handler to populate returned HTML:

<html>
<head>
<title>the title</title>
<script type="text/javascript"
src="/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#driver").click(function(event){
$.ajax( {
url:'/jquery/result.html',
success:function(data) {
$('#stage').html(data);
}
});
});
});
</script>
</head>
<body>
<p>Click on the button to load result.html file:</p>
<div id="stage" style="background-color:blue;">
STAGE
</div>
<input type="button" id="driver" value="Load Data" />
</body>
</html>

This will produce the following result:

Click on the button to load result.html file:

STAGE

ajaxSetup( options ) Method

The jQuery.ajaxSetup( options ) method sets global settings for future AJAX requests.

Syntax

Here is the simple syntax to use this method:

$.ajaxSetup( options )

Parameters

Here is the description of all the parameters used by this method:

options: A set of key/value pairs that configure the Ajax request. All options are optional.

Here is the list of option which could be used as key/value pairs. Except URL, rest of the parameters are optional:

S.No.	Option & Description
1	async A Boolean indicating whether to perform the request asynchronously. The default value is true.
2	beforeSend A callback function that is executed before the request is sent.
3	complete A callback function that executes whenever the request finishes.
4	contentType A string containing a MIME content type to set for the request. The default value is application/x-www-form-urlencoded.
5	data A map or string that is sent to the server with the request.
6	dataFilter A function to be used to handle the raw responsed data of XMLHttpRequest. This is a pre-filtering function to sanitize the response.
7	dataType A string defining the type of data expected back from the server (xml, html, json, or script).
8	error A callback function that is executed if the request fails.
9	Global A Boolean indicating whether global AJAX event handlers will be triggered by this request. The default value is true.
10	ifModified A Boolean indicating whether the server should check if the page is modified before responding to the request.
11	Jsonp Override the callback function name in a jsonp request.
12	password A password to be used in response to an HTTP access authentication request.
13	processData A Boolean indicating whether to convert the submitted data from an object form into a query-string form. The default value is true.
14	success A callback function that is executed if the request succeeds.
15	Timeout Number of milliseconds after which the request will time out in failure.
16	timeout Set a local timeout (in milliseconds) for the request.
17	Type A string defining the HTTP method to use for the request (GET or POST). The default value is GET.
18	url A string containing the URL to which the request is sent.
19	username A username to be used in response to an HTTP access authentication request.
20	xhr Callback for creating the XMLHttpRequest object. Defaults to the ActiveXObject when available (IE), the XMLHttpRequest otherwise.

Example

Assuming we have following HTML content in /jquery/result.html file:

<h1>THIS IS RESULT...</h1>

Following is a simple example showing the usage of this method. Here we make use of success handler to populate returned HTML:

<html>
<head>
<title>the title</title>
<script type="text/javascript"
src="/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#driver").click(function(event){
// Do global setting.
$.ajaxSetup({
url: "/jquery/result.html"
});
$.ajax( {
success:function(data) {
$('#stage').html(data);
}
});
});
});
</script>
</head>
<body>
<p>Click on the button to load result.html file:</p>
<div id="stage" style="background-color:blue;">
STAGE
</div>
<input type="button" id="driver" value="Load Data" />
</body>
</html>

This will produce the following result:

Click on the button to load result.html file:

STAGE

get( url, [data], [callback], [type] ) Method

The jQuery.get( url, [data], [callback], [type] ) method loads data from the server using a GET HTTP request. The method returns XMLHttpRequest object.

Syntax

Here is the simple syntax to use this method:

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

Parameters

Here is the description of all the parameters used by this method:

url: A string containing the URL to which the request is sent
data:: This optional parameter represents key/value pairs that will be sent to the server.
callback:: This optional parameter represents a function to be executed whenever the data is loaded successfully.
type:: This optional parameter represents type of data to be returned to callback function: "xml", "html", "script", "json", "jsonp", or "text".

Example

Assuming we have following PHP content in /jquery/result.php file:

<?php
if( $_REQUEST["name"] )
{
$name = $_REQUEST['name'];
echo "Welcome ". $name;
}
?>

getJSON( url, [data], [callback] ) Method

The jQuery.getJSON( url, [data], [callback] ) method loads JSON data from the server using a GET HTTP request. The method returns XMLHttpRequest object.

Syntax

Here is the simple syntax to use this method:

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

Parameters

Here is the description of all the parameters used by this method:

url: A string containing the URL to which the request is sent
data:: This optional parameter represents key/value pairs that will be sent to the server.
callback:: This optional parameter represents a function to be executed whenever the data is loaded successfully.

Example

Assuming we have following JSON content in /jquery/result.json file

{
"name": "Zara Ali",
"age" : "67",
"sex": "female"
}

Following is a simple example showing the usage of this method:

This should produce the following result:

Click on the button to load result.html file:

Click on the button to load result.html file −

STAGE

getScript( url, [callback] ) Method

The jQuery.getScript( url, [callback] ) method loads and executes a JavaScript file using an HTTP GET request. The method returns XMLHttpRequest object.

Syntax

Here is the simple syntax to use this method:

$.getScript( url, [callback] )

Parameters

Here is the description of all the parameters used by this method:

url: A string containing the URL to which the request is sent
callback:: This optional parameter represents a function to be executed whenever the data is loaded successfully.

Example

Assuming we have following JavaScript content in /jquery/result.js file:

function CheckJS(){
alert("This is JavaScript");
}

Following is a simple example showing the usage of this method:

This should produce the following result

Click on the button to load result.js file −

STAGE

post( url, data, callback, type ) Method

The jQuery.post( url, [data], [callback], [type] ) method loads a page from the server using a POST HTTP request. The method returns XMLHttpRequest object.

Syntax

Here is the simple syntax to use this method:

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

Parameters

Here is the description of all the parameters used by this method:

url: A string containing the URL to which the request is sent
data:: This optional parameter represents key/value pairs or the return value of the .serialize() function that will be sent to the server.
callback:: This optional parameter represents a function to be executed whenever the data is loaded successfully.
type:: This optional parameter represents a type of data to be returned to callback function: "xml", "html", "script", "json", "jsonp", or "text".

Example

Assuming we have the following PHP content in /jquery/result.php file:

<?php
if( $_REQUEST["name"] )
{
$name = $_REQUEST['name'];
echo "Welcome ". $name;
}
?>

Following is a simple example showing the usage of this method:

This should produce the following result

Click on the button to load result.html file:

STAGE

load( url, data, callback ) Method

The load( url, data, callback ) method loads data from the server and places the returned HTML into the matched element.

Syntax

Here is the simple syntax to use this method:

[selector].load( url, [data], [callback] )

Parameters

Here is the description of all the parameters used by this method:

url: A string containing the URL to which the request is sent.
data: This optional parameter represents a map of data that is sent with the request.
callback: This optional parameter represents a function that is executed if the request succeeds

Example

Assuming we have the following HTML content in /jquery/result.html file:

<h1>THIS IS RESULT...</h1>

Following is a simple example showing the usage of this method.

This should produce the following result

Click on the button to load result.html file:

STAGE

serialize( ) Method

The serialize( ) method serializes a set of input elements into a string of data.

Syntax

Here is the simple syntax to use this method:

$.serialize( )

Parameters

Here is the description of all the parameters used by this method:

Example

Assuming we have the following PHP content in /jquery/serialize.php file:

<?php
if( $_REQUEST["name"] )
{
$name = $_REQUEST['name'];
echo "Welcome ". $name;
$age = $_REQUEST['age'];
echo "<br />Your age : ". $age;
$sex = $_REQUEST['sex'];
echo "<br />Your gender : ". $sex;
}
?>

Following is a simple example showing the usage of this method:

</html>
<head>
<title>The jQuery Example</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#driver").click(function(event){
$.post(
"serialize.php",
$("#testform").serialize(),
function(data) {
$('#stage1').html(data);
}
);
var str = $("#testform").serialize();
$("#stage2").text(str);
});
});
</script>
</head>
<body>
<p>Click on the button to load result.html file:</p>
<div id="stage1" style="background-color:blue;">
STAGE - 1
</div>
<br />
<div id="stage2" style="background-color:blue;">
STAGE - 2
</div>
<form id="testform">
<table>
<tr>
<td><p>Name:</p></td>
<td><input type="text" name="name" size="40" /></td>
</tr>
<tr>
<td><p>Age:</p></td>
<td><input type="text" name="age" size="40" /></td>
</tr>
<tr>
<td><p>Sex:</p></td>
<td> <select name="sex">
<option value="Male" selected>Male</option>
<option value="Female" selected>Female</option>
</select></td>
</tr>
<tr>
<td colspan="2">
<input type="button" id="driver" value="Load Data" />
</td>
</tr>
</table>
</form>
</body>
</html>

This will produce the following result

Click on the button to load result.html file:

STAGE - 1

STAGE - 2

Name:
Age:

Sex:

serializeArray( ) Method

The serializeArray( ) method serializes all forms and form elements like the .serialize() method but returns a JSON data structure for you to work with. The JSON structure returned is not a string. You must use a plugin or third-party library to "stringify".

Syntax

Here is the simple syntax to use this method:

$.serializeArray( )

Parameters

Here is the description of all the parameters used by this method:

Example

Assuming we have the following PHP content in /jquery/serialize.php file:

Following is a simple example showing the usage of this method:

This will produce the following result

Click on the button to load result.html file:

STAGE - 1

STAGE - 2

Name:
Age:

Sex:

JQuery AJAX Events

You can call various JQuery methods during the life cycle of AJAX call progress. Based on different events/stages, the following methods are available. You can go through all the AJAX Events.

S.No.	Methods & Description
1	ajaxComplete( callback ) Attach a function to be executed whenever an AJAX request completes.
2	ajaxStart( callback ) Attach a function to be executed whenever an AJAX request begins and there is none already active.
3	ajaxError( callback ) Attach a function to be executed whenever an AJAX request fails.
4	ajaxSend( callback ) Attach a function to be executed before an AJAX request is sent.
5	ajaxStop( callback ) Attach a function to be executed whenever all AJAX requests have ended.
6	ajaxSuccess( callback ) Attach a function to be executed whenever an AJAX request completes successfully.

ajaxComplete( callback ) Method

The ajaxComplete( callback ) method attaches a function to be executed whenever an AJAX request completes. This is an Ajax Event.

Syntax

Here is the simple syntax to use this method:

$(document).ajaxComplete( )

Parameters

Here is the description of all the parameters used by this method:

callback: The function to execute. The XMLHttpRequest and settings used for that request are passed as arguments to this function.

Example

Assuming we have the following HTML content in /jquery/result.html file

<h1>THIS IS RESULT...</h1>

Following is a simple example showing the usage of this method.

This will produce the following result

Click on the button to load result.html file:

STAGE - 1

STAGE - 2

ajaxStart( callback ) Method

The ajaxStart( callback ) method attaches a function to be executed whenever an AJAX request begins and there is none already active. This is an Ajax Event.

Syntax

Here is the simple syntax to use this method:

$(document).ajaxStart( callback )

Parameters

Here is the description of all the parameters used by this method:

callback: The function to execute.

Example

Assuming we have the following HTML content in /jquery/result.html file:

<h1>THIS IS RESULT...</h1>

Following is a simple example showing the usage of this method.

This will produce the following result

Click on the button to load result.html file:

STAGE - 1

STAGE - 2

STAGE - 3

ajaxError( callback ) Method

The ajaxError( callback ) method attaches a function to be executed whenever an AJAX request fails. This is an Ajax Event.

Syntax

Here is a simple syntax to use this method:

$(document).ajaxError( callback )

Parameters

Here is the description of all the parameters used by this method:

callback: The function to execute. The XMLHttpRequest and settings used for that request are passed as arguments to this function. A third argument, an exception object, is passed if an exception occurred while processing the request.

Example

Following is a simple example showing the usage of this method.

This will produce the following result

Click on the button to load result.text file:

STAGE - 1

STAGE - 2

ajaxSend( callback ) Method

The ajaxSend( callback ) method attaches a function to be executed whenever an AJAX request is sent. This is an Ajax Event.

Syntax

Here is the simple syntax to use this method:

$(document).ajaxSend( callback )

Parameters

Here is the description of all the parameters used by this method:

callback: The function to execute. The XMLHttpRequest and settings used for that request are passed as arguments to the callback.

Example

Assuming we have following HTML content in /jquery/result.html file:

<h1>THIS IS RESULT...</h1>

Following is a simple example showing the usage of this method.

<html>
<head>
<title>The jQuery Example</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
/* Global variable */
var count = 0;
$("#driver").click(function(event){
$('#stage0').load('result.html');
});
/* Gets called when request starts */
$(document).ajaxStart(function(){
count++;
$("#stage1").html("<h1>Starts, Count :" + count + "</h1>");
});
/* Gets called when request is sent */
$(document).ajaxSend(function(evt, req, set){
count++;
$("#stage2").html("<h1>Sends, Count :" + count + "</h1>");
$("#stage2").append("<h1>URL :" + set.url + "</h1>");
});
/* Gets called when request complete */
$(document).ajaxComplete(function(event,request,settings){
count++;
$("#stage3").html("<h1>Completes, Count :" + count + "</h1>");
});
});
</script>
</head>
<body>
<p>Click on the button to load result.html file:</p>
<div id="stage0" style="background-color:blue;">
STAGE - 0
</div>
<div id="stage1" style="background-color:blue;">
STAGE - 1
</div>
<div id="stage2" style="background-color:blue;">
STAGE - 2
</div>
<div id="stage3" style="background-color:blue;">
STAGE - 3
</div>
<input type="button" id="driver" value="Load Data" />
</body>
</html>

This will produce the following result:

Click on the button to load result.html file:

STAGE - 0

STAGE - 1

STAGE - 2

STAGE - 3

ajaxStop( callback ) Method

The ajaxStop( callback ) method attaches a function to be executed whenever all AJAX requests have ended. This is an Ajax Event.

Syntax

Here is the simple syntax to use this method:

$[selector].ajaxStop( callback )

Parameters

Here is the description of all the parameters used by this method:

callback: The function to execute.

Example

Assuming we have following HTML content in /jquery/result.html file:

<h1>THIS IS RESULT...</h1>

Following is a simple example showing the usage of this method.

<html>
<head>
<title>the title</title>
<script type="text/javascript"
src="/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
/* Global variable */
var count = 0;
$("#driver").click(function(event){
$('#stage0').load('/jquery/result.html');
});
/* Gets called when request starts */
$("#stage1").ajaxStart(function(){
count++;
$(this).html("<h1>Starts, Count :" + count + "</h1>");
});
/* Gets called when request is sent */
$("#stage2").ajaxSend(function(evt, req, set){
count++;
$(this).html("<h1>Sends, Count :" + count + "</h1>");
$(this).append("<h1>URL :" + set.url + "</h1>");
});
/* Gets called when request complete */
$("#stage3").ajaxComplete(function(event,request,settings){
count++;
$(this).html("<h1>Completes, Count :" + count + "</h1>");
});
/* Gets called when all requests are ended */
$("#stage4").ajaxStop(function(event,request,settings){
count++;
$(this).html("<h1>Stops, Count :" + count + "</h1>");
});
});
</script>
</head>
<body>
<p>Click on the button to load result.html file:</p>
<div id="stage0" style="background-color:blue;">
STAGE - 0
</div>
<div id="stage1" style="background-color:blue;">
STAGE - 1
</div>
<div id="stage2" style="background-color:blue;">
STAGE - 2
</div>
<div id="stage3" style="background-color:blue;">
STAGE - 3
</div>
<div id="stage4" style="background-color:blue;">
STAGE - 4
</div>
<input type="button" id="driver" value="Load Data" />
</body>
</html>

ajaxSuccess( callback ) Method

The ajaxSuccess( callback ) method attaches a function to be executed whenever an AJAX request completes successfully. This is an Ajax Event.

Syntax

Here is the simple syntax to use this method:

$(document).ajaxSuccess( callback )

Parameters

Here is the description of all the parameters used by this method:

callback: The function to execute. The event object, XMLHttpRequest, and settings used for that request are passed as arguments to the callback.

Example

Assuming we have the following HTML content in /jquery/result.html file:

<h1>THIS IS RESULT...</h1>

Following is a simple example showing the usage of this method.

<html>
<head>
<title>The jQuery Example</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
/* Global variable */
var count = 0;
$("#driver").click(function(event){
$('#stage0').load('result.html');
});
/* Gets called when request starts */
$(document).ajaxStart(function(){
count++;
$("#stage1").html("<h1>Starts, Count :" + count + "</h1>");
});
/* Gets called when request is sent */
$(document).ajaxSend(function(evt, req, set){
count++;
$("#stage2").html("<h1>Sends, Count :" + count + "</h1>");
$("#stage2").append("<h1>URL :" + set.url + "</h1>");
});
/* Gets called when request completes */
$(document).ajaxComplete(function(event,request,settings){
count++;
$("#stage3").html("<h1>Completes,Count:" + count + "</h1>");
});
/* Gets called when request is stopped */
$(document).ajaxStop(function(event,request,settings){
count++;
$("#stage4").html("<h1>Stops, Count :" + count + "</h1>");
});
/* Gets called when all request completes successfully */
$(document).ajaxSuccess(function(event,request,settings){
count++;
$("#stage5").html("<h1>Success,Count :" + count + "</h1>");
});
});
</script>
</head>
<body>
<p>Click on the button to load result.html file:</p>
<div id="stage0" style="background-color:blue;">
STAGE - 0
</div>
<div id="stage1" style="background-color:blue;"><
STAGE - 1
</div>
<div id="stage2" style="background-color:blue;">
STAGE - 2
</div>
<div id="stage3" style="background-color:blue;">
STAGE - 3
</div>
<div id="stage4" style="background-color:blue;">
STAGE - 4
</div>
<div id="stage5" style="background-color:blue;">
STAGE - 5
</div>
<input type="button" id="driver" value="Load Data" />
</body>
</html>

This will produce the following result

Click on the button to load result.html file:

STAGE - 0

STAGE - 1

STAGE - 2

STAGE - 3

STAGE - 4

STAGE - 5

« Previous | 1 | 2 | 3 | Next »

The largest Interview Solution Library on the web

JQUERY - AJAX