Ajax and JASON Nabih Barakat

c'est quoi l'ajax

AJAX est l'acronyme d’ Asynchronous JavaScript And XML, autrement dit JavaScript Et XML Asynchrones. 

AJAX n'est ni une technologie ni un langage de programmation, AJAX est un concept de programmation Web reposant sur plusieurs technologies comme le JavaScript et le XML – d'où le nom AJAX. 

l'Ajax est une approche de l'interaction Web qui consiste à transmettre uniquement une petite quantité de données vers et depuis le serveur afin de donner à l'utilisateur l’expérience plus réactif possible. 

Au lieu du modèle d'application web traditionnelle où le navigateur lui-même charge et traite les demandes du serveur Web, le modèle Ajax fournit une couche intermédiaire appeler moteur Ajax pour gérer cette communication. 

Un moteur Ajax est vraiment juste un objet JavaScript ou une fonction qui est appelée chaque fois que l'information doit être demandée au serveur. Au lieu du modèle traditionnel de fournir un lien vers une autre ressource (par exemple, une autre page Web), chaque lien fait un appel au moteur Ajax, qui planifie et exécute la requête. La demande se fait de manière asynchrone, ce qui signifie que l'exécution de code n'attend pas une réponse avant de continuer. 

Afin de bien introduire le principe de l'AJAX, voici une comparaison du fonctionnement d'un site Web dit traditionnel et d'une application Web mettant en œuvre AJAX. 

Difference entre site web traditionnel et application Ajax

Différencions tout d'abord deux côtés applicatifs : le navigateur, à gauche, et le serveur, à droite. 

Site Web traditionnel

Tout d'abord le navigateur envoie une requête – via une URL – au serveur. Le serveur répond en renvoyant au navigateur le code HTML de la page ainsi que tout ce qui lui est associé comme les scripts JavaScript, les images ou les éventuels médias et autres objets embarqués – donc la réponse du serveur est beaucoup plus volumineuse que la requête. Le navigateur affiche la page et l'utilisateur peut la parcourir quelques instants avant de cliquer sur un lien hypertexte qui enverra une nouvelle requête au serveur qui lui-même renverra le HTML correspondant... et ainsi de suite. 



D'un point de vue purement pratique, c'est assez aberrant comme principe car c'est extrêmement inefficace et couteux puisque le serveur va à chaque fois renvoyer tout, ce qui prend du temps et ce qui occasionne une charge pour le serveur. 

Ce principe de fonctionnement montre que le navigateur n'intervient pas dans le processus si ce n'est que pour afficher la page. Le gros du travail se fait du côté du serveur. Le pendule balance donc du côté du serveur. 

Application AJAX

Voyons ce même schéma du point de vue d'AJAX. Quand on utilise le concept d'AJAX dans une page Web, on parle d'application Web (ou application AJAX).

La première requête est la même. La différence va résider dans le fait que quand l'utilisateur cliquera sur un lien ou un autre élément cliquable, la page ne se rechargera pas et le navigateur enverra une requête au serveur, lequel renverra les données demandées dans un format léger comme le format JSON. Dans ce cas, le serveur n'aura renvoyé qu'un minimum de données ce qui est beaucoup plus léger et donc plus rapide. Le navigateur, par le biais de JavaScript, peut alors mettre à jour une petite partie de la page avec les données reçues du serveur. 



Dans ce cas, le pendule est au centre. Le serveur et le navigateur travaillent pour proposer une solution optimale. C'est l'exemple parfait de l'équilibre d'une application AJAX

Il faut cependant faire attention à ne pas mésinterpréter ce schéma, car il ne s'agit en aucun cas de remplacer la page entière, ce qui reviendrait à recharger la page. Si on se réfère au pendule, il va balancer du côté du serveur, ce qui montre qu'il y a un problème, et dans ce cas AJAX n'est pas utilisé correctement. 

