[AJAX] Interaction avec le serveur:AJAX +PHP

Version imprimable

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

31/10/2011, 15h20
Claudine

[AJAX] Interaction avec le serveur:AJAX +PHP

Bonjour à tous,
j'essaye d'utiliser ce logiciel avec tous les exemples et je bute pour l'exercice n°4 (index4.HTML, ajax4.js et reponse.php après avoir créer la table temp) le fichier php va lire dans la base de données et transformer le résultat en XML.
J'obtiens une erreur pour reponse.php:
""La page XML ne peut pas être affichée
Impossible d'afficher l'entrée XML en utilisant la feuille de style XSL. Corrigez l'erreur, puis cliquez sur le bouton Actualiser ou réessayez ultérieurement.

--------------------------------------------------------------------------------

Les balises suivantes n'ont pas été fermées : exemple. Erreur de traitement de la ressource http://127.0.0.1:8888/infopub/r...
""
Quelqu'un peut'il m'aider? d'avance, je vous remercie.
Claudine
31/10/2011, 20h09
Bovino

Citation:

j'essaye d'utiliser ce logiciel

C'est à nous de deviner lequel ? :mouarf:

Ceci dit, à part si tu nous montres ton code, il n'y a pas grand chose que nous puissions faire pour t'aider...

Bonjour Bovino,
Il s'agit des démos: http://gael-donat.developpez.com/web/intro-ajax/
III-A interaction avec le serveur: Ajax-PHP. C'est le seul qui ne fonctionne pas!,Dommage car très instructif!
Voici les différents code:
'index4.html'
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <title>Exemple 4</title> </head> <body> <script type="text/javascript" src="ajax4.js"></script> <p> <a href="javascript:ajax();">cliquer !</a> </p> </body> </html>
code de" reponse.php"
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <?php header('Content-Type: text/xml'); echo "<?xml version=\"1.0\"?>\n"; echo "<exemple>\n"; //on connecte a la BDD //include('./connect-bd.php'); //on lance la requete $query = "SELECT text FROM temp"; $result = mysql_query($query,$dblink) or die (mysql_error($dblink)); //On boucle sur le resultat while ($row = mysql_fetch_array($result, MYSQL_NUM)) { echo "<donnee>" . $row[0] . "</donnee>\n"; } echo "</exemple>\n"; ?>
le but c'est de voir comment générer un fichier XML avec PHP et MYSQL pour lire dans la base de données et afficher sans rechargement de la page.
Code d'erreur cité dans le POST précédent
Remerciements pour votre aide
Claudine

01/11/2011, 12h50
andry.aime

:salut:

On peut voir le code javascript :koi:

A+.

Désolé,j'avais oublié ce code
Voici le code "ajax4.js":

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
 
