Ajax (Asynchroneous Javascript And XML) et l'introduction de la requête XMLHttpRequest par Microsoft permettent maintenant des interactions asynchrones entre la page et le serveur sans avoir à recharger la page. J'y décrit la fonction globale $.ajax() qui ne crée pas un objet jQuery mais bien une requête XMLHttpRequest. On ne manipule plus le DOM, on gère une interface asynchrone avec le serveur Web. On est dans un monde nouveau, le Web 2.0.

Depuis l'origine du Web jusqu'à l'arrivée du Web 2.0, l'interaction entre l'internaute et le serveur Web était marquée par des temps d'arrêt pendant lesquels le premier attendait que le second ait rechargé la page. Voici ce qui arrive dans le modèle Web 1.0:

1. On saisit une adresse dans notre navigateur;
2. Cette "requête" finie par arriver sur le serveur web qui héberge la page en question;
3. Le serveur nous retourne du texte au format HTML ou XHTML et éventuellement des images, feuilles de style, fichiers JavaScript, applets java ....
4. Notre navigateur les interprète et nous affiche la page.
5. Nous sommes déconnecté du serveur web.

Ce modèle est bien illustré dans le diagramme de la Figure 1 tiré de Web 2.0 Introduction à Ajax et à quelques technologies AJAX/Java DWR (Direct Web toolkit) Google Web Toolkit (GWT).

Diagramme montant l'interaction client-serveur d'une application Web "classique"

Avec le Web 2.0, les choses ont beaucoup changé. Le chargement d'une photo sur Facebook s'effectue en arrière plan sans que la page se recharge. Lorsqu'on effectue une recherche sur Google, on remarque que les résultats de la recherche sont mis à jour en même temps qu'on tape des caractères supplémentaires. Comment cela se fait-il? Avec Ajax, le fureteur peut aller chercher des données sur le serveur d'une façon transparente à l'usager sans interférer avec l'affichage ou le comportement de la page.

Généralités sur Ajax

Ajax (Asynchroneous Javascript And XML) est bien plus que les technologies mentionnées dans son acronyme. Il s'agît de l'usage de technologies Web pour transformer la soumission des applications Web traditionnelles en une expérience usager qui ressemble à celle ressentie dans les applications bureautiques (desktop applications) ordinaires. Ajax évite ainsi un aller-retour de requêtes entre le poste client et le serveur Web et les période de latence qui surviennent lors du chargement.

C'est un regroupement de technologies qui utilise

• HTML et CSS pour inclure l'information sur les balises HTML et les règles de style CSS;
• Javascript pour accéder aux éléments du DOM afin d'afficher et d'interagir avec l'information ainsi présentée;
• une méthode pour échanger des données avec le serveur Web de manière asynchrone évitant ainsi des recharges de pages. Habituellement, Ajax utilise l'objet XMLHttpRequest (XHR) pour cet échange;
• un format pour les données envoyées au fureteur. Les formats les plus communs incluent XML, l'HTML préformaté, du texte ou du JSON (JavaScript Object Notation). Ces données peuvent être créées dynamiquement au moyen d'un langage de script du côté serveur.

Avant de procéder plus loin sur le sujet, quelques explications s'imposent sur les termes et concepts nouveaux utilisés dans la liste qui précède. Les voici:

Requête asynchrone vs synchrone

Lorsqu'on accède à une page d'un site web, on ne peut rien faire tant que le serveur Web ne nous a pas envoyé la page: on doit attendre. On dit alors que le requête est synchrone. A l'opposé, avec AJAX, on peut faire des requêtes au serveur et continuer à faire ce qu'on souhaite sur la page sans attendre la réponse du serveur. La requête est alors asynchrone.

L'objet XMLHttpRequest

AJAX est basé sur l'objet XMLHttpRequest qui permet de faire une requête via Javascript à un serveur HTTP et d'obtenir des données au format XML, JSON, mais aussi HTML, ou encore texte simple à l'aide de requêtes HTTP.