C'est donc la raison pour laquelle il est totalement absurde de créer un site Web entièrement en AJAX. Ce n'est pas possible car AJAX ne doit jamais se substituer à la méthode traditionnelle. AJAX doit être utilisé pour charger/modifier de petites parties d'une page. Un exemple peut être Facebook , sur Facebook il y a la possibilité d'afficher les amis d'une personne sans recharger la page. Quand vous cliquez sur le lien Afficher les amis, une requête est envoyée au serveur, lequel renvoie la liste des amis de la personne dont vous souhaitez connaître les amis. Cette liste est alors affichée dynamiquement via JavaScript. Pas de rechargement de page, juste une requête rapide. 



Les principes d’Ajax

❑ trafic minimale: applications Ajax devrait envoyer et de recevoir aussi peu d'informations que possible pour et à partir du serveur. 

❑Pas de surprise: il faut que l’utilisateur sait ce qu’il faut faire avec les applications Ajax 

❑conventions établies: Ne perdez pas de temps à inventer de nouveaux modèles d'interaction utilisateur ce que les utilisateurs sont familiers avec, ce qui donne une courbe d'apprentissage minimale. 

❑ Pas de distractions: Eviter les éléments de page inutiles et gênantes telles que les animations en boucle et sections des pages de clignotants. Ces gadgets distraire l'utilisateur de ce qu'il ou elle essaie d’accomplir. 

❑Accessibilité: Est-ce que vos utilisateurs utiliseront les navigateurs plus anciens ou un logiciel spécial? Assurez-vous de savoir à l'avance et planifier en conséquence pour que tous les utilisateurs puissent accéder à votre application Ajax

❑Évitez le téléchargement du page entière: Toutes les communications serveur après le téléchargement de la page initiale doivent être gérées par le moteur Ajax. Ne gâchez pas l'expérience de l'utilisateur en téléchargeant petite quantités de données en un seul endroit, mais recharger la page entière dans d'autres. 

Le point commun à tous ces principes est la convivialité. Ajax est, avant tout, sur l'amélioration de l'expérience du web pour vos utilisateurs, la technologie derrière elle n'est qu'un moyen à cette fin. En adhérant à les précédente principes, vous pouvez être raisonnablement assuré que votre application Ajax sera utile et utilisable. 

Les avantages d’Ajax

Économie de la bande passante
Avec Ajax, il n’est plus nécessaire de renvoyer le contenu entier de la page HTML à chaque requête. 

Empêche le rechargement de la page à chaque requête
Le traitement traditionnel d’une requête HTTP entraîne à chaque retour de la réponse du serveur un rechargement complet de la page en cours. Hormis le désagréable «trou blanc» que cela engendre, ce phénomène allonge le temps de traitement d’une requête aux dépens de la réactivité de l’application. 

Évite le blocage de l’application pendant le traitement de la requête
Contrairement au simple échange HTTP d’une application traditionnelle, dans laquelle l’application Cliente est bloquée pendant tout le temps d’attente de la réponse du serveur, l’échange XMLHttpRequest asynchrone d’une application Ajax permet à l’utilisateur à travailler pendant le temps de traitement de la requête. 

Augmente la réactivité de l’application
Les données renvoyées par le serveur étant plus légères (le serveur retournant uniquement les Données demandées et non la page HTML entière) et le rechargement de la page complète n’ayant plus lieu à chaque requête, cela améliore considérablement la réactivité du système. 

Améliore l’ergonomie de l’interface
Une interface Ajax peut être composée de multiples zones ayant une gestion du contenu indépendante l’une de l’autre. Chaque zone pouvant déclencher ses propres requêtes, il est désormais possible d’avoir une mise à jour ciblée des contenus. Ainsi, grâce aux technologies DHTML associées à Ajax, l’utilisateur peut aménager librement ses différentes zones par un Simple glisser-déposer et améliorer l’ergonomie de son interface Web. 

Les inconvénients d’Ajax


Pas de mémorisation des actions dans l’historique
Le principal inconvénient d’une application Ajax est lié au fait que les actions de l’utilisateur ne sont pas mémorisées dans l’historique du navigateur. En effet, les différents contenus d’une application Ajax s’affichant toujours dans la même page, ils ne peuvent pas être enregistrés dans l’historique du navigateur comme le seraient les différentes pages HTML d’une application Web traditionnelle

Problème d’indexation des contenus
Les différents contenus d’une application Ajax s’affichant dans une seule et même page, les moteurs de recherche pourront indexer uniquement le premier contenu par défaut de la page et non tous les contenus proposés par l’application. 

Dépendance de l’activation de JavaScript sur le navigateur
Les applications Ajax utilisant JavaScript pour interagir entre les différentes technologies exploitées côté client (CSS, DOM, XML…) sont donc dépendantes de l’activation de JavaScript sur le navigateur, au même titre que tous les autres programmes clients utilisant Cette technologie. Même si les internautes qui désactivent JavaScript se raréfient, il faut toute fois prévoir une Version dégradée de l’application en prévision des navigateurs qui ne supporteraient pas ce langage de script. 

Des ingrédients déjà opérationnels


Contrairement à ce que l’on pourrait croire, Ajax n’est pas une technologie spécifique et innovante Mais une conjonction de plusieurs technologies anciennes. Ainsi, les applications Ajax utilisent en général tout ou partie des technologies suivantes : 

•Les feuilles de styles CSS qui permettent d’appliquer une mise forme au contenu d’une page XHTML.

• Le DOMqui représente la hiérarchie des éléments d’une page XHTML.

•L’objet XMLHttpRequest de JavaScript qui permet d’assurer des transferts asynchrones (ou quelque fois synchrones) entre le client et le serveur.

• Les formats de données XML ou JSON utilisés pour les transferts entre le serveur et le client. • Le langage de script client JavaScript qui permet l’interaction de ces différentes technologies.

En réalité, toutes ces technologies sont disponibles pour être utilisés dans des solutions Ajax, mais seulement trois sont nécessaires: 

HTML/XHTML, DOM et JavaScript. XHTML est évidemment nécessaire pour l'affichage d'informations, tandis que le DOM est nécessaire de changer des parties d'une page XHTML sans la recharger.la dernier partie, JavaScript est nécessaire pour initier la communication client-serveur et de manipuler le DOM pour mettre à jour la page Web. Les autres technologies dans la liste sont utiles pour affiner une solution Ajax, mais ils ne sont pas nécessaires. 

Qui utilise Ajax ?


Un certain nombre de sites Web commerciaux utilisent des techniques Ajax pour améliorer leur expérience de l'utilisateur. 
Voici quelques-uns des plus connus et applications Web bien exécutées qui utilisent Ajax. 


Google Suggest : 
Lorsque vous tapez, des suggestions« Google Suggest »demandés à partir du serveur, montrant une liste déroulante des termes de recherche que vous pouvez être intéressé à. 

Facebook ..
Comme on peut remarquer que beaucoup des informations s’ajoutent à la page et tous les updates s’apparaissent directement, même sans recharger la page, c’est l’Ajax! 

…

Ajax basics


La force motrice derrière Ajax est l'interaction entre le client(navigateur) et le serveur. Auparavant, la compréhension de cette communication a été limitée à ceux qui ont développé purement sur le côté serveur en utilisant des langages tels que Perl et C. technologies plus récentes telles que ASP.NET, PHP, JSP et encouragé plus d'un mélange de techniques du client et côté serveur pour les ingénieurs logiciels intéressé parla création d'applications web, mais ils manquaient souvent une compréhension complète de tous côté client technologies(comme le JavaScript). Maintenant, le pendule est allé dans l'autre sens, et côté client les développeurs ont besoin pour mieux comprendre technologie côté serveur afin de créer des solutions Ajax. 

http


Centrale à une bonne connaissance des techniques Ajax est la transmission hypertexte protocole (HTTP), le protocole pour transmettre des pages Web, des images et d'autres types des fichiers sur Internet à votre navigateur et le dos. 

