View Output

Output Image

Introduction

By using Ajax, we can create rich, interactive Web based applications. With the help of jQuery, you can easily implement it in your Web pages. Using Ajax, you can communicate with server without page refresh, and this feature makes Web based applications like desktop applications.

But sometimes, we need to handle timeout and errors, because the resource you’re trying to download from the server may not be there, or there may be no connection to the Internet.

For this, we use the $.ajax() function, handle errors with a callback function that’s called when an error occurs. You connect the error callback function to the $.ajax() function using the error option and put error handling code into the callback function.

The error callback function is passed three items: the XMLHttpRequest object, a string that contains the error description, and an exception object.

In timeout section, the resource you’re trying to reach may not be available or Ajax response is very long. At this time, we can use a timeout option and provide time in milliseconds in the $.ajax() function.

The $.ajax() function has 20 options but according to the article, we use only 5 options to explain timeout and error handling.

Syntax

$.ajax(type,url,success,timeout,error)
Options Data Type Description
type String This option sets the type of request to make (POST or GET). The default is GET
url String This option sets the URL to request
success Function This function is called if the request succeeds. The function is passed two arguments: the data returned from the server and a string describing the status
timeout Number This option sets a timeout (in milliseconds) for the request
error Function This function is called if the request fails. The function is passed three arguments: the XMLHttpRequest object, a string describing the type of error, and an exception object

Using the code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>TimeOuts and Error Handling by jQuery in ASP.NET</title>
<script src="jquery-1.5.2.min.js"></script>
<style type="text/css">
td {font-weight:bold;background-color:#dd0000;color:#ffffff;border:solid 1px #000000;}
#td1,#td2,#td3 {font-weight:bold;background-color:#ffff99;color:#000000;
border:solid 1px #000000;}
#td4 {font-weight:bold;color:#dd0000;background-color:#ffffff;border:solid 1px #000000;}
</style>
<script type="text/javascript">	

// error and timeout handling by $.ajax() function 
function fajaxget(){$.ajax({type:"GET",url:"test.txt",
success:callbackg,error:callerror});}
function fajaxgetwitherror(){$.ajax({type:"GET",url:"test1.txt",
success:callbackg,error:callerror});}
function fajaxgetwithtimeerror(){$.ajax({type:"GET",url:"test.txt",
success:callbackg,timeout:10,error:callerrorwt});}

//callback function for success
function callbackg(data,status){$("#td1").html(data);}	
//callback function for error
function callerror(xhr,reason,ex){$("#td2").text(reason);}	
//callback function for timeout
function callerrorwt(xhr,reason,ex){$("#td3").text(reason);}	

</script>
</head>
<body>
<table cellpadding="3" cellspacing="3">
<tr><td>Ajax $.ajax() call with correct url with no error</td><td>
<input type="button" value="$.ajax()" onclick="javascript:fajaxget();" /></td>
<td id="td1"></td></tr>
<tr><td>Ajax $.ajax() call with wrong url to get error  </td><td>
<input type="button" value="$.ajax() for error " 
onclick="javascript:fajaxgetwitherror();" /></td><td id="td2"></td></tr>
<tr><td>Ajax $.ajax() for response to get timeout status<br/> 
</td><td><input type="button" value="$.ajax() for timeout" 
onclick="javascript:fajaxgetwithtimeerror();" /></td><td id="td3"></td></tr>
<tr><td id="td4" colspan ="3"><b>Note:</b>timeout status view in 
firefox browser and ie timeout status is blank. In firefox timeout status 
is not visible please click 3-5 times regular in on timeout buttons.
</td></tr>
</table>
</body>
</html>

Points of Interest

If we make our web application with the use of jQuery and want to handle errors and delay responses problem, for this we always use error and timeout options in $.ajax() to do safe handling.

History

  • 5th May, 2011: Initial version
关键字 timeouts,and,error,handling,by,jquery,in,asp.net
推荐.NET配套的通用数据层ORM框架：CYQ.Data 通用数据层框架