[AJAX] Récupérer les infos d'un xml

**35niavlys** · 24/04/2010, 18h44

Bonjour, je souhaite récupérer les valeurs mac, ip et port de chaque client dans un fichier xml pour les insérer un à un dans une page html, mais je galère.

Exemple : (Il peut y avoir plus de client)

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<info>
	<lan>
		<client>
			<mac>00:11:00:11:00:11</mac>
			<ip>192.168.1.20</ip>
			<port>wlan0</port>
		</client>
		<client>
			<mac>00:00:00:00:00:00</mac>
			<ip>192.168.1.30</ip>
			<port>wlan0</port>
		</client>
	</lan>
</info>

Code :

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

1
2
3
4
5
6
7
8
9
10
function info()
{
		var doc = "...";
		var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
		xmlDoc.async = false;
		if(xmlDoc.load(doc))
		 {
 
		 }
}

Merci d'avance

**andry.aime** · 26/04/2010, 08h02

Bonjour,
Le tutoriel :
Ajax : Vos premiers pas dans les nouvelles technologies

Bonne lecture,
A+.

**35niavlys** · 26/04/2010, 21h04

Merci pour votre réponse.
Le problème est que je n'arrive pas à faire fonctionner cet exemple qui est pourtant simple. Est-il possible de mettre une archive contenant les fichiers de cet exemple ?

Merci et désolé mais je ne vois pas pourquoi ça ne marche pas.

**andry.aime** · 27/04/2010, 11h23

Bonsoir,

Merci et désolé mais je ne vois pas pourquoi ça ne marche pas.

Tu peux nous montrer ce que tu as faits pour t'aider?
A+.

**35niavlys** · 27/04/2010, 18h50

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
<html>
<body>
<div id="content"</div>
 
<script>
var xhr = getXMLHttpRequest();
xhr.onreadystatechange = handleHttpResponse;
var url = "dvd.xml";
xhr.open("GET", url, true);
 
function handleHttpResponse() {
    if(xhr.readyState == 4 && xhr.status == 200)
	 {
        response     = cleanXML(xhr.responseXML.documentElement);
		var items    = response.getElementsByTagName("item");
		var html     = ''; 
		count        = items.length;
		for(i = 0; i < count; i++)
		 {
			html += '<div class="item">';
			html += '<h1>' + items[i].getElementsByTagName("title")[0].firstChild.nodeValue + '</h1>';
			html += '<div class="author">R&eacute;alisateur : ';
			html += items[i].getElementsByTagName("director")[0].firstChild.nodeValue + '</div>';
			html += '<div class="price">Prix : ';
			html += items[i].getElementsByTagName("price")[0].firstChild.nodeValue + ' €</div>';
			html += '</div>';
		 }
	document.getElementById('content').innerHTML += html;
     }
}
</script>
 
</body>
</html>

**Bovino** · 27/04/2010, 19h58

Il manque le send()

Ensuite, ta façon de procéder est très maladroite, codé ainsi, ton appel AJAX ne pourra être lancé qu'une fois au moment où le navigateur interprètera ton script or dans ce cas, passer par AJAX est inutile, il est préférable d'effectuer directement le traitement coté serveur !
Tu devrais donc placer ton script dans une fonction puis l'appeler sur une action de l'utilisateur.

**35niavlys** · 27/04/2010, 21h35

Tu parles bien du "xhr.send(null);" ?
Ça ne marche toujours pas.

Décidément, il faut que je dorme

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
<html>
<body>
<div id="content"</div>
 
<script>
var xhr = getXMLHttpRequest();
xhr.onreadystatechange = handleHttpResponse;
var url = "dvd.xml";
xhr.open("GET", url, true);
xhr.send(null);
 
function handleHttpResponse() {
    if(xhr.readyState == 4 && xhr.status == 200)
	 {
        response = cleanXML(xhr.responseXML.documentElement);
		var items = response.getElementsByTagName("item");
		var html = ''; 
		count = items.length;
		for(i = 0; i < count; i++)
		 {
			html += '<div class="item">';
			html += '<h1>' + items[i].getElementsByTagName("title")[0].firstChild.nodeValue + '</h1>';
			html += '<div class="author">R&eacute;alisateur : ';
			html += items[i].getElementsByTagName("director")[0].firstChild.nodeValue + '</div>';
			html += '<div class="price">Prix : ';
			html += items[i].getElementsByTagName("price")[0].firstChild.nodeValue + ' €</div>';
			html += '</div>';
		 }
	document.getElementById('content').innerHTML += html;
     }
}
</script>
 
</body>
</html>

**Bovino** · 27/04/2010, 22h35

Code :

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

function handleHttpResponse()

Et cette fonction, elle est appelée quand ?

**andry.aime** · 28/04/2010, 07h24

Bonjour,

Et cette fonction, elle est appelée quand ?

xhr.onreadystatechange = handleHttpResponse;

Par contre

var xhr = getXMLHttpRequest();

Il est où la fonction getXMLHttpRequest ?

**35niavlys** · 28/04/2010, 09h44

?? Je suis un peu perdu. Donc pour ie je peux directement mettre :

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
<html>
<body>
<div id="content"</div>
 
<script>
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = handleHttpResponse;
var url = "dvd.xml";
xhr.open("GET", url, true);
xhr.send(null);
 
function handleHttpResponse() {
    if(xhr.readyState == 4 && xhr.status == 200)
	 {
        response = cleanXML(xhr.responseXML.documentElement);
		var items = response.getElementsByTagName("item");
		var html = ''; 
		count = items.length;
		for(i = 0; i < count; i++)
		 {
			html += '<div class="item">';
			html += '<h1>' + items[i].getElementsByTagName("title")[0].firstChild.nodeValue + '</h1>';
			html += '<div class="author">R&eacute;alisateur : ';
			html += items[i].getElementsByTagName("director")[0].firstChild.nodeValue + '</div>';
			html += '<div class="price">Prix : ';
			html += items[i].getElementsByTagName("price")[0].firstChild.nodeValue + ' €</div>';
			html += '</div>';
		 }
	document.getElementById('content').innerHTML += html;
     }
}
</script>
 
</body>
</html>

Mais ça ne fonctionne toujours pas.

**andry.aime** · 28/04/2010, 11h56

Bonjour,

var xhr = new XMLHttpRequest();

C'est pour les autres navigateurs que IE.
Faits une fonction d'instanciation d'un XMLHttpRequest comme dans les tutoriels puis appelles la dans une fonction qui va faire la requete ajax, enfin tu appelles la fonction ajax dans le onload du body.

A+.

**Bovino** · 28/04/2010, 13h13

Envoyé par andry.aime

Bonjour,

C'est pour les autres navigateurs que IE.

Plus exactement pour IE<=6. XMLHttpRequest est implémenté par IE depuis la version 7

Envoyé par 35niavlys

Bonjour, je souhaite récupérer les valeurs mac, ip et port de chaque client dans un fichier xml pour les insérer un à un dans une page html, mais je galère.

Envoyé par 35niavlys

Mais ça ne fonctionne toujours pas.

Si tu étais un peu plus explicite sur ce qui ne marche pas, ça nous aiderait grandement pour t'aider...
Donc, qu'est-ce que tu obtiens ? Qu'est-ce qui ne marche pas ? Quels sont les messages d'erreur ?

**35niavlys** · 28/04/2010, 19h13

La page que j'ouvre est blanche (sous ie 8 ou firefox) sachant que j'utilise l'exemple précédant pour commencer.

**andry.aime** · 29/04/2010, 08h07

Re,

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
<html>
<head>
<script type="text/javascript">
 
function getXhr(){
                                var xhr = null; 
				if(window.XMLHttpRequest) // Firefox et autres
				   xhr = new XMLHttpRequest(); 
				else if(window.ActiveXObject){ // Internet Explorer 
				   try {
			                xhr = new ActiveXObject("Msxml2.XMLHTTP");
			            } catch (e) {
			                xhr = new ActiveXObject("Microsoft.XMLHTTP");
			            }
				}
				else { // XMLHttpRequest non supporté par le navigateur 
				   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
				   xhr = false; 
				} 
                                return xhr
			}
			function go(){
				var xhr = getXhr()
				xhr.onreadystatechange = function(){
					if(xhr.readyState == 4 && xhr.status == 200){
						var listes=xhr.responseXML;
						var items = listes.getElementsByTagName("client");
						var html = ''; 
						for(i = 0; i < items.length; i++)
						 {
							html += '<div class="item">';
							html += 'mac: '+ items[i].getElementsByTagName("mac")[0].firstChild.nodeValue;
							html += '<div>Ip:';
							html += items[i].getElementsByTagName("ip")[0].firstChild.nodeValue + '</div>';
							html += '<div>Port : ';
							html += items[i].getElementsByTagName("port")[0].firstChild.nodeValue + '</div>';
							html += '</div>';
						 }
					document.getElementById('content').innerHTML += html;
 
					}
				}
				//ton fichier xml
				xhr.open("GET","tonFichier.xml",true);
				xhr.send(null);
			}
</script>
</head>
<body onload="go()">
<div id="content"></div>
</body>
</html>

**35niavlys** · 29/04/2010, 21h28

ie me dit que "reponse" non définie.

Dans le tuto, il y avait cette ligne :

Code :

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

response = cleanXML(xhr.responseXML.documentElement);

Du coup j'ai enlever la fonction cleanXML et ça merche sous ie mais pas sous firefox mais c'est pas grave.

Merci beaucoup pour votre aide, je pense qu'il faudrait être plus précis sur le tuto.

**35niavlys** · 30/04/2010, 20h18

Comment ce fait-il que le css ne s'applique pas sur ce qui est envoyé ?

**35niavlys** · 04/05/2010, 18h41

Personne a une idée car là je ne vois pas du tout pourquoi ça ne fonctionne pas.

**35niavlys** · 08/05/2010, 11h10

Ça fonctionne avec DOM.

A+

[AJAX] Récupérer les infos d'un xml

AJAX

Discussions similaires

Partager

Partager