Anzeige des Fortschrittsbalkens mit Ajax-Anfrage

Question 1

Ich möchte den Fortschritt mit der Fortschrittsleiste von jquery ui anzeigen, wenn eine Ajax-Anforderung ausgelöst und beendet wird. Das Problem ist, dass ich nicht weiß, wie ich Werte für den Fortschrittsbalken abhängig vom Fortschritt der Ajax-Anforderung festlegen soll. Hier ist ein Code für den Anfang:

function ajaxnews()
    {
        $('.newstabs a').click(function(e){
            var section = $(this).attr('id');
            var url = base + 'news/section/' + section;

            $.ajax({
                url : url,
                dataTye : 'html',
                start : loadNews,
                success : fillNews
            });
        });
    }



// start callback functions
   function loadNews()
   {

       $('#progressbar').fadeIn();
       $('#progressbar').progressbar({ //how shoud I set the values here});
   }

   function fillNews()
   {
    $('#progressbar').progressbar('option', 'value', ?? /* how do I find this?*/);   
    $('#progressbar').fadeOut();
   }

Question 2

Das grundlegende Problem ist, dass Sie nicht wissen, wie lange die Anfrage dauern wird.

Für den Fortschrittsbalken müssen Sie einen Prozentsatz oder eine Anzahl abgeschlossener Schritte festlegen.

Wenn Sie nicht möchten, dass der Fortschrittsbalken einfach von 0 auf 100 springt, müssen Sie eine Möglichkeit haben, die Abschlussrate zu messen, bevor die Anfrage abgeschlossen ist.

Wenn Sie erraten können, wie lange es dauert, können Sie einen Timer verwenden, um ihn schrittweise automatisch auf beispielsweise 90 % vorrücken zu lassen, und wenn die Serverantwort kommt, stellen Sie ihn auf 100 % ein. Das ist natürlich ziemlich vorgetäuscht.

Wenn Sie mehr als eine Anfrage haben, können Sie die Anzahl der abgeschlossenen Anfragen als Prozentsatz verwenden. Wenn es sinnvoll ist, können Sie Ihre einzelne Anfrage in mehrere aufteilen, aber denken Sie sorgfältig über die Auswirkungen nach, die dies auf den Netzwerkverkehr und die Antwortzeiten hat. Tun Sie es nicht nur wegen des Fortschrittsbalkens.

Wenn die Anfrage wirklich lange dauert, könnten Sie zusätzliche Anfragen an den Server senden, um den Fortschritt abzufragen. Aber das könnte serverseitig viel Arbeit bedeuten.

Tut mir leid, aber Fortschrittsbalken sind schwer …

Question 3

Diese Situation habe ich in unserer hauseigenen App erlebt. Es war eine kritische App und wir mussten dem Benutzer den Fortschritt zeigen. Trotz der Tatsache, dass @Thilo den Netzwerkverkehr erwähnte, mussten wir ihn so implementieren, dass der Benutzer informiert werden konnte, wenn der langwierige Prozess beendet war und wie er sich im Laufe der Zeit entwickelt hat.

Wir haben es in kleine Stücke zerlegt.

Generieren Sie einen Thread im serverseitigen Code, um den jeweiligen Prozess auszuführen. Für ASP.Net war es so:

System.Threading.ThreadPool.QueueUserWorkItem(AddressOf MyProcessRoutine, objectParameter)
Mit diesem “MeineProzessroutine” Führen Sie Ihren lange laufenden Code aus und aktualisieren Sie eine statische Variable für den Zähler oder bleiben Sie in der Datenbank für jeden Schritt, den Sie überwachen möchten.

Erstellen Sie eine weitere Funktionsroutine, die diesen Zähler ständig überprüft und den aktuellen Wert zurückgibt. Beispielsweise: Public Shared Function CheckStatus() As Integer
Rufen Sie diese Routine von Ihrem clientseitigen Code aus beispielsweise alle 5 Sekunden ab (je nachdem, wie viel Netzwerkverkehr Sie sich leisten können und wie viel Genauigkeit Sie wünschen. Zum Beispiel: timer = setInterval("MyWebService.CheckStatus();", 500);
Verwenden Sie in Ihrem clientseitigen Code diesen zurückgegebenen Wert (Zähler), um Ihren Fortschrittsbalken zu aktualisieren.

Neben nur einem Zähler können Sie auch ein Objekt zurückgeben, das relevante Details wie die Datensatz-ID enthält, um dem Benutzer zu zeigen, wo sich der Prozess gerade befindet.

Stellen Sie sicher, dass Sie den Thread sehr sorgfältig behandeln, alle möglichen Ausnahmen behandeln und eine ordnungsgemäße Bereinigung durchführen.

Question 4

ich benutze jquery nicht, aber das kann dir vielleicht helfen.

Es ist ein animierter Ajax-Fortschrittsbalken mit gefälschtem Fallback.

Ich übergebe einfach eine gefälschte Größe, da ich die durchschnittliche Größe meiner Skripte kenne

Wenn meine Skripte also etwa 50-100 KB groß sind, setze ich die gefälschte Größe auf 150 KB.

Wenn die berechnete Länge nicht verfügbar ist, verwende ich die gefälschte Größe.

In diesem Skript habe ich auch eine zusätzliche Überprüfung hinzugefügt, dass die Balkengröße immer kleiner als der Container ist.

einfach durch multiplizieren der fake-size *2 .. wenn sie kleiner ist als die geladenen Daten.

Damit die Dinge schön aussehen, habe ich auch einen CSS3-Übergangseffekt hinzugefügt, so dass er 700 ms verzögert.

Diese Animationsverzögerung fügt alles hinzu, was Sie brauchen, damit der Fortschrittsbalken echt aussieht.

Kopieren & Einfügen in eine HTML-Datei und Überprüfung mit einem modernen Browser wie Chrome.

ersetzen DEINE SEITE mit einer Ajax-Content-Site … oder was auch immer.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ajax Progress</title>
<style>
#progress{
 width:300px;
 height:20px;
 border:1px solid rgba(0,0,0,0.5);
}
#bar{
 width:0%;
 height:20px;
 background-color:green;
 -webkit-transition:width 700ms ease;   
}
</style>
<script>
var
pb,
fakeSize=100000,//~100kb
progress=function(e){
 fakeSize=(e.loaded>fakeSize?(fakeSize*2):fakeSize);//Bonus
 var tot=(e.lengthComputable?e.total:fakeSize);
 pb.style.width=(100/tot*e.loaded)+'%';
},
onloaded=function(e){
 pb.style.width="100%";
},
ajax=function(a,c){
 c=new XMLHttpRequest;
 c.open('GET',a);
 c.onprogress=progress;
 c.onload=onloaded;
 c.send()
};
window.onload=function(){
 pb=document.getElementById('bar');
 ajax('YOURSITE');
}
</script>
</head>
<body>
<div id="progress"><div id="bar"></div></div>
</body>
</html>

Sie müssen im Grunde nur die Fortschrittsfunktion in jquery verwenden und dann den Balken auf 100% setzen, wenn das Skript geladen wurde.

Question 5

Bearbeiten: Für die Nachwelt habe ich meine vorherige Antwort unten hinterlassen, aber da sie die gestellte Frage nicht wirklich beantwortet, gebe ich eine neue Antwort.

Einige der Kommentare zu dieser Frage haben auf neuere Methoden hingewiesen, um dies zu erreichen. Dank HTML5 und dem neueren XHR2 ist es möglich, Callbacks auf den Fortschritt von AJAX-Anfragen zu setzen. Dazu müssen Sie dem XHR-Objekt Ereignis-Listener hinzufügen und Rückrufe für die entsprechenden Eigenschaften bereitstellen. Dies Seite hat gute Beispiele für Upload und Download und dieses Git-Repo sieht gut aus und wurde kürzlich aktualisiert.

Wenn Sie wirklich daran interessiert sind, sich mit dem XHR und den Überschreibungen zu befassen, dieses Mozilla-Dokument Post sollte auch viel helfen. Und tatsächlich scheint dieser Dokumentbeitrag das zu sein, worauf das von mir erwähnte Git-Repo basierte.

Alte Antwort: Dies ist ein uraltes Problem für Leute, die Web-Apps schreiben, und obwohl Thilo Recht hatte, ist dies nicht mehr so schwierig wie früher. Die beste (imo) aktuelle Lösung besteht darin, die Dateien, die Sie hochladen, zu „chunken“ und Ihren Fortschrittsbalken jedes Mal zu aktualisieren, wenn Sie einen Chunk hochladen. Diese SO-Frage und ihre Antwort sind ein guter Ausgangspunkt, um dieses Konzept zu verstehen und es sogar auf Ihre Situation anzuwenden.

Aber es genügt zu sagen, was Sie tun werden, ist, die Datei, die Sie hochladen, zu nehmen und sie auf der Client-Seite in kleinere Teile aufzuteilen. Dies hat mehrere potenzielle Vorteile, aber der wichtigste in diesem Fall ist, dass Sie jedes Mal wissen, wann ein bestimmter Prozentsatz der Datei auf den Server hochgeladen wurde. Und natürlich können Sie jedes Mal, wenn ein Chunk hochgeladen wird, den Fortschrittsbalken entsprechend aktualisieren.

Das Chunken der Datei auf diese Weise ermöglicht es Ihnen auch, Uploads effektiv zu „pausieren“ oder „fortzusetzen“, da Sie jederzeit verschiedene Teile einer Datei hochladen können.

Question 6

Dies sollte mit möglich sein serverseitige Ereignisse