Il a d'abord été développé par Microsoft, en tant qu'objet ActiveX, pour Internet Explorer 5.0. (septembre 1998). Il a ensuite été repris et implémenté successivement sous Mozilla 1.0 (mai 2002), Safari 1.2 (février 2004), Konqueror 3.4 (mars 2005) puis Opera 8.0 (avril 2005). En raison de ces implémentations plutôt récentes, l'objet n'est pas supporté par les navigateurs dits de « vieille génération ».

En avril 2006, il a été proposé pour devenir une recommandation du W3C. L'utilisation de XMLHttpRequest nécessite l'utilisation du langage JavaScript. Les navigateurs l'implémentent de différentes façons : ActiveX pour Internet Explorer, objet pour les autres. La création de l'objet se fait donc différemment selon le navigateur. De plus, pour créer l'ActiveX sous Internet Explorer, il est possible de tester plusieurs versions. Toutefois, après la création de l'objet, les méthodes et attributs sont les mêmes pour tous les navigateurs [Wikipedia].

Voici la façon standard de créer cet objet en Javascript:

	var myRequest;
	if (window.XMLHttpRequest){ // création d'un objet XHR
	  myRequest = new XMLHttpRequest();
	} else {
	  myRequest = new ActiveXObject("Microsoft.XMLHTTP");}

JSON

JSON (JavaScript Object Notation), créé par Douglas Crockford entre 2002 et 2005, est un format de données textuelle générique dérivé de la notation des objets du langage ECMAScript. Il permet de représenter de l’information structurée comme le permet XML par exemple [Wikipedia]. Le JSON qui suit

{
  "menu": {
    "id": "file",
    "value": "File",
    "popup": {
      "menuitem": [
        { "value": "New", "onclick": "CreateNewDoc()" },
        { "value": "Open", "onclick": "OpenDoc()" },
        { "value": "Close", "onclick": "CloseDoc()" }
      ]
    }
  }
}

est l'équivalent du XML qui suit

 <menu id="file" value="File">
   <popup>
     <menuitem value="New" onclick="CreateNewDoc()" />
     <menuitem value="Open" onclick="OpenDoc()" />
     <menuitem value="Close" onclick="CloseDoc()" />
   </popup>
 </menu>

Ajax et Javascript

L'utilisation d'Ajax avec Javascript requiert de nombreux trucs puisque tout les fureteurs n'interprètent pas les requêtes Ajax de la même façon. Je n'irai pas plus loin dans cette rubrique car, à ce stage-ci, je veux me servir d'Ajax, comprendre comment Javascript intervient. Je n'en demande pas plus, d'autant que le "jQuery - AJAX Introduction" dit ce qui suit;

« Writing regular AJAX code can be a bit tricky, because different browsers have different syntax for AJAX implementation. This means that you will have to write extra code to test for different browsers. However, the jQuery team has taken care of this for us, so that we can write AJAX functionality with only one single line of code. » [jQuery - AJAX Introduction]

Je passe tout de suite à jQuery.

Ajax, jQuery et $.ajax()

La bibliothèque jQuery de Javascript ajoute des avantages considérables pour l'atteinte et la manipulation des objets du DOM, pour la gestion des événements et aussi pour Ajax qui est ainsi rendu facile. Pour les communications asynchrones avec le serveur, jQuery offre autour d'une douzaine de méthodes pour extraire des données Ajax (XML, JSON, JSONP, script, HTML ou text) et la plupart d'entre elles ne sont que des façons "sténographiques" d'utiliser la méthode $.ajax().

La fonction $.ajax()

Attention! $.ajax() fait bande à part dans le monde de jQuery. Contrairement aux autres méthodes de jQuery, elle ne crée pas un objet jQuery mais une requête XMLHttpRequest. On ne manipule plus le DOM, on gère une interface asynchrone avec le serveur Web. On est dans un monde nouveau, le Web 2.0.

$.ajax() est une méthode de bas niveau. C'est la méthode la plus compliquée à paramétrer tout en étant sans conteste la plus révolutionnaire des fonctions de jQuery: elle fournit le moyen de charger dynamiquement du contenu, des scripts et des données et de les utiliser sans avoir à recharger la page et attendre que le serveur ait fini de répondre à la requête.

