AJAX (Asynchronous Javascript And XML)

Auteur: Mohamed CHINY Durée necessaire pour le cours de AJAX (Asynchronous Javascript And XML) Niveau recommandé pour le cours de AJAX (Asynchronous Javascript And XML) Supports vidéo non disponibles pour ce cours Exercices de renforcement disponibles pour ce cours Quiz non disponibles pour ce cours

Page 1: AJAX c'est quoi?

Toutes les pages

Introduction

De nos jours, le contenu sur la toile est devenu très abondant, et les pages Web deviennent de plus en plus surchargées d'éléments de différentes natures tels que les textes, les images, les vidéos etc... Une page avec un contenu aussi imposant pèse lourd et peut atteindre plusieurs Mégaoctets.

Il se trouve des fois que le fait de cliquer sur un hyperlien, ordonne au navigateur de charger un nouveau document Web avec une bonne partie de contenu similaire à celui qui figurait sur la page précédente. Serte il y a du nouveau dans la page sur laquelle on s'est rendu, mais des éléments comme la bannière, le menu de navigation, le pied de pages... restent dans la plupart du temps inchangés, et pourtant ils ont été chargés à nouveau.

Afin de garder les éléments qui ne changent pas et recharger seulement le nouveau contenu au sein de la page, les développeurs recouraient à des solutions comme les frames qui répartissent la page en plusieurs zones dont seulement quelques unes sont rechargées suite à un clic sur un lien hypertexte ou l'envoi d'un formulaire. Or, cette solution a des limites et, en plus, elle pose de sérieux problèmes lors du référencement.

En d'autre part, certains navigateurs arrivent à identifier les éléments qui ne changent pas d'une page à une autre et les gardent en cache. De cette manière, ils sollicitent juste le nouveau contenu et la navigation devient alors plus rapide suite à un taux de transfert de données réduits entre le client et le serveur. Mais cette solution ne constitue pas un standard sur lequel on peut compter.

La solution magique qui a ouvert de nouveaux horizons aux développeurs s'appelle AJAX.

AJAX c'est quoi au juste?

Présentation d'AJAX

AJAX est un acronyme qui désigne Asynchronous Javascript And XML (qui signifie littéralement Javascript et XML Asynchrones). Il ne s'agit pas d'une technologie en soi mais plutôt d'un ensemble de technologies qui permettent la mise à jour du contenu d'une page Web d'une manière rapide et sans chargement complet de celle ci.

AJAX s'appuie sur les technologies suivantes:
  • Javascript et DOM pour le traitement.
  • XML ou JSON pour l’extraction des données (le contenu à afficher).
  • HTML et CSS pour la présentation.

Il est possible d'outrepasser XML ou JSON pour l'extraction des données et récupérer celles-ci directement au format texte ou HTML. Une méthode encore plus pratique consiste à générer les données dynamiquement via des script CGI tel que PHP.

Utilité d'AJAX

AJAX est omniprésent dans les sites Web professionnels, d'autant plus sur les sites dynamiques qui renferment un contenu important.

Parmi les applications les plus courantes d'AJAX on trouve:
  • Rechargement d'une (ou plusieurs) zone de la page Web sans être obligé de recharger celle-ci en entier (ce qui est d'ailleurs l’essence d'AJAX).
  • Suggestion automatique lors de la saisi d'un champ, comme c'est le cas quand vous saisissez des mots clés sur le moteur de recherche Google.
  • Sauvegarde automatique d'un texte dans la base de données lors de la saisie, sans pour autant quitter le champs dans lequel on est entrain d'écrire.
  • Upload d'un fichier sur le serveur tout en visualisant l'état de progression du chargement.
  • Affichage d'un contenu supplémentaire quand on atteint le bas de la page avec la barre de défilement, comme c'est le cas sur Youtube.
  • Exécution d'opérations telles que la suppression ou la modification suite à un glisser déposer sans quitter la vue en cours.
  • ...

Prérequis

AJAX est principalement du Javascript. Il est alors évident qu'il faut être à l'aise avec ce langage et avoir de bonnes bases en DOM. Il est également préconisé d'avoir des notions de base de HTML et CSS pour mieux présenter le contenu reçu du serveur.

AJAX s'appuie également sur XML. Cependant, vous n'êtes pas obligé de maîtriser ce langage pour en extraire les données car il suffit de connaitre les bases du DOM en Javascript. D'ailleurs, nous aurons plutôt tendance à échanger des données texte ou HTML générés dynamiquement avec du PHP par le serveur.

Voilà la liste des cours/chapitres que je vous recommande de suivre avant de vous lancer dans AJAX: