Using Simple Ajax with User Feedback - J Query

Problem
You need to show a status indicator to the user when Ajax requests are in progress and hide it upon completion.

Solution

Discussion

One of the huge benefits of jQuery’s Ajax implementation is the exposure of global Ajax events that are triggered on all elements with each Ajax request. In the following solution, we bind two of the events, ajaxStart and ajaxStop using the shortcut methods to the XHTML element with the ID ajaxStatus. When the Ajax request is triggered upon clicking #doAjaxButton, the ajaxStart event is also dispatched and calls show()on the #ajaxStatus element. Notice that these events are triggered automatically and are a by-product of using the $.ajax() (or other shortcut methods such as $.get()). This provides an elegant decoupled solution for having an application-wide request status as Ajax requests are submitted:

Let’s look at some of the additional events and the difference between local and global Ajax events. Local Ajax events (set up using $.ajaxSetup() or defined at the time of $.ajax()) consist of before Send, success, error, and complete. These events are defined inline and tightly coupled to each Ajax request. Global Ajax events are interleaved with the local events but are triggered for any element that binds to them and also make use of jQuery’s native event-handling architecture. Here’s a quick review on how to handle local Ajax events (such as the complete event):

Now let’s examine the breakdown, order, and scope in which events are triggered on a successful Ajax request:

  • ajaxStart(global)
  • beforeSend(local)
  • ajaxSend(global)
  • success(local)
  • ajaxSuccess(global)
  • complete(local)
  • ajaxComplete(global)
  • ajaxStop(global)

For an unsuccessful Ajax request, the order of triggered events would be as follows with success and ajaxSuccess being replaced by error and ajaxError, respectively:

  • ajaxStart(global)
  • beforeSend(local)
  • ajaxSend(global)
  • error(local)
  • ajaxError(local)
  • complete(local)
  • ajaxComplete(global)
  • ajaxStop(global)

ajaxStart and ajaxStop are two special events in the global scope. They are different in that their behavior operates across multiple simultaneous requests. ajaxStart is triggered when a request is made if no other requests are in progress. ajaxStop is triggered upon completion of a request if there are no additional requests in progress. These two events are only triggered once when multiple simultaneous requests are dispatched:

One setting that can be passed into the $.ajax() method is global, which can be set to either true or false. By setting global to false, it’s possible to suppress the global events from being triggered.
The beforeSend call back is a local event that allows for modifying the XMLHttpRequest object (which is passed in as an argument) prior to the request being sent. In the following example, we specify a custom HTTP header for the request. It is possible to cancel the request by returning false from the callback:

Now taking all of the events if we revise our solution, we come up with the following:


All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

J Query Topics