Qu'est-ce qu'AJAX ?
AJAX (Asynchronous JavaScript And XML, JavaScript et XML asynchrones) est une combinaison de technologies de développement d'applications Web qui rendent les applications Web plus réactives aux interactions des utilisateurs. Chaque fois que vos utilisateurs interagissent avec une application Web, par exemple lorsqu'ils cliquent sur des boutons ou des cases à cocher, le navigateur échange des données avec le serveur distant. L'échange de données peut entraîner le rechargement des pages et interrompre l'expérience utilisateur. Avec AJAX, les applications Web peuvent envoyer et recevoir des données en arrière-plan afin que seules de petites parties de la page soient actualisées selon les besoins.
Quels sont les cas d'utilisation d'AJAX ?
Vous pouvez utiliser AJAX pour créer diverses fonctionnalités dans des applications Web.
Remplissage automatique
Les moteurs de recherche proposent des options de saisie semi-automatique en temps réel lorsque les utilisateurs recherchent un mot clé spécifique dans la barre de recherche. AJAX permet à la page Web de transmettre chaque caractère d'entrée au serveur Web et de renvoyer une liste de recommandations pertinentes sur la page existante.
Vérification de formulaires
AJAX permet aux applications Web de valider des informations spécifiques dans les formulaires avant que les utilisateurs ne les envoient. Par exemple, lorsqu'un nouvel utilisateur crée un compte, la page Web peut vérifier automatiquement si un nom d'utilisateur est disponible avant que l'utilisateur ne passe à la section suivante.
Fonctionnalité de chat
Les messageries texte et les chatbots utilisent AJAX pour afficher des conversations en temps réel sur les navigateurs. AJAX envoie le texte écrit par un utilisateur au serveur et le publie simultanément dans les interfaces de chat des autres utilisateurs.
Réseaux sociaux
Les plateformes de réseaux sociaux utilisent AJAX pour mettre à jour les fils d'actualité des utilisateurs avec le contenu le plus récent sans charger une nouvelle page dans le navigateur. Par exemple, Twitter actualise immédiatement votre fil d'actualité chaque fois qu'un utilisateur que vous suivez publie un tweet.
Systèmes de vote et de notation
Certains forums et sites de navigation sociale utilisent AJAX pour afficher la note ou les votes de publications spécifiques en temps réel. Par exemple, vous pouvez appliquer un « upvote » ou un « downvote » à une publication sur Reddit sans actualiser la page entière.
Quels sont quelques exemples pratiques d'AJAX ?
Nous partageons ci-dessous plusieurs applications réelles d'AJAX.
- Découvrez comment la boîte à outils WIND utilise AJAX pour récupérer et afficher des données géospatiales en temps réel. Les utilisateurs peuvent agrandir une région spécifique de la carte pour obtenir une vue détaillée.
- Découvrez comment le moteur de chat PubNub utilise AJAX pour récupérer des fichiers audio qui sont lus automatiquement dans une application de chat intelligent.
- Découvrez comment une solution de surveillance clinique multilingue par SMS utilise AJAX dans son portail d'enregistrement pour faciliter l'inscription des utilisateurs en temps réel. Une fois les utilisateurs enregistrés, l'application AJAX leur envoie des SMS dans la langue de leur choix.
Quelles sont les technologies utilisées par AJAX ?
AJAX se compose de plusieurs technologies Web et de programmation qui permettent aux applications Web d'échanger des données avec des serveurs Web de manière asynchrone.
XHTML, HTML et CSS
XHTML (Extensible HyperText Markup Language), HTML et CSS (Cascading Style Sheets, feuilles de style en cascade) sont des langages de balisage. Vous pouvez les utiliser pour indiquer aux navigateurs Web la conception et le style du contenu de votre page Web.
Par exemple, vous pouvez utiliser du XHTML ou du HTML pour positionner le texte et les images sur une page Web. Vous pouvez ensuite utiliser le CSS pour modifier le type de police et la couleur d'arrière-plan.
XML
XML est un langage de programmation qui permet à différentes applications d'échanger des données. Les données étant représentées différemment selon les applications, vous pouvez utiliser le langage XML pour les formuler en texte brut. Les applications AJAX peuvent ensuite échanger et traiter des données dans un format XML commun.
XMLHttpRequest
XMLHttpRequest est une API qui permet aux navigateurs Web de communiquer avec le serveur Web de manière asynchrone. Vous pouvez utiliser l'objet XMLHttpRequest pour envoyer des informations partielles sur les pages Web au serveur au format XML.
Modèle objet de document
Le modèle objet de document (DOM, Document Object Model) organise les pages HTML et XML en arborescence. Le DOM se compose de nœuds qui se ramifient en d'autres nœuds ou objets enfants. Il vous permet de styliser ou de modifier des codes sur des pages spécifiques de manière plus efficace.
JavaScript
JavaScript est un langage de script que vous pouvez utiliser pour diffuser du contenu dynamique sur des pages Web. Le contenu dynamique fait référence aux informations d'une page Web qui sont mises à jour en temps réel ou dépendent des interactions des utilisateurs. Par exemple, dans AJAX, JavaScript fonctionne avec d'autres technologies Web mentionnées dans ce document pour permettre des mises à jour de pages asynchrones.
Comment fonctionne AJAX ?
AJAX utilise les langages JavaScript et XML pour activer les appels asynchrones lorsque les navigateurs et les serveurs échangent des données. Nous allons maintenant expliquer comment les navigateurs échangent traditionnellement des données et comparer ce processus à l'échange de données avec AJAX.
Échange de données sans AJAX
Dans un modèle classique, le navigateur envoie une requête HTTP côté serveur lorsque l'utilisateur effectue une action. Le serveur Web reçoit et traite la requête et envoie les données mises à jour au navigateur. Le navigateur actualise ensuite la page Web avec les nouvelles données.
Dans le cadre de cette méthode, le navigateur recharge la page entière même si les données demandées ne représentent que des modifications mineures. De plus, le navigateur peut envoyer des requêtes fréquentes, qui chargent le logiciel du serveur Web.
Échange de données avec AJAX
Au lieu de mettre à jour la page entière, AJAX utilise une fonction JavaScript pour créer un objet XMLHttpRequest sur le navigateur. Il compile ensuite les informations de la page au format XML, que l'objet XMLHttpRequest envoie au serveur Web. Le serveur Web traite la requête et répond avec les données demandées. Enfin, le navigateur met à jour l'écran actuel avec les dernières données sans actualiser la page.
Pourquoi AJAX est-il plus efficace ?
Malgré des similitudes en termes d'échange de données et de flux d'informations, AJAX est plus efficace que les requêtes Web classiques. Avec AJAX, le navigateur met uniquement à jour un contenu Web spécifique en fonction des données demandées. Il n'actualise pas inutilement les autres contenus de la page. Cela rend les applications AJAX plus rapides et plus réactives que les applications Web classiques.
Comment AWS peut-il répondre à vos exigences en matière de développement d'applications Web ?
Amazon Web Services (AWS) dispose de plusieurs technologies pour vous aider à développer des applications Web :
- AWS Amplify fournit une suite d’outils permettant de créer, de déployer et de mettre facilement à l’échelle des applications Web et mobiles. Vous pouvez utiliser AWS Amplify pour créer des applications multiplateformes, créer des interfaces d'applications conviviales et héberger des applications Web sur des réseaux de diffusion de contenu AWS sécurisés.
- AWS API Gateway est un service entièrement géré qui permet de créer, de déployer et de gérer des API à grande échelle. Il gère des centaines d'appels d'API simultanés dans un environnement sécurisé, flexible et transparent. Vous pouvez utiliser AWS API Gateway pour créer des API RESTful et HTTP pour des applications Web.
- AWS Lambda est un service sans serveur qui vous permet d’exécuter des codes sans allouer l’infrastructure. Vous pouvez mettre à l'échelle les ressources de calcul de votre application à la demande et ne payer que pour les ressources que vous utilisez.
Vous pouvez utiliser Amazon API Gateway pour exposer vos fonctions Lambda sous la forme d'une API RESTful. Vous pouvez ensuite créer une application Web dynamique en ajoutant du code JavaScript côté client qui passe des appels AJAX vers les API exposées. Découvrez comment créer une application sans serveur avec AWS Amplify, AWS Lambda et AWS API Gateway.
Commencez à utiliser AJAX sur AWS en créant un compte dès aujourd'hui.
