Click here to Skip to main content
Click here to Skip to main content
Go to top

TimeOuts and Error Handling by jQuery in ASP.NET

, 6 May 2011
Rate this:
Please Sign up or sign in to vote.
Handling Errors and TimeOuts in ASP.NET by using jquery with the help of $.ajax() function

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

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

R S Dodiya
Software Developer (Senior)
India India

Comments and Discussions

 
GeneralMy vote of 1 PinmemberSelvin8-May-11 23:13 
GeneralMy vote of 5 PinmemberMonjurul Habib7-May-11 3:53 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web04 | 2.8.140916.1 | Last Updated 6 May 2011
Article Copyright 2011 by R S Dodiya
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid