Jusqu'à présent, tout ce qu'on a fait dans les chapitres précédents ne concernait que le client (le navigateur). C'est normal, c'est le principe de JavaScript.

Mais cette approche est encore trop limitée, c'est pour ça qu'on a inventé AJAX (littéralement : Javascript et XML Asynchrones). AJAX c'est le pont entre les langages serveur (PHP, .NET...) et JavaScript, cette technologie permet de faire communiquer les deux de manière asynchrone, c'est-à-dire qu'on a plus besoin de recharger toute la page mais seulement une partie de la page, en y insérant des informations qui viennent directement du serveur.

Principe

Le fonctionnement d'AJAX est très simple :

Javascript peut effectuer des requêtes HTTP (de type GET ou POST), et récupérer le texte retourné par le serveur grâce à une fonction callback.

Et XML dans tout ça ?

Pour transférer les données entre le JavaScript et PHP par exemple, on a besoin d'adopter des conventions, une sorte de protocole respecté des deux côtés, pour que JavaScript puisse interpréter ce qui est retourné par le serveur.

Et c'est XML qui a d'abord été utilisé pour ça. Mais aujourd'hui il existe d'autres formats plus simples à utiliser, notamment JSON, qui peuvent remplacer XML.

Exemple

On va tout de suite passer à la pratique, c'est ce qu'il y a de plus facile.

Donc il va nous falloir 2 choses :

• un script PHP côté serveur
  
• du javascript pour envoyer et utiliser le résultat de la requête AJAX

PHP

Pour que vous compreniez bien le principe, j'ai imaginé un scénario très simple où le client appelle le script PHP en lui passant en paramètre une chaîne de caractère (chaine).

Le script PHP met cette chaine en majuscule et la retourne au client, avec différentes informations en plus :

• date et heure courante
• version de PHP

Le tout est ensuite envoyé au client encodé en JSON (il existe 2 fonctions bien pratiques pour ça en PHP 5.2 : json_encode et json_decode).

<?php
/*
 *	Script PHP qui traite les requêtes AJAX envoyées par le client 
**/

// Récupération des paramètres
$chaine = '';
if( isset($_GET['chaine']) ){
	$chaine = $_GET['chaine'];
}

// Traitements
$retour = array(
	'chaine'	=> strtoupper($chaine),
	'date'		=> date('d/m/Y H:i:s'),
	'phpversion'=> phpversion()
);

// Envoi du retour (on renvoi le tableau $retour encodé en JSON)
header('Content-type: application/json');
echo json_encode($retour);
?>

Voici un exemple de retour de ce script :

{
   "chaine":"BONJOUR",
   "date":"15\/04\/2011 17:46:46",
   "phpversion":"5.2.10"
}

jQuery

Maintenant qu'on dispose de notre script PHP sur le serveur, il ne reste plus qu'à l'appeler côté client, en Javascript, avec jQuery !

Ça tombe bien, jQuery propose plein de fonctions pour faire de l'AJAX. Mais quoi qu'il arrive, le schéma reste toujours identique :

1. Javascript envoi une requête HTTP GET ou POST au serveur
   (il peut y joindre des paramètres, exactement comme quand on post un formulaire HTML banal).
2. Le serveur exécute le script (ex: PHP) et retourne des informations au client dans un format de votre choix :
   • Texte brut
   • XML
   • JSON
   • ...
3. Ce retour d'informations peut être récupéré en Javascript par une fonction qu'on qualifie de callback (littéralement : fonction de rappel), que l'on spécifie au moment de l'appel AJAX.

Alors LA fonction à connaître quand on fait de l'AJAX et qu'on utilise jQuery, c'est jQuery.ajax() (ouais, c'est original !).

Cette fonction est assez complexe puisqu'elle propose un nombre important de paramètres, de modes de fonctionnement différents. En particulier :

• type
  Tout simplement le type de requête HTTP : GET ou POST.
  Cela n'a pas tellement d'importance, en général on utilise POST, ici j'ai utilisé GET parce que c'est plus simple pour apprendre.
  La seule chose à garder en tête c'est que l'accès aux paramètres envoyés par Javascript sera différent côté serveur.
  
  Par exemple en PHP, si vous envoyez votre requête AJAX en mode GET, il faudra utiliser la variable $_GET, et si vous êtes en mode POST, il faudra utiliser... $_POST.
  
  
• dataType
  C'est le format du retour, ce que nous renvoie le serveur.
  
  En effet, si vous spécifiez dans votre appel, en Javascript, que le retour est en texte brut, alors que le serveur vous retourne du JSON, vous n'aurez pas d'erreur, mais vous obtiendez une simple chaîne de caractère dans le callback.
  
  Alors que si on met JSON, on aura un objet Javascript construit à partir de ce code JSON, qu'on peut manipuler comme n'importe quel autre objet Javascript, en faisant : monObjet.monAttribut.
  
  Et c'est exactement la même pour XML : soit vous récupérez le code XML dans une chaine de caractère, soit vous récupérez un objet construit à partir de ce XML.
  
  Par défaut, jQuery utilise le mode Intelligent Guess, c'est-à-dire que jQuery va essayer de deviner automatiquement le format de retour, avec les headers HTTP (Content-type).
  
  
• success
  il s'agit de la fameuse fonction callback qui est exécutée lorsque le client à reçu la réponse du serveur. Cette fonction peut prendre en paramètre une variable qu'on nomme souvent data, et qui contient les données retournées par le serveur.
  Selon ce que vous avez spécifié dans dataType, il peut d'agir d'une chaine de caractère ou d'un objet Javascript.

Bref, je vous invite à aller lire la documentation de la fonction jQuery.ajax() sur le site officiel, vous y trouverez le détail de chaque paramètre et des exemples de code.

Comme vous le voyez, la fonction .ajax() c'est un peu une usine à gaz. Alors chez jQuery ils ont eu une idée : créer toute un série de petites fonctions dérivées de .ajax() qui sont moins riches mais qui sont en contrepartie beaucoup plus simples à utiliser.

Voici les plus importantes :

• .get(url, data, success)
  Elle envoie la requête en mode GET vers url avec les paramètres qui sont spécifiés dans l'objet data (tableau associatif), et prend en 3ème paramètre la fonction de callback.
  
  
• .post(url, data, success)
  Exactement pareil que .get(), mais la méthode est POST et non pas GET.
  
  
• .getJSON(url, data, success)
  Pareil que .get(), à la seule différente que le type du retour est JSON. Ça évite les problèmes du mode Intelligent Guess qui peut se tromper si le serveur envoie de mauvais headers, comme c'est souvent le cas...

Ici, je vais utiliser la fonction jQuery.getJSON() pour mon appel AJAX. C'est une fonction qui, comme son nom l'indique, envoi la requête en GET et prend en retour du JSON :

<form id="form">
	<input name="chaine" type="text" id="chaine" value="Bonjour" />
	<input type="submit" value="Envoyer" id="handle" />
</form>

<div id="retour">
	<i>vide</i>
</div>

jQuery(document).ready(function($){
	$('#form').submit(function(e){
		// On désactive le comportement par défaut du navigateur
		// (qui consiste à appeler la page action du formulaire)
		e.preventDefault();
		
		// On envoi la requête AJAX
		$.getJSON(
			'ch6_exemple1_ajax.php',
			{chaine: $('#chaine').val()},
			function(data){
				$('#retour').hide();
				$('#retour').html('')
					.append('<b>Paramètre en majuscule</b> : '+data.chaine+'<br/>')
					.append('<b>Date</b> : '+data.date+'<br/>')
					.append('<b>Version PHP</b> : '+data.phpversion+'<br/>');
				$('#retour').fadeIn();
			}
		);
	});
});

Console Firebug, requête XHR

En pratique...

L'exemple que l'on vient de voir n'aurait aucun intérêt en pratique. En effet, que ce soit pour mettre une chaine en majuscule ou pour connaitre la date et l'heure, on n'a pas besoin du serveur. Javascript propose déjà des fonctions pour faire cela.

Dans la pratique, on utilise souvent AJAX au niveau des formulaires.

AJAX peut par exemple servir à vérifier la validité d'une adresse postale et même vous suggérer des valeurs comme le fait google :

L'intérêt de l'AJAX réside essentiellement dans l'ergonomie.

On peut faire certaines vérifications (de formulaire) plus tôt et donc prévenir l'utilisateur tout de suite, c'est moins frustrant que de devoir valider un formulaire, lire les éventuels messages style "champ XXX incorrect" puis revenir à la page précédente pour corriger...

En plus ça permet d'alléger la charge du serveur et du réseau (quelques lignes de JSON c'est moins lourd qu'un gros fichier HTML...).

Pour conclure ce chapitre et ouvrir sur le suivant, je vais vous envoyer vers un de mes sites consacré aux disques ssd sur lequel j'ai utilisé jQuery UI et de l'AJAX pour créer un comparateur de modèles :

À chaque fois qu'un des champs du formulaire de recherche est modifié, ça envoie une requête AJAX au serveur qui retourne la liste des disques SSD qui répondent aux critères de recherche, sans qu'on ait besoin de cliquer sur un bouton pour envoyer le formulaire...

Et justement, dans le prochain chapitre on va voir comment utiliser jQuery UI pour créer de véritables interfaces graphiques interactives sur une page web, comme dans une application de bureau !

Allez donc jeter un oeil sur cette page : créez une icône en 3d.

Ce tutoriel fait partie d'un cours : aller au sommaire pour voir les autres chapitres.