AJAX est une technologie qui permet à l’utilisateur d’un site Web d’interagir avec le serveur sans recharger la page Web. Cela nous permet de transformer une page Web à partir d’un contenu statique en une application Web dynamique. Il est possible de faire une page web interactive avec javascript seul, mais pour parler au serveur, nous avons besoin d’AJAX. Habituellement, la raison pour laquelle nous devons parler au serveur est de parler à un base de donnéesdemander des données ou enregistrer des modifications.
Exemples AJAX
Voici quelques exemples de cas d’utilisation typiques où AJAX est utilisé dans le fonctionnement de votre site Web :
- vous dirigez un Commerce électronique magasin avec des produits qu’un utilisateur peut ajouter à son voiture virtuelle. Lorsqu’un utilisateur accède à son panier, il peut augmenter la quantité d’un certain produit et cliquer sur
Update Cart
. AJAX enverra la nouvelle quantité au serveur qui calculera un nouveau prix total. Le nouveau prix est retourné à l’utilisateur. Navigateur Internet et s’affiche dans le panier sans recharger la page. - Vous avez construit votre site Web dans un système de gestion de contenu et vous souhaitez supprimer une page. Navigue vers l’écran de gestion des pages qui contient un tableau affichant toutes les pages existantes. vous cliquez
Delete
sur la page correspondante. Sans AJAX, j’attendrais maintenant plusieurs secondes pendant que la page est supprimée de la base de données et que la page entière est rechargée. Vous perdez le contrôle de l’écran pendant que cette opération est en cours. Avec AJAX, vous ne perdez jamais le contrôle de l’écran. La page est supprimée de la base de données en arrière-plan, et lorsqu’elle est terminée, AJAX enverra une confirmation au Navigateur Internet que la suppression a réussi. Ensuite, un message s’affiche dynamiquement à l’écran indiquant que la suppression a réussi sans recharger la page. - As tu un annuaire des entreprises site Web où les utilisateurs peuvent Recherche pour les entreprises utilisant une variété de critères tels que l’emplacement et la catégorie. Les utilisateurs remplissent un formulaire et les résultats de la recherche sont tabulés dans une grille ou une liste. Avec AJAX, l’utilisateur peut modifier les critères de recherche et le tableau se mettra automatiquement à jour avec de nouveaux résultats sans recharger la page.
Quelques détails techniques
Répartition des acronymes
AJAX signifie JavaScript asynchrone et XML. Pour décomposer cet acronyme :
- Asynchrone : signifie que l’opération se produit en arrière-plan à tout moment, à l’exception du chargement de la page Web entière.
- javascript – AJAX est basé sur le
XMLHttpRequest
API qui est écrit dans le javascript langue d’écriture. - XML – est un langage utilisé pour formater les données transportées entre le navigateur web et le serveur. Cela suggère que les données des requêtes AJAX sont toujours envoyées en XML, mais les données peuvent être envoyées de plusieurs façons. En fait, la plupart des données envoyées via AJAX aujourd’hui sont formatées en JSON car il est léger et natif de JavaScript. Cependant, AJAJ est beaucoup moins accrocheur qu’AJAX, donc l’ancien nom est toujours utilisé.
Implémentation d’AJAX
Le XMLHttpRequest
L’API est une bête quelque peu lourde à utiliser. Plutôt que de l’appeler directement, la plupart des applications Web modernes utilisent des bibliothèques JavaScript avec des fonctionnalités AJAX. Ces librairies enveloppent le bas niveau XMLHttpRequest
API et complexité abstraite. La bibliothèque JavaScript la plus populaire à cet effet est jQuery avec son $.ajax()
méthode.
Autre lecture
En savoir plus sur AJAX sur Tutoriels AJAX pour les écoles W3 et le Article Wikipédia sur AJAX.