How to handle ajax call when there is no response from the server

Question

I have an ajax call for some data (using jQuery). after the user clicks "submit" (and the ajax call has been sent) I am displaying a "Please wait..." message that disables everything until the request returns (so the user won't double click or click other things and mess things up).

It works great when there is any kind of error - the "Please wait..." disappears and I am displaying the user what went wrong.

But what happens if the server don't return me anything back because of communication error?

The solution I found for that is to set a timeout of 10 seconds for the "Please wait.." message that after that time it disappears and displays and error that "The communication failed". I assume that if the server didn't respond after 10 seconds then it will not respond at all - but that it false assumption.

The problem is - how can I be sure that after 20 seconds the server won't return something back? The scenario that might happen is that the user click submits --> 10 seconds later he get an error message --> 5 seconds later server response and confuses the user

How do I make sure that after I hide the "Please wait.." message nothing will pop up from the server?

Answer 1

You can handle something like this

if ( request.readyState == 4 ){  // 4 is "complete" 
  if ( request.status == 200 ){
    // HTTP OK, carry out your normal Ajax processing
    // ... 
  }else{
    // something went wrong, report the error
    error( "HTTP "+request.status+".  An error was »
             encountered: "+ request.statusText );
  }
}

(or)

$.ajax({
    type: "post", 
    url: "somepage.html",
    success: function (data, text) {
        //...
    },
    error: function (request, status, error) {
        alert(request.responseText);
    }
});

Answer 2

when you send a request to a server. a connection is opened and its kept open unless the server responds.
1.if due to some error on the server side it cannot respond then a response code of 5xx is sent back generally (503)
2.if due to some connection issues the connection is terminated prematurely then also jquery would take that as an error.

1.so if you wanna wait for the server to send a request or connection termination (which ever occurs earlier) then u can use the completed option in the jquery ajax.
2.and if you are in a condition in which server isnt responding even after 20 secs and you think that it should have responded by now use timeout.
3.finally if your problem is that you are using some kind of customized(hand made http server) which doesn't end a request even if it encounters some error then atleast customize it enough so that it sends back some response code(because this is HTTP model of request and response)