Check status of a jQuery ajax request

Question

It seems that the success, error, and complete callbacks only fire when the ajax request is able to get some response from the server.

So if I shut down the server the following error callback is not executed and the request fails silently.

$.ajax({
  type: "GET",
  url: "http://localhost:3000/",
  dataType: "script",
  success: function() {
    alert("success");
  },
  error: function() {
    alert("error");
  }
});

What's the best way to throw an error when the server can't be reached at all.

Edit - From what I've tried and read it appears that jQuery's built in error handling doesn't work with JSONP, or dataType: "script". So I'm going to try setting a manual timeout.

Edit - Did a little more research and it looks like not only does the ajax error callback not work, but you can't abort an ajax request with dataType script or jsonp, and those requests ignore the timeout setting.

There is an alternative - the jquery-jsonp plugin, but it uses hidden iframes which I'd rather avoid. So I've settled on creating a manual timeout as suggested below. You can't abort the request if it times out, which means the script may still load even after the timeout, but at least something will fire if the server is unavailable.

Answer 1

You can use a setTimeout , and clear it with clearTimeout in the complete handler.

var reqTimeout = setTimeout(function()
{
  alert("Request timed out.");
}, 5000);
var xhr = $.ajax({
  type: "GET",
  url: "http://localhost:3000/",
  dataType: "script",
  success: function() {
    alert("success");
  },
  error: function() {
    alert("error");        
  },
  complete: function() {
    clearTimeout(reqTimeout);
  }
});

Answer 2

jQuery.ajax already has a timeout preference and it should call your error handler should the request time out. Check out the fantastic documentation which says — I'd quote it here, emphasis mine:

timeoutNumber

Set a local timeout (in milliseconds) for the request…

and:

error (XMLHttpRequest, textStatus, errorThrown) Function

A function to be called if the request fails. The function is passed three arguments: The XMLHttpRequest object, a string describing the type of error that occurred and an optional exception object, if one occurred. Possible values for the second argument (besides null) are "timeout" , "error", "notmodified" and "parsererror". This is an Ajax Event.

Answer 3

error: function (jqXHR, textStatus, errorthrown) {
    if (jqXHR.readyState == 0) {
       //Network error, i.e.  server stopped, timeout, connection refused, CORS, etc.
    }
    else if (jqXHR.readyState == 4) {
       //HTTP error, i.e. 404 Not found, Internal Server 500, etc.
    }
}

Use readyState of XMLHttpRequest to determine the status of the ajax request. 'readyState' holds the status of the XMLHttpRequest.

• 0: request not initialized
• 1: server connection established
• 2: request received
• 3: processing request
• 4: request finished and response is ready

Answer 4

If I remember correctly, jQuery throws exceptions. Thus, you should be able to work with a try { ... } catch() { ... } and handle it there.

Answer 5

You can use Jquery's AjaxSetup to handle your error handling.

   $.ajax({
    type: "GET",
    url: "http://localhost:3000/",
    dataType: "script",
    success: function () {
        alert("success");
    }, error: function () {
        alert("error");
    }
    //AJAX SETUP "error"//
    $.ajaxSetup({
        "error": function (XMLHttpRequest, textStatus, errorThrown) {
            alert(XMLHttpRequest + ' ' + textStatus + ' ' + errorThrown); //however you want
        }
    });

Answer 6

in ie8,can use:

  success: function(data, textStatus, XMLHttpRequest) {
    if("success"==textStatus&&XMLHttpRequest){
        alert("success");
    }else{
        alert("server down");
    }
  }

but it's can't work on chrome,firefox... i tried