Lexique: AJAX
Publié le 25 February 2007, par Babozor dans la catégorie Lexique[Rubrique de vulgarisation (donc non techique) de termes Web souvent mal employés]
Beaucoup utilisent cet acronyme un peu à tort et à travers, pour pouvoir vendre un peu tout et n’importe quoi… Essayons ensemble de découvrir et d’expliquer simplement l’AJAX
La définition: Ajax est un acronyme pour Asynchronus Javascript And Xml (ça vous avance pas plus? et ben on continue alors)
Pour faire simple, Ajax est une méthode qui utilise l’objet Javascript XMLHttpRequest et qui permet de faire des requêtes XML asynchrones. Ajax est donc un processus client (car c’est un object Javascript), qui permet d’envoyer une requête au format XML vers un serveur. Cet objet (XMLHttpRequest) existe depuis 1995 (d’abord sous la forme d’un ActiveX sous IE puis un objet JavaScript avec Mozilla), mais a reçu ses lettres de noblesses il y a quelques années, utilisé avec du DHTML, il permet de fournir une interface d’utilisation beaucoup plus conviviale.
Pour illustrer l’utilisation d’Ajax (sans DHTML), imaginez que vous avez un calendrier dans le corps de votre site web. Pour aller d’un mos, d’un année ou même d’une date à l’autre, vous êtiez obligé de recharger toute la page en transmettant les bonnes valeurs pour que le calendrier sur votre page web se mette à jour.
Une utilisation d’Ajax peut consister à envoyer cette requête par l’objet XMLHttpRequest et de ne recharger que la partie à changer, c’est à dire le calendrier, sans recharger la totalité de la page.
Pas vraiment convaincu? Ajax vous permet d’agir à partir d’évènements (javascript, le plus souvent déclenché par un clic) sur certaines parties de votre page et de racharger une partie du contenu dynamiquement.
Pour illustrer mon propos, allez voir www.mariechambon.com (le site consacré à ma fifille, bon je sais, mais c’est mon site expérimental perso - d’ailleurs la gestion de l’UTF8 passe pas bien, je dois corriger ça) qui est un site full-Ajax (sur une base prototype et scriptaculous), vous naviguez dans le calendrier sans recharger la page, seul le calendrier se recharge, idem pour les photos, etc… Pour les codeurs, allez jeter un oeil au code et vous verrez que le code HTML ne comporte que le cadre général du site et les fonctions javascript qui permettent de charger les différents éléments dans les différentes parties du site.
Bien utilisé Ajax, vous permet d’optimiser l’expérience utilisateur (l’illustration du calendrier en est un bon exemple je pense) … combiné avec du DHTML, il vous ouvre un vaste champ de possibilités… Ces deux techniques sont les bases qui ont permis à certains sites de redévelopper des applications bureautiques sur le web, comme Netvibes, Google calendar, Writely et bien d’autres…
Les avantages:
- permet de libérer le rechargement de la page sur certaines zones spécifiques
- cross browser (bon l’objet n’est pas le même sous IE et Mozzila mais les méthodes et variables sont les même, ouf!)
- une expérience utilisateur nettement améliorée
- beaucoup de framework disponibles
Les inconvénients:
- développement clien-side, donc sujet au debugagge pour certains navigateurs exotiques
- le nombre de requêtes peu exploser, alors que le nombre de pages vues chutes, donc statistiques classiques pas révélatrices du traffic réel…
le 28 February 2007 à 14h34
Pour le charset, la solution consiste a préciser l’encodage dans la requete et dans le reponse :
ce qui donne (pour mon cas en latin) :
coté client en javascript:
//avant le send()
xhr_objectsetRequestHeader(”Content-type”, “application/x-www-form-urlencoded; charset=iso-8859-1″);
et coté Serveur en PHP
header(”Content-Type:text/plain; charset=iso-8859-1″);
le 28 February 2007 à 14h37
Désolé, j’ai supprimé le point entre la variable et la fonction javascript (verr-num trop près du 7
)
xhr_object.setRequestHeader(”Content-type”, “application/x-www-form-urlencoded; charset=iso-8859-1″);
le 28 February 2007 à 14h43
Ouais, merci pour ça Jérémy, en fait j’essaye de bosser sur une nouvelle version du site et j’ai jamais eut le temps de le modifier… Merci de l’info en tout cas
le 21 March 2007 à 12h51
Bonjour,
Avec AJAX mal utilisé, on peut ajouter au rang des inconvénients : les problèmes de référencement et d’accessibilité.
Amicalement,
Monique