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