jQuery et AJAX, l’asynchrone en toute simplicité

Lors d’un précédent article, XMLHttpRequest et le formatage des données, nous avions pu explorer les mécanismes d’une requête HTTP en utilisant un javascript asynchrone.

Il est vrai que le code reste assez verbeux et navigateur dépendant. Nous allons voir que jQuery, une fois de plus, nous apporte une panoplie de méthodes, de propriétés, ainsi qu’une large gestion événementielle.
Cela va considérablement simplifier le travail du côté du code, en nous laissant ainsi nous focaliser plus en avant sur les fonctionnalités riches de nos applications.

.ajax(), une instruction de bas niveau

A la différence d’instructions classiques qui s’appliquent sur un sélecteur jQuery, .ajax() est une instruction de bas niveau. C’est-à-dire qu’elle ne s’applique pas à un objet jQuery, mais directement sur la librairie elle-même. On peut constater cette différence sur les lignes de code suivantes :

$('p').addClass('surbrillance')
$.ajax({})

Son utilisation est impressionnante à la fois par sa simplicité, à la fois par la richesse sans réserve des paramètres auxquels nous avons accès. Les paramètres se transmettent sous la forme d’un objet et seul ceux redéfinis viendront écraser leur version par défaut. A noter que l’ensemble des valeurs par défaut peut être redéfini en usant de la méthode .ajaxSetup().

Seules deux informations sont nécessaires pour lancer la mécanique. La première indiquant l’url à laquelle la requête doit être envoyée et la seconde précisant le callback à interpeller une fois les données récupérées. Ce callback peut être affiché selon deux méthodes, soit sous forme de propriété de l’appel .ajax(), soit au travers d’une fonction chaînée à la première. Dans le cas de l’utilisation d’une propriété, sous forme d’Ajax Events, il est possible de passer, soit une chaîne de caractères (sans les parenthèses), soit un tableau de chaînes… auquel cas les fonctions seront invoquées dans l’ordre de leur énumération.

Vous pouvez le constater depuis la page d’illustration :

$(document).ready(function(e) {
	$.ajax({
		url: "donnees-jquery.php",
		complete:[retour1, retour2]
	}).done(function( arg ) {
		alert( "Données : " + arg ); 
	});
});
function retour1(){
	alert("retour 1")
}
function retour2(){
	alert("retour 2")
}

Datas envoyés

Lors de l’envoi de la requête, qu’il s’agisse d’une requête de type POST ou GET, il peut être nécessaire d’envoyer des données afin d’affiner, ou préciser la recherche. Ces données, sous forme de paire propriété / valeur, peuvent être mentionnées sous forme de chaînes de caractères, séparées alors par une esperluette '&', ou bien directement sous forme d’un objet javascript. Dès lors que des données sont transmises, il est important de spécifier le type de la requête, afin que le serveur puisse savoir comment les réceptionner (GET par défaut) :

var obj = {envoi:'coucou'}
$.ajax({
	url: "donnees-jquery.php",
	type:"POST",
	data:obj
}).done(function( arg ) {
	alert( "Données : " + arg ); 
});

Du côté du serveur, un simple script de renvoi à l’expéditeur. Vous pouvez également consulter ce résultat sur la page d’illustration :

<?php
	$retour = $_POST['envoi'];
	echo $retour;	
?>

Datas reçus

De manière automatique (ou en supposition intelligente), jQuery va se baser sur le type des données reçues, afin de les interpréter correctement. Cependant, il est possible de définir le type de données attendues en retour, en usant de la propriété dataType. Ce type peut être de l’information non structurée, comme text, script, ou bien des fragments structurés, qu’il s’agisse de xml, html, json ou encore jsonp.

Voir la page d’illustration recevant des données au format JSON :

$.ajax({
	url: "donnees-jquery.php",
	dataType:'json'
}).done(function( arg ) {
	alert( "Données : " + arg ); 
});

Tête à tête entre entêtes HTTP

Lors de l’envoi d’une requête il peut être important d’affiner le protocole HTTP en précisant certaines informations, aussi bien lors de l’envoi que lors de la réception. Ceci peut permettre un échange bas niveau entre client et serveur, avant toute expédition de données.

Par exemple, nous avions vu lors de l’article XMLHttpRequest et le formatage des données, que c’était là un des moyens pour définir l’encodage des données transmises au serveur.
Afin d’illustrer ce dialogue, prenons un simple envoi d’entête depuis jQuery pour la partie client et dans une instruction PHP du côté serveur. Ajoutons également une entête de réponse. Suivons cet échange depuis la console firebug en lançant la page d’illustration.

Pour s’assurer de l’initialisation de l’entête avant tout envoi, nous devons utiliser la propriété beforeSend de l’instruction .ajax(). La propriété complète suffira pour écouter le retour :

$.ajax({
	url: "donnees-jquery.php",
	beforeSend: function(xhr) {
		xhr.setRequestHeader("cle","valeur")
	},
	complete: function (xhr, datas){
		alert(xhr.getResponseHeader("AutreCle"))
	}
})

Et côté serveur :

<?php 
	header( 'AutreCle:AutreValeur' );
?>

Les instructions se déclinent en fonction des besoins…

Bien souvent nous n’avons besoin que d’une infime partie des capacités d’une requête asynchrone. Cela se résume généralement à la récupération de quelques données, afin de compléter et enrichir l’expérience utilisateur. En ce sens, jQuery nous propose diverses alternatives, car nul n’est besoin d’avoir systématiquement recours à toutes les possibilités que nous offre la méthode .ajax().

La déclinaison propose des accès raccourcis aux méthodes GET et POST, mais également un accès à des scripts ou à du JSON de manière simplifié. Les codes à mettre en place sont en effet on ne peut plus simple et se résument à l’appel du contenu en ligne, au passage d’éventuels paramètres et de la fonction de rappel. Nous avons donc accès aussi bien à $.get(), $.post(), $.getJSON() qu’à $.getScript() :

$.get("donnees-jquery.php", {propriété:valeur,[...]})
.done(function(arg) {
  alert( "Données : " + arg );
});

La déclinaison ne s’arrête pas là, nous avons également un cinquième raccourci, .load(), qui permet lui, de directement charger le contenu récupéré dans l’élément ciblé par le sélecteur. Il ne s’agit pas là d’une instruction de bas niveau. Le type de requête POST ou GET dépendra de l’envoi ou non de paramètres sous forme d’objets. Une fonction de rappel est possible et recevra les données comme les instructions précédentes sous forme d’arguments.

$('cible').load("donnees-jquery.php", {propriété:valeur,[...]}, function(arg) {
  alert( "Opération terminée : " + arg );
});

Ce type d’instruction, .load(),peut également être extrêmement pratique lors du couplage avec des librairies de type jQuery UI.