Y a-t-il des événements de mise à jour de progression dans jQuery ajax?

Question

J'ai une tâche longue qui est appelée en utilisant jquery ajax. J'utilise le block ui plugin to show "chargement". y at-il de toute façon je peux envoyer des messages de progrès au client pour montrer la progression et l'avoir mis à jour sur le message du plugin ui de bloc. Il va donc montrer cela (comme le serveur fait son travail). .

"Chargement première source..."
"Chargement deuxième source..."
"Chargement troisième source..."
"Résultats de parsing..."

Answer 1

D'après ce que je Nous l'avons vu dans le cas du téléchargement de données - les utilisateurs créent une passerelle séparée et l'interrogent pour obtenir des informations sur les progrès, car ils ne sont disponibles que sur le serveur. Mais je pense que ce n'est pas la meilleure chose dans votre cas.

Si vous souhaitez charger des informations de progression ou permettre au serveur d'afficher des informations sur la progression lors de la génération de la sortie, http streaming est ce que vous voulez. Il est bien couvert here. Fondamentalement, il s'agit d'une seule requête http, à laquelle le serveur répond en morceaux pendant une minute environ (donc l'envoi de choses quand il le veut), puis une nouvelle connexion est ouverte.

Cela me était tout à fait une découverte pour;)

[modifier]

Actuellement, il y a beaucoup de meilleures techniques avaliable, et tous sont enveloppés dans Socket.IO - Websockets avec des solutions de repli à d'autres techniques, y compris http streaming

Socket.IO est un module pour nodeJS, mais il existe d'autres implémentations similaires. J'ai déjà échangé des paquets avec l'implémentation JAVA Socket.IO de https://github.com/Atmosphere/atmosphere

Answer 2

J'ai récemment pris connaissance d'un projet qui fait un ajax "push". Vous pouvez le vérifier:

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

Pour autant que je sais qu'il ya quelques autres projets en faisant là des choses semblables, c'est la plus vraie: « envoyer des messages de progrès au client » où l'autre solution nécessite une demande de sondage pour le progrès (toujours une solution très légitime et bonne).

Answer 3

J'AURAIT chaque demande AJAX renvoie une réponse JSON contenant un message, les données et l'URL suivante à la demande: {message: "Loading second resource...", data: ..., next_url: "/next_part"}

Avant votre première demande AJAX, définissez le message BlockUI à « Chargement ... » . Lorsque vous obtenez la réponse, définissez le message BlockUI sur le message que vous recevez de votre appel AJAX. Passez ensuite l'appel AJAX suivant à la valeur "next_url", et ainsi de suite, en boucle jusqu'à ce que vous ayez terminé toutes les tâches.

Si vous chargez un grand ensemble de données, mais en morceaux, vous pouvez faire quelque chose comme un progressive loading design pattern, mais aussi définir un message de progression lorsque vous obtenez chaque réponse.

Answer 4

Une façon consiste à utiliser les gestionnaires HTTP et AJAX avec jQuery.

1. Initié demande côté serveur

$("#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. Interrogation

Et maintenant que vous devez faire est pour interroger le serveur à intervalle 't' et obtenir le statut. Pour cela nous devons appeler une fonction à l'intervalle 't' qui déclencherait un appel AJAX à un HTTPHandler pour obtenir le statut.

$(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 } 
     }); 
} 

Dans votre cas ici, le GetStatusHandler.ashx peut retourner le innerHtml complet pour le statut. Pour exemple, le premier appel, il retournera « Chargement première source ... », alors il pourrait revenir:
Loding première source ...
Chargement ... Deuxième source
et ainsi de suite.

Answer 5

Ce que vous essayez de faire est quelque chose de similaire à Comet. Les serveurs Web traditionnels ("non-comètes") ne sont pas conçus pour ce type de modèle de transaction et ne constituent donc pas une solution souhaitée.

Ma suggestion est de briser le traitement dans une requête client par source de données:

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

Voici un exemple d'une solution asynchrone. Vous pouvez implémenter la gestion d'état dans callback() si vous avez besoin d'être synchrone.

Answer 6

Eh bien, j'avais une situation similaire et je le résous avec une autre approche. C'est un travail TRES UGLY, je sais que donc s'il vous plaît ne commencez pas à dire à quel point c'est mauvais, parce que je le sais, mais c'était bon pour ce dont j'ai besoin. Je suis en train de mettre la progression dans un fichier, côté serveur. Par exemple, j'ai process.php appelé qui doit faire beaucoup de travail et il faut un certain temps jusqu'à ce qu'il soit complet, donc l'utilisateur devient nerveux et il ferme le navigateur (pas trop bon). Ainsi process.php enregistre une sortie dans un fichier sur le serveur. Sur la page qui a appelé le process.php j'ai un petit div, span, ou peu importe où je veux afficher la progression, mais je suggère div. Chaque X milliseconde, ou secondes, je charge un autre script du serveur dans le div, disons display_info.php Maintenant, display_info.php lit le fichier qui a été édité par process.php et le contenu est affiché dans la div.

Vous devez faire attention à ce que la sortie de process.php soit unique pour chaque occasion, sinon vous allez déranger la sortie d'info vers les navigateurs.

Emil