[AJAX] Récupération infos XML

**bob633** · 24/01/2011, 23h00

Bonjour,

Je suis actuellement en licence pro en gestion de projet, et on a quelques cours sur la prog web.

En fait nous avons fait un TP sur html, php et ajax .. je connais déjà le html et le php, mais alors du tout le ajax .. d'où ma venu sur le forum.

Le principe du code, c'est que lorsque que j'appui sur un bouton "actualiser" sur une page PHP (getVentesActualisees.php), cela créer une requête, va interroger une fonction PHP (function.php), et récupérer ces informations (zone XML dans le php) pour mettre à jour les balises <span> du fichier PHP (getVentesActualisees.php) .. Ca fait 2 h que je tourne en rond et rien ne fonctionne, j'aimerais avoir des explications sur mon code :

GetVentesActualisees.php

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
<html>
 <head>
  <title>Planches A Gogo</title>
  <link rel="stylesheet" type="text/css" href="planches.css" />
  <script type="text/Javascript" src="creerRequete.js" /></script>
 </head>
 
<body>
  <h1>Planches à gogo :: Tableau de bord</h1>
  <div id="planches">
   <table>
    <tr><th>Planches vendues</th>
     <td><span id="planches vendues">
<?php
  print $totalVendu;
?>
    </span></td></tr>
    <tr><th>Prix de vente</th>
     <td><span id="prix"> €
<?php
  print $prix;
?>
    </span></td></tr>
    <tr><th>Prix de revient</th>
     <td><span id="cout"> €
<?php
  print $cout;
?>
     </span></td></tr>
   </table>
   <h2>Bénéfice net : 
    <span id="benef">
<?php
  print $benef;
?>
    </span> €</h2>
   <form method="GET" action="getVentesActualisees.php">
    <input value="Actualiser" type="button" onclick="javascript:getplanchesvendues();" />
   </form>
  </div>
 </body>
</html>

Function.php

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
<?php
 
header("Content-Type: text/plain");
 
// Commence avec un nombre aléatoire de planches vendues
$totalVendu = 1012;
 
// Reflète les nouvelles ventes
srand((double)microtime() * 1000000);
$totalVendu = $totalVendu + rand(0,1000);
 
$prix = 249.95;
$cout = 84.22;
$benefParPlanche = $prix - $cout;
$benef = $totalVendu * $benefParPlanche ;
 
echo "<?xml version=\"1.0\"?>\n";
echo "<exemple>\n";
echo "<donnee>" . $totalVendu . "</donnee>\n";
echo "<donnee>" . $prix . "</donnee>\n";
echo "<donnee>" . $cout . "</donnee>\n";
echo "<donnee>" . $benef . "</donnee>\n";
echo "</exemple>\n";
?>

CreerRequête.js

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
function remplacerTexte(el, texte) {
  if (el != null) {
    effacerTexte(el);
    var nouveauNoeud = document.createTextNode(texte);
    el.appendChild(nouveauNoeud);
  }
}
 
function effacerTexte(el) {
  if (el != null) {
    if (el.childNodes) {
      for (var i = 0; i < el.childNodes.length; i++) {
        var noeudFils = el.childNodes[i];
        el.removeChild(noeudFils);
      }
    }
  }
}
 
function getTexte(el) {
  var texte = "";
  if (el != null) {
    if (el.childNodes) {
      for (var i = 0; i < el.childNodes.length; i++) {
        var noeudFils = el.childNodes[i];
        if (noeudFils.nodeValue != null) {
          texte = texte + noeudFils.nodeValue;
        }
      }
    }
  }
  return texte;
}
 
function getplanchesvendues()
{
	var requete = null;
    try 
	{
        requete = new XMLHttpRequest();
    } catch (essaimicrosoft) 
		{
        try {
			requete = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (autremicrosoft) 
			{
            try {
				requete = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (echec) 
				{
                    requete = null;
				}
			}
		}
 
	requete.onreadystatechange = function() 
	{ 
	if(requete.readyState == 4 && requete.status == 200)
		{
			actualiserPage(requete);	
		}
	};
 
	requete.open("GET","functionPHP.php",true); 
	requete.send(null);
 
}
 
function actualiserPage(requete)
{
	var docXML= requete.responseXML;
	var items = docXML.getElementsByTagName("donnee")
	//on fait juste une boucle sur chaque élément "donnee" trouvé
	for (i=0;i<items.length;i++)
	{
		alert (items.item(i).firstChild.data);
	}
}

J'aimerais vraiment pouvoir comprendre comment fonctionne l'ajax .. j'ai surtout du mal à comprendre comment renvoyer des éléments du PHP . puis après comment les traiter pour mettre à jour du PHP ..

Merci !

**RomainVALERI** · 25/01/2011, 10h48

Ta fonction onreadystatechange n'attend pas un retour complet des données pour effectuer son traitement ^^ elle n'a pas encore accès à responseXML ou responseText au moment où tu la déclenches. Classiquement on conditionne ça sur la propriété readyState de l'objet de transport. (4 pour une réponse disponible et complète)

Envoyé par bob633

J'aimerais vraiment pouvoir comprendre comment fonctionne l'ajax ..

>>> merci Bovino

**bob633** · 25/01/2011, 21h42

Merci pour votre réponse ! En effet j'avais complètement zapper cette étape ... J'ai modifié mon code et j'ai mis à jour le premier poste, je bloque sur comment récupérer les éléments de mon fichier PHP .. J'ai beau lire et relire différents site web sur comment ça fonctionne, je mélange les getElementsbyId ... getElementsByTagName ...

J'ai aussi un doute sur le fait que la fonction "open" soit après l'appel de la fonction actualiserPage() qui elle est censer récuperer les informations et mettre à jour ma page getVentesActualisees ..

Merci si vous pouvez m’éclairer un peu

**andry.aime** · 26/01/2011, 04h36

Bonjour,

1-Tu n'as pas accès à la variable requete dans la fonction actualiserPage(), c'est une variable locale de la fonction . Passe la en paramètre.
2-Il faut aussi tester si le status est égal à 200 ou 0 pour appeler la fonction actualiserPage().

A+.

**bob633** · 26/01/2011, 22h17

merci pour l'info, ça avance petit à petit ..

J'arrive à un nouveau problème, mon docXML est vide ! Je n'arrive pas à récupérer la partie XML qui se trouve dans functionPHP.php .. j'ai testé en créant un fichier XML simple en copiant ce bout de code et là ça fonctionne .. J'ai cru comprendre que les balises XML doivent absolument se trouver en début de fichier pour que cela fonctionne, y a t'il un moyen de lire du XML inclus dans du PHP ?