Ce script copié de xul ne fonctionne pas !

**Walterbelo** · 01/12/2015, 01h44

Bonjour à toutes et à tous.
J'ai copier ce script du site xul et il ne fonctionne ni sur Chrome ni sur FF.
Pouvez me montrer ce qui ne fonctionne pas ? Merci.

Le PHP :

Code php :

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

1
2
3
<?php
echo "<b> Hello the Ajax World!</b><br>";
?>

Le Html :

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
 
<!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" xml:lang="en" dir="ltr" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Démo de la commande Ajax GET pour un script PHP</title>
<script type="text/javascript">
function createInstance()
{
  var req = null;
  if(window.XMLHttpRequest) {
    req = new XMLHttpRequest();
  }
  else if (window.ActiveXObject) {
    try {
      req = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
       try {
        req = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e) {
            alert("XHR not created");
          }
      }
    }
    return req;
}
<body>
function submitForm()
{ 
   var req = createInstance();
   req.onreadystatechange = function()
   { 
      if(req.readyState == 4)
      {
         if(req.status == 200)
         {
            document.ajax.dyn.value="Received:" + req.responseText;	
         }	
         else	
         {
            document.ajax.dyn.value="Error: returned status code " + req.status + " " + req.statusText;
         }	
      } 
   }; 
   req.open("GET", "ajax-get-php.php", true); 
   req.send(null); 
 } 
 </script><p align="right"></p>
 <h1>Démo de la commande Ajax GET pour un script PHP</h1>
 
<p>Cette page utilise Ajax pour lancer le script  <b>ajax-get.php</b>.</p>
<p>Ce que le script affiche sera alors assigné à  responseText, qui sera affiché ci-dessous. <br />
  Il n'y a pas de différence avec l'emploi de  GET pour charger un fichier de texte, seul le nom du fichier diffère! </p>
<hr />
<p> <span id="storage"> L'affichage du script PHP sera inséré ici </span></p>
<hr />
 
<FORM name="ajax" method="POST" action="">
	<p>
	<INPUT type="button" value="Envoyer"  ONCLICK="submitForm(document.getElementById('storage'))">
	</p>
</FORM>
 
<p>  (c) Par  <a href="http://www.lesite.fr" target="_parent"> lesite.fr</a></p>
<p>Retourner au  <a href="ajax/ajax-php.fr/ajax-get.php" target="_parent">Tutoriel Ajax et PHP</a></p>
</body>

'

**Hijack** · 01/12/2015, 11h43

Bonjour Walterbelo,

Plusieurs choses ne vont pas dans ce script :

La page HTML n'est pas correcte
La balise <p align="right"> est vide, et par conséquent n'aligne rien...
L'appel de la procédure submitForm attaché au ONCLICK du formulaire passe un paramètre alors que submitForm n'en attend pas
La réponse de l'appel Ajax est poussée dans un élément qui n'existe pas (document.ajax.dyn)

Ci-dessous le code corrigé :

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
<!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" xml:lang="en" dir="ltr" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Démo de la commande Ajax GET pour un script PHP</title>
    <script type="text/javascript">
      function createInstance()
      {
        var req = null;
        if(window.XMLHttpRequest) {
          req = new XMLHttpRequest();
        }
        else if (window.ActiveXObject) {
          try {
            req = new ActiveXObject("Msxml2.XMLHTTP");
          } catch (e) {
             try {
              req = new ActiveXObject("Microsoft.XMLHTTP");
              } catch (e) {
                  alert("XHR not created");
                }
            }
          }
          return req;
      }
 
      function submitForm(element)
      { 
         var req = createInstance();
         req.onreadystatechange = function()
         { 
            if(req.readyState == 4)
            {
               if(req.status == 200)
               {
                  element.innerHTML=req.responseText;
               }	
               else	
               {
                  element.innerHTML="Error: returned status code " + req.status + " " + req.statusText;
               }	
            } 
         }; 
         req.open("GET", "ajax-get-php.php", true); 
         req.send(null); 
      }
    </script>
   </head>
 
   <body> 
  <p align="right"></p>
   <h1>Démo de la commande Ajax GET pour un script PHP</h1>
 
  <p>Cette page utilise Ajax pour lancer le script  <b>ajax-get.php</b>.</p>
  <p>Ce que le script affiche sera alors assigné à  responseText, qui sera affiché ci-dessous. <br />
    Il n'y a pas de différence avec l'emploi de  GET pour charger un fichier de texte, seul le nom du fichier diffère! </p>
  <hr />
  <p> <span id="storage"> L'affichage du script PHP sera inséré ici </span></p>
  <hr />
 
  <FORM name="ajax" method="POST" action="">
  	<p>
  	<INPUT type="button" value="Envoyer"  ONCLICK="submitForm(document.getElementById('storage'))">
  	</p>
  </FORM>
 
  <p>  (c) Par  <a href="http://www.lesite.fr" target="_parent"> lesite.fr</a></p>
  <p>Retourner au  <a href="ajax/ajax-php.fr/ajax-get.php" target="_parent">Tutoriel Ajax et PHP</a></p>
  </body>
</html>

La fonction submitForm telle qu'elle a été codé doit demander en paramètre un élément du DOM, ici transmit lors du click sur le bouton "Envoyer" par la fonction document.getElementById('storage').
Il n'est pas idéal de traiter la réponse de l'appel Ajax directement dans la fonction qui gère les status de retour. A l'avenir il serait sans doute plus propre d'utiliser un callback (je te laisse te renseigner...

)
Le traitement du retour de la requête est définit par req.onreadystatechange : 4 pour "tout est OK", et 200 pour "il y a une réponse".
La variable innerHTML représente le contenu de "element", on affecte donc le résultat de la requête (req.responseText) à l'élément passé en paramètre de la fonction submitForm (la balise span ayant un id "storage").

**Walterbelo** · 02/12/2015, 15h51

Merci pour tes remarques, je ne manquerais pas de les appliquer lors du développement de mon application.
Mais, en réalité, ce script fonctionne. Je le lançais à partir de la fonction

afficher fichier dans navigateur

d'Ulra Edit et il ne fonctionnait pas. Mais si je le lance en entrant dans la zone url : localhost/....html, alors il fonctionne. Bizarre bizarre .....
Encore merci

Ce script copié de xul ne fonctionne pas !

AJAX

Discussions similaires

Partager

Partager