Principe

La technologie AJAX (pour Asynchronous JavaScript And XML) permet d'effectuer des requêtes vers le serveur de façon asynchrone et sans provoquer de rechargement de page. Asynchrone veut dire pendant que la requête s'effectue la page courante reste active et il est possible de déclencher et de traîter d'autres évènements de façon concurrente. Sans rechargement de page signifie que le résultat de la requête (la réponse du serveur à la requête) est reçue et traîtée par le JavaScript et non par le navigateur. On peut résumer ce comportement avec la figure suivante :

AJAX repose sur l'objet DOM XMLHttpRequest qui permet la communication asynchrone avec le serveur. Cet objet de base est la plupart du temps caché par les librairies comme JQuery qui offrent des fonctions avec un haut niveau d'abstraction, fonctions qui permettent de s'affranchir des détails techniques. Ce sont quelques unes de ces fonctions que nous allons étudier dans la suite.

La fonction $.get

Dans cette section, nous étudions l'exemple suivant : on dispose d'une page sur les proverbes chinois et on désire afficher en boucle dans un élément de la page des proverbes chinois choisis au hasard. On dispose pour celà d'un script PHP qui, lorsqu'on l'invoque, délivre un proverbe chinois tiré au hasard dans une liste, sous la forme d'un simple texte (sans balise HTML). Les proverbes sont simplement stockés dans un fichier de texte qui contient les proverbes à raison d'un proverbe par ligne. Voilà un extrait du contenu possible pour ce fichier qu'on nomme exemple-1.txt :

Tout bonheur commence par un petit-déjeuner tranquille.
Rejeter l'essentiel pour s'attacher aux détails insignifiants.
Celui qui sait s'arrêter ne périclite jamais.
Sourire trois fois par jours rend inutile tout médicament.
Il n'y a que les fous et les Européens qui voyagent !
Ce que tu sais, apprends-le à ton voisin.
La fleur s'est fanée mais son parfum demeure.
Ne danse pas tout ce qu'on te chante.
.....

<?php
	$proverbes = file( "exemple-1.txt", FILE_IGNORE_NEW_LINES );
	echo $proverbes[ rand(0,count($proverbes) - 1) ];
?>

<div id="proverbe">
	<span>La joie est une saine nourriture.</span>
</div>

• invoquer le script PHP exemple-1.php et récupérer le prochain proverbe
• faire disparaitre l'élément contenant le proverbe courant actuellement visible
• remplacer le contenu de cet élément par le nouveau proverbe
• faire apparaitre l'élément contenant le nouveau proverbe

$(document).ready(function(){
	
	function nouveau() {
		$.get( "exemple-1.php", function( data,status ) {
			$("#proverbe span").fadeOut( function(){
				$("#proverbe span").text( data );
			});
			$("#proverbe span").fadeIn();
		});
	}
	
	setInterval( nouveau, 5000 );
});

• l'URL (relative) du script PHP invoqué exemple-1.php
• une fonction callback (ici, anonyme) qui est appelée automatiquement lorsque la requête est achevée, c'est à dire lorsque le script a terminé et envoyé son résultat au client

• data : c'est une chaîne de caractères qui est la valeur produite par le script PHP invoqué (ici le nouveau proverbe retourné par exemple-1.php)
• status : c'est un code (un entier) qui indique le status de la requête

Les fichiers de l'exemple précédent sont disponibles dans l'archive exemple-1.zip

La fonction $.post

Dans cette section, nous étudions le nouvel exemple suivant : on dispose d'une page HTML à caractère pédagogique dédiée à un sujet très technique (ici, la définition et l'étude de l'anaphase). La page contenant un grand nombre de termes techniques, on désire pouvoir donner à l'utilisateur la possibilité de visualiser la définition de certains de ces termes. Le code HTML correspondant contient des éléments spécifiques pour les termes dont la définition peut être visualisée. Voici un extrait du fichier HTML exemple-2.html :

L'anaphase est une phase très rapide de la
<span class="definition" data-def="def1">méiose</span>
et de la
<span class="definition" data-def="def2">mitose</span>
où les ....

<strong>méiose</strong> : c'est le processus de double division cellulaire permettant la formation de gamètes, ou cellules sexuelles chez les organismes eucaryotes.

<?php
	$fichier = $_POST[ "def" ] . ".htm";
	$definition = fopen("definitions/$fichier","r");
	fpassthru($definition);
?>

<div id="definition">
</div>

• associer la fonction definition à l'évènement click sur tous les éléments de classe definition (les termes dont la définition peut être visualisée)
• ajouter le style CSS nécessaire à ces mêmes éléments afin qu'ils puissent réagir au survol du pointeur
• associer une fonction anonyme à l'évènement click sur l'élément HTML récepteur qui va contenir les définitions

$(document).ready(function(){
	
    function definition() {
        $.post( "exemple-2.php",
                { def: $(this).attr( "data-def" ) },
                function(data, status) {
                    $( "#definition" ).html( data );
                    $("body").css( "background-color", "#D0D0D0" );
                    $( "#definition" ).fadeIn();
				} );
	}
	
    $( ".definition" ).click(definition);
	
    $( ".definition" ).hover(
		function(){
			$(this).css( "border-bottom", "dotted 2px red");
		},
		function(){
			$(this).css( "border-bottom", "");
    });
		
    $( "#definition" ).click(function(){
		$(this).fadeOut();
		$("body").css( "background-color", bgcolor );
	});
	
    var bgcolor = $("body").css( "background-color" );
});

{ paramètre1 : valeur1, paramètre2 : valeur2, .... }

Les fichiers de l'exemple précédent sont disponibles dans l'archive exemple-2.zip

<div id="editor">
  <p>
    <textarea />
    <input type="button" value="Save" />
    <input type="button" value="Cancel" />
  </p>
</div>

Le format JSON

Dans les exemples précédents, les valeurs fournies par les scripts PHP lors des requêtes AJAX sont toujours des chaînes de caractères. Cependant, il est parfois nécessaire de récupérer lors de ces requêtes des valeurs structurées, c'est à dire non atomiques, comme par exemple des tableaux (de valeurs). Dans cet type de situation, on peut utiliser JSON. JSON est un format d'échange de données qui permet de convertir un objet structuré en chaîne de caractères ou bien, à l'inverse, convertir une chaîne en objet structuré. Il existe des fonctions assurant ces conversions dans beaucoup de langages de programmation, dont JavaScript/JQuery bien sûr, mais aussi PHP. Le format JSON est très simple à produire. Un élément JSON peut être :

• une valeur litérale : null, true, false, une chaîne de caractères, un nombre
• un tableau : délimité par des crochets [ ], i peut contenir des éléments JSON quelconques (et donc, récursivement des tableaux)
• un objet : un objet est une liste de paire attribut : valeur délimitée par des accolades { }

var j = '[{ "nom": "Zorro", "prenom": "Alfred" }, { "nom": "Batman", "prenom": "Alphonse" }]';

var obj = $.parseJSON( j );
$( obj ).each(function() {
	alert( this.prenom + " " + this.nom );
});

• convertit la chaîne de caractères j qui représente un tableau JSON en tableau d'objets JavaScript
• affiche le contenu de chacun des objets contenus dans ce tableau, en accédant aux attributs nom et prenom

Etude d'un exemple

Nous allons étudier un petit exemple qui met en jeu la fonction $.parseJSON. On désire concevoir une page HTML qui affiche une galerie d'images des personnages de la série télévisée Les Simpsons. En cliquant sur une photo, on veut invoquer un script PHP via AJAX pour récupérer et afficher les informations relatives au personnage dont on a cliqué l'image. Le script PHP exemple-3.php a deux fonctions distinctes :

• si on l'invoque sans paramètre, il affiche la page HTML montrant le galerie des personnages
• si on l'invoque avec le paramètre GET id, il retourne les données relatives au personnage correspondant à cet id au format JSON

<div>
  <header>
    <h1>Exemple AJAX 3 : <img src="images/logo.png" /></h1>
  </header>
  <div id="info">
    		<img src="" alt="Image du personnage" />
    		<div>
    			Nom : <span id="nom"></span>
    		</div>
     		<div>
    			Prénom : <span id="prenom"></span>
    		</div>   		
     		<div>
    			Sexe : <span id="sexe"></span>
    		</div>
     		<div>
    			Age : <span id="age"></span>
    		</div>
     		<div>
    			Activité : <span id="activite"></span>
    		</div>    				   	    		
    </div>  
    <div id="gallery">
      <img id="1" src="images/homer.gif" alt="Personnage" />
      <img id="2" src="images/marge.gif" alt="Personnage" />
      .....
    </div>

{"nom":"Simpson", "prenom":"Marge", "sexe":"féminin", "age":"47", "activite":"Femme au foyer"}

<?php
	function info( $id, $pdo ) {
		$personnage = $pdo->query("SELECT * FROM `exemple3` WHERE `ID` = $id")->fetch();
		$info = [];
		$info["nom"] = $personnage['lastname'];
		$info["prenom"] = $personnage['firstname'];
		$info["sexe"] = $personnage['gender'];
		$info["age"] = $personnage['age'];
		$info["activite"] = $personnage['occupation'];
		return json_encode($info);
	}
	
	if ( isset( $_GET[ "id" ] ) ) {
		echo info( $_GET[ "id" ], $pdo );
	}
	else {
        ......
?>

$(document).ready(function(){
	
	function update( data, src ) {
		var info = $.parseJSON( data );
		$( "#nom" ).text( info.nom );
		$( "#prenom" ).text( info.prenom );
		$( "#sexe" ).text( info.sexe );
		$( "#age" ).text( info.age );
		$( "#activite" ).text( info.activite );
		$( "#info img" ).attr( "src", src );
	}
	
	function showinfo() {
		var src = $(this).attr( "src" );
		$.get( "exemple-3.php",
			   { id: $(this).attr( "id" ) },
			   function( data, status ) {
			   		update( data, src );
			   		$( "#info" ).fadeIn();
			   }
			 );
	}
	
	$( "#gallery img" ).click( showinfo );
	
	$( "#info" ).click(function() {
		$(this).fadeOut();
	});
		
});

Les fichiers de l'exemple précédent ainsi que la base données nécessaire pour les exemples et les exercices sont disponibles dans l'archive exemple-3.zip

var obj = { name: "Hulk Albert", sex: "homme" };
alert( "Je m'appelle " + obj.name + " et je suis " + obj.sex );