[AJAX] Interaction avec le serveur:AJAX +PHP

**Claudine** · 08/11/2011, 17h45

Bonsoir Bovino,
Ci-joint le fichier modifié mais rien ne change!

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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>restituer un xml</title>
 
 
		<title>Tutoriel Ajax (XHTML + JavaScript + XML)</title>
		<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
			}
 
			/**
			* Méthode qui sera appelée sur le click du bouton
			*/
	function exemple(){
	document.getElementById("content").innerHTML = "";
	var xhr = getXhr();
//xhr.onreadystatechange = handleHttpResponse(xhr);
	xhr.onreadystatechange = function () {handleHttpResponse(xhr)};
	var url = "dvd.xml";
	xhr.open("GET", url, true);
	xhr.send(null);
} 
 
function handleHttpResponse(xhr) {
 
    if(xhr.readyState == 4 && xhr.status == 200) {
 
response = cleanXML(xhr.responseXML.documentElement);
 }
}
			var response = xhr.responseXML;
			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;
		}else{
			alert("Error:returned status code"+xhr.status +""+xhr.statusText);
		}
	}
}
		</script>
	</head>
	<body>
		<p>
<a href="javascript:exemple();">cliquer !</a>
<div id="content"></div>
</p>
	</body>
</html>

merci
Claudine

**andry.aime** · 09/11/2011, 06h40

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
function handleHttpResponse(xhr) {
 
    if(xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
			// tu n'as pas la fonction cleanXML dans ton document, regarde dans le tutoriel il y a un lien pour cette fonction et ajoute la
			var 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;
		}else{
			alert("Error:returned status code"+xhr.status +""+xhr.statusText);
		}
}

**andry.aime** · 09/11/2011, 08h12

Euh,

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
function handleHttpResponse(xhr) {
 
    if(xhr.readyState == 4 ) 
	 if (xhr.status == 200 || xhr.status == 0) {
			// tu n'as pas la fonction cleanXML dans ton document, regarde dans le tutoriel il y a un lien pour cette fonction et ajoute la
			var 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;
		}else{
			alert("Error:returned status code"+xhr.status +""+xhr.statusText);
		}
}

Méaculpa.

**Claudine** · 09/11/2011, 08h37

Bonjour Andry.aime,
Je suis ennuyée de vous mettre à contribution quand je constate que j'ai toujours le même problème. Je trouve cela d'autant plus bizarre qu'il n'y a jamais affichage d'un seul code d'erreur, alors que c'est courant.
Je vous donne le dernier code:

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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>restituer un xml</title>
 
 
		<title>Tutoriel Ajax (XHTML + JavaScript + XML)</title>
		<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
			}
 
			/**
			* Méthode qui sera appelée sur le click du bouton
			*/
function exemple(){
	document.getElementById("content").innerHTML = "";
	var xhr = getXhr();
	//var xhr=getXMLRequest();
//xhr.onreadystatechange = handleHttpResponse(xhr);
	xhr.onreadystatechange = function () {handleHttpResponse(xhr)};
	var url = "dvd.xml";
	xhr.open("GET", url, true);
	xhr.send(null);
} 
 
function handleHttpResponse(xhr) {
 
    if(xhr.readyState == 4 ) 
	 if (xhr.status == 200 || xhr.status == 0) {
 
			var 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;
		}else{
			alert("Error:returned status code"+xhr.status +""+xhr.statusText);
		}
} 
 
		</script>
	</head>
	<body>
		<p>
<a href="javascript:exemple();">cliquer !</a>
<div id="content"></div>
</p>
	</body>
</html>

Remerciements à vous tous qui contribuaient à ce travail d'assistance.
Claudine

**Bovino** · 09/11/2011, 08h51

On peut voir le XML généré ?

**andry.aime** · 09/11/2011, 08h56

/me se demande si elle a lu le commentaire avant de la supprimer du code

// tu n'as pas la fonction cleanXML dans ton document, regarde dans le tutoriel il y a un lien pour cette fonction et ajoute la

En plus tu as 2 balise title dans ton head

.

**Claudine** · 09/11/2011, 11h08

Bonjour à vous deux
Andry.aime :j'ai bien lu le commentaire mais je ne vois pas dans le tutoriel de lien pour la fonction CleanXML à ajouter. Veux-tu m'aider et m'expliquer pourquoi et en quoi consiste ce lien?
J'ai constaté que tu as modifié la ligne:

Code :

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

1
2
 
var response = cleanXML(xhr.responseXML.documentElement);

Bovino: comment puis-je vous montrer le Xml généré puisque que j'ai juste une page blanche après le clic sur cliquer et sans code d'erreur?

pitié pour les débutantes!
claudine

**andry.aime** · 09/11/2011, 11h24

Utilise la fonction clean du tutoriel pour cleanXML.

**Claudine** · 09/11/2011, 11h59