http compose de deux parties: une demande et une réponse. Lorsque vous tapez une URL dans un navigateur Web, le navigateur crée et envoie une demande en votre nom. Cette demande contient l'URL que vous avez tapé dans, ainsi que des informations sur le navigateur lui-même. Le serveur reçoit cette demande et renvoie une réponse. La réponse contient des informations sur la demande ainsi que les données situées à l'URL(le cas échéant). C'est au navigateur d'interpréter la réponse et afficher la page Web(ou une autre ressource). 

Le DOM


Plus exactement DOM est un langage normalisé d'interface (API, Application Programming Interface), indépendant de toute plateforme et de tout langage, permettant à une application de parcourir la structure du document et d'agir dynamiquement sur celui-ci. Ainsi Javascript et et

CMA Script utilisent DOM pour naviguer au sein du document HTML, ce qui leur permet par exemple de pouvoir récupérer le contenu d'un formulaire, le modifier, ... 


L’exemple par dessus montre comment modifier le contenu d’une Div dans la page

<!DOCTYPE html>
<html>
<head>
<script>
functionchangeContent()
{
var x=document.getElementById('myDiv').rows[0].cells;
x[0].innerHTML="NEW CONTENT";
}
</script>
</head>

<body>
<idv id="myDiv" border="1">


</div>
<form>
<input type="button" onclick="changeContent()" value="Change content">
</form>
</body>

</html>


L’objet XMLHttpRequest


L'objet XMLHttpRequest implémente une interface mise à disposition par un interpréteur de scripts qui permet aux scripts d'accomplir les fonctionnalités de client HTTP, telles que soumettre des données de formulaire ou le chargement de données à partir d'un serveur. 
Un simple code pour faire quelque chose avec les données d'un document XML récupéré sur le réseau:

01.function test(data) {
02.// prendre en compte les données
03.}
04. 
05.function handler() {
06.if(this.readyState == 4 && this.status == 200) {
07.// jusque là cela va
08.if(this.responseXML != null && this.responseXML.getElementById('test').firstChild.data)
09.// succès!
10.test(this.responseXML.getElementById('test').firstChild.data);
11.else
12.test(null);
13.} else if (this.readyState == 4 && this.status != 200) {
14.// demandé la mauvaise page ou problème de réseau...
15.test(null);
16.}
17.}
18. 
19.var client = new XMLHttpRequest();
20.client.onreadystatechange = handler;
21.client.open("GET", "test.xml");
22.client.send();

consultez http://www.xul.fr/XMLHttpRequest.html pour plus d'information sur l'objet XMLHttpRequest 

Ajax frameworks


De nombreux ateliers de développement AJAX et bibliothèques se fondent uniquement sur JavaScript, et ne contiennent aucun composant serveur. Ils ne dépendent donc pas d'un langage particulier implémenté côté serveur. Par ailleurs, ils permettent de s'abstraire des problèmes de compatibilité des différents navigateurs (les clients). La plupart utilisent le format de données XML mais ils peuvent aussi utiliser JSON. 

  • Atlas de Microsoft, en partie conçu pour être indépendant vis-à-vis de la plateforme.NET.
  • Archetype (se base sur Prototype ou jQuery)
  • Dojo
  • ExtJS
  • jQuery, le plus souvent rencontré
  • Prototype (éventuellement couplé à [script.aculo.us])
  • Modernizr, permettant de rendre CSS3 et HTML5 sur différents navigateurs (non forcément compatibles avec ces technologies).
  • Mochikit , bibliothèque légère fortement influencée par Python, elle propose un support pour la programmation fonctionnelle, une syntaxe simplifiée et un interpréteur interactif.
  • Mootools (alternative au couple Prototype et [script.aculo.us])
  • [Script.aculo.us], spécialisée dans les effets dynamiques visuels et les éléments d'interface utilisateur.
  • Yahoo! UI Library, abrégée YUI (possibilité de faire d'AJAX et de l'HIJAX) 

Reference


WebSites: 


ebooks : 

  • professional ajax (second edition)
Comments