function ajax()
{
    var xhr=null;
 
    if (window.XMLHttpRequest) { 
        xhr = new XMLHttpRequest();
    }
    else if (window.ActiveXObject) 
    {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    //on définit l'appel de la fonction au retour serveur
    xhr.onreadystatechange = function() { alert_ajax(xhr); };
 
    //on appelle le fichier reponse.php
    xhr.open("GET", reponse.php", true);
    xhr.send(null);
}
 
function alert_ajax(xhr)
{
	var docXML= xhr.responseXML;
	var items = docXML.getElementsByTagName("donnee")
	//on fait juste une boucle sur chaque element "donnee" trouvé
	for (i=0;i<items.length;i++)
	{
		alert (items.item(i).firstChild.data);
	}
}

Merci pour votre aide
Claudine

01/11/2011, 13h02
andry.aime

1- rien qu'avec la coloration syntaxique, tu pourrais voir qu'il manque un guillemet ici

Citation:

xhr.open("GET", reponse.php", true);

2- tu dois attendre que le readyState soit à 4 et que le status soit 200 ou 0 (aucun erreur) pour pouvoir traiter le résultat de la requête.

A+.
01/11/2011, 14h15
Claudine

Bonjour Andry.aime.
J'ai ajouter le" et rien ne change et vous me dites:

Code:

tu dois attendre que le readyState soit à 4 et que le status soit 200 ou 0 (aucun erreur) pour pouvoir traiter le résultat de la requête.

D'accord, mais s' il faut attendre indéfiniment, c'est le signe qu'il y a une erreur. Et comment "voir" si les différents "state" sont passés correctement?
Voulez-vous m'aider svp?
Claudine

Code:

1
2
3
4
5
6
7
8
9
10
11
12
function alert_ajax(xhr)
{
if(xhr.readyState == 4 && (xhr.status==200 || xhr.status==0)){	
var docXML= xhr.responseXML;
	var items = docXML.getElementsByTagName("donnee")
	//on fait juste une boucle sur chaque element "donnee" trouvé
	for (i=0;i<items.length;i++)
	{
		alert (items.item(i).firstChild.data);
	}
}
}

01/11/2011, 16h23
Claudine

Bonsoir Andry.aime,
Toujours par de réponse.php
N'y a-t'il pas moyen de lui faire indiquer un message pour voir si la connexion est bien établie et la requête reçue ? et lui faire afficher juste en-dessous de "cliquer". Je ne peux malheureusement pas situer où est le problème.
J'espère que vous pourrez m'aider.
Sincères remerciements
claudine

re,

1- teste le xhr.status si c'est à 0 ou 200, si ce n'est pas le cas, regarde les code d'erreurs -> http://fr.wikipedia.org/wiki/Liste_des_codes_HTTP
2- si ça passe bien pour le premier teste, récupère les données sous forme de texte mais pas xml pour voir si le flux xml est bien généré:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 function alert_ajax(xhr) { if(xhr.readyState == 4){ if(xhr.status==200 || xhr.status==0){ var docXML= xhr.responseText; alert(docXML); /* var items = docXML.getElementsByTagName("donnee") for (i=0;i<items.length;i++) { alert (items.item(i).firstChild.data); }*/ }else{ alert("Error: returned status code " + xhr.status + " " + xhr.statusText); } } }
A+.

02/11/2011, 11h58
Claudine
Bonjour Andry-aime
Grâce à ces dernièreslignes de code j'ai pu afficher le code d'erreur qui se situait à :
Code:

1 2 $result = mysql_query($query,$dblink) or die (mysql_error($dblink));
Correction
Code:

1 2 $result = mysql_query($query,$link) or die (mysql_error($link));
Bref,maintenant cela fonctionne bien! un grand merci pour votre aide.
Cependant , je constate que je ne peux afficher qu'un seul champ'text' de la table temp. J'aimerais afficher en même temp les autre champs'Nom' et ''prenom'.
J'ai modifié le code:
Code:

1 2 $query = "SELECT text FROM temp";
en:
Code:

1 2 $query = "SELECT text, nom, prenom FROM temp";
mais il ne m'affiche que le 1er champ'text'
Comment modifier le code actuel de reponse.php:
Code:

1 2 3 4 5 6 //On boucle sur le resultat while ($row = mysql_fetch_array($result, MYSQL_NUM)) { echo "<donnee>" . $row[0] . "</donnee>\n"; } echo "</exemple>\n";
pour afficher simultanément les 3 champs?
Sincères remerciements pour votre aide efficace.
Claudine
02/11/2011, 12h22
andry.aime

:salut:

Regarde ce tutoriel.

A+.

Bonjour Andry.aime,
comme vous me l'avez conseillé, j'ai essayer de comprendre ce logiciel. Hélas trop compliqué pour une débutante.Et cela d'autant plus que je n'arrive pas à faire fonctionner cet exemple, même pas un code d"erreur.
Aussi voulez-vous regarder où se trouve le problème pour que je puisse comprender le fonctionnement.
code index.html

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
 
<head>
	<title>liste des DVD</title>
</head>
<body>
 
<script type="text/javascript" src="dvd.js"></script>
 
<p>
<a href="javascript:exemple();">cliquer !</a>
<div id="content"></div>
</p>
 
</body>
</html>

Code dvd.js

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
 
<script type="text/javascript">
function exemple(){
	obj = document.getElementById("content");
// ON EFFACE LE CONTENU DU DIV
obj.innerHTML = "";
 
if(window.XMLHttpRequest) // Firefox
// il faut donc créer tout d'abord une instance de XMLHttpRequest grâce à l'appel de fonction getXMLHttpRequest
   xhr_object = new XMLHttpRequest();
   // les 4 lignes de codes suivantes, vont effectuer toute la première partie ,c'est-à-dire de fournir un arbre XML valide.
var xhr = getXMLHttpRequest();
/* La fonction handleHttpResponse est fournie plus loin dans cet article */
xhr.onreadystatechange = handleHttpResponse;
//les 2 lignes suivantes permettent d'envoyer la requête au serveur afin que celui-ci retourne le fichier XML
var url = "dvd.xml";
xhr.open("GET", url, true);
/* A préciser pour les requêtes de type POST
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
*/
xhr.send(null);
 
// fonction qui va traiter et afficher l'arbre XML reçu
//celle-ci doit effectuer son traitement seulement si le serveur est disponible(<<<xhr.readyState==4>>) et si la lecture du fichier XML a bien été effectuée(<<xhr.status==200>>). Si ces conditions sont remplies, alors on proçède au nettoyage du fichier XML grâce à l'appel de la fonction cleanXML
function handleHttpResponse() {
    if(xhr.readyState == 4 && xhr.status == 200) {
        /* xhr.responseXML permet d'obtenir le fichier XML
           xhr.responseText aurait retourné le fichier sous format texte */
        response = cleanXML(xhr.responseXML.documentElement);
        // ...
    }else{
		alert("Error:returned status code"+xhr.status +""+xhr.statusText);
	}
  }
}
//Maintenant, l'affichage des informations sur les dvd nécessite l'emploi de l'API DOM JavaScript, comme indiqué ci-dessous:
/* Récupérer la liste des items donc la liste des DVD */
var items    = response.getElementsByTagName("item");
var html     = ''; /* Présentation HTML de la liste des DVD */
/* Nombre de DVD */
count        = items.length;
for(i = 0; i < count; i++) { /* POUR CHAQUE item */
    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>';
}
//affichage dans la balise DIV ayant l'identifiant<<content>>
document.getElementById('content').innerHTML += html;

Code dvd.xlm

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>

Sincères salutations
Claudine

Bonjour,

1- Dans un fichier .js, tu ne dois pas mettre le tag

Citation:

2- Je me demande bien si tu as essayé de comprendre ou tu as seulement contenté de faire un copier/coller

Citation:

if(window.XMLHttpRequest)
xhr_object = new XMLHttpRequest();
var xhr = getXMLHttpRequest();

3- Tu as mal placé la fermeture de l'accolade pour la fonction exemple (placé après la fonction handleHttpResponse).

4- La boucle for est le traitement de l'xml, elle doit être dans la fonction handleHttpResponse.

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
function  getXMLHttpRequest(){
	var xhr=null;
    if (window.XMLHttpRequest) { 
        xhr = new XMLHttpRequest();
    }
    else if (window.ActiveXObject) 
    {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
	return xhr;
}
 
function exemple(){
	document.getElementById("content").innerHTML = "";
	var xhr = getXMLHttpRequest();
	xhr.onreadystatechange = handleHttpResponse;
	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 = 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);
		}
	}
}

Je te conseille de lire ce tutoriel.

A+.

Bonjour Andry.aime
je suis heureuse de mieux comprendre la structure du fichier.js grâce à ce tutoriel conseillé.
J'ai donc tout repris comme cet exemple mais ce qui m'étonne c'est que rien ne s'affiche après clic pas même un seul code d'erreur !
Voulez-vous voir où se situe les problèmes:Ci-joint ce fichier

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 = getXMLHttpRequest();
	xhr.onreadystatechange = handleHttpResponse;
	var url = "dvd.xml";
	xhr.open("GET", url, true);
	xhr.send(null);
} 
 
