Ajax (informatique)

Pour les articles homonymes, voir Ajax.

En informatique, et plus particulièrement en architecture informatique, Ajax (acronyme de Asynchronous Javascript and XML) est une manière de construire des applications Web et des sites web dynamiques basés sur diverses technologies Web ajoutées aux navigateurs dès 1995.

Ajax est la combinaison de technologies telles que Javascript, CSS, XML, le DOM et le XMLHttpRequest dans le but de réaliser des applications Web qui offrent une maniabilité et un confort d'utilisation supérieur à ce qui se faisait jusqu'alors - les Rich Internet Application (abr. RIA)^[1],[2].

• DOM et JavaScript sont utilisés pour modifier l'information présentée dans le navigateur par programmation.
• l'objet XMLHttpRequest est utilisé pour dialoguer de manière asynchrone avec le serveur Web.
• la notation XML est utilisée pour structurer les informations transmises entre le serveur Web et le navigateur.

En alternative au format XML, les applications Ajax peuvent utiliser les fichiers texte ou JSON.

Les applications Ajax fonctionnent sur tous les navigateurs Web qui mettent en œuvre les technologies décrites précédemment, parmi lesquels Mozilla Firefox, Internet Explorer, Konqueror, Google Chrome, Safari, Opera, etc...

Le principe

dialogue entre serveur et navigateur

Dans une application Web, la méthode classique de dialogue entre un navigateur et un serveur est la suivante : lors de chaque manipulation faite par l'utilisateur, le navigateur envoie une requête contenant une référence à une page Web, puis le serveur Web effectue des calculs, et envoie le résultat sous forme d'une page Web à destination du navigateur. Celui-ci affichera alors la page qu'il vient de recevoir. Chaque manipulation entraîne la transmission et l'affichage d'une nouvelle page et l'utilisateur doit attendre l'arrivée de la réponse pour effectuer d'autres manipulations.

En utilisant Ajax, le dialogue entre le navigateur et le serveur se déroule la plupart du temps de la manière suivante : un programme écrit en langage de programmation Javascript, incorporé dans une page web, est exécuté par le navigateur. Celui-ci envoie des demandes de calcul au serveur Web, puis modifie le contenu de la page actuellement affichée par le navigateur Web en fonction du résultat reçu du serveur, évitant ainsi la transmission et l'affichage d'une nouvelle page.

La méthode classique de dialogue utilise des mécanismes propres au World Wide Web, qui sont incorporés dans tous les navigateurs ainsi que les robots d'indexation, et ne nécessite pas de programmation. Au contraire, le fonctionnement d'Ajax nécessite de programmer les dialogues entre le navigateur et le serveur Web. Il nécessite également de programmer les modifications à effectuer dans la page Web, sans quoi les dialogues se font à l'insu de l'utilisateur^[3].

En Ajax, comme le nom l'indique, les demandes sont effectuées de manière asynchrone : le navigateur Web continue d'exécuter le programme Javascript qui envoie la demande dès que celle-ci est partie, il n'attend pas la réponse envoyée par le serveur Web et l'utilisateur peut continuer à effectuer des manipulations^[4].

Histoire

Le World Wide Web a été créé en 1989, et popularisé dans les années 1990.

Le langage de programmation Javascript est apparu pour la première fois en 1996, dans le navigateur Web Netscape Navigator.

L'interface de programmation Document Object Model (abr. DOM) a été normalisée par le W3C en 1998.

XMLHttpRequest est initialement un composant ActiveX créé en 1998 par Microsoft pour leur application web Outlook Web Access, puis il a été ajouté à la norme ECMAScript relative au langage Javascript et mis en œuvre sur la plupart des navigateurs du marché entre 2002 et 2005^[3].

Le terme Ajax a été introduit par Jesse James Garrett (en) (informaticien américain), le 18 février 2005, dans un article sur le site Web Adaptive Path^[5]. Depuis, il a rapidement gagné en popularité.

Les technologies utilisées

La méthode Ajax consiste à utiliser de manière conjointe diverses technologies normalisées ouvertes et disponibles sur la plupart des navigateurs du marché.

Javascript est un langage de programmation incorporé dans les navigateurs. Les programmes écrits dans ce langage sont exécutés par le navigateur. Il est utilisé en particulier pour exploiter le XMLHttpRequest et le DOM.

Le XMLHttpRequest est un objet de programmation, utilisé dans les programmes en langage Javascript pour assurer la communication entre le navigateur et un serveur Web. Il est utilisé pour envoyer les requêtes vers le serveur et déclenche des opérations lors de la réception de réponses de celui-ci. Et le DOM (sigle de Document Object Model) est une collection d'objets où chaque objet représente un élément structurel ou visuel d'une page web ou d'un document XML. Il est utilisé à partir d'un langage de programmation orientée objet tel que Javascript pour inspecter et modifier le contenu des pages Web.

