Learning jQuery

While using jQuery ajax, one needs to be very careful while handling errors as there are chances that your ajax request gets failed for any reason like server didn't respond, database error or any server side exception. So it is best practice to always handle errors while using jQuery.ajax().

To handle errors, there are 3 different ways which can be categorize into

• Local Events
• Global Events
• Using Promise Interface

You may also like:

• jQuery : Execute/Run multiple Ajax request simultaneously
• jQuery - Load ASP.Net User Control Dynamically
• Use jQuery.getScript to load external js files

Local Events

This is most common way of handling error. These are callbacks that you can subscribe to within the Ajax request object, like so:

$.ajax({
  url: "demo.php",
  type: "GET",
  dataType: "html",
  success: function (data, status, jqXHR) {
    console.log("In local success callback.");
  },
  error: function (jqXHR, status, err) {
    console.log("In local error callback.");
  }
})

As you can see in above code, with ajax settings 2 callbacks events (success and error) are also attached. Success callback will be called when ajax request is executed properly on server with no error. And error callback will be called in case of any error. Within the callback, you can also get the HTTP status and exception object that was thrown.

Note: The success() , error() , and complete() callbacks are deprecated as of jQuery 1.8.

Global Events

You can also attach success and error callback globally. As name suggest globally, so these callbacks will be called for every ajax request made from the page. These events are triggered on the document, calling any handlers which may be listening.

$(document).ajaxSuccess(function (e, jqXHR, settings) {
  console.log("In global success callback.");
});

$(document).ajaxError(function (e, jqXHR, settings, err) {
  console.log("In global error callback.");
});

So above callbacks will be called for every ajax request on the page. However, there is an way to disable these global callback. Global events can be disabled for a particular Ajax request by passing in the global option, like so:

$.ajax({
   url: "test.html",
   global: false,
   // ..
});

You can find list of all Global ajax event here.

Using Promise Interface

Now, this is a new way to handle jQuery ajax callback using Promise interface. The $.ajax() method returns jQuery XMLHttpRequest (jqXHR)object and jqXHR implements the Promise interface. So now with $.ajax() you can assign multiple callbacks on a single request, and even to assign callbacks after the request may have completed. Available promise methods are ".done", ".fail", ".always" and ".then".

$.ajax({
  url: "demo.php",
  beforeSend: function( xhr ) {
    xhr.overrideMimeType( "text/plain; charset=x-user-defined" );
  }
}).done(function(data) {
    console.log("Success");
}).fail(function(jqXHR, status, err) {
   console.log("Error");
});

You might be finding this similar to local events, but they are not. The jqXHR object returned by $.ajax() and used by various promise callbacks.

Feel free to contact me for any help related to jQuery, I will gladly help you.