CodeIgniter

Home » javascript, jquery

jquery ajax error handling

Submitted by mahesh chari on Thursday, 9 July 20097 Comments

How to handle ajax errors using jQuery ?

jQuery is the most awesome javascript library that made easy for asynchronous ajax calls.it has global ajax function and some pre defined ajax functions like $.get, $.post, load .etc. but we don’t find any error messages by default with this library. we can see the errors with firefox’s addon firebug or with IE developer toolbar.So we manage most common ajax errors in our application with global ajaxSetup function which come with jQuery by default. We can set many options,to see available ajaxsetup options please check here.

most ajax errors we get errors are server response errors and some JSON parse errors. To know more about the HTTP errors details please check here. To test this error handling just copy and paste it to your head section of HTML document.

Javascript Code for setting global error handling.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$().ready(function(){
	$.ajaxSetup({
		error:function(x,e){
			if(x.status==0){
			alert('You are offline!!\n Please Check Your Network.');
			}else if(x.status==404){
			alert('Requested URL not found.');
			}else if(x.status==500){
			alert('Internel Server Error.');
			}else if(e=='parsererror'){
			alert('Error.\nParsing JSON Request failed.');
			}else if(e=='timeout'){
			alert('Request Time out.');
			}else {
			alert('Unknow Error.\n'+x.responseText);
			}
		}
	});
});

In the above example we handle following common error and show response text for other rare errors.

  • 0-xhr status ,is it initialized or not that means user is offline.
  • 404-page not found
  • 500-Internel Server error.
  • request timeout – jQuery custom error.
  • parseerror-jQuery custom error when parsing JSON data.
  • we just throw other errors with response error

Example1

1
2
params={name:'mahesh'};
$.get(url,params,function(){})

In above example,jQuery automatically raises all available errors,except parse error. because we didn’t give any return type format.

Example2

1
2
3
params={name:'mahesh'};
$.get(url,params,function(){},'json');
$.getJSON(url,params,function(){});

In above example,jQuery automatically raises all available errors,because we added return type format at end. $.getJSON automatically adds the return type of parameter to “JSON”

Example3

1
2
params={name:'mahesh'};
$.get(url,params,function(){},'xml');

In the above example 3 ,we gave xml type return parameter, here also jQuery automatically raises all errors even parse error also.

Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • E-mail this story to a friend!
  • LinkedIn
  • Live
  • Reddit
  • TwitThis

Related Articles

7 Comments »

  • links for 2009-07-24 | AndySowards.com :: Professional Web Design, Development, Programming, Hacks, Downloads, Math and being a Web 2.0 Hipster? said:

    [...] jQuery ajax error handling for $.get ,$.post, $.load methods | Php Development great read on handling Ajax Errors with jQuery (tags: programming javascript ajax tech error errors) [...]

  • DaronWolff said:

    Excelent POST.
    But i have a question. how can i detect the error if im using $.post or $.get

    Thanks!!

  • mahesh chari (author) said:

    You can use same ,for post and get methods,but you have to specify the type of format in last parameter

    $.get(url,parameter,callback,format)
    then jquery automatically raise errors,accordingly

  • Henson said:

    I found that if you use $.ajax to make cross-domain ajax, you will never throw any errors.
    Just like:
    $.ajax({
    type:”get”,
    dataType: “jsonp”,
    jsonp: “callback”,
    url: apiurl,
    data: params,
    timeout: 1,
    success:displayJSONResponse,
    error: errorHandler
    });

    It’s so odd, I’m in depression.

    Any help will be to appreciated.

  • mahesh chari (author) said:

    U have to use proxy for that cross site ajax.

    Let us do post to proxy.php in server,then it can handle the request to other site.
    you will get it

  • rajesh said:

    Hi,
    Suppose if my browser doesn’t support ajax , how can i find that one using Jquery ajax method.

  • mahesh chari (author) said:

    If browser don’t support ajax, then jQuery won’t call any errors.

Leave your response!

Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

Be nice. Keep it clean. Stay on topic. No spam.

You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

This is a Gravatar-enabled weblog. To get your own globally-recognized-avatar, please register at Gravatar.