XML (sigle de Extensible Markup Language) est un langage de balisage et JSON (sigle de Javascript Object Notation) est un format de données inspirée de la syntaxe du langage Javascript. Ils sont utilisés pour structurer les informations envoyées par le serveur Web.

CSS (sigle de Cascading Style Sheets) est un format de données utilisé pour créer des feuilles de styles attachées aux pages web. Il est utilisé dans les applications Web pour dissocier le contenu - changeant - des pages web de leur présentation qui est constante. Il permet de réaliser des économies sur les communications entre le serveur et le navigateur web et mettre en place une charte graphique.

Ajax et les applications Web classiques

Les applications Web classiques permettent aux utilisateurs d'effectuer des choix (suivre un lien, remplir et valider un formulaire) à la suite de quoi une requête est envoyée au serveur Web. Le serveur répondra à la requête en envoyant une page Web. Une page web est envoyée en réponse à chaque manipulation, et la transmission de la page web entre le serveur et le navigateur provoque un temps de latence d'autant plus grand que la page est riche en contenu et en présentation (tableaux, couleurs, polices de caractères,...).

Dans les applications Web en Ajax, une page Web est typiquement envoyée une seule fois. La page envoyée contiendra un programme écrit en langage Javascript. Lors des manipulations effectuées sur la page par l'utilisateur, le programme en Javascript envoie des requêtes au serveur Web, le serveur répondra aux requêtes en envoyant un document au format XML, ce document ne contient pas d'information de présentation et le nombre d'informations qu'il contient est souvent réduit, d'où des temps de latence typiquement plus réduits que ceux d'une application Web classique.

L'utilisation de Javascript permet de provoquer des requêtes lors de manipulation qui autrement n'en provoqueraient pas (du fait des mécanismes utilisés). Ce qui permet de mettre en œuvre des fonctionnalités qui se rencontrent uniquement dans les Rich Internet Application.

Les feuilles de style CSS sont en outre utilisées dans les différentes pages d'une application Web Ajax, dans le but de diminuer le temps de latence lors de l'envoi initial de la page. Les informations de présentation sont extraites des différentes pages Web de l'application, et placées dans une feuille de style unique, utilisée pour les différentes pages de l'application.

La concurrence

La concurrence pour l'affichage de contenus dynamiques au sein d'une page Web est la suivante :

• Flash et Flex (Adobe Systems) ;
• JavaFX et Applet Java (Sun Microsystems) ;
• Silverlight (Microsoft) ;
• XForms, un standard de formulaire proposé par le W3C (non implémenté).

Avantages et inconvénients

Le but recherché d'Ajax est la diminution des temps de latence, l'apport de nouvelles fonctionnalités et l'augmentation de la réactivité de l'application Web. Les applications Web qui possèdent ces qualités sont appelées Rich Internet Application (abr. RIA).

Par rapport à des produits concurrents permettant de réaliser des RIA, tels que Adobe Flex ou Microsoft Silverlight, qui nécessitent l'installation d'un plug-in sur chaque navigateur sur lequel cette technologie va être utilisée, Ajax fait usage de technologies présentes de série sur la plupart des navigateurs Web sur le marché.

Javascript est un langage de programmation souvent utilisé pour réaliser et répandre des virus informatiques et des logiciels malveillants. Certains logiciels de lutte contre les logiciels malveillants peuvent interdire préventivement l'exécution de tout programme écrit en Javascript^[6]. Pour la même raison, les entreprises peuvent parfois interdire l'exécution des programmes écrits en Javascript, conformément à leur politique de sécurité informatique. Ces interdictions empêchent les applications Web en Ajax de fonctionner.

Les robots d'indexation, utilisés par les moteur de recherche exploitent les mécanismes intégrés du World wide web - ceux exploités par les applications classiques - et n'exécutent pas les programmes en Javascript. Par conséquent, le contenu des pages créées par un programme Javascript ne sera pas ajouté à l'index du moteur de recherche. Le même problème se pose avec les produits concurrents comme Adobe Flex et Microsoft Silverlight.

Programmation et Ajax

Pour faciliter l’utilisation de ces technologies, de nombreux frameworks ont été mis en place. Il s’agit en général d’un ensemble de bibliothèques javascript permettant de réaliser les traitements asynchrones et d’offrir une ergonomie avancée grâce à une palette d’objets graphiques aboutis.

Dans un souci d’industrialisation, nombre de ces frameworks ont été couplés à des frameworks de conception web.

On estime à plus de 500 le nombre de frameworks Javascript actuels. Les principaux sont dans l'article Frameworks Ajax.

