lecture et integration d'une page xml dans une page html avec JS

**bigbrownies** · 26/12/2012, 14h38

Bonjour,

j'essaie de recréer un équivalent de :

Code php :

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

<?php include("")?>

en javascript.
Pourquoi ? parceque je travail sur un serveur web embarqué rabbit rcm5700 et qu'il ne possède pas le parseur php.

j'ai développé un petit code pas compliqué qui fonctionne sur un fichier xml chargé. le problème est que je voudrais inclure 4 pages xml dans ma page html et a partir de ce moment, ça ne fonctionne plus.
L'erreur doit surement venir du script.
Je tourne en rond depuis un moment, si vous pouvez m'aider je serais content.

voila le code :

script dans le fichier script.js :

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
function afficher_site()
{
	var contenu_header;
	var contenu_menu_user;
	var contenu_menu_admin;
	var contenu_corps;
	var contenu_footer;
 
	try 
	{
	xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
	}
	catch(err) 
	{
		try 
			{
			xmlDoc=document.implementation.createDocument("","",null);
			}
		catch(err) 
			{
			alert("No XML for you!");
			return;
			}
	}
 
	xmlDoc.async=false;
 
	/*affiche le header*/
	xmlDoc.load("menus/header.xml");
	contenu_header = xmlDoc.getElementsByTagName("header")[0].childNodes[0].nodeValue;
	document.getElementById("header").innerHTML = contenu_header;
	/*affiche le menu utilisateur*/
	xmlDoc.load("menus/user.xml");
	contenu_menu_user = xmlDoc.getElementsByTagName("menu_user")[0].childNodes[0].nodeValue;
	document.getElementById("menu_user").innerHTML = contenu_menu_user;
	/*affiche le menu administrateur*/
	xmlDoc.load("menus/user.xml");
	contenu_menu_admin = xmlDoc.getElementsByTagName("menu_admin")[0].childNodes[0].nodeValue;
	document.getElementById("menu_admin").innerHTML = contenu_menu_admin;
	/*affiche le corps*/
	xmlDoc.load("corps/accueil.xml");
	contenu_corps = xmlDoc.getElementsByTagName("corps")[0].childNodes[0].nodeValue;
	document.getElementById("corps").innerHTML = contenu_corps;
	/*affiche le footer*/
	xmlDoc.load("menus/footer.xml");
	contenu_footer = xmlDoc.getElementsByTagName("footer")[0].childNodes[0].nodeValue;
	document.getElementById("footer").innerHTML = contenu_footer;
 
}

la page html :

Code html :

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
<!DOCTYPE html>
<html> <!-- balise douverture de page web -->
	<head> <!-- balise "head" contient les informations structurelles importantes sur le site web -->
		<title>Gestion darrosage automatisé</title> <!-- titre dans la barre des onglets -->
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <!-- donne la norme utilisé par le site -->
		<meta http-equiv="Content-Language" content="fr"> <!-- donne la langue par defaut du site -->
		<meta name="Author" content="Oriano Jean"> <!-- donne le nom du créateur du site -->
 
		<link rel="icon" type="image/png" href="images/Goutte_d'eau.png" /> <!-- met une icone au niveau de la barre des onglets -->
		<link rel="stylesheet" type="text/css" href="css/style_1.css"> <!-- permet de lier et de faire appel au fichier .css pour le design de la page html -->
		<script type="text/javascript" src="scripts/scripts.js"></script> <!-- permet de lier et de faire appel au fonctions JS dans le fichier .js -->
	</head>
 
<!-- balise "body" contient les éléments relatifs au rendu et à la présentation du document -->
	<body onload="afficher_site()"> <!-- ici un évènement est attaché à cette balise / "onload" qui permet de charger un script au lancement de la balise donc de la page web --> 
 
	<div id="header">
	</div>
 
	<div id="menu">
		<div id="menu_user">
		</div>
		<div id="menu_admin">
		</div>
	</div>
 
	<div id="corps">
	</div>
 
	<div id="footer">
	</div>
 
	</body>
</html>

et le fichier xml :

Code xml :

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

