jQuery et Ajax

 English version available

Ajax

Apparu en 2005, Ajax (Asynchronous JavaScript and XML) regroupe un ensemble de technologies déjà existantes, notamment HTML, JavaScript et XML. Avec Ajax, les applications web peuvent mettre à jour partiellement la page affichée par le navigateur sans avoir à recharger la page entière. L’interface graphique peut ainsi évoluer par petits bouts, devenant ainsi plus interactive et reproduisant la sensation d’utiliser une application type client lourd. Nous parlons alors d’applications RIA (Rich Internet Applications). Le terme « Asynchronous » signifie que l’exécution du JavaScript continue sans attendre la réponse du serveur qui sera traitée quand elle arrivera. En mode synchrone, le navigateur est « gelé » en attendant la réponse du serveur.

jQuery

Initié en 2006, le projet jQuery est une bibliothèque JavaScript libre devenue très populaire. Elle permet de développer des scripts JavaScript rapidement et de manière concise, le slogan du site « Write less, do more. » (Ecrire moins, faire plus) est bien adapté ! jQuery intègre la gestion des évènements, des animations, des interactions Ajax, des selectors CSS… De plus, de nombreux plugins existent et la librairie fonctionne sur la plupart des navigateurs (cross-browser).

Ajax avec jQuery

Il y a plusieurs possibilités pour faire de l’Ajax avec jQuery.


$.get(url, data, callback, type)

$.get() permet de faire des requêtes de type GET. Il récupère la réponse dans de nombreux formats tels que XML, Html, Text, Script et Json.

	function ajouter_elements_table(elementIds) {
		$.get( 'demoajax.php', 
				{	
					'cmd': 'ajouterElements', 
					'elementSelecteds': elementIds
				}, 
				function (data) { refresh_table() });
	}

$.post(url, data, callback, type)

$.post() est l’équivalent de $.get(), mais les requêtes sont de type POST.


$.ajax(options)

$.get() et $.post() sont des implémentations plutôt haut niveau, plus faciles et simples à utiliser pour le développeur. Cependant, elles n’offrent pas autant de fonctionnalités que $.ajax(). Par exemple, la gestion de « callback » lorsque des erreurs interviennent, des options sur le cache, etc. $.ajax() ne prend qu’un seul argument qui est un objet composé de couples « clé/valeur », utilisé pour initialiser et gérer la requête.

	function ajouter_elements_table(elementIds) {
		$.ajax({ url : 'demoajax.php', 
				data : {	
					'cmd': 'ajouterElements', 
					'elementSelecteds': elementIds
				},
				cache : false,
				success : function (data) { refresh_table() }});
	}

Problème de cache avec Ajax sous Internet Explorer

J’ai travaillé sur un projet qui utilisait jQuery et des appels Ajax. J’ai utilisé la méthode $.get() pour traiter mes appels simples. Cela fonctionnait parfaitement sous Firefox, Chrome et même Internet Explorer 6. Cependant, je me suis rendu compte que sous IE7, 8 et 9, j’avais des comportements un peu aléatoires.
Après quelques recherches, j’ai réalisé qu’il s’agissait d’un problème de cache. La première fois, l’appel Ajax est correctement traité. La seconde fois, le serveur n’est pas sollicité, mais je me retrouve quand même avec la même réponse…
Désormais, je priviligie l’utilisation de $.ajax() avec l’option « cache: false ».