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

Question

I have an ajax call for some data (using jQuery). after the user clicks “send” (and the ajax call was sent), I display a “Wait ...” message that disconnects everything until the request returns (so the user will not double-click or click other things and mess things up up).

It works fine when there is some kind of error - “Wait ...” disappears, and I show the user what went wrong.

But what happens if the server does not return anything to me due to a communication error?

The solution I found for this is to set a timeout of 10 seconds for the “Wait ...” message , after which it will disappear and the “Communication error” error message will be displayed. I assume that if the server did not respond after 10 seconds, it will not respond at all, but this is a false assumption.

The problem is how can I be sure that after 20 seconds the server will not return anything? The scenario that can happen is that the user presses the button → 10 seconds later, he receives an error message → 5 seconds later, the server response and confuses the user

How can I make sure that after I hide the message “Wait ...” nothing will come out of the server?

Answer 1

when sending a request to the server. The connection opens and it remains open if the server does not respond.
1.if, due to some server-side error, it cannot respond, then the 5xx response code is sent back at all (503)
2.if due to some connection problems, the connection is terminated ahead of schedule, and also jquery perceives this as an error.

1.so, if you want to wait until the server sends a request or terminates the connection (which ever happens earlier), you can use the completed option in jquery ajax .
2. and if you are in a state in which the server does not respond even after 20 seconds, and you think that it should have answered, now use the timeout.
3. Finally, if your problem is that you are using some kind of personalized king (a manual http server), which the docent completes the request, even if he encounters some error, then at least configure his enuf to send back some response code (since this is an HTTP request and response model)

Answer 2

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 3

• Create a unique token when you run the request,
• save the list of valid tokens,
• delete tokens when the request timeout / failure,
• check if the token is valid before making success / error callbacks.

The same model can be adapted for a situation where you need to send frequent repeated requests (for example, autocomplete / filtering results), and only the last handler should work.