How to detect Ajax call failure due to network disconnected

Question

I am sending lots of data using jquery ajax method to web sever and client side respond only after receiving acknowledgment from server, now suppose network connection lost in MIDDLE of ajax call then how to detect this situation.

$.ajax({
         url:'server.php',
         data:'lots of data from 200KB to 5MB',
         type:'post',
         success: function(data)
                    {
                        alert('Success');
                      //some stuff on success

                    },
          error: function(XMLHttpRequest, textStatus, errorThrown)
                    {
                        alert('Failure');
                      //some stuff on failure
                    }
        });

This is my code and and it does not give error in middle of ajax call if get internet is disconnected.

NOTE : I cant use time out because data size is vary from 200kb to 5MB and server response time calculation is not feasible.

Answer 1

Try this:

First create a "ping" ajax call with setInterval every 5 seconds

function server_ping()
    {
        $.ajax({
            url:"url to ping",
            type: "POST"
        });
    }
    var validateSession = setInterval(server_ping, 5000);

then arm your .ajaxError trap:

$(document).ajaxError(function( event, request, settings ) {
        //When XHR Status code is 0 there is no connection with the server
        if (request.status == 0){ 
            alert("Communication with the server is lost!");
        } 

    });

Remember Ajax calls are Asynchronous by default, so when the pings are going to the server and the request cannot reach the server the value on the XHR status is 0, and the .ajaxError will fire and you must catch the error and handle the way you want it.

Then you can send your data to the server, if the connection is lost when sending the data you get the error reported by the ping.

Answer 2

If your server was not very crowded, probably you could use a timer to start detecting the connection regularly when you start transferring the data (by using another ajax calling, for instance each 5 seconds). now you can use timeout.

Btw, 1)timeout doesn't always means network error. sometimes server's down also causes "timeout"

2)if the driver is down on client device, xhr.status = 0, and no timeout

Answer 3

I had a similar problem and solved it with a simpel try/catch and a re-try delay of (say) 2 seconds:

function myAjaxMethod()
{
  try 
  {
    $.ajax({ ... });
  } catch (err) 
  { 
    console.log(err.message); 
    setTimeout(function(){myAjaxMethod(),2000});
  }
}

Answer 4

I faced a similar situation like yours and fixed it by having a network check for every 5 seconds and if network is disconnected i would abort the ajax request manually which will end the ajax request.

Here i get the ajax XmlHttpRequest in the beforeSend event of the Jquery ajax call and use that object to abort the ajax request in case of network failure.

var interval = null;
var xhr = null;

$.ajax({
     beforeSend: function(jqXHR, settings) {  
          xhr = jqXHR;  // To get the ajax XmlHttpRequest 
     },
     url:'server.php',
     data:'lots of data from 200KB to 5MB',
     type:'post',
     success: function(data)
                {
                    alert('Success');
                  //some stuff on success

                },
      error: function(XMLHttpRequest, textStatus, errorThrown)
                {
                    alert('Failure');
                  //some stuff on failure
                },
      complete: function(data)
                {
                    alert('Complete');
                    //To clear the interval on Complete
                    clearInterval(interval);
                },
    });

interval = setInterval(function() {
    var isOnLine = navigator.onLine;
        if (isOnLine) {
            // online
        } else {
             xhr.abort();
        }
     }, 5000);

Answer 5

Try adding timeout: while constructing your $.ajax({}).

Also make sure to set cache: false, helpful sometimes.

Refer to Jquery's ajax() : http://api.jquery.com/jQuery.ajax/#toptions

You will get much more information there!

My thought s on your problem[updated]

@RiteshChandora , I understand your concern here. How ever I can suggest you to do 2 things.

1. As you have post data ranging from 200kb to 5mb, you might want to choose a maximum timeout. and trigger for the same. Yes, this might be problematic, but with the design you chosen, the only way to monitor the POST progress is to do this way. if not, see point 2.

2. I went through the flow, you are asking the user to copy the response Json from FB to your url. there are some problems here,

3. The json data has sensitive information about the user, and he is posting it on a url without SSL encryption.

4. Why should you prompt the user to post the acquired data on to your server? it should be easier if you user sever side scripts. Also you should never post huge data from the client to the server in occasions like these, where you could retrieve the same form the FBserver->your sevrer on the server side.

My suggested solution : after the user is authenticated , retrieve his friends list on the server side. do whatever you want on the server side, and display the result on the users screen.

This way all the burden will be taken by your server, also there is no need for the user to do any nasty json posting on your url.

Btw, your app idea is cool.

Answer 6

   error: function(xhr, textStatus, thrownError)
                    {
                       alert(xhr.status);
                       alert(thrownError);
                       alert(textStatus);

                    }

Try them.. TextStatus (besides null) are "timeout", "error", "abort", and "parsererror". When an HTTP error occurs, thrownError receives the textual portion of the HTTP status, such as "Not Found" or "Internal Server Error."

If Internet disconnects,the response wont be received and maximum it would be a timeout message..