Discussion :

[YouplaBof]

Bonjour,

J'ai écrit une page html qui effectue des traitements en javascript qui durent plusieurs secondes (notamment des XMLHttpRequest synchrones).

Pour que l'utilisateur puisse suivre l'avancement du traitement j'affiche du texte dans un div avec innerHTML au fur et à mesure.

Problème : sous internet explorer 6 et 8 (pas essayé le 7) le texte n'est pas affiché au fur et à mesure du traitement, il est affiché d'un bloc à la fin, alors que sous firefox j'obtiens le résultat attendu.

Je suppose qu'il s'agit d'un problème de bufferisation mais je n'arrive pas à trouver une méthode pour forcer le navigateur à "flusher" en javascript.
Quelqu'un peut m'aider ?

Merci,
Youpla

[SpaceFrog]

tu récupères avec un ajax en une seule fois le contenu du innerHTML ?

[YouplaBof]

Merci pour ton attention. Je précise que je n'utilise pas de librairie AJAX, je fais tout à la main pour l'instant.

Alors du coté client, une boucle javascript "for i" qui invoque un php en mode synchrone.
Un premier div (progressiondiv) reçoit la valeur de i à chaque itération
Un second div (listdiv) reçoit la réponse du serveur et la concatène à son ancien contenu.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
for (var i=0; i<MonTableau.length; i++) {
  document.getElementById("progressiondiv").innerHTML=(i+1)+"/"+MonTableau.length+" in progress...";
  if(window.XMLHttpRequest) gen_request = new XMLHttpRequest();
  else
  if(window.ActiveXObject) gen_request = new ActiveXObject("Microsoft.XMLHTTP"); 
  // TODO : ELSE alert ("pasbon")
  gen_request.open("POST", "<?=$_SERVER['PHP_SELF']?>", false); 
  gen_request.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
  gen_request.send("generation=&source_dir=<?=$toresize_repository?>&dest_dir=<?=$photos_repository?>&picturetogen="+MonTableau[i]);
  if(gen_request.readyState == 4) document.getElementById("listdiv").innerHTML += gen_request.responseText + "<br>";
}

Coté serveur (php) :
C'est un redimensionnement d'image, suivi d'un unique message

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
echo utf8_encode ("Création de ".$dest_file." ".$width."x".$height);
exit();

Et ceci à chaque itération.

[SpaceFrog]

heu ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 if(window.ActiveXObject) gen_request = new ActiveXObject("Microsoft.XMLHTTP");

c'est pas ajax ça ???

mets un setTimeout incrémenté pour IE, mais pas sur que IE ne rafraichisse le contenu avant la fi, de ma boucle for ...

[YouplaBof]

heu ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 if(window.ActiveXObject) gen_request = new ActiveXObject("Microsoft.XMLHTTP");

c'est pas ajax ça ???

Oui mais je n'utilise pas de librairie AJAX comme dojo ou openrico, je manipule l'objet XMLHttpRequest directement.

mets un setTimeout incrémenté pour IE, mais pas sur que IE ne rafraichisse le contenu avant la fi, de ma boucle for ...

Je n'ai pas compris, tu peux détailler ?

[SpaceFrog]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
var delai=0 
 
for( ...
.../...
 if(gen_request.readyState == 4) { 
 delai+=1000;
setTimeout(function(){document.getElementById("listdiv").innerHTML += gen_request.responseText + "<br>"}, delai);
 
}

[Bovino]

Il me semble que IE n'envoie pas les readyState en mode synchrone
Essaye sans :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
gen_request.open("POST", "<?=$_SERVER['PHP_SELF']?>", false); 
gen_request.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
gen_request.send("generation=&source_dir=<?=$toresize_repository?>&dest_dir=<?=$photos_repository?>&picturetogen="+MonTableau[i]);
document.getElementById("listdiv").innerHTML += gen_request.responseText + "<br>";
}

[kimjoa]

en faite c'est ff, qui renvoie pas le readystate on complete en mode synchrone, je suis pas sur d'avoir tout compris , mais en mode synchrone le javascript est boqué, donc, pas de barre d'avancement

[YouplaBof]

Après vérification le readyState remonte bien sur les 2 navigateurs.
D'ailleurs si ça n'était pas le cas je n'aurais pas de trace du tout, alors que là j'ai toutes les traces, mais d'un coup à la fin dans le cas d'IE.

Concernant la manip du setTimeout en faisant ça, les traces s'affichent 1 par 1 et espacées d'une seconde (jusque là c'est normal), mais elle commencent à s'afficher quand la boucle for est terminée et pas avant.
J'en conlus qu'un appel ajax en mode synchrone stoppe l'écoulement du temps pour l'interpréteur javascript et que le décompte du timeout ne commence que quand le serveur a rendu se réponse. C'est intéressant à savoir, mais ça ne m'aide pas beaucoup

D'autres idées ?

[YouplaBof]

C'est encore moi.

Alors il semblerait que les invocations ajax synchrones, c'est mieux si on s'en sert pas (du coup on se demande pourquoi c'est permis mais bon...)

Bref j'ai complètement changé la structure du script pour qu'il effectue des appels asynchrones MAIS consécutifs, et j'ai mis les messages d'avancement dans le onreadystatechange, ça marche impec.

Donc problème non résolu, mais contourné de manière satisfaisante.

++
Youpla