HTML5 - Ajax

Jusqu'à il y a quelques années, on pensait Ajax comme l'avenir des applications Web, après le début de sa massification avec Gmail, il faut cependant considérer aujourd'hui que c'est la réalité, en fait, un site qui n'intègre pas Ajax d'une manière ou d'une autre n'est pas très bien vu.
Ajax est un ensemble de techniques qui nous permettent d'envoyer et de recevoir des informations sans avoir à rafraîchir le document ou à recharger la page, donc en simplifiant on pourrait dire que c'est un outil pour enregistrer et accélérer la navigation.
Qu'est-ce qu'Ajax ?
Ajax répond à un acronyme pour Javascript et XML asynchrones c'est-à-dire Javascript Oui XML asynchrone mais actuellement le format est utilisé JSON plus communément que XML, JSON est même considéré par beaucoup comme la norme.
Tout cela se traduit par quelque chose de très simple à expliquer, la réception et l'envoi de données indépendamment du chargement et du rafraichissement des pages, par exemple si on veut qu'à chaque fois qu'on clique sur un bouton et qu'une partie de la page ramène des données d'une base de données , au lieu d'envoyer une requête au serveur en soumettant un formulaire et en actualisant toute la page, ce que nous ferons se fera via une fonction Javascript et une requête XMLHttpRequête communiquer avec le serveur pour récupérer les données et ne modifier que la partie de la page dont nous avons besoin.
Comme nous le voyons, cela a l'air et sonne merveilleux, le seul problème ou limite est l'utilisation du Javascript, car si nous le désactivons dans notre navigateur, nous ne pourrons pas profiter de ces fonctionnalités.
Notre premier document avec Ajax
Maintenant que nous connaissons les bases et les fondamentaux de l'Ajax, nous allons élaborer un petit exemple qui pourra nous illustrer sur cette technique.
Voyons d'abord le code suivant puis nous expliquerons à quoi il correspond :

 ExemplePommes Cerises Bananesappuyer sur un bouton

Cet exemple fait simplement que lorsque nous cliquons sur un bouton, nous déclenchons une fonction appelée PoignéeBoutonPress (), cela crée un nouvel objet de type XMLHttpRequête et avec cela, nous pouvons prendre le HTML à l'intérieur du bouton, prendre son texte et le concaténer à l'extension .HTML pour pouvoir appeler un document du même nom créé précédemment.
Alors la fonction poignéeRéponse fait une vérification du statut de la demande si elle a abouti, dans un conteneur déjà désigné il chargera le document correspondant que nous avons appelé.
Voyons en images comment sera le déroulement du processus :

Dans la première image, il nous est demandé de cliquer sur l'un des boutons, puis lorsque nous le faisons dans la deuxième image, nous voyons comment le contenu est chargé, ce qui, selon la fonction Ajax décrit dans l'exemple de code provient d'un document HTML déjà créé, ce contenu est chargé dans le div où se trouvait l'instruction qui disait d'appuyer sur un bouton.
Avec cela, nous terminons le tutoriel, nous avons déjà la possibilité de commencer à expérimenter avec Ajax pour enrichir l'expérience de navigation au sein de nos pages ou documents HTML.Avez-vous aimé et aidé ce tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif