Le JSON et Ajax

Ancre sur cette page : le format JSON.

Le format JSON peut s’avérer très pratique dans son utilisation avec la technologie Ajax, notamment grâce à la structure des données qu’il contient ainsi qu’à la possibilité de traiter ces données à l’aide de la notation pointée.

Dans l’exemple qui suit, nous allons voir une utilisation pratique du JSON avec Ajax dans le cadre d’un script développé pour une application exploitant l’api Google Map.

Nous ne traiterons pas ici toute la partie relevant de la Google Map. Nous mettrons en avant uniquement la création, la récupération et l’exploitation du format JSON dans une application Ajax.

Utilisation du format JSON avec la technologie Ajax

Fonction qui déclenchera l'appel AJAX
function sendInfo(mes_variables) {
// traitement des variables
   ...
   ...
// Déclaration de l'url qui sera appelée pour traiter les données
   url = "page-de-traitement-des-donnees.php?param=" + mes_variables;
   ... ...
// Fonction qui déclenche un appel Ajax
   appelAjax(url);
}

Fonction AJAX appelée par la fonction ci-dessus (sendInfo)
function appelAjax(url,data) {
   var method='GET';
   if(data) method='POST';
   ...

   http.open(method, url);
   // Déclaration de la fonction à appeler pour traiter le retour Ajax
   http.onreadystatechange = handleResponse;
   ...	

   if (method=='POST') {
      http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
      http.send(data);
   }
   else
      http.send(null);

    ...
}

LE SCRIPT PHP de la page page-de-traitement-des-donnees.php

 $mes_variables =  $_GET['param'];

 //Exécution d'une requête SQL qui retourne des résultats en fonction de $mes_variables
   ...
 $reponseSQL = mysql_fetch_array(...)

 CONSTRUCTION DE LA RÉPONSE AU FORMAT JSON
 echo addMarker({
   ' lat ' : '.$reponseSQL[0].',
   ' lng ' :  '.$reponseSQL[1].',
   ' i '    : {
             ' id ' : ' '.$reponseSQL[2].' ' ,
	     ' ville ' : '  '.$reponseSQL[3].' ',
	     ' pays ' : '  '.$reponseSQL[4].' '
	  }
 });

FIN DU SCRIPT PHP

Fonction qui traitera la réponse AJAX
function handleResponse() {
// Si l'état = 4 ...
   if(http.readyState == 4){
   ...
   // On stocke la réponse Ajax dans la variable "response"
   var response = http.responseText;

   ...
   // Dans la réponse Ajax, nous renvoyons un objet JSON en paramètre d'une fonction.
   // C'est pourquoi nous appliquons la méthode eval sur la réponse.
   // Celle-ci va exécuter la fonction javascript addMarker().
   eval(response);
  }
}

Fonction qui exploitera le FORMAT JSON (grâce notamment à eval) 
function addMarker(element) {
   // On utilise ici la notation pointée pour récupérer chaque élément
   // La variable element contient les éléments de la réponse de la requête SQL
   var point = new GLatLng(element.lat,element.lng);
   var id = element.i.id;
   var ville = element.i.ville;
   var pays = element.i.pays;

   var marker = createMarker(point,element.i,...);
}

Quelques explications

Une fois les paramètres concernés récupérés (mes_variables), on appelle la fonction sendInfo() qui va s’occuper de traiter ces données (contrôle, encodage, …) et de déclencher l’appel Ajax avec l’appel à la fonction appelAjax(url).

La fonction appelAjax() est exécutée et appelle le script page-de-traitement-des-donnees.php.

La fonction de traitement de la réponse Ajax est déclarée ici et s’appelle handleResponse.

Le script php page-de-traitement-des-donnees.php s’occupe de traiter les données, d’exécuter une requête SQL et de créer, en fonction des résultats de cette requête, un objet au format JSON.

Nous sommes même allés un peu plus loin en utilisant l’objet JSON comme paramètre d’une fonction que nous avons nommé addMarker().

Ainsi, lors du traitement de la réponse Ajax par la fonction handleResponse(), on précise au script qu’il faut évaluer / exécuter la réponse en utilisant la méthode eval().

La méthode eval() déclenche l’exécution de la fonction addMarker(), qui elle s’occupe de traiter et d’extraire les éléments de réponse de l’objet retourné au format JSON.