Babylon Design

par Samuel Le Morvan

Chez vous aussi, utilisez un Web de qualité

Tutoriels jQuery

Devenez un professionnel de la programmatique Javascript grâce à la librairie la plus efficace du marché !

Tutoriels jQuery

Apprendre et comprendre jQuery – 3/3

Introduction rapide et en douceur à l’utilisation d’une des bibliothèques JS à la mode. Ou comment ajouter une couche d’interactions simplement et proprement à vos pages.

NB : ce billet est divisé en trois parties.

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 :


Ressources


Ce que nos lecteurs en disent :

  1. Jadzi

    Bonjour,
    c’est la première fois que je poste sur ton site, que je connais depuis bien longtemps déjà. Tes tuto m’ont beaucoup aidée pour mes premiers pas sur photoshop.
    J’aime beaucoup ton site et j’ai d’ailleurs eu la surprise de le voir paraitre sur une page du tout dernier PSD magazine.
    Bonne continuation à toi ;)

  2. piXelBoy

    Bonjour,

    la lecture de cet article, bien que m’ayant éclairé un peu concernant l’utilisation de JQeury en AJAX, me laisse sur ma faim concernant la possibilité de sauvegarder des informations entrées par l’utilisateur sans formulaire.
    En effet, ne pouvant imbriquer des formulaires les uns dans les autres, je me voit contraint de gerer mes contenus differmment.
    Qu’en pensez vous ?

    • Shemu

      Je ne comprends pas vraiment ton problème.
      Les informations qu’entrent les utilisateurs passent forcement par des input/textarea ou des invites Javascript.
      Si tu veux sauvegardez des données sans valider un formulaire, tu peux passer par des enregistremetns au onkeyup par exemple.

  3. kuss

    Excellent boulot, merci !!!

Les commentaires sont clos.