multiple operations using jquery ajax

Question

I want to perform an operation and simultaneously show the progress in HTML5 and JavaScript. Since I am using IE 8, the <progress> element is not supported, the approach I thought of is using a jQuery AJAX method like this:

<div class="progress-bar" role="progressbar" id="id" aria-valuemin="0" aria-valuemax="100">
    <span class="sr-only">Complete</span>
</div>

$(document).ready(function(){
    $("button").click(function(){
         $.ajax({
            url: "Perform a server side operation", 
            success: function(result){
                ProgressBarUpdate(20);
            }
        });
    });
});

var ProgressBarUpdate = function(value) {
    value = value + 10;
    $("#id").css("width", value +"%");
}

But the issue here is how to perform the operation and update the progress bar simultaneously? Because after coming to success: part of the AJAX request, directly showing 100% progress doesn't make sense. Is there any other approach available for this?

Answer 1

Assuming the operation is taking place server side, I know of two approaches.

Polling

This will take place with a different ajax

setInterval(function(){
   $.ajax("checkprogress.url", function(data){
       $('.progress-bar').val(data);
}, 1000);

Basically, you will poll a server-side service/script/code every interval and the response will contain the current progress. You will then update the progress bar.

WebSockets

Another approach is to use a web-socket framework which will allow you to push content(progress updates) and/or implement a remote procedure call to conected clients in real-time.

Two such frameworks are SignalR and socket.io