[AJAX] Interaction avec le serveur:AJAX +PHP

Version imprimable

Voir 40 message(s) de cette discussion en une page

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

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

Code:

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

Euh,

Code:

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.

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:

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

09/11/2011, 08h51
Bovino

On peut voir le XML généré ?
09/11/2011, 08h56
andry.aime

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

Citation:

// 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 :oops:.
09/11/2011, 11h08
Claudine
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:

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
09/11/2011, 11h24
andry.aime

Utilise la fonction clean du tutoriel pour cleanXML.

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

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

09/11/2011, 12h12
andry.aime

Citation:

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

:roll:

Code:

var response = clean(xhr.responseXML.documentElement);
09/11/2011, 15h22
Claudine

A l'attention de Andry.aime
Modification réalisée mais aucun résultat !
Claudine
09/11/2011, 15h28
andry.aime

Installe firebug sur firefox et décrit nous l'erreur.
09/11/2011, 15h28
Bovino

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

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:

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

09/11/2011, 20h09
Claudine

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
09/11/2011, 20h18
Claudine
Bonsoir Andry.aime
Code:

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
09/11/2011, 20h21
Bovino

Ben montre-nous le contenu de dvd.xml alors :aie:

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

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

Code:

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

09/11/2011, 20h52
Claudine

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
10/11/2011, 04h23
andry.aime

Citation:

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

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

Code:

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

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

A+.

Voir 40 message(s) de cette discussion en une page