Cette méthode renvoie une référence sur l'objet XMLHttpRequest qui est créé lors de son exécution. On l'appelle de la façon suivante

$(document).ready(function() {
  jQuery.ajax({
    // Les paramètres ici (objet JSON)
  });
});

et sa syntaxe est la suivante:

$.ajax(objet options);

où le paramètre "options" est un objet JSON contenant des paramètres affectant le comportement de la méthode. Commençons par les paramètres essentiels, sans qui la fonction n'aurait aucun sens, à savoir:

• Le type de requête (GET, POST, PUT, DELETE);
• L'URL vers laquelle on va envoyer la requête;
• Les données (data) que l'on souhaite envoyer au format "{param1: 'value1'}";
• Le type de données (dataType) qu'on s'attend à recevoir "xml/html/script/json/jsonp";
• Que faire en cas de succès de la requête; et
• Que faire en cas d'erreur de la requête.

Voici un exemple type de paramètres passés à la fonction $.ajax():

jQuery.ajax({
  cache: false; // empêche Ajax de mettre la requête en "cache"
  type: 'GET', // Le type de la requete
  url: 'http://www.monsite.com/serveur.php',// L'url vers laquelle la requete est envoyée
  data: { // Les données que l'on souhaite envoyer au serveur au format JSON
    username: 'Moi',
    age: 19,
    admin: true
  }, 
  success: function(data, textStatus, jqXHR) { // en cas de succès
    // La reponse du serveur est contenu dans data
    // On peut faire ce qu'on veut avec ici
  },
  error: function(jqXHR, textStatus, errorThrown) { // en cas d'échec
    // Une erreur s'est produite lors de la requete
  }
});

Comme on peut le constater, les données sont transmises au serveur à l'aide du paramètre data. Ce paramètre est optionnel et si on n'a rien à envoyer au serveur, on peut l'omettre. Comme ici, le type GET est utilisé pour faire la requête, les paramètres de data seront passé dans l'url.

En cas de succès de la requête, le paramètre "success" introduit une fonction de rappel qui est exécutée alors que dans le cas d'un échec, le paramètre "error" introduit une autre fonction de rappel. Depuis jQuery 1.5, cette façon de faire a été remplacée et elle a été dépréciée depuis jQuery 1.8 [jQuery documentation].

C'est parce qu'une nouveauté a été ajouté à jQuery 1.5: l'objet différé (deferred object) qui découple la logique qui dépend du résultat d'une tâche de la tâche elle-même. Il s'agît d'un objet qui permet de travailler avec des valeur renvoyées qui peuvent ne pas être présentes dans l'immédiat, comme le résultat d'une requête Ajax asynchrone. Il permet de plus d'enregistrer plusieurs gestionnaires d'événements, ce qui n'était pas permis avant jQuery 1.5 [plus d'information dans la documentation de jQuery "Using Deferreds in jQuery 1.5"].

En fait, $.ajax() retourne un objet différé sur lequel on peut chaîner trois fonctions

• .done() -qui s'exécute lorsque l'appel AJAX réussit. Cette fonction de rappel prend trois arguments:
  • data - donnée renvoyée par le serveur dans le format spécifié par dataType;
  • textStatus - une chaîne décrivant l'état de la requête; et
  • jqXHR - un super set de l'objet natif XMLHttpRequest que jQuery utilise pour faire la requête AJAX.
• .fail() - qui s'exécute lorsque l'appel AJAX échoue. Cette fonction de rappel prend trois arguments:
  • jqXHR - comme plus haut;
  • testStatus - le status décrivant l'erreur ("timeout", "error", "notmodified" ou "parseerror"); et
  • errorThrown - L'exceptions'il y en a une.
• .always() - qui s'exécute après l'exécution d'une des deux autres. Cette fonction de rappel prend deux arguments: jqXHR et textStatus (les mêmes paramètres que pour .fail())

Même si les paramètres "success", "error" et "complete" continuent de fonctionner, il est maintenant préférable d'utiliser .done(), .fail() et .always() qui sont toutes trois des méthodes qui peuvent être chaînées avec $.ajax(). On écrira donc l'exemple cité plus haut comme suit.

jQuery.ajax({
  cache: false; // empêche Ajax de mettre la requête en "cache"
  type: 'GET', // Le type de la requête
  url: 'http://www.monsite.com/serveur.php',// L'url vers laquelle la requete est envoyée
  data: { // Les données que l'on souhaite envoyer au serveur au format JSON
    username: 'Moi',
    age: 19,
    admin: true
  }
}).done(function(data) { // en cas de succès
    // La reponse du serveur est contenu dans data
    // On peut faire ce qu'on veut avec ici
  }
}).fail(function(jqXHR, textStatus) { // en cas d'échec
    // Une erreur s'est produite lors de la requete
  }
});

Dans l'exemple qui précède, on n'a qu'une seule tâche à accomplir mais, si on creuse un peu, on peut imaginer des scénarios où on voudrait appeler une fonction de rappel après que plusieurs requêtes AHAX aient été complétées. C'est alors que la méthode référée .when() peut être utilisée.

Détail des options

J'ai dit que la méthode $.ajax() était compliquée. Elle l'est à cause du nombre de'options qu'elle peut accepter dans son objet JSON. Les options les plus communément utilisées sont:

Les options qui suivent définissent les fonctions qui seront appelées à différentes phases de la requête Ajax.

Depuis jQuery 1.8, les options "success", "error" et "complete" ont été dépréciées et je ne les ai pas insérées dans la liste. Elles fonctionnent encore mais sont maintenant remplacées par les méthodes .done(), .fail() et .always() qui peuvent être chaînées à la méthode $.ajax().

Les options qui suivent ne sont pas beaucoup utilisées mais elle peuvent être utilisées.

Différences entre GET et POST

Comme pour les formulaires web, avec AJAX, il existe principalement deux méthodes de communications: GET et POST. Ces méthodes sont spécifiées dans l'option "type" de la fonctin $.ajax().

• GET - On utilise GET pour recevoir des données du serveur sans changer son état. Ça veut dire que le script utilisé par la requête AJAX ne va pas modifier les données du serveur;
• POST - On utilise POST pour envoyer des données au serveur, données qui vont potentiellement modifier son état. Lorsque la méthode POST est utilisée, le fureteur sait que l'état du serveur peut être modifié et il ne va pas utiliser le "cache" (ce qui n'est pas le cas dans la méthode POST).

Exemples

Passons maintenant à quelques exemples.

Exemple 1- Trouver l'adresse ip correspondant à un nom de domaine

Voici un exemple simple qui permet de trouver l'adresse IP correspondant à un nom de domaine.

Le code jQuery qui est exécuté lorsque le bouton est cliqué est le suivant:

$('#searchipbutton').click(function(){
	 $.ajax({
		 type: "GET",
		 url: "../ajax/getip.php",
		 data: 'ip=' + $('#searchip').val()
  }).done(function(msg){
	 if (msg != $('#searchip').val())
		 $('#resultip').html(msg);
	 else
		 $('#resultip').html("domaine invalide");
  }); // fin de .done()
}); // fin du gestionnaire d'événement

<?php
    if ($_GET['ip']):
        $ip = gethostbyname($_GET['ip']);
        echo($ip);
    endif;  
?>

où la fonction gethostbyname() renvoie l'adresse ip correspondant au nom de domaine. On peut l'essayer ici:

Il n'y a pas de recharge de page puisque la communication avec le serveur s'est effectuée de façon asynchrone. Simple, n'est-ce pas!

Exemple 2 - Validation d'adresse courriel

Dans cet exemple, on saisit une adresse courriel et le programme indique si elle est valide ou non.

Dans ce cas, le code jQuery est le suivant:

$("#verifyemailbutton").click(function(){
	 $.ajax({
		 type: "GET",
		 url: "../ajax/verify_email.php",
		 data: 'email=' + $('#searchcheckemail').val()
	 }).done(function(msg){
		 $("#resultcheckemail").html(msg);
		 if (msg == 'valide')
			 $("#resultcheckemail").css("color", "green");
		 else
			 $("#resultcheckemail").css("color", "red");
	 });
}); // fin du gestionnaire d'événement

el le code PHP du fichier verify_email.php qui est exécuté est le suivant:

function checkEmail($email, $port = 80) 
{
  // vérification de la syntaxe
  if(filter_var($email, FILTER_VALIDATE_EMAIL) === FALSE)
    return false;
  // extraction du nom de domaine
  list($username, $domain) = explode('@',$email);
		if(!checkdnsrr($domain, 'MX'))
    	// Retourne TRUE si un enregistrement a été trouvé,
     // et FALSE dans le cas contraire
			return false;
	else
	{
  	// connexion au serveur de courrier (devrait être sur le port 25)
    if(!fsockopen($domain, $port, $errno, $errstr, 30))
			return false;
	}
		return true;
}

if ($_GET['email']):
	$result = checkEmail($_GET['email']);
  if ($result)
		echo "valide";
	else
		echo "invalide";
endif;

Notons que la fonction PHP checkEmail() vérifie si l'adresse courriel est bien formé et si le domaine existe. Rien de plus! L'existence du client dans le domaine n'est pas vérifiée. Google propose un code PHP qui devrait faire mieux mais je ne l'ai pas étudié en détail car ce n'est pas le but de cette page.

Exemple 3 - Vérification d'une adresse courriel

Passons maintenant à un exemple qui vérifie si une adresse courriel existe réellement. Ça se fait en utilisant un service de vérification d'adresses courriels "Free Email Verifier". Essayez-le:

En plus de valider l'adresse courriel, ce programme vérifie en plus si l'adresse courriel existe vraiment dans le domaine concerné. Notons aussi l'animation qui apparaît pendant que le programme vérifie d'adresse.

Le code jQuery qui lance cette opération est le suivant

/*Check email sur api.verify-email.org */
$("#bouton").click(function(){
  // l'animation d'attente est lancée
	 $("#result").html('<img src="../images/ajax-loader.gif" alt=" veuillez patienter..." />');
	 email = $("#check_email").val();
	 $.ajax({
		 cache: false,
		 type: "GET",
		 url: "../include/proxi.php",
		 dataType: "json",
		 data: "check=" + email
	 }).done(function(data){
		 $(ajax_load).hide();
		 if (data == 1) { // l'adresse courriel est vérifiée
			 $("div#result").html("vérifié");
			 $("div#result").css("color", "green");
		 } else { // l'adresse courriel est invalide
			 $("div#result").html("invalide");
			 $("div#result").css("color", "red");		
		 }
	 });
});

alors que le code PHP qui est exécuté sur le serveur est le suivant:

if (isset($_GET["check"]))
{
	$username	= "xxxx";
	$password	= "xxxxxxx";
	$email		= trim($_GET["check"]);
	$api_url	= 'http://api.verify-email.org/api.php?';
	$url		= $api_url . 'usr=' . $username . '&pwd=' . $password . '&check=' . $email;
	$object		= json_decode(file_get_contents($url)); 
	echo $object->verify_status;
}

Dans ce code PHP, la requête au serveur distant http://api.verify-email.org/api.php?... se fait à partir de ce qu'on appelle une « application serveur proxy » qui est appelée par le code Ajax. Il s'agît d'une technique utilisée couramment pour résoudre le problème des « requêtes inter-domaines » (cross-domain) entre les applications client (comme Javascript) et les ressources éloignées causé par la « Politique de la même origine » (same origin policy). C'est une technique sécuritaire très efficace car on peut alors nettoyer les données avant de les faire parvenir au script Ajax.

Cette politique, qui est implémenté par les navigateurs modernes, présuppose qu'il n'est pas raisonnable de faire confiance au contenu chargé depuis n'importe quel site Web. Elle évite qu'un document ou un code chargé depuis une "origine" donnée soit remplacé par un document d'une "origine" différente. Le terme "origin" est défini à propos du nom de domaine, du protocole et du port : deux pages ont la même origine si et seulement si ces 3 valeurs sont les mêmes.

