Best way to check if AJAX request was successful in jQuery

Question

I've been checking to make sure my AJAX requests are successful by doing something like this:

$.post("page.php", {data: stuff}, function(data, status) {
    if(status == "success") {
        //Code here
    }
    else {
        //Error handling stuff
    }
});

Is checking the status variable the best way to go about doing this, or is there a better way to make sure the request actually went through? I'm considering a "successful" request to be a request that hits the page I'm posting to successfully without timing out (if the server was down and an AJAX request was made right before it went down as an example) or returning any kind of 404 or 500 error.

What do you consider successful? That the connection was made and data was returned, or that the script on your server actually did what you wanted it to do? Depending on your use, you may need to check the actual response as well. — Brad, Nov 15 '11 at 14:38

score 35 · Accepted Answer · answered Nov 15 '11 at 14:49

By calling $.post that way, you automatically pass only in a success handler function.

If something on the request went wrong, this method is not even executed.

To have more control either use $.ajax() directly, or pass in fail handlers. That could look like

$.post("page.php", {data: stuff}, function(data, status) {
   // we're fine here
}).fail(function(err, status) {
   // something went wrong, check err and status
});

The same thing using .ajax():

$.ajax({
   type: 'POST',
   url: 'page.php',
   data: stuff,
   success: function( data ) {
   },
   error: function(xhr, status, error) {
      // check status && error
   },
   dataType: 'text'
});

You can even pass more ajax event handler to $.ajax, like beforeSend to modify/read XHR headers or complete to have a handler which fires either way (error or not) when the requests finished.

Works great for error handling of missing parameters for me(.post method)... thanks jAndy. — Sean Haddy, Feb 25 '13 at 17:16

score 4 · Answer 2 · answered Nov 15 '11 at 15:16

I prefer to use the ajax call, as it has an explicit success handler

$.ajax({
url: "page.php",
data: stuff,
success: function(response){
console.log("success");
}
});

I'd also recommend using firebug or webkit similar, then you can track the requests and check the parameters!

score 1 · Answer 3 · answered Nov 15 '11 at 15:12

jQuery considers "successful" in the way it is in the source code, of course. This does not include a status code of 404/500 and neither a timeout, since no status code has been returned in that case.

You can check when exactly it returns "success":

// If successful, handle type chaining
if ( status >= 200 && status < 300 || status === 304 ) {

...
    // If not modified
    if ( status === 304 ) {

        statusText = "notmodified";
...

    // If we have data
    } else {

        try {
...
            statusText = "success"; // So: only when status code is in
                                    // the range 200 <= x < 300
...
        } catch(e) {
...
            statusText = "parsererror";
...
        }
    }

Best way to check if AJAX request was successful in jQuery

3 Answers3

Linked