Gibt es Fortschritt Update-Ereignisse in jQuery Ajax?

Question

Ich habe lange laufende Aufgabe, die mit Jquery Ajax aufgerufen wird. Ich verwende die block ui plugin to show "Laden". Ist da sowieso ich kann Fortschrittsnachrichten zurück zum Klienten senden, um Fortschritt anzuzeigen und dieses auf der Block ui plugin Nachricht aktualisiert zu haben.

So wird es dies zeigen (wie der Server seine Arbeit macht). .

"erste Quelle wird geladen..."
"zweite Quelle wird geladen..."
"dritte Quelle wird geladen..."
"Parsing Ergebnisse..."

Answer 1

Von dem, was ich habe für den Fall des Hochladens von Sachen gesehen - Leute erstellen ein separates Gateway und fragen es nach Fortschrittsinformationen ab, da es nur auf der Serverseite verfügbar ist. Aber ich denke, es ist nicht das Beste in Ihrem Fall.

Wenn Sie Zeug mit Fortschrittsinformationen laden möchten oder dem Server erlauben, Informationen über den Fortschritt beim Generieren der Ausgabe zu öffnen, dann ist http-Streaming das, was Sie wollen. Es ist schön abgedeckt here. Im Grunde ist es eine einzige HTTP-Anfrage, auf die der Server für eine Minute oder so reagiert (also Dinge sendet, wenn er will) und dann eine neue Verbindung öffnet.

Das war eine ganz Entdeckung für mich;)

[Bearbeiten]

Derzeit gibt es viele bessere Techniken avaliable, und alle von ihnen sind in Socket.IO verpackt - einschließlich Websockets mit Fallbacks zu anderen Techniken http Streaming

Socket.IO ist ein Modul für nodeJS, aber es gibt andere und ähnliche Implementierungen. Ich habe bereits einige Pakete mit JAVA Socket.IO-Implementierung von https://github.com/Atmosphere/atmosphere

Answer 2

ausgetauscht Ich wurde erst vor kurzem eines Projekts, das Ajax "Push" tut bekannt. Vielleicht möchten Sie es überprüfen:

http://www.ape-project.org/

Soweit ich weiß, gibt es ein paar andere Projekte gibt, ähnliche Dinge zu tun, das ist die wahrste zu: „Fortschrittsmeldungen zurück an den Client senden“, wo Die andere Lösung erfordert eine Abfrage nach Fortschritt (immer noch eine sehr legitime und gute Lösung).

Answer 3

Ich hätte jeden AJAX-Request eine JSON Antwort zurückgeben eine Nachricht enthält, die Daten und die nächste URL Anfrage: {message: "Loading second resource...", data: ..., next_url: "/next_part"}

Vor dem ersten AJAX-Anforderung, die BlockUI Nachricht auf „Loading ...“ . Wenn Sie die Antwort erhalten, legen Sie die Nachricht BlockUI auf die Nachricht fest, die Sie von Ihrem AJAX-Anruf erhalten haben. Machen Sie dann den nächsten AJAX-Aufruf mit dem Wert "next_url" usw., bis Sie alle Aufgaben abgeschlossen haben.

Wenn Sie einen großen Datensatz laden, aber in Teilen, möchten Sie möglicherweise etwas wie eine progressive loading design pattern, aber auch eine Fortschrittsmeldung einrichten, wie Sie jede Antwort erhalten.

Answer 4

Eine Möglichkeit besteht darin, HTTP-Handler und AJAX mit jQuery zu verwenden.

1. Starten Sie Server-Seite Anfrage

$("#btnCreateInvoice").click(function() {    
     $.ajax({ type: "POST", url: "YourHttpHandler.ashx", 
     contentType: "text/html; charset=utf-8", 
     dataType: "html", 
     success: function(data) { start the block UI } 
     }); 
    }); 

2. Polling

Was kommt als nächstes Sie tun müssen, um den Server in 't' Intervall abzufragen und den Status zu bekommen. Dazu müssen wir eine Funktion im 't'-Intervall aufrufen, die einen AJAX-Aufruf an einen HTTPHandler initiiert, um den Status zu erhalten.

$(function() { 
    setInterval(updateStatus, 't'); 
}); 

function updateStatus() { 
    $.ajax({ type: "POST", url: "GetStatusHandler.ashx", 
     contentType: "text/html; charset=utf-8", 
     dataType: "html", 
     success: function(data) { process 'data' here and update the block UI message box } 
     }); 
} 

In Ihrem Fall hier kann die GetStatusHandler.ashx Rück die komplette innerhtml für Status. Für zB auf dem es zuerst nennen kehrt ‚Erste Seite Lädt ...‘, zurückkehren könnte es dann:
Loding Quelle Erste ...
Zweite Quelle Loading ...
und so weiter.

Answer 5

Was Sie versuchen, ist etwas, das Comet ähnlich ist. Herkömmliche ("nicht-comet") Webserver sind nicht für diese Art von Transaktionsmodellen ausgelegt und daher keine erwünschte Lösung.

Mein Vorschlag ist die Verarbeitung in einer Clientanforderung pro Datenquelle zu brechen:

function loadData() { 
    // Each call passes callback(id) as a success handler 
    fireAsynchronousRequest("source1"); 
    fireAsynchronousRequest("source2"); 
    fireAsynchronousRequest("source3"); 
} 

function callback(var source) { 
    if (source == "source1") { 
     updateStatus("Source 1 loaded"); 
    } 
    else if (source == "source2") { 
     updateStatus("Source 2 loaded"); 
    } 
} 

dies ein Beispiel für eine asynchrone Lösung. Sie können die Statusbehandlung in callback() implementieren, wenn Sie sie benötigen, um synchron zu sein.

Answer 6

Nun, ich hatte eine ähnliche Situation und ich löse es mit einem anderen Ansatz. Es ist eine SEHR HÄSSLICHE Arbeit, ich weiß das, also fange bitte nicht an zu sagen, wie schlimm es ist, denn ich weiß es, aber es war ok für das, was ich brauche.

Ich mache den Fortschritt in eine Datei, auf der Serverseite. Zum Beispiel habe ich process.php genannt, die viel Arbeit machen muss und es dauert eine Weile, bis es abgeschlossen ist, so dass der Benutzer nervös wird und er den Browser schließt (nicht zu gut). So speichert process.php einige Ausgaben in eine Datei auf dem Server. Auf der Seite, die die process.php genannt habe ich ein kleines div, span oder was auch immer, wo ich den Fortschritt anzeigen möchte, aber ich schlage div vor. Jede X Millisekunde, oder Sekunden, lade ich ein anderes Skript vom Server in der div, sagen wir Display_info.php Now display_info.php liest die Datei, die von process.php outputed wurde und der Inhalt wird in der div angezeigt.

Sie müssen darauf achten, dass die Ausgabe von process.php für jede Gelegenheit eindeutig sein muss, sonst werden Sie die Infoausgabe an die Browser durcheinander bringen.

Emil