[AJAX] Requête AJAX qui ne fonctionne pas

**benoitB** · 26/08/2013, 12h12

Le fichier index.php :

Code html :

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
<html>
   <head>
      <title>a useful dashboard for XML files - @ <?php echo date("H:i:s"); ?></title>
         <basefont size="1" color="" face="Arial,Courrier" />
         <script type="text/javascript" src="./_serverDatation.js"></script>
         <script type="text/javascript"><!--
            function Update ()
            {
               javascript:_serverDatation();
               setTimeout('Update()', 901);
            }
         --></script>
   </head>
   <body onload='Update();'>
      <table width=100% cellpadding=0 cellspacing=0 >
         <tr>
            <td align='center' bgcolor='#7FC6BC'><div id='serverDatation' style='display:inline'></div></td>
         </tr>
      </table>
   </body>
</html>

Avec le fichier _serverDatation.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
function _serverDatation ()
{
   var xhr=null;
   if (window.XMLHttpRequest)
   {
      xhr = new XMLHttpRequest();
   }
   else if (window.ActiveXObject) 
   {
      xhr = new ActiveXObject("Microsoft.XMLHTTP");
   }
   xhr.onreadystatechange = function() { fillDatas(xhr); };
   xhr.open("GET", "./_serverDatation.php", true);
   xhr.send(null);
}
 
function fillDatas (xhr)
{
   var docXML = xhr.responseXML;
   var items = docXML.getElementsByTagName("serverDatation");
   for( i=0 ; i<items.length ; i++ )
   {
      document.getElementById('serverDatation').innerHTML = items.item(i).firstChild.data;
   }
}

Et enfin le fichier _serverDatation.php :

Code php :

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

1
2
3
4
5
6
7
<?php
header('Content-Type: text/xml'); 
echo "<?xml version=\"1.0\"?>\n";
echo "<XmlDatas>\n";
echo "<serverDatation>".date("H:i:s")."</serverDatation>\n";
echo "</XmlDatas>\n";
?>

Et cela ne fonctionne pas (ces trois fichiers sont dans le même répertoire).

Par contre si je modifie fillDatas de _serverDatation.js comme suit :

Code :

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

1
2
3
4
5
6
7
8
9
10
function fillDatas (xhr)
{
   var docXML = xhr.responseXML;
//   var items = docXML.getElementsByTagName("serverDatation");
//   for( i=0 ; i<items.length ; i++ )
//   {
//      document.getElementById('serverDatation').innerHTML = items.item(i).firstChild.data;
//   }
   document.getElementById('serverDatation').innerHTML = 100*Math.random();
}

Ça fonctionne bien, j'ai bien un chiffre au hasard affiché toutes les secondes ou presque (901 ms).

Une/des propositions SVP ?

**andry.aime** · 27/08/2013, 09h01

Bonjour,

Il faut attendre que le xhr.readyState soit égal à 4 et que le xhr.status soit à 200 ou 0 pour avoir un résultat.

A+.

**benoitB** · 28/08/2013, 10h23

Merci pour le conseil, voici les modifications :

Le fichier _serverDatation.js devient :

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
function _serverDatation ()
{
   var xhr=null;
   if (window.XMLHttpRequest)
   {
      xhr = new XMLHttpRequest();
   }
   else if (window.ActiveXObject) 
   {
      xhr = new ActiveXObject("Microsoft.XMLHTTP");
   }
   xhr.onreadystatechange = function()
   {
      if(xhr.readyState == 4)
      {
         if(xhr.status == 200)
         {
            fillDatas(xhr);
         }
      }
   };
   xhr.open("GET", "_serverDatation.xml", true);
   xhr.send(null);
}
 
function fillDatas (xhr)
{
   var docXML = xhr.responseXML;
   var items = docXML.getElementsByTagName("serverDatation");
   for( i=0 ; i<items.length ; i++ )
   {
      document.getElementById('serverDatation').innerHTML = items.item(i).firstChild.data;
   }
}

Le fichier _serverDatation.xml est :

Code xml :

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

1
2
3
4
<?xml version="1.0"?>
<XmlDatas>
   <serverDatation>5555555</serverDatation>
</XmlDatas>

Et tout fonctionne bien !

