2015-06-01 11 views
12

Ich möchte eine Operation ausführen und gleichzeitig den Fortschritt in HTML5 und JavaScript zeigen. Da ich IE bin mit 8, das <progress> Element nicht unterstützt wird, der Ansatz, dachte ich an ein jQuery AJAX-Methode wie folgt aus:mehrere Operationen mit Jquery Ajax

<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 +"%"); 
} 

Aber die Frage ist hier, wie die Operation durchzuführen und zu aktualisieren der Fortschrittsbalken gleichzeitig? Denn nach success: Teil der AJAX-Anfrage, die direkt zeigt 100% Fortschritt macht keinen Sinn. Gibt es einen anderen Ansatz dafür?

+1

Welche Maßnahmen werden Sie auf Server-Seite tun? Wenn du irgendeine Datei hochlädst, dann benutze '$ .ajaxSettings.xhr(). upload();' Du kannst den Uplaoding-Prozentsatz bekommen –

+0

Ich wollte dasselbe in meinem Projekt machen. Aber das ist nicht möglich, da es ein Ajax-Aufruf ist und du kannst den Fortschritt davon im wahrsten Sinne nicht erreichen. Du kannst eine Fake (Illusion) einer Fortschrittsbalken machen, aber das ist nicht der tatsächliche Fortschritt :( – AkshayJ

+0

Ich mache es als generische Komponente nicht unbedingt hochladen – user1400915

Antwort

3

Angenommen, die Operation findet serverseitig statt, kenne ich zwei Ansätze.

Polling

Dieser Ort mit einer anderen Ajax nimmt

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

Grundsätzlich werden Sie einen serverseitige Service/script/Code abfragen, jedes Intervall und die Antwort wird den aktuellen Fortschritt enthält . Sie werden dann den Fortschrittsbalken aktualisieren.

WebSockets

Ein weiterer Ansatz ist es, einen Web-Socket-Framework zu verwenden, die Sie Push Inhalt (Fortschritt-Updates) und/oder implementieren ein remote procedure call zu conected Kunden in Echtzeit ermöglicht.

Zwei solche Gerüste sind SignalR und socket.io