How Can I Display a Loading Indicator During Asynchronous AJAX Requests?

Displaying a Loading Indicator during Asynchronous AJAX Requests

In the realm of programming, it's common to encounter asynchronous requests, such as the one performed by $.ajax. These requests retrieve data in the background, allowing users to continue interacting with the application while the request is being processed. However, in certain scenarios, it's desirable to provide visual feedback to users, indicating that an asynchronous request is currently underway.

To accomplish this, an image can be displayed to signify the active state of the request. The following code snippet provides an example of how to perform an async request:

$.ajax({
  url: uri,
  cache: false,
  success: function(html){
    $('.info').append(html);
  }
});

To display a loading image during the request, it can be shown before the request is made and hidden after it completes:

$('#loading-image').show();
$.ajax({
      url: uri,
      cache: false,
      success: function(html){
        $('.info').append(html);
      },
      complete: function(){
        $('#loading-image').hide();
      }
    });

Alternatively, the more general solution of binding the loading image to the global ajaxStart and ajaxStop events can be used. This approach ensures that the loading image is displayed for all AJAX events:

$('#loading-image').bind('ajaxStart', function(){
    $(this).show();
}).bind('ajaxStop', function(){
    $(this).hide();
});

The above is the detailed content of How Can I Display a Loading Indicator During Asynchronous AJAX Requests?. For more information, please follow other related articles on the PHP Chinese website!