How to Implement a Progress Bar for AJAX Data Loading?

Integrating Progress Bar for AJAX Data Loading

When users interact with a web application, it's crucial to provide visual cues to indicate ongoing processes, especially during time-consuming operations. This article suggests an approach to display a progress bar while loading data via AJAX.

Consider the following scenario: a drop-down box prompts the user to select a value. Upon selection, an AJAX request retrieves and displays data from a database. However, the response may take some time. To enhance the user experience, you want to incorporate a visual progress indicator.

The provided AJAX code includes:

<code class="html">$.ajax({
    type:"post",
    url:"clientnetworkpricelist/yourfile.php",
    data:"title="+clientid,
    success:function(data){
     $("#result").html(data);
    }
});</code>

To add a progress bar, utilize the progress event listener of the XMLHttpRequest object. Here's how you can implement it using jQuery:

<code class="html">$.ajax({
    xhr: function() {
        var xhr = new window.XMLHttpRequest();

        // Upload progress
        xhr.upload.addEventListener("progress", function(evt) { 
            if (evt.lengthComputable) {
                var percentComplete = evt.loaded / evt.total; 
                //Handle upload progress here
            } 
        }, false); 
       
       // Download progress
       xhr.addEventListener("progress", function(evt){ 
           if (evt.lengthComputable) {
               var percentComplete = evt.loaded / evt.total; 
               //Handle download progress here
           }
       }, false); 
       
       return xhr;
    },
    type: 'POST',
    url: "/",
    data: {},
    success: function(data){ 
        // Handle successful response
    }
});</code>

This code attaches progress event listeners to the xhr object, enabling you to track both upload and download progress. The percentComplete variable calculates the progress percentage, allowing you to display it to the user using an appropriate progress bar implementation.

The above is the detailed content of How to Implement a Progress Bar for AJAX Data Loading?. For more information, please follow other related articles on the PHP Chinese website!