Une discussion en profondeur de cette question dépasse l'objectif de ces notes et je m'arrête ici.

Méthodes de haut niveau

La méthode $.ajax() peut effectuer toutes les requêtes mais son utilisation requiert l'usage d'un grand nombre de paramètres pour effectuer certaines tâches. jQuery offre d'autres méthodes plus commodes à utiliser. Au lieu de $.ajax(), on peut faire des requêtes GET ou POST avec $.get() et $.post(). On a aussi des méthodes encore plus spécifiques comme $.getJSON, $getScript() et .load(). En voici un bref aperçu.

Les méthodes $.get() et $.post()

$.get() et $.post() chargent une page à partir d'un serveur en utilisant des requêtes HTTP GET ou HTTP POST. C'est une façon très facile d'envoyer ces types de requêtes à un serveur. La syntaxe de ces fonctions est la suivante:

jQuery.get( url [, data], [, callback], [, type] )
jQuery.post( url [, data] [,callback] [, type] )

où

• url: une chaîne de caractères contenant l'URL de la page à charger;
• data (en option): tableau de paires de "clés/valeurs" qui sera transmis au serveur;
• callback (en option): une fonction qui est exécutée unr fois que les données (data) sont chargées avec succès;
• type (en option): type des données renvoyées à la fonction de rappel. Ça peut être du "xml", du "html", du"script", du "json", de "jsonp" ou du "text".

La méthode $.getJSON

La notation JSON (Javascript Object Notation) est un format léger très populaire qui peut être utilisée pour insérer du contenu à partir d'un serveur Web. JSON est devenu très populaire depuis que les pages Web sont devenues intéractives par l'utilisation d'Ajax. Le format JSON est très facile à créer à partir du serveur et il est facile à analyser chez le client puisque c'est un objet de base de Javascript.

jQuery fournit une fonction qui peut être utilisée pour faire des appels Ajax et obtenir les données demandées en format JSON. Normalement, les données qu'on obtient d'Ajax peut être transformé au format JSON avec la méthode eval() de Javascript mais la fonction $.getJSON() fait la transformation à l'interne et produit directement un objet JSON.

La syntaxe de cette fonction est la suivante:

$.getJSON(url [, data ] [, callback ])

où

• url: une chaîne de caractères contenant l'URL de la page à charger;
• data (en option):
• callback (en option):

En fait, c'est l'équivalent de

