Discussion :

[tixmcprods]

Bonjour,

J'ai un problème avec IE dans le parcours des élements de mon responseXml.
Il rame énormément, alors que sous FF, c'est presque fluide.
Mon code :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
function createXhr() {
  var xhr = null;
  if(window.XMLHttpRequest) // !IE
    xhr = new XMLHttpRequest();
  else if(window.ActiveXObject){ // IE
    try {
      xhr = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
  }
  else {
    alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
  }
  return xhr;
}

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
var xhr = createXhr();
if(xhr != null) {
  xhr.open("POST", "select.php", true);
  xhr.onreadystatechange =  function() {
    if(xhr.readyState == 4 && xhr.status == 200) {
      var _id = xhr.responseXML.getElementsByTagName("id");
      var _val = xhr.responseXML.getElementsByTagName("val");
      var _sel = xhr.responseXML.getElementsByTagName("sel");
      for(var i = 0; i < _id.length; i++) {
        var __id = _id.item(i).firstChild.data;
        var sel = false;
        if(_sel.item(i).firstChild.data == "true") sel = true;
        document.getElementById(id).options[document.getElementById(id).options.length] = new Option(_val.item(i).firstChild.data, __id, false, sel);
      }
    }
  };
  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  var params = "type=test";
  xhr.send(params);
}

Exemple de réponse :

Code :

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

1
2
3
4
5
6
7
8
 
<?xml version="1.0" encoding="UTF-8"?>
<liste>
<id>1</id><val>France</val><sel>true</sel>
<id>2</id><val>Espagne</val><sel>false</sel>
<id>3</id><val>Belgique</val><sel>false</sel>
[...]
</liste>

Tout ça fonctionne bien, sauf quand le fichier de réponse dépasse 500 lignes.
Pour info, avec 7000 lignes, il faut presque 30 secondes pour faire la boucle FOR (CPU à fond, "Ne répond pas" lorsqu'on clique sur la fenêtre du navigateur). Ca fonctionne quand même, mais c'est trop lent.
J'ai placé un alert juste avant la boucle, et elle apparaît presque instantanément.

J'ai testé sans responseXML, avec simplement un responseText avec split, idem.
J'ai bien pensé, avec responseText, de faire document.getElementById("liste").innerHTML, mais le comportement de FF et IE (même avec outerHTML) est différent.

Merci pour vos suggestions.

TiX

[DoubleU]

Essaie de remplacer tes __id.item(i) par __id[i].

PS: très bizarre ta facon de nommer tes variables

[tixmcprods]

Merci, mais ça change rien, ça marche mais ça rame sous IE (pas sous FF).

Lol, je trouve pas que c'est bizarre comment je nomme mes variables, je préfère ça à id2 ou autre.

EDIT : Ca devient inutilisable à partir de 1500 éléments sous IE. J'ai aussi remarqué que quand il y a 2000 éléments, ça prend plus que deux fois le temps que ça prend avec 1000. Etrange...

[DoubleU]

Essaie de mettre des timers voir quelle partie du code mete du temps a s'exécuter.

Code :

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

document.getElementById(id).options[document.getElementById(id).options.length] = new Option(_val.item(i).firstChild.data, __id, false, sel);

A mon avis, sur cette ligne tu ferais bien de te stocker document.getElementById(id) dans une variable avant ta boucle, afin de ne pas aller le chercher 14000 fois dans le DOM...

[tixmcprods]

Re,

J'ai essayé de remplacer "document.getElementById(id)" par "liste" avec "var liste = document.getElementById(id)", mais toujours pas mieux...

Merci pour votre aide, dont j'ai encore besoin

[tixmcprods]

Bonjour,

Bon j'ai changé de technique pour faire fonctionner tout ça correctement.

Je ne passe plus par du XML (donc c'est plus du AJAX, mais AJA, lol ).
J'ai changé le contenu du fichier reçu par :

Code :

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

1
2
3
4
 
<option value="1">France</option>
<option value="2">Espagne</option>
...

Voici l'extrait du onreadystatechange :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
xhr.onreadystatechange =  function() {
  if(xhr.readyState == 4 && xhr.status == 200) {
    var nav = navigator.appName;
    if(nav == "Microsoft Internet Explorer") {
      var old = document.getElementById(id).outerHTML;
      old = old.substring(0, old.length - 9);
      document.getElementById(id).outerHTML = old + xhr.responseText + "</select>";
    }
    else document.getElementById(id).innerHTML = xhr.responseText;
  }
};

C'est très nettement plus rapide (malgré une petite seconde pour 7000 éléments) qu'avant.
Il a juste fallu faire des exceptions pour IE, car le innerHTML zape les première et dernière balises.
La balise contenante <select> reste en l'état avec ce système.

Finalement, côté client, c'est beaucoup moins gourmand.

J'ai testé cette solution sur IE, Firefox et Opera et c'est OK (juste avec Opera, la liste met un peu de temps à s'afficher (on voit la barre de défilement se réduire)).

Merci encore.

Malgré tout, si quelqu'un a une réponse du pourquoi IE gère si lentement le responseXml, je suis preneur !!!

@++