Best way to check if AJAX request was successful i

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.

Answer 1

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!

Answer 2

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";
...
        }
    }

Answer 3

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.