Donc mon soucis vient du fichier _serverDatation.php :

Code php :

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

1
2
3
4
5
6
7
<?php
header('Content-Type: text/xml');
echo "<?xml version=\"1.0\"?>\n";
echo "<XmlDatas>\n";
echo "<serverDatation>".date("H:i:s")."</serverDatation>\n";
echo "</XmlDatas>\n";
?>

Pour lequel les conditions :

Code :

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

1
2
3
      if(xhr.readyState == 4)
      {
         if(xhr.status == 200)

Ne sont jamais remplies.

Une idée ?

**andry.aime** · 28/08/2013, 12h08

Essaie avec

Code :

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

1
2
3
4
5
6
7
8
9
if(xhr.readyState == 4)
      {
         if(xhr.status == 200 || xhr.status==0)
         {
            fillDatas(xhr);
         }else{
            alert ("Erreur :"+xhr.status+" : "+xhr.statusText)
         }
      }

**benoitB** · 28/08/2013, 13h44

J'ai mis un peu de débogage dans fillDatas().

Ne fonctionne 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
function fillDatas (xhr)
{
   var ladate = new Date();
   var datation = (ladate.getHours() < 10 ? "0" + ladate.getHours() : ladate.getHours()) + ":" + (ladate.getMinutes() < 10 ? "0" + ladate.getMinutes() : ladate.getMinutes()) + ":" + (ladate.getSeconds() < 10 ? "0" + ladate.getSeconds() : ladate.getSeconds());
   document.getElementById('serverDatation').innerHTML = "fillDatas - (Entrée @php)<br />" + datation + "<br />xhr.readyState='" + xhr.readyState + "'<br />xhr.status='" + xhr.status + "'";
 
   var docXML = xhr.responseXML;
   var items = docXML.getElementsByTagName("serverdatation");
   //for( i=0 ; i<items.length ; i++ )
   //{
      //document.getElementById('serverDatation').innerHTML = items.item(i).firstChild.data;
   //}
   document.getElementById('serverDatation').innerHTML = "fillDatas (Sortie @php)<br />" + datation + "<br />xhr.readyState='" + xhr.readyState + "'<br />xhr.status='" + xhr.status + "'";
}

Le texte affiché correspond à la première modification : ...fillDatas - (Entrée @php).... La fonction fillDatas n'est donc pas complètement exécutée.

Fonctionne :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function fillDatas (xhr)
{
   var ladate = new Date();
   var datation = (ladate.getHours() < 10 ? "0" + ladate.getHours() : ladate.getHours()) + ":" + (ladate.getMinutes() < 10 ? "0" + ladate.getMinutes() : ladate.getMinutes()) + ":" + (ladate.getSeconds() < 10 ? "0" + ladate.getSeconds() : ladate.getSeconds());
   document.getElementById('serverDatation').innerHTML = "fillDatas - (Entrée @php)<br />" + datation + "<br />xhr.readyState='" + xhr.readyState + "'<br />xhr.status='" + xhr.status + "'";
 
   var docXML = xhr.responseXML;
   //var items = docXML.getElementsByTagName("serverdatation");
   //for( i=0 ; i<items.length ; i++ )
   //{
      //document.getElementById('serverDatation').innerHTML = items.item(i).firstChild.data;
   //}
   document.getElementById('serverDatation').innerHTML = "fillDatas (Sortie @php)<br />" + datation + "<br />xhr.readyState='" + xhr.readyState + "'<br />xhr.status='" + xhr.status + "'";
}

La mise en commentaire de la ligne :

Code :

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

var items = docXML.getElementsByTagName("serverdatation");

fait que le texte affiché correspond à la dernière ligne de fillDatas ... fillDatas (Sortie @php)... et donc que la fonction fillDatas est complètement exécutée.

**andry.aime** · 28/08/2013, 13h56

Attention

Code php :

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

echo "<serverDatation>".date("H:i:s")."</serverDatation>\n";

Code :

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

docXML.getElementsByTagName("serverdatation");

getElementsByTagName est sensible à la casse pour les XML (ce qui n'est pas le cas pour le HTML).

A+.

[AJAX] Requête AJAX qui ne fonctionne pas

AJAX

Vue hybride

Discussions similaires

Partager

Partager