jQuery permet de créer en quelques lignes des requêtes AJAX sans se soucier de l’inter-compatitibilité des navigateurs. Également, à l’aide de paramètres simples, il est possible de personnaliser le formatage de ses requêtes.

La méthode $.ajax()

Fonction de base

Cette fonction est sûrement celle que vous utiliserez le plus avec jQuery. Déterminez les trois paramètres de base : la méthode utilisée (POST ou GET), l’URL de la page appelée et l’action à effectuer.

$.ajax({
	type: "POST",
	url: "test.html",
	success:
    function(retour){
		alert("Données retournées : " + retour );
	}
});

Requête sur un lien

Généralement, on utilise des requêtes AJAX sur des liens hypertextes (balise <a>) afin d’avoir des pages tout de même accessible si le Javascript est désactivé. Ainsi, on peut automatiser la mise en place de requêtes en récupérant l’attribut href de chaque lien avec l’appel $(this).attr("href").

Dans cet exemple, lorsque l’on clique sur un lien possédant la classe CSS test, le code HTML de la page liée s’affiche dans la balise possédant l’id recipient.

$("a.test").click(function() {
	$.ajax({
		type: "POST",
		url: $(this).attr("href"),
		success: function(retour){
			$("#recipient").empty().append(retour);
		}
	});
	return false;
});

Requête sur un formulaire

De la même façon, on peut envoyer un formulaire en AJAX lors de sa soumission :

$("form.test").submit(function() {
s = $(this).serialize(); 
$.ajax({
		type: "POST",
 		data: s,
 		url: $(this).attr("action"),
 		success: function(retour){ 
			$("#recipient").empty().append(retour);
 		}
 	});
return false;
 });

À noter que pour un formulaire, il faut le sérialiser – cad récupérer tous les valeurs du formulaire – et passer ses données dans le paramètre data.

Paramètres de la fonction $.ajax()

datatype

• xml: Retourne un document XML pouvant être réutilisé via jQuery.
• html: Retourne un document HTML comme du text sans mise en formee où les scripts sont interprétrés.
• script: Retourne une réponse JS comme du texte sans mise en forme.
• json: Interpréte une réponse JSON et retourne un objet Javascript.

url

L’URL à cibler.

type

Le type de requête POST or GET (GET par défaut).

dataType

Format de réponse attendu.

ifModified

Autorise la response si elle a changé depuis la dernière requête (false par défaut).

timeout

Redéfini le temps de réponse maximum.

global

Utilisation automatique des déclencheurs d’événements (true par défaut).

error

Fonction appelée en cas d’erreur.

success

Fonction appelée en cas de succès.

complete

Fonction appelée en fin de requête, peu importe le succès ou non.

data

Données envoyées en GET.

contentType

Type de contenu envoyé (application/x-www-form-urlencoded par défaut).

processData

Option à passer en false si vous souhaitez envoyer des DOMDocuments.

async

Option d’asynchronisation (true par défaut).

beforeSend

Fonction appelée avant la requête.

Les fonctions-raccourcis

Il existe aussi plusieurs fonctions prédéfinies ayant pour but d’éviter de configurer ses requêtes AJAX de manière hasardeuse. Ainsi vous pouvez utiliser :

$.post("test.php");

Effectue un requête en POST sur la page test.php.

$.get("test.php");

Effectue un requête en GET sur la page test.php.

$.getIfModified("test.php");

Effectue un requête en GET sur la page test.php si elle a changé.

$.getJSON("test.js", function(json){alert(json);});

Effectue un requête en JSON sur le script test.js.

$.getScript("test.js");

Va cherche le script test.js.

Les fonctions solitaires

À l’aide de quelques fonctions ésseulées, il est possible de faire corréler des éléments HTML avec l’AJAX. Ainsi, on peut appliquer des comportements à des éléments HTML lors de l’execution de requêtes AJAX. Ceci sert par exemple pour afficher une boîte de dialogue à chaque requête de l’utilisateur.

ajaxComplete()

Affiche un contenu lorsque la requête est terminée.

$("#msg").ajaxComplete(function(request, settings){
   $(this).append("Requête terminée.");
});

ajaxError()

Affiche un contenu lorsque la requête retourne une erreur.

$("#msg").ajaxError(function(request, settings){
   $(this).append("Erreur de retour.");
});

ajaxSend()

Affiche un contenu lors du début du lancement de la requête.

$("#msg").ajaxSend(function(request, settings){
   $(this).append("Début du lancement de la requête.");
});

ajaxStart()

Affiche un contenu lorsque la requête est lancée.

$("#msg").ajaxStart(function(){
   $(this).show();
});

ajaxStop()

Affiche un contenu lorsque la requête est arrêtée.

$("#msg").ajaxStop(function(){
   $(this).hide();
});

ajaxSuccess()

Affiche un contenu lorsque la requête est exécutée avec succès.

$("#msg").ajaxSuccess(function(request, settings){
   $(this).append("Requête réussie.");
});

load()

Charge un contenu externe.

$("#msg").load("test.html");

loadIfModified()

Charge un contenu externe s’il a été modifé.

$("#msg").loadIfModified("test.html");

Limitations et inconvénients

jQuery, nous l’avons vu, est une excellente bibliothèque JavaScript. Cependant, on oublie trop souvent qu’elle présente aussi quelques défauts.

Défauts inhérents à la notion de bibliothèque

Comme pour toutes les bibliothèques (JS, CSS ou autres), le but est de simplifier à l’utilisateur la tâche. Simplification, raccourcis, comportements automatiques… il faut bien l’avouer, cela donne aussi moins de contrôle sur le code produit. Aussi à moins de pouvoir parcourir les entrailles de jQuery en détail, il faut s’attendre à faire quelques concessions sur vos méthodes habituelles de travail.

De la même manière, savoir utiliser de jQuery ne fait pas tout. S’il vous manque des bases importantes sur le HTML, le CSS ou même l’accessibilité, jQuery ne fera qu’empirer tout ça. Il faut avant tout savoir ce que l’on fait et ce que ça implique.

Donc tien de tel qu’une bonne expérience en JS ou autre avant d’appréhender au mieux la bibliothèque.

Défauts de la bibliothèque jQuery

La projet est porté par une grande communauté, nous l’avons vu. Revers de la médaille, il va être très difficile d’organiser tout se petit monde. Ainsi, au fil de l’évolution de la bibliothèque, on pourra trouver des incompatibilités avec les plugins, des méthodes qui jusqu’alors marchaient très bien qui sont abandonnées, etc.

Projet dynamique implique aussi réactivité de votre part. Prenez également bien soin à choisir les bons plugins.

Alternatives

Bon nombre de bibliothèques fleurissent actuellement, de la très simple à la très complexe. Et parfois bien documentées. Aussi n’hésitez pas à tester, ne serait-ce que pour vous faire une idée :

• Ext JS,
• Yahoo! User Interface,
• Prototype,
• Dojo,
• mootools,
• Mochikit,
• base2,
• etc.

Ressources

• jQuery
• jQuery sur Les intégristes
• Visual jQuery
• jQuery.info