[Ajax + PHP] Modfication/affichage d'un message en temps réel lié aux traitements d'une page Ajax

Bonjour,

Je poste ce message parce que j'ai beau chercher un peu partout sur le net, je ne trouve pas de réponse à cette question.

J'ai un gros traitement qui est lancé à partir d'un appel ajax (via jQuery) et je voudrais afficher en temps réel des messages d'avancement (ou mette à jour un message d'une fenêtre modale par exemple) au fur et à mesure que le traitement avance.

Je sais qu'il est possible de forcer le navigateur a affiché quelque chose même si la page n'a pas fini de charger avec les fonctions flush() ou ob_flush().

J'ai d'ailleurs ce bout de code qui fonctionne bien lorsque je l'appelle avec mon navigateur mais pas lorsque je l’appelle en ajax :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12

for ($i = 0; $i < 10; $i++) { ob_start(); ob_implicit_flush(true);   echo 'Traitement '.$i.' : terminé<br>';   ob_end_flush(); ob_flush();   sleep(10); }

---

J'appelle ce code avec un appel de ce genre :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

$.ajax({ type: 'POST', url: 'test.php', cache: true, error: function (xhr, ajaxOptions, thrownError) { alert(xhr.responseText); alert(thrownError); }, xhr: function (x) { console.log(x); var xhr = new window.XMLHttpRequest(); //Download progress xhr.addEventListener("progress", function (evt) { console.log(evt); $('#message').append(evt.target.response);   }, false); return xhr; }, beforeSend: function () { console.log('beforeSend'); }, complete: function () { console.log('complete'); }, success: function (json) { console.log('fin'); } });

---

J'ai analysé le retour sur la console et en fait, je me rends compte que le message est concaténé :

1. Après le premier traitement j'ai : Traitement 1 : terminé<br>.
2. Après le deuxième traitement j'ai : Traitement 1 : terminé<br>Traitement 2 : terminé<br> au lieu d'avoir que Traitement 2 : terminé<br>.
3. Après le troisième traitement j'ai : Traitement 1 : terminé<br>Traitement 2 : terminé<br>Traitement 3 : terminé<br> au lieu d'avoir que Traitement 3 : terminé<br>.

Pièce jointe 612807

Pièce jointe 612806

Pièce jointe 612805

Avez-vous une idée de comment faire ?

Je vous remercie par avance pour votre aide.

Bonjour,

Ce que tu cherches à faire est techniquement pas possible, si tu veux seulement avoir les détails de la progression de traitement, il faudrait utiliser l'option xhr d'ajax comme c'est montré dans le deuxième exemple ici.

Remarque : la progression ne fonctionnera pas sur un serveur local, sur un serveur distant en ligne oui.

Bonjour,
attention à $('#message').append(evt.target.response) qui ajoute le message reçu mais n’enlève pas le contenu existant !

Voir : jQuery..append().

Au passage drôle de façon d'utiliser jQuery.ajax() en déclarant un objet window.XMLHttpRequest().

Bonjour,

Citation:

---

Envoyé par NoSmoking

Au passage drôle de façon d'utiliser jQuery.ajax() en déclarant un objet window.XMLHttpRequest().

---

Oui le lien que j'ai trouvé date de plus de 8ans, maintenant avec les versions récentes de jquery, on peut utiliser le xhr d'ajax var myXhr = $.ajaxSettings.xhr();

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

xhr: function () { // Custom XMLHttpRequest var myXhr = $.ajaxSettings.xhr(); if(myXhr.upload){ myXhr.upload.addEventListener("progress",function(e){ console.log("loaded :"+e.loaded+", total :"+e.total); },false); //download myXhr.addEventListener("progress",function(e){ console.log("loaded :"+e.loaded+" total :"+e.total); },false); } return myXhr; }

---

Puis je pense que j'ai répondu un peu vite quand j'ai dis que ce n'est pas possible techniquement, on peut procéder comme suite :

Code:

---

1 2 3 4 5 6 7 8 9

if (ob_get_level() == 0) ob_start(); for ($i = 0; $i < 10; $i++){ echo '<p>Traitement '.$i.' : terminé</p>'; ob_flush(); flush(); sleep(5); } ob_end_flush();

---

Et comme NoSmoking l'avait suggéré (bien vu, je n'ai pas vérifié le js...), il faudrait remplacer append par html :

Code:

---

1 2	$('#message').html(evt.target.response);

---