Page 1 sur 1

Appel d'une requête SQL par Ajax

Posté : 26 sept. 2012, 22:10
par vct
Salut, je suis en train de développer un outil. Pour le moment je l'ai réalisé en PHP mais je suis en train de convertir les fonctions en Ajax.
Je n'arrive pas à avoir un résultat, je vous met le code ici :

Le script Ajax :

Code : Tout sélectionner

<script type="text/javascript"> function getXMLHttpRequest() { var xhr2 = null; if (window.XMLHttpRequest || window.ActiveXObject) { if (window.ActiveXObject) { try { xhr2 = new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) { xhr2 = new ActiveXObject("Microsoft.XMLHTTP"); } } else { xhr2 = new XMLHttpRequest(); } } else { alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest..."); return null; } return xhr2; } /* ressources */ function list_ressource() { var xhr2 = getXMLHttpRequest(); xhr2.onreadystatechange = function() { if (xhr2.readyState == 4 && (xhr2.status == 200 || xhr2.status == 0)) { callback(xhr2.responseText); } }; xhr2.open("GET", "list_ressource.php", true); xhr2.send(null); alert(xhr2.responseText); } </script>
Le script PHP

Code : Tout sélectionner

<?php $connect = mysql_connect("localhost", "root", ""); mysql_select_db("relevededecision", $connect) or die("erreur select db"); $query = mysql_query("SELECT * FROM ressources", $connect) or die("erreur query"); $nb_result = mysql_num_rows($query); if($nb_result > 0){ while ($result = mysql_fetch_array($query)){ echo "<a href='index.php?suppr_ressource=".$result['id']."'><img src='suppr.png' /></a> ".$result['name']."<br />"; } } ?>
L'appel de la fonction :

Code : Tout sélectionner

<input type="button" onclick="list_ressource()" value="resultats" />
Quelqu'un voit une erreur ?
Je précise que mon but est de faire une requête SQL et de restituer le résultat donc je n'ai pas besoin d'envoyer de variable car pas de WHERE dans la requête SQL.
Mon alert me renvois une popup vide.

Help , merci :)

Re: Appel d'une requête SQL par Ajax

Posté : 30 sept. 2012, 14:43
par sadeq
OUi il y a une erreur flagrante : il manque la déclaration de la fonction "callback" qui est appelée par la fonction "list_ressource" ici:
[javascript]callback(xhr2.responseText);[/javascript]

Je rappelle que Ajax fonctionne en asynchrone quand on met "true" dans la fonction Open :
[javascript]xhr2.open("GET", "list_ressource.php", true);[/javascript] (ce qui est le fonctionnement par défaut d'ajax)
Ce qui veut dire que Ajax ouvre une session de communication avec le seveur web/php suite à l'ordre Open/Send puis javascript continue et le navigateur continue de fonctionner normalement sans attendre l'arrivée de la réponse du serveur. Du coup, ton alert() placée à la suite de Open()/Send() n'affichera rien du tout vu que la réponse n'est pas systématiquement reçue après Open() en mode asynchrone. C'est la fonction callback() que tu as programmé dans la fonction "list_ressource" qui s'occupe d'afficher le résultat du serveur quand une réponse est envoyée. C'est pour cela que tu dois ajouter le descriptif de la fonction callback() pour programmer comment tu veux traiter la réponse : xhr2.responseText.

On comprend donc que le mode synchrone d'Ajax impose un décalage dans le temps entre le moment où Ajax appelle le serveur (Open() et Send()) et le moment où une réponse du serveur est renvoyée à Ajax. L'écouteur qui s'occupe d'attendre la réponse en arrière-plan est programmé généralement dans le code :
[javascript]xhr2.onreadystatechange = function() {
if (xhr2.readyState == 4 && (xhr2.status == 200 || xhr2.status == 0)) {
callback(xhr2.responseText);
}
};[/javascript]Donc ici, c'est la fonction nommée "callback" (que tu peux d'ailleurs la nommer comme tu veux) qui s'occupera du traitement de la réponse Ajax se trouvant dans l'objet : xhr2.responseText.

Par exemple, tu peux afficher cette réponse dans un div que tu prévois dans la page html. Comme ça:
<script type="text/javascript">
   function getXMLHttpRequest() {
   var xhr2 = null;
   
   if (window.XMLHttpRequest || window.ActiveXObject) {
      if (window.ActiveXObject) {
         try {
            xhr2 = new ActiveXObject("Msxml2.XMLHTTP");
         } catch(e) {
            xhr2 = new ActiveXObject("Microsoft.XMLHTTP");
         }
      } else {
         xhr2 = new XMLHttpRequest();
      }
   } else {
      alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest...");
      return null;
   }
   
   return xhr2;
}

/* ressources */
function list_ressource() {
      var xhr2 = getXMLHttpRequest();
      
      xhr2.onreadystatechange = function() {
         if (xhr2.readyState == 4 && (xhr2.status == 200 || xhr2.status == 0)) {
            callback(xhr2.responseText);
         }
      };
      
      xhr2.open("GET", "list_ressource.php", true);
      xhr2.send(null);
 }

 /* fonction de traitement de la réponse Ajax*/
function callback(reponse){
  document.getElementById('div_reponse').innerHTML = reponse; //affiche dans le div de reponse
}
</script>

<input type="button" onclick="list_ressource()" value="resultats" />
<div id="div_reponse"></div>