Ajouter un nœud dans un DOM

**Zzebinou** · 22/12/2014, 03h07

Bonjour,

Pour un chat, je récupère, à intervalle régulier, une liste de messages au format XML. Ainsi, je peux mettre à jour un DOM à partir duquel j'affiche l'historique des messages.

Lorsque j'envoi un message, j'aimerais ne pas attendre le prochain rafraîchissement pour le voir apparaître dans l'historique, sur la page du visiteur. Pour cela, je voudrais ajouter mon nœud message au DOM pour l'afficher immédiatement avant de l'envoyer réellement.

Voici un code simplifié du problème :

Code xml :

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

1
2
3
4
5
6
7
8
9
10
11
12
<?php
header('Content-type: text/xml');
?>
<corp>
	<lu valeur="0"/>
	<clavier valeur="0"/>
	<connecte valeur="0"/>
	<message heure="03h57" avatar="avatar1.jpg" id_auteur="1" contenu="Au revoir"/>
	<message heure="03h56" avatar="avatar1.jpg" id_auteur="1" contenu="Puis-je vous aider ?"/>
	<message heure="03h55" avatar="avatar1.jpg" id_auteur="1" contenu="Comment allez vous ?"/>
	<message heure="03h54" avatar="avatar1.jpg" id_auteur="1" contenu="Bonjour"/>
</corp>

Code js :

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
<!DOCTYPE>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Probleme Javascript</title>
	</head>
 
	<body>
		<input type="button" onclick="lire_messages(false)" value="sans le message en plus" />
		<input type="button" onclick="lire_messages(true)" value="avec le message en plus" />
	</body>
 
	<script>
 
		// Cette fonction doit ajouter un noeud message au DOM
		function ajouter_un_message(ndom)
		{
			// Ici, comment ajouter un noeud <message/> supplementaire disant par exemple "a bientot" ?
 
 
			return ndom;
		}
 
		function lire_messages(ajouter_message)
		{
			// Construction de l'objet pour lancer la requette
			var xhr=new XMLHttpRequest();
 
			// Description de la fonction a appeler lors de la reponse a la requette
			xhr.onreadystatechange = function() {
 
				// Si la reponse nous est parvenue sans probleme
				if(xhr.readyState == 4 && xhr.status == 200)
				{
					// Lecture des messages bruts
					var ndom=xhr.responseXML;
 
					// Si on doit ajouter un message
					if (ajouter_message)
					{
						// Ajout du message
						ndom = ajouter_un_message(ndom);
					}
 
					// Affichage des messages bruts
					alert ((new XMLSerializer()).serializeToString(ndom));
				}
			};
 
			// Lancement de la requette HTTP
			xhr.open('GET', 'xml_gen.php', true);
			xhr.send(null);
		}
 
	</script>
</html>

J'ai besoin d'aide au niveau de l'écriture de la fonction permettant l'ajout du message. Pouvez-vous m'aider ?

Merci.

**lysandro** · 22/12/2014, 11h15

Code Javascript :

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
function ajouter_un_message(ndom)
{
    // Ici, comment ajouter un noeud <message/> supplementaire disant par exemple "a bientot" ?
    // le document
    var xmlDocument = ndom;
    // la racine du document : corp
    var xmlRootElement = xmlDocument.documentElement;
    // création de l'élément : messsage
    var newMessage = xmlDocument.createElement("message");
    // création et affectation des attributs
    newMessage.setAttribute("heure","00h00");
    newMessage.setAttribute("avatar","inserted.jpg");
    newMessage.setAttribute("id_auteur","1");
    newMessage.setAttribute("contenu","a bientot");
    // insertion en fin, dans corp, du nouveau message
    xmlRootElement.appendChild(newMessage);
    // inutile: on saute une ligne, uniquement pour l'affichage dans le alert
    xmlRootElement.appendChild(xmlDocument.createTextNode("\n"));
 
    return ndom;
}

Remarque: les documents xml sans DTD ou XSD ne servent à rien ou presque. AMHA, c'est une mauvaise pratique. Autant basculer vers du JSON.
Par exemple : Si on avait eu une description du xml, peu importe la forme, ou aurait pu écrire directement newMessage.heure = ...;. Comme là, on ne connait pas la structure de l'élément, il est impossible créer les attributs lors de xmlDocument.createElement("message"). Sans parler du fait qu'il n'y a aucun contrôle de contenu ni de structure possible, bref aucun des intêrets du xml.

Ajouter un nœud dans un DOM

JavaScript

Discussions similaires

Partager

Partager