Merci andry.aime
J'ai donc copié la fonction et voici donc la correction qui hélas ne fonctionne toujours pas:

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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>restituer un xml</title>
 
 
 
		<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
			}
	// Node cleaner
			function go(c){
				if(!c.data.replace(/\s/g,''))
				c.parentNode.removeChild(c);
			}
 
			function clean(d){
				var bal=d.getElementsByTagName('*');
 
				for(i=0;i<bal.length;i++){
					a=bal[i].previousSibling;
					if(a && a.nodeType==3)
						go(a);
					b=bal[i].nextSibling;
					if(b && b.nodeType==3)
						go(b);
				}
				return d;
			} 
 
			/**
			* Méthode qui sera appelée sur le click du bouton
			*/
function exemple(){
	document.getElementById("content").innerHTML = "";
	var xhr = getXhr();
	//var xhr=getXMLRequest();
//xhr.onreadystatechange = handleHttpResponse(xhr);
	xhr.onreadystatechange = function () {handleHttpResponse(xhr)};
	var url = "dvd.xml";
	xhr.open("GET", url, true);
	xhr.send(null);
} 
 
function handleHttpResponse(xhr) {
 
    if(xhr.readyState == 4 ) 
	 if (xhr.status == 200 || xhr.status == 0) {
 
			var 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;
		}else{
			alert("Error:returned status code"+xhr.status +""+xhr.statusText);
		}
} 
 
		</script>
	</head>
	<body>
		<p>
<a href="javascript:exemple();">cliquer !</a>
<div id="content"></div>
</p>
	</body>
</html>

Veux-tu vérifier?
Claudine

**andry.aime** · 09/11/2011, 12h12

var response = cleanXML(xhr.responseXML.documentElement);

Code :

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

var response = clean(xhr.responseXML.documentElement);

**Claudine** · 09/11/2011, 15h22

A l'attention de Andry.aime
Modification réalisée mais aucun résultat !
Claudine

**andry.aime** · 09/11/2011, 15h28

Installe firebug sur firefox et décrit nous l'erreur.

**Bovino** · 09/11/2011, 15h28

Et quand tu appelles reponse.php directement dans le navigateur, ça te donne quoi comme source ?

**andry.aime** · 09/11/2011, 15h38

Je crois qu'il te manque des guillemets, ce qui pourrais que si le status n'est à 0 ou 200 tu n'auras pas l'alert

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
function handleHttpResponse(xhr) {
 
    if(xhr.readyState == 4 ){ 
	 if (xhr.status == 200 || xhr.status == 0) {
 
			var response = clean(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;
		}else{
			alert("Error:returned status code"+xhr.status +""+xhr.statusText);
		}
	}
}

Mais installe toujours firebug

**Claudine** · 09/11/2011, 20h09

Bonsoir Bovino,
Je n'ai pas de fichier reponse.php puisque je dois lire dans le DIV sans rechargement de la page le fichier dvd.xlm(xhr.open("GET", dvd.xlm, true)
Ou bien je nage et j'ai intérêt à tout abandonner.
Rassurez-moi !
Claudine

**Claudine** · 09/11/2011, 20h18

Bonsoir Andry.aime

Code :

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

1
2
 
alert("Error:returned status code"+xhr.status +""+xhr.statusText);

je ne vois pas où il manquerait des guillements ?

D'autre part après de multiples essais, j'ai installé firefox de Morzilla et le module firebug. Je suppose qu'il me faut stipuler ce navigateur comme prioritaire(par défaut) et puis veux-tu éclairer ma lanterne pour la suite.
car si je clique sur afficher, rien ne s'affiche comme code d'erreur !
Merci pour votre collaboration.
Claudine

**Bovino** · 09/11/2011, 20h21

Ben montre-nous le contenu de dvd.xml alors

Parce que vu l'erreur de ton premier message, il y a fort à parier qu'il ne soit pas valide !

**Claudine** · 09/11/2011, 20h48

Bonsoir Bovino
Voici lecode de dvd.xml (celui qui est sur le tutoriel):

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
 
<?xml version="1.0" encoding="utf-8"?>
<dvd>    
    <item>
        <title>Princesse Mononoké</title>
        <director>Hayao Miyazaki</director>
        <price>14,99</price>
    </item>
    <item>
        <title>Mon voisin Totoro</title>
        <director>Hayao Miyazaki</director>
        <price>19,99</price>
    </item>
    <item>
        <title>Blood, The Last Vampire</title>
        <director>Hiroyuki Kitakubo</director>
        <price>11,99</price>
    </item>
</dvd>

Merci à vous de suivre mes problèmes
Claudine

**Claudine** · 09/11/2011, 20h52

Re Andry.aime
je crois que j'ai découvert l'activation de la console debug avec pour résultat:

syntax error:
document.getElementById('content').innerHTML + = html;
dvdCor...on.html (ligne 80)
exemple is not defined(lorsque je clique sur cliquer)
Sincères salutations
Claudine

**andry.aime** · 10/11/2011, 04h23

document.getElementById('content').innerHTML + = html;

Supprime l'espace entre le "+" et le "=",

Code :

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

document.getElementById('content').innerHTML += html;

et sur le fichier xml, n'utilise pas de caractère spéciaux ou accentués.

A+.

[AJAX] Interaction avec le serveur:AJAX +PHP

AJAX

Discussions similaires

Partager

Partager