jquery-logo

Ajax call : User Aborted error vs Other Ajax Error

In an application I am working on recently, I was required to make an AJAX call to load a jqgrid with data. Incase of failure while getting the data, I had used the AJAX function’s error() method to show a error message to the user that “There has been some error while loading your data”. But soon I noticed I started getting the same error message even when I navigated away from the page before the AJAX call has finished. Some search on this led me to this article by Brian Morearty who also had the same problem. Here is what I use now…

The trick is to check the response headers in the XMLHttpRequest object. If there are no response headers (null or empty string, depending on the browser), the server did not respond yet. That means the user aborted.

$.ajax({ 
  url: "url-to-go-here",
  success: function() { }, 
  error: function(xhr, textStatus, errorThrown) {
    if(!isUserAborted(xhr)) {
      console.log("Ajax Error") 
    }
  }
});

function isUserAborted(xhr) {
  return !xhr.getAllResponseHeaders();
}

Hope this helps :)

Related Post :

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>