Forcer le contenu de la page à changer via Javascript

Question

Je voudrais montrer quelques progrès visuels à un utilisateur lors d'une requête ajax. Par exemple, quand il clique sur un bouton 'process' qui envoie une requête AJAX à un script côté serveur, il verra un message 'loading ...' et un graphique, mais je veux aussi lui montrer quelques progrès sur le traitement terminé. E.g 5/10 processed, 6/10 processed... et ainsi de suite.

Y a-t-il un moyen de le faire?

Answer 1

Eh oui, il y a mais c'est plutôt compliqué. La seule façon que j'ai trouvé est d'utiliser un iframe sur le client, et response.writeing sur le serveur pour renvoyer des blocs de javascript au client, ce javascript appelle sur la fenêtre parent pour traiter les messages d'état.

Voici un exemple de code. Il peut y avoir des problèmes avec ça, je l'arrache d'une application beaucoup plus grande.

html:

<button id="doStuff"> 
<div id="status"></div> 
<div id="iframeHolder"></div> 

javascript:

//This one will be called from the HTML the javascript is streaming back 
function updateStatus(message) { 
    $('#status').html(message); 
} 
$('#doStuff').click(function(event) { 
    event.preventDefault(); 
    var url="your.page.html"; 
    $('#iframeHolder').html('<iframe src="' + url + '"></iframe>'); 
} 

côté serveur

(ce qui est vb asp.net, mais vous devriez être en mesure de le faire dans la langue de votre choix):

dim message as string = "hello world" 
dim script = String.Format("<script type='text/javascript'>parent.updateStatus('{0}');</script>",message) 
Response.Write(script) 
Response.Flush() 

Quelques observations

• Querystring sera votre ami ici. Je ne suis pas sûr si vous pouvez programmer postback à un iframe
• Vous devrez probablement ajouter un peu de poubelle cachebusting à la chaîne de requête, sinon le navigateur mettra plus que probablement en cache le contenu. Ce sera très très rapide, mais faux :-)
• Il se peut que vous deviez envoyer un "html" avant que le navigateur ne commence à traiter le contenu iframe. J'ai trouvé que l'envoi d'un commentaire HTML d'environ 1k d'ordures aide
• Pour éviter les problèmes d'actualisation dans FF, et les problèmes de "chargement permanent" dans chrome et safari, définissez le src iframe à environ: vide une fois que vous avez terminé ($('#iframeHolder iframe').attr('src','about:blank'))
• la barre de progression jQuery UI semble assez chic pour afficher le traitement pour cent

espoir qui aide. Je me suis déchiré la tête il ya quelques mois :-)

Answer 2

Je ne sais pas ce que votre processus côté serveur est réellement, mais aurait-il sensé de le décomposer en une série d'appels Ajax, chacun faisant une partie du processus? Ensuite, vous pouvez incrémenter votre affichage à chaque étape.

Answer 3

jQuery + Exemple d'implémentation de la barre de progression PHP, interrogation du script côté serveur pour les pourcentages restants. click here

Answer 4

Dans Safari 4 et Firefox 3.5, vous pouvez déterminer les progrès d'un XMLHttpRequest comme suit:

var url = "[URL to file]"; 
var request = new XMLHttpRequest(); 

request.onprogress = function(e) { 
    if (e.lengthComputable) { 
     var percentComplete = (e.loaded/e.total) * 100; 
     console.log("Progress: " + percentComplete + "%"); 
    } 
    else { 
     // Code to execute when we can't get the progress 
    } 
}; 

request.open("GET", url, true); 
request.send(""); 

Pour plus d'informations, reportez-vous à this page au Mozilla Developer Network