Discussion :

[Invité]

Bonjour,

Ma question est simple: comment convertir une chaîne contenant de l'HTML en node?

La raison pour laquelle je veux faire cela: je fais un site en AJAX (et Struts) et je veux parser la réponse (req.responseText) à mon XMLHttpRequest.

Pourquoi je n'utilise pas req.responseXML? Parce-que celui-ci est à null, contrairement à req.responseText.

Ce que je veux faire comme traitement? Mettre à jour tous les éléments dont la classe est passé en paramètre de ma fonction. Disons par exemple tous les éléments dont la classe est "to-be–updated".

Vu que j'utilise Prototype, cela est très simple de le faire, grâce à la fonction getElementsByClassName. Mais celle-ci s'applique sur des Node et non sur des String.

Voilà pourquoi je veux transformer ma String en Node.

Merci d'avance!

[Finidrigoler]

Surement quelque chose comme :

Code :

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

document.body.innerHTML+=xhr.responseText

Mais :

Pourquoi je n'utilise pas req.responseXML? Parce-que celui-ci est à null, contrairement à req.responseText.

Il est peut-etre préférable d'apprendre a envoyer du XML

( les bon entêtes http envoyé coté serveur vers le navigateur et ton xhr.responseXML ne vaudra pas nul ( ainsi qu'un document xml bien formé ) )


ps :

avec du xml renvoyé par le serveur, tu peux le manipuler comme ton document html courant. ( exemple : alert(xhr.responseXML.childNodes.length) )

[Invité]

Surement quelque chose comme :

Code :

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

document.body.innerHTML+=xhr.responseText

Mais :



Il est peut-etre préférable d'apprendre a envoyer du XML

( les bon entêtes http envoyé coté serveur vers le navigateur et ton xhr.responseXML ne vaudra pas nul ( ainsi qu'un document xml bien formé ) )


ps :

avec du xml renvoyé par le serveur, tu peux le manipuler comme ton document html courant. ( exemple : alert(xhr.responseXML.childNodes.length) )

Désolé de ne pas avoir répondu avant. En fait j'avais trouvé cette fonction sur le net:

Code :

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

1
2
3
4
5
6
 
function getDomNodeFromStr(str) {
   var node = document.createElement("div");
   node.innerHTML = str;
   return node;
}

Ça marche, mais bon je préférerais ne pas avoir à utiliser ce genre d'artifice. Dommage que je n'aie pas trop le temps, sinon je me serais plongé dans l'envoi de XML lol.

Merci pour ta réponse en tout cas.

[sekaijin]

je ne comprends pas pourquoi ton reponseXML est NULL
si c'est le cas ces que ton XML n'est pas du XML
si ta réponse est un fragment HTML
soit tu fais avec innerHTML comme dans les réponses précédente
en priant que le fragment sera correctement interprété.

sinon c'est au niveau de ton serveur qu'il te faut générer un fragment conforme XML
généralement on a deux soucis lorsque on fait un fragment.
il y a plusieurs éléments HTML à la racine de la réponse

Code :

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

1
2
<ul><li>....</li></ul>
<div>...</div>

par principe tous fragment est encapsulé dans un tag XML

Code :

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

1
2
3
4
<fragment>
<ul><li>....</li></ul>
<div>...</div>
</fragment>

ainsi tu es sur de n'avoir qu'une racine.

le deuxième est la conformité du code lui-même
pas de <br> mais <br /> idem pour img etc.
les attributs toujours entre ""
tous les tag en minuscule (ça évite de se poser la question)
tous tag ouver doit être fermé.

du coup lorsque tu reçois ta réponse elle est directement parsé par responseXML

ne te reste qu'à copier les éléments au bon emplacement dans ta page.

c'est un peu plus lourd la première fois mais lorsque tu l'as fais une fois ça devient facile.
mais c'est surtout bien plus sûr.

XMLHttpRequest a été conçu pour fonctionner ainsi.
personnelement j'ai mon XMLHttpReques encapsulé dans un objet javascript
regarde la méthode getXML et getXMLError qui permettent de récupérer le XML et les erreurs s'il y en a eu.

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
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
// JavaScript Document
function httpServer () {
  this.url ="";
  this.xmlhttp = null;
  this.handler = null;
 
  //methode interne pour création d'un requeteur'
  this.newrequester = function () {
    if(window.XMLHttpRequest) {// Firefox   
      this.xmlhttp = new XMLHttpRequest();   
    } else if(window.ActiveXObject) {// Internet Explorer   
      this.xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");   
    } else { // XMLHttpRequest non supporté par le navigateur 
      alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest... Veuillez Utiliser Internet Explorer ou FireFox");   
      return;   
    }  
  }
 
  //retourne la valeur de l'url
  this.getUrl = function () {
    return this.url;
  }
 
  //fixe la valeur de l'url (encodée voir RFC 2396)
  this.setUrl = function (value) {
    this.url = encodeURI(value);
    return;
  }
 
  // retourne la fonction de rappel (pas son nom) 
  this.getHandler = function () {
    return this.handler;
  }
 
  //fixe la fonction de rappel
  this.setHandler = function (value) {
    this.handler = value;
    return;
  }
 
 
  // envoie le formulaire aform au serveur
  // la réponce est synchrone
  // le client est figé durant l'attente de la réponse
  this.sendForm= function (aform) {
    if (aform.method.toLowerCase() == "get") {
      return this.get(this.toURI(aform));
    } else {
      var xml = this.toXml(aform);
      alert(xml);
       return this.post(xml);
    }
  }
 
  // envoie le formulaire aform au serveur
  // la réponce est asynchrone
  // le client est libre durant l'attente de la réponse
  // la fonction de rappel est appelé dès que la réponse est reçue
  this.aSendForm= function (aform) {
    if (aform.method.toLowerCase() == "get") {
      return this.aGet(this.toURI(aform));
    } else {
      return this.aPost(this.toXml(aform));
    }
  }
 
  // encode le formulaire pour en faire une url
  // voir la RFC 2396
  this.toURI = function (aform) {
    postable = "";
    for (i=0; i<aform.elements.length;i++) {
      postable = postable + "&"+aform.elements[i].name+"="+aform.elements[i].value;
    }
    return encodeURI(postable);
  }
 
  // construit un document xml avec le formulaire
  // la racine est le nom du formulaire
  // chaque élément est taggé par son nom
  this.toXml = function (aform) {
    xml = '<?xml version="1.0" encoding="latin-1"?>\n';
    xml = xml + "<"+aform.name+">\n";
    for (i=0; i<aform.elements.length;i++) {
      xml = xml + "<"+aform.elements[i].name+">"+aform.elements[i].value+"</"+aform.elements[i].id+">\n";
    }
    xml = xml + "<"+aform.name+">\n";
    return xml;
  }
 
 
  //Ouvre une requête get synchrone et attend la reponse.
  // si la fonction de rappel existe elle est activée
  this.get = function (data) {
    this.newrequester();
    this.xmlhttp.open("GET", this.url+"?"+data, false);
    this.xmlhttp.send(null);
    if (this.handler != null) this.handler();
    return this.xmlhttp.readyState;
  }
 
  //Ouvre une requête post synchrone et attend la reponse.
  // si la fonction de rappel existe elle est activée
  // les données sont envoyées dans le type text/xml
  this.post = function (data) {
    this.newrequester();
    this.xmlhttp.open("POST", this.url, false);
    this.xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    this.xmlhttp.send(data);
    if (this.handler != null) this.handler();
    return this.xmlhttp.readyState ;
  }
 
 
  //Ouvre une requête get asynchrone et n'attend pas la reponse.
  // la fonction de rappel sera activée à la reception de la réponse
  this.aGet = function (data) {
    this.newrequester();
    this.xmlhttp.onreadystatechange=this.handler;
    this.xmlhttp.open("GET", this.url+"?"+data, true);
    this.xmlhttp.send(null);
    return this.xmlhttp.readyState ;
  }
 
  //Ouvre une requête post asynchrone et n'attend pas la reponse.
  // la fonction de rappel sera activée à la reception de la réponse
  // les données sont envoyées dans le type text/xml
  this.aPost = function (data) {
    this.newrequester();
    this.xmlhttp.onreadystatechange=this.handler;
    this.xmlhttp.open("POST", this.url, true);
    this.xmlhttp.setRequestHeader("Content-type", "text/xml");
    this.xmlhttp.send(data);
    return this.xmlhttp.readyState ;
  }
 
  // retourne le texte de la réponse
  this.getText = function () {
    return this.xmlhttp.responseText;
  }
 
   // retourne un objet DOM (voir W3C) s'il n'y a pas d'erreur de parsing xml
   this.getXml = function () {
      // ajout KL
      if (this.xmlhttp.responseXML && 
          this.xmlhttp.responseXML.parseError && 
         (this.xmlhttp.responseXML.parseError.errorCode !=0)) {
         return null;
      } else {
         return this.xmlhttp.responseXML;
      }
   }
 
  this.getXmlError = function () {
    if (this.xmlhttp.responseXML.parseError.errorCode !=0 ) {
      erreur = this.xmlhttp.responseXML.parseError.reason;
      erreur = erreur + " à la ligne : " + this.xmlhttp.responseXML.parseError.line;
      erreur = erreur + " position " + this.xmlhttp.responseXML.parseError.linepos;
      erreur = erreur + " " + this.xmlhttp.responseXML.parseError.srcText;
      return erreur;
    } else {
      return "";
    }
  }
}

cette class js est faite pour envoyer au serveur du formulaire. elle n'est là que pour l'exemple.
A+JYT