[AJAX] Requête AJAX qui ne fonctionne pas

Version imprimable

Le fichier index.php :

Code:

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:

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:

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:

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 ?

27/08/2013, 09h01
andry.aime

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

On avance...

Merci pour le conseil, voici les modifications :

Le fichier _serverDatation.js devient :

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

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:

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:

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

Ne sont jamais remplies.

Une idée ?

Essaie avec

Code:

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

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

Ne fonctionne pas :

Code:

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:

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:

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.

28/08/2013, 13h56
andry.aime

Attention

Citation:

Code:

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

Citation:

Code:

docXML.getElementsByTagName("serverdatation");

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

A+.

le fichier _serverDatation.php est :
Code:

1 2 3 4 5 6 7 8 <?php header('Content-Type: text/xml'); //session_start(); echo '<?xml version="1.0"?>'."\n"; echo "<xmldatas>\n"; echo "<serverdatation>".date("H:i:s")."</serverdatation>\n"; echo "</xmldatas>\n"; ?>
J'avais corrigé l'erreur de casse et cela ne fonctionne toujours pas.

Cependant, même avec l'erreur de casse, la méthode fillDatas devrait se dérouler entièrement quitte à ce qu'aucun noeud serverDatation ne se trouve dans le XML retourné, non ?

Bonjour,
as tu essayé de ne faire qu'un écho dans ton fichier PHP

Code:

1
2
3
4
5
6
7
8
<?php
header('Content-Type: text/xml; charset=UTF-8');
$data  ='<?xml version="1.0" encoding="UTF-8" ?>';
$data .='<xmldatas>';
$data .='<serverdatation>'.date("H:i:s").'</serverdatation>';
$data .='</xmldatas>';
echo $data;
?>

2 pièce(s) jointe(s)

Faisons le point.

Merci pour le conseil.

J'ai essayé et c'est pareil.

Il me semble que ce qui est retourné n'est pas du XML. Voici les codes actuels :

index.php :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<html>
   <head>
      <title>a useful dashboard for LG3 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()', 3000);
         }
      --></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>
            <tr><td align='center' bgcolor='orange'><?php echo phpversion(); ?></td></tr>
         </table>
   </body>
</html>

_serverDatation.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
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) && (xhr.status == 200 || xhr.status==0) )
      {
         fillDatas(xhr);
      }
   };
   xhr.open("GET", "./_serverDatation.php", true);
   xhr.send(null);
}
 
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");
   //document.getElementById('serverDatation').innerHTML = "fillDatas (Inside @php)<br />Count='" + items.length + "'<br />" + datation + "<br />xhr.readyState='" + xhr.readyState + "'<br />xhr.status='" + xhr.status + "'";
   //for( i=0 ; i<items.length ; i++ )
   //{
      //document.getElementById('serverDatation').innerHTML = "fillDatas (Inside @php)<br />" + datation + "<br />xhr.readyState='" + xhr.readyState + "'<br />xhr.status='" + xhr.status + "'";
      //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 + "'<br /><br /><br /><br />responseText='" + xhr.responseText + "'";
}

Et _serverDatation.php :

Code:

1
2
3
4
5
6
7
8
<?php
header('Content-Type: text/xml; charset=UTF-8');
$data  ='<?xml version="1.0" encoding="UTF-8" ?>';
$data .='<xmldatas>';
$data .='<serverdatation>'.date("H:i:s").' (cette datation vient bien du fichier _serverDatation.php)</serverdatation>';
$data .='</xmldatas>';
echo $data;
?>

Ça fonctionne très bien, les deux datations sont rafraîchies toutes les 3 secondes :
http://www.developpez.net/forums/att...3&d=1377762986

Mais si je décommente :

Code:

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

Alors le texte de fin de la fonction fillDatas n'est plus affiché même si l'heure de la première ligne est rafraîchie toutes les 3 secondes :
http://www.developpez.net/forums/att...4&d=1377762992

J'accède bien à xhr.responseText mais manifestement docXML.getElementsByTagName n'aime pas...

Là je suis un peu perdu...

29/08/2013, 10h16
andry.aime

Attention,

Citation:

Code:

var docXML = xhr.responseXml;

Code:

var docXML = xhr.responseXML;