[AJAX] Récupérer le traitement effectué par une page PHP appelé en AJAX

**n1n0x** · 26/02/2008, 13h13

Bonjour,

c'est vraiment un sacré merdier AJAX pour un débutant qui s'y colle.
J'ai bien compris le mécanisme global mais quand il s'agit d'appliquer la chose, ne serait-ce qu'à un petit exemple, rien ne va plus.

En gros, je voulais tester un exemple simple en reprenant ce "pattern":
http://www.w3schools.com/ajax/ajax_serverscript.asp
http://www.w3schools.com/ajax/ajax_server.asp

En fait, au lieu d'avoir un formulaire et d'afficher l'heure, je souhaite appeler une page .php effectuant un accès à une BDD MySQL, et compter le nombre d'entrées dans une table. Je souhaite donc récupérer ce nombre, puis que cette valeur soit "retransmise" par la page .html appelante, basé sur un appel Ajax / JScript.

Voici ma page TestAjax.html qui fait appel à la page NumberMembers.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
<html><body>

<script type="text/javascript">

function ajaxFunction()
{var xmlHttp;
try
  {  // Firefox, Opera 8.0+, Safari  
  xmlHttp=new XMLHttpRequest();  }
catch (e)
  {  // Internet Explorer  try
    {    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");    }
  catch (e)
    {    try
      {      xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");      }
    catch (e)
      {      alert("Your browser does not support AJAX!");      return false;      }    }  }
  xmlHttp.onreadystatechange=function()
    {
    if(xmlHttp.readyState==4)
      {
	  var data = xmlHttp.responseText;   // ??? how to retrieve the result from the .php process
	  var newline = document.createElement("div");
      document.getElementById('answer').appendChild(newline);
	  var txt = document.createTextNode(data);
	  newline.appendChild(txt);
      }
    }
  xmlHttp.open("GET","NumberMembers.php",true);
  xmlHttp.send(null);  }
  </script>

 HOW MANY MEMBERS?
 <p> 
<a href="javascript:ajaxFunction();">
Tell me:</a> 
<p>
<div id="answer"></div>
</body>
</html>

Et voici donc mon code 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
 
<?php
 
                // connecting to the Database
                $con = mysql_connect("localhost","root","root");
                if(!$con)
                {
                  die('Internal error - Could not connect: ' . mysql_error());
                }
                // select database
                mysql_select_db("wkDB", $con);
                
                $result = mysql_query("SELECT count(*) FROM members_login");
                
// QUE FAIRE A PARTIR DE LA?  
// je précise: un echo $result me renvoit 
 
?>

Le problème se trouve après ma requête SQL. Quelle est la syntaxe précise pour récupérer mon SELECT count ?
Je précise que echo $result; m'affiche "Resource id #3" et non pas 1,2, ou 300...

Ensuite? comment faire pour que ce résultat vienne se greffer dans ma page .html appelante, au niveau du <div id="answer"> ? Je pensais que c'était bien préciser dans ma fonction onReadyStateChange.... Apparemment non.

Merci de votre aide pour me répondre dans mon cas précis, puis dans un deuxième, m'expliquer plus généralement comment je dois conduire ce couplage entre un appel Ajax et un traitement PHP. C-a-d comment s'y prendre si j'ai plusieurs types de données, plusieurs résultats php à retourner sur ma page appelante?

Cordialement,

B.

**marcha** · 26/02/2008, 13h41

Salut,

Au niveau Ajax ça m'a l'air pas mal, cela devient donc plus un
problème php/mysql

$result représente un resultset il faut en extraire l'enregistrement
avec par exemple $rec = mysql_fetch_assoc($result);
puis faire echo $rec['count(*)']; pour produire une sortie avec
la valeur.

**n1n0x** · 26/02/2008, 15h09

Bonjour/bonsoir,

merci pour la réponse. Effectivement merci pour l'aide concernant la partie PHP, cela marche mieux en faisant comme décrit.
Donc si je lance directement ma page NumberMembers.php sur mon serveur local, j'ai bien la bonne valeur affichée.

Maintenant le *gros* soucis, le gros du problème réside dans l'aspect Ajax de l'appel depuis ma page TestAjax.html, dont j'ai donné le code.

Je travaille en localhost, avec MAMP (MySQL Apache PHP pour mac - un easyPHP en mieux on va dire). Quand je lance ma page TestAjax.html et que je clique sur mon lien "tell me", la barre de status de Firefox indique javascript:ajaxFunction(); qd je survole le lien et clique, mais rien ne se passe.

Pourquoi ? Aidez-moi à comprendre....

Merci.

**n1n0x** · 28/02/2008, 13h56

problème non résolu.
Je suis un peu paumé pourriez-vous m'aider à comprendre mon erreur?
N'hésitez pas à me demander plus de précisions si besoin; mais je pense que tout a été dit.

Merci d'avance!

**eracius** · 29/02/2008, 10h22

A la place de

Code :

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

<a href="javascript:ajaxFunction();">

Essaye plutôt :

Code :

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

<a href="#" onClick="javascript:ajaxFunction();">

Bon courage.

**n1n0x** · 01/03/2008, 10h21

Non, celà ne fonctionne pas mieux. En fait, ce n'est pas un problème de syntaxe à mon avis.

Le problème tel que je l'identifie, c'est le lien que je fais en Ajax avec mon objet xmlHttp :

xmlHttp.open("GET","NumberMembers.php",true);

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
xmlHttp.onreadystatechange=function()
    {
    if(xmlHttp.readyState==4)
      {
	  var data = xmlHttp.responseText;
	  var newline = document.createElement("div");
      document.getElementById('answer').appendChild(newline);
	  var txt = document.createTextNode(data);
	  newline.appendChild(txt);
      }
    }

Ce que je vois avec DOM Inspector après avoir cliqué sur mon fameux lien à partir duquel j'injecte une requête Ajax, c'est que mon nouveau noeud div qui devrait être créé comme étant enfant du noeud existant div id="answer" (dans ma page html appelante) n'est tout simplement pas créé.

Autrement dit, c'est comme si mon bloc if n'était pas exécuté. Ca paraît invraisemblable puisque d'une part le statut du navigateur affiche "Terminé", et que, d'autre part, il s'agit d'une pauvre requête database lancée par ma page php, qui s'exécute instantanément. J'ai bien lancé ma page .php manuellement et tout est OK.

Donc, vous les experts d'Ajax, ne me dites pas que ce que je souhaite faire n'est pas possible ??! Je pensais que ca aurait été enfantin pour vous de déceler mon erreur......

A+

**eracius** · 01/03/2008, 11h04

Perso je ne suis pas un expert AJAX mais un utilisateur occasionnel qui passait dans le coin ^^

Je vois potentiellement deux choses à regarder là, soit l'url vers ton fichier .php serait erroné mais je pense que tu as du tester, soit tu peux afficher tous les états de xmlhttprequest pour voir où ça merde.

Utilise ça :

Les états de readyState sont les suivants (seul le dernier est vraiment utile):
0: non initialisé.
1: connexion établie.
2: requête reçue.
3: réponse en cours.
4: terminé.

Bon courage.

**n1n0x** · 03/03/2008, 09h47

Bon je reviens par ici pour vous dire que là je suis fait....... exaspéré, perplexe.
J'ai cherché des tutos/exemples d'interactions Ajax/PHP sur le net, ce qui m'a entre autre permis d'épurer et de mieux structurer mon exemple.

Malheureusement, je n'arrive à aucun résultat et ce n'est pas normal. Pas normal parce que je reprends les exemples des autres tutos à la virgule près (que j'ai testé et qui marchent en local avec mon serveur apache, sql, php).
Je remplace juste le traitement de la page php par une requête toute bête SQL, qui par ailleur, a été testé en dehors de l'appel Ajax. Le bon résultat est bien affiché par le echo.

Voici ma page TestAjax.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
<html><body>

<script language="javascript" type="text/javascript">

function ajaxFunction()
{
	var xmlHttp = getHTTPObject();

      if (xmlHttp != null) {
       xmlHttp.open("GET","NumberMembers.php",true);
  	   xmlHttp.send(null); 
       xmlHttp.onreadystatechange = queryResult;
      }
}


function queryResult()
{
    if(xmlHttp.readyState==4)
      {  
	  document.getElementById('answer').value = xmlHttp.responseText;
      }
	  else if(xmlHttp.readyState==3)
	  {
	  var newline = document.createElement("div");
      document.getElementById('content').appendChild(newline);
	  var txt = document.createTextNode('<br>Processing query...');
	  newline.appendChild(txt);
	  }
}

   
  
  // xmlHttpObject Definition
  function getHTTPObject(){
 
      if (window.ActiveXObject) return new ActiveXObject("Microsoft.XMLHTTP");

      else if (window.XMLHttpRequest) return new XMLHttpRequest();
 
      else {
  
      alert("Your browser does not support AJAX.");
      return null;
 
      }
 
      }
  
  </script>

 HOW MANY MEMBERS?
 <p>
<form name="countMembers">
<input type="button" onClick="ajaxFunction();" value="Tell me"/>
&nbsp; &nbsp; &nbsp; &nbsp;
<input type="text" size="5" id="answer"/>
</form>
<div id="content"></div>
</body>
</html>

Ainsi que ma page NumberMembers.php (situé dans le même répertoire que TestAjax.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
<?php

		// connecting to the Database
		$con = mysql_connect("localhost","root","pass");
		if(!$con)
		{
		  die('Internal error - Could not connect: ' . mysql_error());
		}
		// select database
		mysql_select_db("MaDB", $con);
		
		$result = mysql_query("SELECT count(*) FROM members_login");
		$rec = mysql_fetch_assoc($result);
		echo $rec['count(*)'];  // me renvoie le nombre de membres: OK
?>

Un grand merci à ceux qui me diront pourquoi je n'ai aucun résultat en cliquant sur mon bouton de formulaire. Ni de "processing..." ni aucun résultat. RIEN.

EDIT >>>
Le bouton mouline dans le vide les gars. J'ai coupé mon serveur local, donc si jamais la page php était réellement appelée par le clic sur le bouton, j'aurais eu une erreur affichée.

Donc :
<input type="button" onClick="ajaxFunction();" value="Tell me"/>

ne plaît pas? Pourquoi ? c'est quoi la blague là? Dans l'exemple qui marche c'est identique...

**marcha** · 03/03/2008, 10h35

Salut,

Une remarque concernant ton code:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
function ajaxFunction()
{
	var xmlHttp = getHTTPObject();
 
      if (httpObject != null) {
       xmlHttp.open("GET","NumberMembers.php",true);
  	   xmlHttp.send(null); 
       httpObject.onreadystatechange = queryResult;
      }
}

Tu instancie l'objet dans la variable xmlHttp et ensuite tu compare une
autre variable httpObject ?

D'autre part, la callback 'queryResult' n'étant pas dans la fonction 'ajaxFunction',
il n'y a pas de 'closure' donc la variable xmlHttp n'est pas visible pour 'queryResult'.

La callback est appelée avec l'instance d'XMLHttpRequest en paramètre alors
exploite le, par exemple ainsi:

Code :

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

1
2
3
4
5
 
function queryResult(xmlHttp)
{
    if(xmlHttp.readyState==4)
    ...

**n1n0x** · 03/03/2008, 10h57

MMh, désolé pour celà, je vais modifier le code de mon dernier message sur le forum, considérez qu'il s'agit d'un mauvais copier/coller en ce qui concernant les noms de variable.

Par contre pour le paramètre à ma fonction queryResult(), je n'en ai pas mis tout simplement car il n'est jamais mis dans les exemples que je rencontre sur le net. Et pourtant, il s'agit également de fonctions indépendantes. Etrange il est vrai.

J'ai effectué cette modif', mais ca ne donne tjrs rien.
???

**marcha** · 03/03/2008, 11h08

Il te faut tracer chaque étape, as-tu FireFox avec l'extension FireBug installée ?

**n1n0x** · 03/03/2008, 11h23

Ok je vais l'installer. Je ne l'avais pas et je vérifiais certains paramètres avec DOMInspector.
Je vous tient au courant si j'ai des pistes.
Dans le même temps, si quelqu'un trouve la clé de l'énigme, n'hésitez pas!

merci
A+

**n1n0x** · 03/03/2008, 11h39

Ok.
Ca marche.

J'avais une erreur "xmlHttp not defined" , et en fait j'ai modifié la fonction getHTTPObject pour rendre la variable globale, et ca passe NICKEL.

Donc en gros:

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
 
function getHTTPObject(){
 
      if (window.ActiveXObject) 
	  xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
 
      else if (window.XMLHttpRequest)
	  xmlHttp = new XMLHttpRequest();
 
      else {
  	  xmlHttp = null;
      alert("Your browser does not support AJAX.");
      }
 
 	  return xmlHttp;
      }

Ca me paraît qd même débile dans le sens où mon appel était clairement désigné depuis ma AjaxFunction():

Code :

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

var xmlHttp = getHTTPObject();

Bref, super outil ce FireBug, et Ajax me paraît très délicat....!

**Herode** · 03/03/2008, 12h02

Non, marcha a raison et ça n'a rien de débile : lorsque tu entres dans ta fonction de rappel, le contexte est 'window'. Il faut donc que dans ce contexte, les variables que tu utilises soient connues. Or, xmlHttp est une variable locale à la fonction ajaxFunction(). Pour la récupérer, la solution conseillée est de lé mémoriser dans la fermeture (closure, en anglais) de ta fonction de rappel. L'autre solution est en effet de rendre cette variable globale mais en général, on évite de 'polluer' l'espace global.

Autre chose : tu fais un sendRequest avant d'enregistrer ta fonction de rappel, ça me semble un peu casse-gueule. Mieux vaut enregistrer la fonction de rappel avant d'appelr le serveur

Donc, en reprenant ton code comme ceci et sans variable globale, tu devrais au moins voir un message de confirmation donc pouvoir aussi traiter ton AJAX :

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
 
function ajaxFunction() {
  var xmlHttp = getHTTPObject();
  if (xmlHttp != null) {
    xmlHttp.open("GET","NumberMembers.php",true);
		xmlHttp.onreadystatechange = function(){ queryResult(xmlHttp); };
		xmlHttp.send(null); 
  }
}
 
function queryResult(xhr) {
 	if ( xhr.readyState == 4 ) {
	 	alert("J'aime AJAX et je me rase tous les matins avec le DOM");
  }
}

Si ça ne marche pas, le problème vient d'ailleurs : objet xmlHttp invalide, erreur côté serveur, etc.

[edit : croisement de réponses... Je modifie un peu celle-ci pour adequation...]

**n1n0x** · 06/03/2008, 09h51

Ok Herode merci, c'est noté!
Ta syntaxe me plaît bien.

**marcha** · 06/03/2008, 10h08

Envoyé par Herode

L'autre solution est en effet de rendre cette variable globale mais en général, on évite de 'polluer' l'espace global.

J'ajouterai à ceci qu'en ce qui concerne Ajax il faut éviter d'avoir l'instance
de XmlHttpRequest en global car il n'est pas rare d'avoir des requêtes multiples,
donc plusieurs instances d'XmlHttpRequest. Donc la solution de Herod est meilleure.

A noter encore que dans certains cas c'est assez élégant de se passer
d'une fonction callback extérieure et d'écrire le code ainsi.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
function ajaxFunction() {
  var xmlHttp = getHTTPObject();
  if (xmlHttp != null) {
    xmlHttp.open("GET","NumberMembers.php",true);
    xmlHttp.onreadystatechange = function() { 
        if (  xmlHttp.readyState == 4 ) {
	  alert("J'aime AJAX et je me rase tous les matins avec le DOM");
        }
    };
    xmlHttp.send(null); 
  }
}

**blstef** · 06/03/2008, 10h29

Je pense que ton problème provient de l'appel à ton ton fichier php via Ajax...
Tu dois préciser une URL dans la fonction open et non le nom du fichier...
open(mode, url, boolean [,login, password])
mode: type de requête, GET, POST, HEAD et autres méthodes de http.
url: le chemin du fichier.
boolean: true (vrai, asynchrone) / false (faux, synchrone).
optionellement, un login et un mot de passe comme argument supplémentaires.

Donc par exemple:

Code :

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

1
2
3
4
5
6
7
8
    currentURL = URL_BASE + 'getTruc.php';
    currentURL += '?start=' + displayOffset;
    currentURL += '&count=' + NB_ROWS;
    currentURL += '&group=' + selectGroup;
    xhr = initAjax();
    xhr.onreadystatechange = updateDisplay;
    xhr.open("GET",currentURL, true);
    xhr.send(null);

Conseil: installe Firebug sous Firefox, il te permet de voir la requète
XMLHttpRequest pour ton debug.

Bon courage.
Cordialement.
Stef!

**marcha** · 06/03/2008, 10h47

Envoyé par blstef

Je pense que ton problème provient de l'appel à ton ton fichier php via Ajax...
Tu dois préciser une URL dans la fonction open et non le nom du fichier...

Le nom du fichier est un url relatif tout a fait valable.

Envoyé par blstef

Donc par exemple:

Code :

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

1
2
3
4
5
6
7
8
    currentURL = URL_BASE + 'getTruc.php';
    currentURL += '?start=' + displayOffset;
    currentURL += '&count=' + NB_ROWS;
    currentURL += '&group=' + selectGroup;
    xhr = initAjax();
    xhr.onreadystatechange = updateDisplay;
    xhr.open("GET",currentURL, true);
    xhr.send(null);

Attention, ta composition de ta query string n'encode pas les caractères spéciaux
éventuellement présents dans tes valeurs !

Envoyé par blstef

Conseil: installe Firebug sous Firefox, il te permet de voir la requète
XMLHttpRequest pour ton debug.

ça a été dit plus haut, merci de lire le post avant de répondre

[AJAX] Récupérer le traitement effectué par une page PHP appelé en AJAX

JavaScript

Discussions similaires

Partager

Partager