Aaron Saray

My Blog

: Technical and Business knowledge, with less grammar correctness than my books.


How to handle AJAX errors with jQuery

Many times, the ‘error’ property of the jQuery AJAX call is ignored. Most often, you’ll see just references to the success portion.

The error attribute of the $.ajax() is a callback – and receives three parameters. These are the XMLHttpRequest with the error, a type of error, and an error object, if one is thrown. For the most part, the first two are the only parts.

Now, the error attribute should be used for actual errors, not logical errors. For example, if you are making an AJAX call to log in the current user, and the user does not exist, this should return a success type message instead of some sort of error. Errors are things like 404’s for the AJAX call, or other HTTP issues. In fact, there are 4 types of errors that will be returned: Error – which is an HTTP error, parseerror – which is an xml/json parsing issue, timeout – which is a script that didn’t respond fast enough, and not modified.

I wrote a generic function to handle the errors. This could be name spaced I suppose or added to your standard library. In this case, it just alerts the error. (On some other sites, I generate a new modal box.)

In this function, an error message is generated based on the error type. The only error that gets extra information is the default type – which is ‘error’. It then retrieves the HTTP Status code and the Status Text.

Here is an example of this in use:
ajax.php

And, here is the test page. When the user clicks the xx link, it will generate a request to ajax.php. This will generate a 503 error and the error handler will take over.

7 comments on “How to handle AJAX errors with jQuery
  • Uziel says:

    Hi, this is a global aproach to handle the errors of any ajax request, but what if you need to handle the error in a special way for some requests?.

    The code you implement will override the general handling or both handlers will be used?

    • Aaron says:

      The method I used was just a demonstration of how you might handle errors. It wasn’t meant to be necessarily plug and play error handling. You would not want to say those messages to the visitor – they were there for your understanding.

      What I would do is use the code I generated as a template for your custom error functions.

  • Jim says:

    You have an error in your code: ‘parseerror’ should instead be ‘parsererror’.

  • Scottyb says:

    Thanks for the post. I have multiple check boxes which use Ajax to call a single function on the server, passing data which identify which check box was checked/unchecked. I want to catch timeout errors if the server doesn’t respond. In the error function, how do identify which check box was checked/unchecked (so I can set it back to previous value, for example)?

    • Aaron says:

      I don’t know exactly how you’d implement this, but the theory is pretty simple. If you build a request object in your ajax, store the values there. Then, send that object’s values to the ajax form. In the timeout function, grab that object and reapply the items. Even better, if you can find a way to submit the request without removing the display of the items, that would be best.

  • Shashi says:

    Thanks a lot for this post. It saved some hair on my head :)

Leave a Reply

Your email address will not be published.