Le principe de l'AJAX

Certains le voit comme un des piliers du web 2.0, d'autres comme une hérésie amenant de grandes failles de sécurités pour les applications non protégées, ce qui est sûr c'est que l'AJAX (Asynchronous Javascript And XML) est une notion fondamentale du web d'aujourd'hui et qu'il est indispensable de la connaître.

Quelques définitions

• DOM : Le Document Object Model permet de manipuler un document XML (donc HTML) en le représentant avec ses données sous forme d'arbre. Notez que c'est un outil qui sera géré par le navigateur et que même si vous ne comprenez pas cette notion vous pourrez suivre le reste du tutoriel.


• XMLHttpRequest : C'est un objet qui permet d'obtenir des données dans différents formats (XML, JSON...) à l'aide de requêtes HTTP. A la base c'est un objet ActiveX développé par Microsoft mais, ici, nous nous intéresserons à son implémentation JavaScript.


• Client HTTP : C'est vous, ou plus particulièrement votre navigateur web.


• Serveur HTTP : C'est la machine qui contient le site web et retourne les données à quiconque lui envoie une requête.


• Asynchrone : Dans le cas de l'AJAX, l'asynchronisme signifie que l'envoie d'une requête vers le serveur est non bloquant. Le client peut continuer à effectuer des opérations, la réponse arrivera toute seule lorsque le serveur aura terminé ses calculs.

Le but de l'AJAX

Le but principal de l'AJAX est de pouvoir demander des informations à un serveur sans avoir besoin de rafraîchir l'intégralité de la page.

Les effets sont multiples :

• Temps de chargement réduit.


• Utilisation de la bande passante réduite.


• Un effet design épuré.

Le principe de l'AJAX

On considèrera que l'objet XmlHttpRequest est initialisé lors du chargement de la page. Il est important de connaître XmlHttpRequest puisque l'AJAX est basé dessus, néanmoins il est rare de nos jours que nous aillons à traiter directement avec lui.

Comme exemple d'application nous allons prendre le bouton j'aime de cette page (voir au dessus du tutoriel). Ce que l'on veut c'est que lors d'un clic sur le bouton +1, le compteur dans la base de données soit incrémenté de 1 puis soit affiché entre les crochets dans l'espace à côté du bouton.

• Vous cliquez sur le bouton [+1], ce qui déclenche un évènement onClick et fait appel à une fonction JavaScript voter().


• Cette fonction envoie une requête au serveur contenant un paramètre qui a pour valeur "j'aime" (parce que oui, certaines personnes malfaisantes peuvent ne pas aimer ).


• Le serveur traite la requête, incrémente le compteur et affiche la valeur. Cette manipulation peut être faite dans n'importe quel langage serveur (dans notre exemple ce sera PHP).


• La valeur revient donc vers le client à travers la réponse du serveur. Nous revoilà dans la fonction voter(). Cette dernière cherche la zone entre les crochets et y affiche la valeur.

Le lien avec les définitions du dessus :

• XmlHttpRequest permet l'envoie et la reception des requêtes client-serveur en mode asynchrone (ou pas d'ailleurs).


• Le DOM permet la détection de l'évènement onClick et l'affichage de la valeur entre les crochet. Vous voyez que c'est JavaScript qui traitera avec le DOM pour nous.

Place à la pratique

Comme dit précédemment, il est rare de nos jours de devoir faire directement appel à l'objet XmlHttpRequest, nous préférerons utiliser une bibliothèque JavaScript qui simplifiera la syntaxe et facilitera l'utilisation. Dans notre cas nous allons utiliser JQuery.

<!-- Inclusion du fichier voter.js pour pouvoir utiliser la fonction voter(). -->
<script type="text/javascript" src="js/voter.js"></script>

<!-- Le type n'est pas "submit", un formulaire en AJAX n'a pas besoin d'être entre des balises form. -->
<input type="button" onClick="voter(id);" value="+1"/>
	

function voter(id)
{	
	/* Envoie d'une requête vers la page ajax_voter.php.
	** Les paramètres seront accessibles dans $_POST
	*/	
	$.post("ajax_voter.php", {ACTION: "j'aime", ARTICLE: id},
	function(data)
	{
	if  (data.indexOf('__OK__') != -1)
	{
	/* S'il n'y a pas d'erreur, 
	** on affiche le compteur dans la zone.
	*/
	var zone = $('#action');
	zone.innerHTML = data;
	}
	else if  (data.indexOf('__PAS_OK__') != -1)
	{
	alert("erreur");
	}
	});

}
	

/* Bien sûr ce code n'est pas sécurisé et 
** ne correspond pas à la manière dont c'est fait sur Informatix, 
** l'exemple ci-dessous montre seulement 
** le cas ou tout les paramètres sont corrects etc...
**
** Ce cas considère que vous êtes dans un système MVC (Model View Controller)
** mais il est possible de simplement faire une requête via mysqli_query etc...
*/
$action = $_POST['action'];

$article = new Article($_POST['ARTICLE']);

/* Si $action = 'jaime' alors on fait appel à l'attribut jaime de l'objet article. */
$article->{$action} ++;
$article->save();

echo '<!-- __OK__ -->' . $article->jaime;
	

Les inconvénients de l'AJAX

• Risque de dégradation de l'accessibilité.


• Des points d'entrée supplémentaires à sécuriser.


• Certains utilisateurs désactivent JavaScript.