1
2
3
4
5
6
7
8
9
<rabbitweb>
	<corps>
	<![CDATA[
 
		<h1><i>Je</i> <u>suis</u> <b>un éléphant <i><u>!</u></i></b></h1>
 
	]]>
	</corps>
</rabbitweb>

cordialement, bigbrownies.

**SpaceFrog** · 26/12/2012, 14h40

regarde du coté de jquery et de ses possibilités ajax ...

**bigbrownies** · 26/12/2012, 16h51

Alors, je suis allé voir du coté de jquery comme tu me l'a proposé.
Je n'ai pas séparé le script du code html pour le test.

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
<!DOCTYPE html>
<html> 
	<head> 
		<title>Gestion darrosage automatisé</title>	
		<link rel="icon" type="image/png" href="images/Goutte_d'eau.png" /> 
		<link rel="stylesheet" type="text/css" href="css/style_1.css"> 
		<script type="text/javascript" src="scripts/jquery.js"></script> 
		<script type="application/javascript">
			function getXml()
			{  
				 $.ajax
				({ 
					 type: "GET", 
					 url: "accueil.xml", 
					 dataType: "xml", 
					 success: function(data){ parseXml(data) } 
				}); 
			} 
			function parseXml(data)
			{
				$(xml).find("rabbitweb").each(function()
												{ 
													     var code_html = $(this).find("corps").text();  
												}); 
				$('#corps').html($code_html);
			}
		</script>
	</head>
 
	<body onload="getXml()"> 
 
	<div id="corps">
	</div>
 
	</body>
</html>

le problème, c'est que le code ne fonctionne pas et je tourne en rond. j'ai vérifié tous les noms de balises xml, l'id de la balise de réception, le chemin d’accès du fichier.
Si vous détectez une erreur dans mon code, pouvez vous me la rapporter ?

Cordialement, bigbrownies

**Bovino** · 26/12/2012, 17h06

Code :

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

function parseXml(data)

Code :

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

$(xml)...

Comme je dis souvent, quand tu appelles ta femme avec un mauvais prénom, il y a de fortes chances que ça marche moins bien !

**SpaceFrog** · 26/12/2012, 17h15

tu l'appelles pas ... tu la siffles ?

**bigbrownies** · 26/12/2012, 17h22

Exactement, elle risque de pas apprécié.

J'ai changé mais ça ne fonctionne toujours pas.

Code :

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

function parseXml(xml)

Code :

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

$(xml). ....

y-a-t-il des moyens de débog ? Je suis habitué de programmer en c avec des débogueurs.

cordialement, bigbrownies.

**Bovino** · 26/12/2012, 17h28

Code :

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

var code_html = $(this).find("corps").text();

En dehors du fait que code_html sera réinitialisé à chaque itération (ce qui rend la boucle un peu moins utile

), ta variable ne sert à rien :

Code :

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

$('#corps').html($code_html);

N'importe quel IDE est capable de détecter ça.
Quant au débug, tous les navigateurs modernes possèdent une console JavaScript le permettant. Notamment Firebug pour Firefox.

**bigbrownies** · 26/12/2012, 22h16

j'ai fais quelques modif sur le code. déjà j'ai virer la boucle puisque je n'ai qu un seul élément dans mon xml.

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
function getXml()
			{
				$(document).ready(function()
				{
					$.ajax
					({ 
						 type: "GET", 
						 url: "accueil.xml", 
						 dataType: "xml", 
						 success: function(xml) 
								{
									var doc_xml = $(xml).find('corps').text();
									$('#corps').html(doc_xml);
								}
 
					});
				});
			}

je n'arrive pas à comprendre pourquoi ça ne fonctionne pas. je fais une récupération du contenu de ma balise <corps></corps> dans mon fichier xml et j'affiche ce contenu dans la balise <div> d'id #corps !

**SpaceFrog** · 27/12/2012, 08h11

est tu sûr que ta réponse xml est correctement formatée ?

**bigbrownies** · 27/12/2012, 09h26

Si tu parle d'erreur de syntaxe alors j'ai modifié en :

Code :

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

var doc_xml = $(xml).find("rabbitweb").children("corps").text();