Côté serveur, le principe même d'Ajax implique que nous avons le choix de la technologie. Cependant, certaines technologies orientées événementiel ont un fort potentiel de productivité.

• Ruby, et spécialement Ruby on Rails
• .NET 2.0 de Microsoft développe un framework pour ASP.Net (Microsoft ASP.Net Ajax).
• Morfik WebOS AppsBuilder de MORFIK est un EDI complet pour des applications AJAX avec un 'designer' visuel et le choix du langage de programmation (Pascal, Basic, Java, C#).
• Une nouvelle approche permet de se défaire du développement Javascript, souvent jugé coûteux et complexe. Cette approche vise à industrialiser le développement et est symbolisée par des frameworks tels que GWT ou Echo2.

En parallèle est développée une ASP.NET Ajax Control Toolkit, qui offre de nombreux contrôles « prêts à l’emploi » pour les développeurs utilisant Visual Studio 2005. On y trouve actuellement une trentaine de contrôles mais Microsoft en prévoit 50 à 100, tous fournis avec leur source. Il existe aussi un tutoriel sur le site pour créer ses propres contrôles Toolkit qui utilisent la technologie Ajax .NET.

De plus, on a vu récemment arriver le design pattern « Comet », qui propose des solutions pour effectuer du push de données grâce à Ajax.

Open AJAX

IBM a créé Open AJAX Initiative, un groupe de promotion de cette technologie avec des partenaires tels que 24SevenOffice, Adobe Systems, BEA Systems, Borland, the Dojo Foundation, Eclipse Foundation, Google, Ilog, Yahoo!, Laszlo Systems, Mozilla Corporation, Novell, Openwave Systems, SAP, Oracle, Red Hat, Tibco, Zend et Zimbra^[7].

Le premier résultat de cette initiative est l'AJAX Toolkit Framework^[8] (ATF), un projet qui vise à proposer des outils pour le développement d'applications AJAX dans l'outil de développement Eclipse. Ce projet s'appuie entre autres sur la contribution initiale d'IBM et divers frameworks AJAX open source (tels que Dojo ou Rico).

Exemples

Exemple d'une requête Ajax en utilisant la bibliothèque jQuery:
Le code de index.html est écrit en HTML5. On y déclare un formulaire permettant la saisie de deux nombres.

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" media="screen" href="style.css">
    <script src="jquery-1.6.2.min.js"></script> <!-- Les sources de la librairie JQuery -->
    <script src="script.js"></script> <!-- La source qui contient le code d'envoi en Ajax -->
  </head>
  <body>
    <form method="post" action="add.php"> <!-- Formulaire envoyé par la méthode POST -->
      <fieldset>
        <legend>Choisissez deux nombres entiers</legend>
        <p><label>a = <input name="a" type="number" required></label></p> <!-- Premier nombre -->
        <p><label>b = <input name="b" type="number" required></label></p> <!-- Deuxième nombre -->
      </fieldset>
      <fieldset>
        <legend>Résultat</legend>
        <p id="result"></p> <!-- Le résultat sera placé ici -->
      </fieldset>
      <p><button>Soumettre</button></p> <!-- Bouton de soumission -->
    </form>
  </body>
</html>

La soumission du formulaire provoque l'envoi des deux nombres au serveur. Lorsque la réponse du serveur a été reçue, on l'insère dans une balise prévue à cet effet.

$(document).ready(OnReady); // Abonne le callback à exécuter lorsque tout le DOM est chargé
function OnReady(){
    $("form").submit(OnSubmit); // Abonne un callback à l'évènement "submit" du formulaire
}
function OnSubmit(data){
    $.ajax({
        type: $(this).attr("method"), // Récupère la méthode d'envoi du formulaire, ici "POST"
        url: $(this).attr("action"), // Récupère l'url du script qui reçoit la requête, ici "add.php"
        data: $(this).serialize(), // Fabrique la "query string" contenant les deux nombres
        success: OnSuccess // Callback qui récupère la réponse du serveur
    });
    return false; // Annule l'envoi classique du formulaire
}
function OnSuccess(result){
    $("#result").html(result); // Insère le résultat dans la balise d'id "result"
}

Le serveur calcule la somme de ces nombres et renvoie le résultat.

<?php
print($_POST["a"] + $_POST["b"]); // Envoi au client le résultat du calcul de a + b
?>

L'envoi des nombres au serveur se fait de manière asynchrone par l'objet Ajax du navigateur

Notes et références

Voir aussi

Articles connexes

• XMLHttpRequest
• JavaScript
• Cadre d'Application AJAX
• Conception de site Web
• DHTML

Liens externes

• (fr) Catégorie Ajax (informatique) de l’annuaire dmoz

• Portail de l’informatique