javascript - multiple operations using jquery ajax -


i want perform operation , simultaneously show progress in html5 , javascript. since using ie 8, <progress> element not supported, approach thought of using jquery ajax method 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 server side operation",              success: function(result){                 progressbarupdate(20);             }         });     }); });  var progressbarupdate = function(value) {     value = value + 10;     $("#id").css("width", value +"%"); } 

but issue here how perform operation , update progress bar simultaneously? because after coming success: part of ajax request, directly showing 100% progress doesn't make sense. there other approach available this?

assuming operation taking place server side, know of 2 approaches.

polling

this take place different ajax

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

basically, poll server-side service/script/code every interval , response contain current progress. update progress bar.

websockets

another approach use web-socket framework allow push content(progress updates) and/or implement remote procedure call conected clients in real-time.

two such frameworks signalr , socket.io


Comments

Popular posts from this blog

angularjs - ADAL JS Angular- WebAPI add a new role claim to the token -

php - CakePHP HttpSockets send array of paramms -

node.js - Using Node without global install -