How would you handle errors when using jQuery.ajax()?

When using jQuery's ajax method to submit form data, what is the best way to handle errors? This is an example of what a call might look like:

$.ajax({
    url: "userCreation.ashx",
    data: { u:userName, p:password, e:email },
    type: "POST",
    beforeSend: function(){disableSubmitButton();},
    complete: function(){enableSubmitButton();},
    error: function(xhr, statusText, errorThrown){
            // Work out what the error was and display the appropriate message
        },
    success: function(data){
            displayUserCreatedMessage();
            refreshUserList();
        }
});

The request might fail for a number of reasons, such as duplicate user name, duplicate email address etc, and the ashx is written to throw an exception when this happens.

My problem seems to be that by throwing an exception the ashx causes the statusText and errorThrown to be undefined.

I can get to the XMLHttpRequest.responseText which contains the HTML that makes up the standard .net error page.

I am finding the page title in the responseText and using the title to work out which error was thrown. Although I have a suspicion that this will fall apart when I enable custom error handling pages.

Should I be throwing the errors in the ashx, or should I be returning a status code as part of the data returned by the call to userCreation.ashx, then using this to decide what action to take?
How do you handle these situations?

asp.net jquery ajax

Edit Report

1 Answer

Now I have a problem as to which answer to accept.

Further thought on the problem brings me to the conclusion that I was incorrectly throwing exceptions. Duplicate user names, email addresses etc are expected issues during a sign up process and are therefore not exceptions, but simply errors. In which case I probably shouldn't be throwing exceptions, but returning error codes.

Which leads me to think that irobinson's approach should be the one to take in this case, especially since the form is only a small part of the UI being displayed. I have now implemented this solution and I am returning xml containing a status and an optional message that is to be displayed. I can then use jQuery to parse it and take the appropriate action: -

success: function(data){
    var created = $("result", data).attr("success");
    if (created == "OK"){
        resetNewUserForm();
        listUsers('');
    } else {
        var errorMessage = $("result", data).attr("message");
        $("#newUserErrorMessage").text(errorMessage).show();
    }
    enableNewUserForm();
}

However travis' answer is very detailed and would be perfect during debugging or if I wanted to display an exception message to the user. I am definitely not receiving JSON back, so it is probably down to one of those attributes that travis has listed, as I don't have them in my code.

(I am going to accept irobinson's answer, but upvote travis' answer. It just feels strange to be accepting an answer that doesn't have the most votes.)

answered 2008-08-27T11:24:16.923

How would you handle errors when using jQuery.ajax()?

1 Answer

Your Answer