je regarde d'abord dans la balise racine "rabbitweb" puis dans la balise enfant "corps" et je récupère le tout sous forme de texte.

La, si dans mon fichier, il n'y a que du texte, ca fonctionne mais il ne prend pas en compte les balises html, même si j'utilise

Code :

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

<![CDATA[ contenu ]]>

qui transforme son contenu en contenu texte.

Je me suis donc tourné vers .html() qui récupère le code html non ?

Code :

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

var doc_xml = $(xml).find("rabbitweb").children("corps").html();

Mais la encore une fois, ça ne fonctionne pas.

cordialement, bigbrownies.

**SpaceFrog** · 27/12/2012, 09h39

Non je parlais de cela

Code :

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

1
2
3
4
5
6
7
8
9
<rabbitweb>
	<corps>
	<![CDATA[
 
		<h1><i>Je</i> <u>suis</u> <b>un éléphant <i><u>!</u></i></b></h1>
 
	]]>
	</corps>
</rabbitweb>

si ton fichier xml ne comporte que cela ...
rajoute lui un header php xml
<?php

Code :

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

header('Content-type: text/xml'); ?>

puis une balise

Code :

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

<?xml version="[xx.xx]" encoding="[charset]"?>

avec les bonnes versions et charset ..

**bigbrownies** · 27/12/2012, 09h55

Pour la balise version encoding, je l'ai intégré. Mais pour le "header php xml", je ne comprends pas vraiment ou tu veux en venir, mais mon serveur ne peut pas parser le php donc je pense que c'est impossible.

PS: les balises <?php ?> ne sont pas comprise par mon serveur embarqué !

**SpaceFrog** · 27/12/2012, 10h09

Code :

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

1
2
3
4
5
6
function getXml()
			{
				$(document).ready(function()
				{
					$.ajax
					({

A mon avis tu n'as pas compris a quoi sert le document.ready ...
le mettre dans une fonction est un non sens

Voici un code testé :

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
<html>
<head>
	<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js" ></script>
	</script>
<script type="text/javascript">
$(document).ready(function()
				{
					$.ajax
					({ 
						 type: "GET", 
						 url: "accueil.xml", 
						 dataType: "xml", 
						 success: function(xml) 
								{
									var doc_xml = $(xml).find('corps').text();
									$('#corps').html(doc_xml);
								}
 
					});
				});
</script>
</head>
<body>
	<div id="corps">
 
	</div>
</body>
</html>

**bigbrownies** · 27/12/2012, 10h53

effectivement, .ready est un genre d'évènement qui gère le lancement du script une fois la page chargé et je mettais un évènement "onload" en plus. c’était bête.
Je te remercie pour tes réponses.
Ça fonctionne, je vais maintenant l'adapter pour charger mes 4 pages xml.

cordialement, bigbrownies

PS : tout compte fait, je code ne fonctionne que pour du texte dans mes balises xml. a partir du moment ou j'y rajoute des balises, ça ne fonctionne plus correctement ou plus du tout. soit ça récupère que le texte ( parce que la fonction est .text() ) soit ça ne m'affiche rien. Donc, vu que je veux récupérer du code html j'ai remplacé .text() par .html() qui devrait me renvoyer le code situé dans la balise <corps></corps> ! mais rien ne s'affiche !

**bigbrownies** · 28/12/2012, 19h48

bonsoir,

J'ai trouvé d'où provenait le problème. Il vient du fait qu'il y ai des commentaire dans mon .xml. Si je les enlève, tout fonctionne.

Si quelqu’un connais une solution pour garder les commentaire tout en pouvant récupérer mon code, ce serait super.

Je continu à chercher de mon coté.

cordialement, bigbrownies.

PS: c est peu pratique mais mettre

Code :

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

<![DATA[ commentaire ]]>

résout le problème.

Je laisse ce sujet non résolu pendant quelques heures pour voir si des gens ont un meilleur moyen pour résoudre ce problème de commentaire.

**SpaceFrog** · 29/12/2012, 09h57

http://www.developpez.net/forums/d12...ajax-xml-text/

text() != html()

lecture et integration d'une page xml dans une page html avec JS

JavaScript

Discussions similaires

Partager

Partager