function handleHttpResponse(xhr) {
    if(xhr.readyState == 4){ //Prêt (toutes les données sont chargées).
 
		if(xhr.status == 200 || xhr.status == 0) //Le code de la réponse du serveur est:
//200 -> OK.
//404 -> Page non trouvée.
{
//response=cleanXML(xhr.responseXML.document Element);}}
			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>

Mes plus vifs remerciements
Claudine

Citation:

var xhr = getXMLHttpRequest();
xhr.onreadystatechange = handleHttpResponse;
Code:

1 2 var xhr = getXhr();//Tu as appelé une fonction qui n'existe pas ;) xhr.onreadystatechange = handleHttpResponse;

07/11/2011, 17h59
Claudine
Bonsoir Andry.aime,
J'ai corrigé cette erreur, mais apparemment, ce n'est pas la seule car rien ne se passe après le clic. D'autant plus bizarre que j'ai ajouter 2 lignes de code supplémentaire pour affichage dans la DIV du changement d'état ! et toujours rien sans aucun message d'erreur.
Code:

1 2 3 4 function handleHttpResponse(xhr) { if(xhr_object.readyState == 1) obj.innerHtml += "connexion établie <br />";
Puis-je te demander toute ton attention pour débusquer l'erreur?
Remerciements
Claudine
08/11/2011, 09h46
andry.aime

Remplace cette ligne

Citation:

xhr.onreadystatechange = handleHttpResponse;

par

Code:

xhr.onreadystatechange = function () {handleHttpResponse(xhr)};

Bonsoir andry.aime
Je suis désolée, mais rien ne change au click.
Pour éviter toute erreur éventuelle de ma part, je joint le fichier actuel:

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
 
<!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== 1)
	   obj.innerHtml += "connexion établie <br />";
    if(xhr.readyState == 4){ //Prêt (toutes les données sont chargées).
 
		if(xhr.status == 200 || xhr.status == 0) //Le code de la réponse du serveur est:
//200 -> OK.
//404 -> Page non trouvée.
{
response=cleanXML(xhr.responseXML.document Element);}}
			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=" "></div>
</p>
	</body>
</html>

merci pour votre aide
Claudine

Citation:

Je suis désolée, mais rien ne change au click.

Avec ça, rien d'étonnant... :roll:
Code:

1 2 3 4 5 if(xhr.status == 200 || xhr.status == 0) //Le code de la réponse du serveur est: //200 -> OK. //404 -> Page non trouvée. { response=cleanXML(xhr.responseXML.document Element);}

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