$.ajax({
  dataType: "json",
  url: url,
  data: data
}).done(function({ 
	// ce qu'il faut faire lorsque c'est terminé 
});

Voici maintenant quelques exemples d'utilisation.

Exemple 1 - Chargement d'un fichier JSON

Dans cet exemple très simple, le fichier Result.json contient les données suivantes

{
"name": "Arthur Cadrin",
"age" : "67",
"sex": "masculin"
}

qu'on va lire et afficher

Le code jQuery permettant cette insertion est le suivant:

$("#driver").click(function(event){
	$.getJSON('../ajax/Result.json', function(jd) {
		$('#stage').html('Nom: ' + jd.name + '
');
		$('#stage').append('Age : ' + jd.age+ '
');
		$('#stage').append('Sex: ' + jd.sex);
	});
});

Exemple 2 - Chargement d'images à partir de flickr.com

Dans cet exemple, on utilise encore $.getJSON() pour insérer des images en provenance de flickr.com dans la balise <div#images>.

Ici, le code jQuery qui insère les images est le suivant:

$("#boutonjson").click(function(){
	$("#images").html("");
	$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?",
  	function(data){
    	$.each(data.items, function(i,item){
      	$("<img/>").attr("src", item.media.m).appendTo("#images");
        if ( i == 3 ) return false;
    });
	 });
});

Remarquons qu'ici, on accède aux données d'un site externe (flickr.com) en ajoutant un "callback" à l'url. Ça devient alors une requête qui devrait être refusée par le fureteur en raison de la politique de la même origine. Cependant, la requête n'est pas refusée et se termine en chargeant les images demandées car le domaine questionné est un "api" public qui supporte le "jsonp".

Dans ce contexte, la requête $.getJSON() avec "callback" est l'équivalent d'une requête $.ajax() avec "jsonp" comme type de données, une manière de contourner la politique de la même origine.

La méthode $.getScript()

Si on désire améliorer la performance d'un site Web et réduire le nombre de fichiers lors du chargement d'une page, la méthode $.getScript() permet le chargement du code Javascript uniquement lorsque requis. Il s'agît d'un appel Ajax qui peut être utilisé tant pour les requêtes vers le serveur que pour les requêtes inter-domaines.

La méthode $.getScript() prend une url comme premier argument et charge de façon asynchrone et exécute le code. Puisqu'elle charge un "script", elle peut être employée pour charger tant des fichier du serveur sur lequel la page tourne que sur des serveurs éloignés.

On peut lui passer une fonction comme deuxième argument et, si on le fait, jQuery l'appellera lorsque le code aura été chargé et exécuté.

Sa syntaxe est la suivante:

$.getScript( url, [callback] )

• url (String): URL de la page à charger
• callback (Fonction): (en option) fonction à éxécuter quand les données seront complètement chargées.

En fait, $.getScript() est simplement une version abrégée de ceci:

$.ajax({
	 url: url
	 dataType: 'script',
}).done({ ... });

La méthode .load()

La méthode .load() est très utile lorsqu'on veut injecter du contenu HTML dans le DOM. .load() permet alors

La documentation de jQuery présente .load() de la façon suivante:

.load( url [, data ] [, complete(responseText, textStatus, XMLHttpRequest) ] )

où

• url est une chaîne de caractère contenant l'url qu'on veut atteindre;
• data est un objet ou une haîne de caractère qu'on transmet au serveur; et
• complete est la fonction de rappel qui est appelée lorsque .load() est complété.

C'est à peu près l'équivalent de

$.get(url, data, success)

sauf que .load() est une méthode plutôt qu'une fonction globale et que la fonction de rappel est implicite. Lorsque la réponse du serveur est détectée (lorsque textStatus esat "cussexx" ou "notmodified"), .load() assigne les données renvoyées au contenu HTML de l'élément sélectionné. C'est simple.

Annexes

Références

Presque tout le contenu de cette page a été tiré des nombreuses références dont la liste suit. Je remercie donc leurs auteurs de leur contribution.

1. History of jQuery
2. Web 2.0 Introduction à Ajax et à quelques technologies AJAX/Java DWR (Direct Web toolkit) Google Web Toolkit (GWT) par Philippe Genoud (2009)
3. Learning how to use jQuery AJAX with PHP
4. Web 2.0 Primer: How Does Ajax Work? With Ajax Example
5. Web 2.0, allez plus loin avec AJAX et XMLHttpRequest
6. What is AJAX?
7. AJAX & WEB 2.0
8. Utilisation de jQuery.ajax()
9. jQuery AJAX Methods
10. AJAX et l'objet XMLHttpRequest
11. The Perfect jQuery AJAX Request
12. jQuery et AJAX, l’asynchrone en toute simplicité" sur "Puce et média
13. XMLHttpRequest et le formatage des données sur "Puce et média;
14. 5 Ways to Make Ajax Calls with jQuery par Piao Yichi le 18 août 2009;
15. Introduction à AJAX et interaction avec PHP par Gaël Donat le 15 septembre 2006;
16. Web 2.0, allez plus loin avec AJAX et XMLHttpRequest par siddh le 7 janvier 2006 (mis à jour le 15 novembre 2006);
17. Ajax with jQuery

...

A cache (pronounced CASH) is a place to store something temporarily. The files you automatically request by looking at a Web page are stored on your hard disk in a cache subdirectory under the directory for your browser (for example, Internet Explorer). When you return to a page you've recently looked at, the browser can get it from the cache rather than the original server, saving you time and the network the burden of some additional traffic. You can usually vary the size of your cache, depending on your particular browser.