[AJAX] Ajax et DOM - Aide

Bonjour,
étant débutant en AJAX et en DOM, je fais face à un petit prob.
Je récupere les envois d'un serveur en ajax avec responseText. Ce que le serveur envoie est du code html et j'aimerais utiliser Dom pour manipuler les noeuds de cet arbre :

Code:

---

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

function rappel(xmlhttp){ var res; if(xmlhttp.readyState == 4){ res = xmlhttp.responseText; /* Ce que je recois est du code HTML et jet dois le manipuler avec DOM  mais je ne sais pas cmt faire*/ }   div.innerHTML += res; }

---

Des idées?

Code:

---

if(xmlhttp.readyState == 4)

---

Citation:

---

Envoyé par Bovino

Code:

---

if(xmlhttp.readyState == 4)

---

---

En effet, t'as raison. J'ai écrit mon post sans vérifier mon code.Je corrige tout de suite.
;)

Mais mon prob persiste !!! :(

Code:

---

div.innerHTML += res;

---

div, c'est quoi au juste ?

Citation:

---

Envoyé par Bovino

Code:

---

div.innerHTML += res;

---

div, c'est quoi au juste ?

---

Une variable que j'initialise ainsi

Code:

---

1 2	var div = document.getElementById("table");

---

Essaie ca alors:
div.innerHTML = res;

sous réserve que res soit du contenu qu'on puisse ajouter normalement dans ton élément table.

NB: c'est pas vraiment du DOM ce que tu fais la ^^

Citation:

---

Envoyé par DoubleU

Essaie ca alors:
div.innerHTML = res;

sous réserve que res soit du contenu qu'on puisse ajouter normalement dans ton élément table.

---

Le contenu que je reçois du serveur est un tableau html que j'insere dans un div dont l'ID est table en faisant div.innerHTML += res.

Mon prob est que j'aimerais manipuler cette table html avec DOM. Je ne vois pas cmt faire.

Citation:

---

Envoyé par DoubleU

NB: c'est pas vraiment du DOM ce que tu fais la ^^

---

Pourquoi? 8O

Citation:

---

Envoyé par DoubleU

NB: c'est pas vraiment du DOM ce que tu fais la ^^

---

Citation:

---

Envoyé par publicStaticVoidMain

Pourquoi? 8O

---

une insertion propre dans le DOM se gère avec les méthodes

Code:

---

1 2 3 4

document.createElement() Element.setAttribute() Node.appendChild()

---

...en opposition avec les diverses méthodes "non-DOM"

Code:

---

1 2 3

Element.innerHTML = ... document.write()

---

En plus, si je ne m'abuse, c'est justement avec les tableaux qu'innerHTML pose le plus de soucis...

Citation:

---

Envoyé par RomainVALERI

une insertion propre dans le DOM se gère avec les méthodes

---

Ca je savais, mais est ce quelqu'un sait cmt faire pour manipuler la réponse que je recois de xmlhttp.response en utilisant DOM.

Le code que j'ai écrit est en haut. MErci ;)

:roll:

---> pour "utiliser DOM", comme tu dis, il faut décomposer les éléments que tu veux insérer depuis ta réponse AJAX au lieu de la coller "en tas" avec un innerHTML... ^^ Tout est dans ton div...

Une solution que j'utilise souvent (et qui fonctionne pas trop mal) est de générer du pseudo-xml.
En gros, tu définis des séparateurs sous forme de balises et tu imbriques le tout en fonction du résultat souhaité.
Par exemple, pour un tableau HTML, la réponse pourrait être du style :

Code:

---

responseText = "<ok>contenu1-1<1>contenu1-2<2>contenu2-1<1>contenu2-2"

---

Le <ok> sert juste à vérifier que la réponse est celle que j'attendais (dans la mesure où mes applis gèrent les exceptions et renvoient un résultat même s'il y a eu un problème).
Ensuite, pour construire la table coté JavaScript, je vérifie que la réponse est valide, puis j'utilise les méthodes du DOM :

Code:

---

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

if(xhr.responseText.match(/^<ok>/){ var maTable = xhr.responseText.split('<ok>')[1].split('<2>'); var newTable = document.createElement('table'), newTR, newTD; for(var i=0; i<maTable.length; i++){ newTR = document.createElement('tr'); mesTD = maTable[i].split('<1>'); for(j=0; j<mesTD.length; j++){ newTD = document.createElement('td'); newTD.appendChild(document.createTextNode(mesTD[j]); newTR.appendChild(newTD); } newTable.appendChild(newTR); } div.appendChild(newTable); }

---

Citation:

---

Envoyé par Bovino

Code:

---

1 2 3 4

//... var newTable = document.createElement('table'), newTR, newTD; //...

---

---

Je t'avouerai que, même si je comprends bien la logique de l'ensemble (c'est d'ailleurs vraiment chouette, bravo ;)), cette ligne m'échappe tout-à-fait...

On peut affecter une série de valeurs séparées par des virgules ... ? 8O *rien compris* (et surtout : qu'est-ce qui est contenu dans newTable après cette mystique affectation... ? ^^)

Citation:

---

Envoyé par RomainVALERI

Je t'avouerai que, même si je comprends bien la logique de l'ensemble (c'est d'ailleurs vraiment chouette, bravo ;)), cette ligne m'échappe tout-à-fait...

---

+1

Eclaircissements demandés :mrgreen:

:merci:

Citation:

---

On peut affecter une série de valeurs séparées par des virgules ... ? *rien compris* (et surtout : qu'est-ce qui est contenu dans newTable après cette mystique affectation... ? ^^)

---

T'avais pourtant donné la bonne réponse ^^

C'est juste une déclaration de 3 variables, dont la première est un élément HTML table.

Code:

---

var newTable = document.createElement('table'), newTR, newTD;

---

est la même chose que :

Code:

---

1 2 3

var newTable = document.createElement('table'); var newTR; var newTD;

---

;)

Citation:

---

Envoyé par Bovino

C'est juste une déclaration de 3 variables, dont la première est un élément HTML table.

---

Ah ben oui :roll:

:merci:

C'est encore un peu tôt pour moi :aie:

A+

Hum :oops::oops::oops:
*fait chaud ici, non ?*

( bon ben je ne déclare jamais les variables ensemble et du coup j'en avais même oublié la possibilité en js... ^^)

Code:

---

1 2	var maTable = xhr.responseText.split('<ok>')[1].split('<2>');

---

Ce code renvoie quoi?

Citation:

---

Envoyé par publicStaticVoidMain

Code:

---

1 2	var maTable = xhr.responseText.split('<ok>')[1].split('<2>');

---

Ce code renvoie quoi?

---

Plutôt "Où ?"
=> Vers la FAQ :mrgreen:

A+

Citation:

---

Envoyé par PublicStaticVoidMain

Ce code renvoie quoi?

---

String.split() renvoie un tableau de chaines.
Ici, les deux appels sont chainés grâce au [1] qui sélectionne l'élément d'indice "1" du tableau renvoyé par le premier split()... ^^

En décomposant, ça donnerait :

Code:

---

1 2 3 4

var maReponse = xhr.responseText.split('<ok>'); var premierePartie = maReponse[1]; var maTable = premierePartie.split('<2>');

---

Mais c'est plus joli en une ligne :king: