Ajax Fortschrittsbalken mit einer großen Liste

Question

Ich habe einen Ajax Anruf, der eine große json Liste ergreift. Gibt es eine Möglichkeit, einen Fortschrittsbalken zu erstellen, der den tatsächlichen Wert von json lädt (z. B. eine Statusleiste, die 1 von 200 geladenen angibt)?

Im Moment habe ich eine ziemlich grundlegende Ajax

function SendAjax(urlMethod, jsonData, returnFunction) { 
    $.ajax({ 
     type: "GET", 
     contentType: "application/json; charset=utf-8", 
     url: urlMethod, 
     data: jsonData, 
     dataType: "json", 
     success: function (msg) { 
      if (msg != null) { 
       ReturnJson(msg); 
      } 
     }, 
     error: function (xhr, status, error) { 
      // Boil the ASP.NET AJAX error down to JSON. 

      var err = eval("(" + xhr.responseText + ")"); 

      // Display the specific error raised by the server 
      alert(err.Message); 
     } 
    }); 
} 

Answer 1

Versuchen Sie, AjaxStart auf Ihrem globalen Anwendungsgebiet zu verwenden. Das bedeutet, dass Sie den Code in Ihrer Layout-Datei setzen, und wenn die Verarbeitung lang ist, wird die Statusanzeige zeigt ...

$(document).ajaxStart(function() { 
    $("#loading").show(); 
}); 

Sie das Beispiel und Antwort auf preload with percentage - javascript/jquery sehen kann.

Answer 2

nennen es einige Staaten in einer Ajax-Request sind, aber sie stellen keine Prozentsatz durch die Anfrage.

Der Netzwerkverkehr sollte wirklich Ihr wirkliches Problem sein, Sie wollen nicht 200 separate Anfragen senden (obwohl dies eine Fortschrittsanzeige ermöglichen würde, würde die gesamte Anfrage erheblich länger dauern, abhängig von Ihrer Netzwerkverbindung zur Server).

Sie können am besten einen Aktivitätsindikator anzeigen und ihn entfernen, wenn die Anfrage abgeschlossen ist, und versuchen, Ihre Code-Server-Seite so zu optimieren, dass die 200 Elemente so schnell wie möglich zurückgegeben werden.

Wenn 200 Objekte wirklich zu groß ist (größer als X Sekunden, um sie zurück), können Sie es in der Hälfte oder Viertel geteilt konnte einige Fortschritte zu zeigen, aber dies wird einige Zeit mit diesen zusätzlichen Anforderungen auf Netzwerk, Kopfzeilen verschwenden, usw.

Answer 3

Wenn Ihr serverseitiger Code eine Möglichkeit hat, den Anwendungsstatus (wie $ _SESSION in PHP) zu teilen, können Sie zwei separate Anfragen stellen, die nach den Daten fragen und eine, die den Fortschritt der ersten Anfrage prüft . Wiederholen Sie die zweite Anforderung für einen Zeitgeber, bis der erste abgeschlossen ist, und aktualisieren Sie die $ _SESSION (oder was auch immer in Ihrem Server-Code funktioniert), während jedes Element verarbeitet wird.

Zum Beispiel: Die erste Seite muss eine Sitzung starten, so dass die nachfolgenden AJAX Anrufe das Cookie haben, und können die gemeinsamen Daten zuzugreifen:

<?php 
session_start(); 
session_write_close(); // close the session so other scripts can access the file (doesn't end the session) 
// your page content here 
?> 

Erste Ajax-Aufruf die Verarbeitung zu starten:

<?php 
function updateSession($count){ 
    session_start(); // open the session file 
    $_SESSION['progress'] = $count; 
    session_write_close(); // let other requests access the session 
} 
// as you process each item, call the above function, ex: 
for ($i = 1; $i <= 10; $i++) { 
    updateSession($i); 
} 
?> 

Zweite AJAX-Aufruf (alle X Sekunden wiederholt) wie folgt aussieht:

<?php 
session_start(); // open the session file 
echo @$_SESSION['progress'] or 0; // echo contents or 0 if not defined 
session_write_close(); // let other requests access the session 
?> 

Tut mir leid, ich kenne ASP.NET nicht, aber hoffentlich ist der obige Code für Sie nützlich.