Comment fonctionne Ajax
Cet article discutera des composants de l'Ajax et du fonctionnement de l'Ajax. Nous parlerons du fonctionnement de l'Ajax dans certaines meilleures applications Web. De plus, une comparaison entre le modèle conventionnel et Ajax sera fournie. Alors, commençons!
Composants de l'Ajax
Ajax est un ensemble de techniques de développement Web. Il est basé sur les composants divisés ci-dessous:
- Dans le modèle Ajax, le Xhtml / html est considéré comme des langues de base et des feuilles de style cascade (CSS) comme langue de présentation.
- Le Modèle de document d'objet est utilisé pour montrer du contenu dynamique et des objectifs d'interaction.
- Pour l'échange de données, Ajax s'appuie sur Xml, et XSLT est utilisé pour la manipulation des données.
- Le Xmlhttprequest L'objet est utilisé pour la communication asynchrone dans le modèle.
- Dernièrement, Javascrip est utilisé pour connecter toutes ces technologies en Ajax.
Comment fonctionne Ajax
Chaque fois que les utilisateurs envoient une demande de l'interface utilisateur ou qu'un événement se produit tel qu'un bouton en cours de clic ou la page Web en cours de charge, JavaScript crée un "Xmlhttprequest" objet. Après cela, l'objet créé envoie un HttpRequest au serveur Web. Ensuite, le serveur traite le reçu Httprequest en interagissant avec la base de données. Lorsque les données requises sont récupérées dans la base de données, une réponse est générée et le serveur renvoie cela Json ou Xml données au navigateur. Dans l'étape suivante, JavaScript traite les données renvoyées et met à jour la page Web en conséquence.
L'image fournie ci-dessous illustre également le fonctionnement de l'Ajax:
Ajax Exemples pratiques
Considérez la fonction de saisie semi-automatique du Google site Internet. Cela vous aide à compléter les mots clés pendant que vous tapez. Les pages Web Google restent les mêmes lorsque les mots clés changent en temps réel. Quand Internet n'a pas beaucoup progressé au début 90, La page Web Google a été rechargée chaque fois qu'elle montrait une nouvelle recommandation de l'écran du navigateur.
Dans 2004, Google a commencé à intégrer le modèle AJAX dans les coulisses de Google Map et Google Mail. Il permet l'échange de données et permet à la couche de présentation de fonctionner sans interférer.
AJAX est désormais généralement utilisé dans plusieurs applications Web pour simplifier la communication avec le serveur. Nous avons également compilé une liste de certains autres exemples pratiques de l'Ajax:
- Salles de discussions: De nos jours, les salles de discussion intégrées sont parmi les plus de fonctionnalités d'un site Web. Les sites Web proposent des salons de chat sur leur page d'accueil, en utilisant lequel vous pouvez communiquer avec leur représentant du service client. Vous pouvez explorer la page Web tout en envoyant et en recevant des messages dans des salles de chat. Ajax ne recharge pas toute la page pendant ces activités simultanées.
- Systèmes de notation et de vote: Avez-vous déjà participé à un formulaire de vote en ligne, ou avez-vous donné une note de produit après l'avoir achetée en ligne? AJAX est utilisé dans les deux systèmes mentionnés. Après avoir donné la note ou le vote, le site Web mettra à jour la section de calcul, tandis que le reste reste inchangé.
- Notification tendance de Twitter: La notification à la mode de Twitter est une excellente fonctionnalité pour suivre ce qui se passe dans le monde. Ajax a récemment été employé sur Twitter pour les mises à jour, et elle met à jour la demande chaque fois que de nouveaux tweets sont envoyés concernant des sujets tendance sans avoir un impact sur le site Web principal.
Bref, les modèles Ajax facilitent le multitâche. Supposons que vous remarquiez une application exécutant deux activités simultanément, sans en mettre un au ralenti et l'autre dans un état actif. Dans ces scénarios, Ajax travaille en arrière-plan.
Comparaison de l'Ajax et du modèle conventionnel
| Modèle ajax | Modèle conventionnel |
|---|---|
| Lorsqu'un événement se produit, le navigateur définit un appel JavaScript, activant XMLHTTPREQUEST. | Le navigateur transmet une demande HTTP au serveur dans le modèle conventionnel. |
| L'objet créé envoie ensuite une demande HTTP au serveur en arrière-plan. | Les données sont reçues puis récupérées par le serveur. |
| La demande est reçue, les données requises sont récupérées et renvoyées au navigateur Web. | Le navigateur Web accepte la réponse du serveur. |
| Les données récupérées sont renvoyées au navigateur et affichées directement sur la page. Dans le modèle AJAX, aucune opération de rechargement de page n'est effectuée en attendant. | Le navigateur recharge la page pour la mettre à jour. Pendant cette opération, les utilisateurs doivent attendre que la page soit rechargée. Cette action prend du temps et met des charges supplémentaires sur le serveur. |
Conclusion
AJAX permet aux pages Web d'être mises à jour de manière asynchrone lors de l'échange des données en arrière-plan. Cela indique que les éléments de page Web peuvent être mis à jour sans rechargement de page. Cet article a discuté des composantes de l'Ajax et du fonctionnement de l'Ajax. Nous avons parlé du fonctionnement de l'Ajax dans certaines meilleures applications Web. De plus, une comparaison entre les modèles conventionnels et AJAX est également fournie.