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

Version imprimable

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:

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:

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

26/04/2010, 08h02
andry.aime

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

Bonne lecture,
A+.
26/04/2010, 21h04
35niavlys

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. :?
27/04/2010, 11h23
andry.aime

Bonsoir,

Citation:

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+.

Code:

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>

27/04/2010, 19h58
Bovino

Il manque le send() :roll:

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.

Tu parles bien du "xhr.send(null);" ?
Ça ne marche toujours pas. :oops:
Décidément, il faut que je dorme

Code:

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>

27/04/2010, 22h35
Bovino

Code:

function handleHttpResponse()

Et cette fonction, elle est appelée quand ? :whistle:
28/04/2010, 07h24
andry.aime

Bonjour,

Citation:

Et cette fonction, elle est appelée quand ?

Citation:

xhr.onreadystatechange = handleHttpResponse;

Par contre

Citation:

var xhr = getXMLHttpRequest();

Il est où la fonction getXMLHttpRequest ?

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

Code:

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.

28/04/2010, 11h56
andry.aime

Bonjour,

Citation:

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+.
28/04/2010, 13h13
Bovino

Citation:

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 ;)

Citation:

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.

Citation:

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 ?
28/04/2010, 19h13
35niavlys

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

Re,

Code:

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>

29/04/2010, 21h28
35niavlys

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

Dans le tuto, il y avait cette ligne :

Code:

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. :ccool:

Merci beaucoup pour votre aide, je pense qu'il faudrait être plus précis sur le tuto.
30/04/2010, 20h18
35niavlys

Comment ce fait-il que le css ne s'applique pas sur ce qui est envoyé ?
04/05/2010, 18h41
35niavlys

Personne a une idée car là je ne vois pas du tout pourquoi ça ne fonctionne pas. :calim2:
08/05/2010, 11h10
35niavlys

Ça fonctionne avec DOM.

A+