Pas envie de lire ? Lancez l'audio pour écouter l'article !
Voiced by Amazon Polly

AJAX est l’acronyme de Asynchronous JavaScript and XML, ce qui signifie Javascript asynchrone et XML en français. Il s’agit d’une méthode de communication entre serveur et client qui favorise la mise à jour des différentes parties d’un site sans rechargement de la page entière.

Ajax

Parmi les nombreuses techniques qui permettent de rendre un site internet dynamique et réactif, vous avez la technologie AJAX. 

Il s’agit d’un ensemble de techniques utilisées pour la conception d’une nouvelle catégorie de pages web qui permettent aux internautes d’actualiser certaines données sans avoir à recharger toute la page.

Je vous propose de découvrir plus d’explications à propos de ce concept dans les lignes qui suivent. 

Alexandre Marotel | Twaino | Agence SEO

Alexandre MAROTEL

CEO à Twaino | Agence SEO

Voilà ce que j'offre à mes nouveaux membres

1. Liste : 144+ blogs pour publier des articles invités
2. Un Calculateur de compétition SEO
3. Vidéo exclusive : Comment passer de 0 à 1000 visiteurs ?
4. Outil : Audit SEO immédiat

Suivez donc !

Chapitre 1 : Que désigne la technologie AJAX ? 

Ici je vous expose ce que c’est que AJAX ainsi que les différentes technologies qui le composent. 

1.1. Que signifie AJAX ?

AJAX est plus une technologie qu’un langage de programmation web.   

Il s’agit en réalité d’une méthode qui combine plusieurs techniques de programmation pour faciliter la communication entre les serveurs et les clients. 

Concrètement, il leur permet de communiquer de façon asynchrone, c’est-à-dire sans interruption de leur mécanisme de fonctionnement.  

Un Javascript Asynchrone

Ceci favorise leur chargement rapide de même que l’exécution indépendante des événements qui se produisent en leur sein.

Avant l’introduction de la technologie Ajax, lorsque les utilisateurs veulent afficher le nouveau contenu d’une page web, ils attendent le chargement de la page web en entier. 

Ce chargement était non seulement lent, mais il se faisait aussi de façon synchrone. C’est-à-dire qu’il faut à chaque fois attendre le chargement de tout le HTML et de tout le CSS avant de pouvoir effectuer une nouvelle action sur la page.

Comme vous vous en doutez, c’est pour éviter cette situation que Ajax a été conçu. 

Il a été intégré pour la première fois en 1998 à l’application de messagerie Outlook web Access de Microsoft à partir de l’objet XMLHttprequest. 

Désormais, ce n’est plus la page entière qui se charge lorsque c’est seulement une partie de cette dernière qui doit changer. 

1.2.  Les différentes technologies qui participent à la structure de AJAX ?

Ajax est souvent vue comme la combinaison d’un ensemble de techniques de développement web pour la création non seulement des applications web réactives, mais aussi des sites internet interactifs et dynamiques.

Les-technologies-qui-participent-a-la-structure-de-AJAX

Ces différentes langages et technologies de programmation sont : 

  • Le JavaScript : Le JavaScript est un langage de programmation qui permet d’implémenter des mécanismes sur une page de telle sorte que cette dernière n’affiche pas que du contenu statique ;
  • Le XML et JSON est un sigle anglais qui désigne Extensible Markup Language. Il s’agit d’un langage de balisage. 

Le JSON est l’acronyme de JavaScript Object Notation. Il s’agit d’un format de données qui trouve son origine dans la syntaxe du langage JavaScript. 

Les formats XML et JSON interviennent dans la structuration des informations envoyées par un serveur Web. 

  • Le DOM : Il est composé d’un modèle et des objets de documents. Le modèle permet de représenter le plan d’une page tandis que l’objet comporte les propriétés et les méthodes du Document qui peut être assimilé à la page web.  Il se présente comme une interface de programmation qui favorise l’analyse et la modification  des éléments d’une page web ;
  • Le XMLHttprequest : Est un objet intégré à la plupart des navigateurs web. Il est utilisé dans les applications JavaScript pour assurer que la communication entre le navigateur et le serveur se fait de façon asynchrone.  

De nos jours, il existe  une  api qui s’occupe également de la communication asynchrone entre navigateur et serveur. C’est l’API fetch.

La présentation d’AJAX étant ainsi effectuée, découvrez maintenant les avantages qu’il présente de même que ses possibles inconvénients. 

Chapitre 2 : Les avantages d’une utilisation d’AJAX

Ce chapitre vous permettra de comprendre que AJAX présente aussi bien des avantages que des inconvénients.

Les-avantages-d-une-utilisation-d-AJAX

2.1. Quelques avantages de l’utilisation d’AJAX

L’utilisation de la technologie d’AJAX devrait permettre de : 

2.1.1. Minimiser les actions du serveur 

De façon simple, Ajax est utilisé pour effectuer un aller-retour rapide vers le serveur afin de récupérer voir d’enregistrer des données sans que la page web ne soit entièrement rechargée. 

En réalité,  l’utilisation d’Ajax, permet au serveur de ne pas traiter tous les éléments de la page avant de satisfaire à la requête envoyée par le navigateur. Il traite juste les données qui lui sont nécessaires  pour répondre à la requête. 

Cela faisant,  il sollicite moins le serveur. Il en découle alors une faible utilisation du réseau et donc une augmentation de ses performances. Cela se manifeste d’ailleurs  par la rapidité d’accomplissement de certaines opérations.

2.1.2. Faciliter un chargement asynchrone des éléments de la page 

L’utilisation d’AJAX permet de faire des appels asynchrones vers le serveur Web. 

Cela permet au navigateur client d’éviter alors d’attendre l’arrivée de toutes les données avant de permettre à l’utilisateur d’agir à nouveau.

La conséquence de ceci est sans doute une amélioration de la vitesse de chargement de la page ainsi que l’augmentation de la performance et de la convivialité des pages web du site.

La perfomance

2.1.3. Recharger automatiquement la page et assurer une connexion sécurisée

Avant AJAX, l’affichage d’un nouvel élément sur les pages Web était conditionné par le rechargement de tous les éléments qui se trouvent au niveau de la dite page. 

Avec Ajax, les concepteurs web disposent désormais des méthodes adéquates pour   faciliter le rechargement automatiquement des pages au niveau de leur site internet. 

Cela est essentiellement bénéfique à l’utilisateur puisqu’il est automatiquement à jour avec les nouvelles informations qui pourraient être apportées sur la page web. 

Parlant de la sécurité, Ajax fournit une interface unique entre le client et le serveur. Cette interface sécurise non seulement les données, mais aussi contribue à leur transmission sécurisée vers le serveur. 

2.1.4. Implémenter d’autres fonctionnalités

Ajax est un programme de développement Web open source. 

N’importe qui peut donc lire,  modifier, redistribuer le code d’Ajax. 

Tout le monde peut également l’utiliser pour implémenter des fonctionnalités dans le but d’améliorer son efficacité. 

Les développeurs web peuvent par exemple mettre à jour leur fichier Ajax pour apporter de nouvelles  fonctionnalités ou pour assurer  la flexibilité des pages de leur site internet. 

19 moteurs de recherche altenatifs auquel on ne pense pas toujours blog

2.1.5. Éviter le blocage de certaines opérations pendant le traitement de la requête 

Contrairement au mode de communication HTTP classique dans lequel le navigateur web est bloqué pendant l’envoi et la réception des données depuis le serveur, les modalités de communication introduite par l’envoi d’une requête asynchrone permettent aux internautes d’effectuer d’autres manipulation pendant le temps de réponse du serveur.  

Une telle fonctionnalité ouvre de nouvelles possibilités pour le développement Web, car elle facilite la création de page web fonctionnant comme des applications. 

2.1.6. Augmenter la réactivité des pages web

Parce que les données envoyées par le serveur pour répondre à la requête qui lui est soumise sont légères (le serveur retourne uniquement les données qui lui sont demandées et non la page web entière), une certaine réactivité est remarquable dans le chargement des nouveaux éléments sur la page.

collecter avis de clients local SEO

2.1.7. Améliorer l’ergonomie de l’interface utilisateur

Les pages web qui utilisent Ajax sont composées de plusieurs zones. Chaque zone est configurée de manière à disposer d’une gestion de contenu indépendante.  Cela leur permet de déclencher leurs propres requêtes et ainsi de disposer d’une mise à jour ciblée des contenus.  

En dehors de ces différents avantages qui témoignent de la nécessité d’utiliser AJAX, il convient de préciser que AJAX n’est pas exempt de défauts. 

2.2. Quelques difficultés de l’utilisation d’AJAX

Voici quelques difficultés que vous pouvez rencontrer dans l’utilisation d’AJAX : 

2.2.1. Inexistence d’une sauvegarde des actions manipulation dans l’historique du navigateur  

L’inconvénient majeur qui peut découler de l’utilisation de la méthode Ajax sur les pages web peut être rattachée au fait que AJAX ne sauvegarde pas automatiquement les actions de l’utilisateur dans l’historique du navigateur client. 

En effet, la plupart des contenus conçus pour s’afficher par la mise en place d’une application  Ajax se retrouve sur la même page. 

De ce fait, il est difficile qu’ils soient enregistrés dans l’historique du navigateur comme les pages web d’un site qui utilisent les méthodes classiques de communication avec le serveur. 

Gagnez du temps

2.2.2. Difficultés pour indexer les contenus 

Les différents contenus d’une page web qui communiquent selon la méthode Ajax s’affichent dans une seule et même page. Il peut en découler des problèmes d’indexation.  

En effet, il peut arriver que les moteurs de recherche indexe uniquement le contenu par défaut de la page et oublient justement  tous les contenus proposés par la page

La sauvegarde et le rafraîchissement des contenus d’une page web qui utilise AJAX peuvent également rencontrer  ce problème. 

Dans ce cas, c’est seulement le contenu statique des pages qui sont enregistrés par le navigateur. 

2.2.3. Dépendance par rapport à  l’activation du JavaScript sur le navigateur 

Les pages web qui utilisent la méthode Ajax utilisent sans doute le JavaScript pour interagir avec les autres technologies exploitées côté client. 

Il s’agit là d’une certaine dépendance à l’activation du JavaScript sur le navigateur, au même titre que la plupart des autres programmes clients qui utilisent la même méthode.

Même si les navigateurs qui n’utilisent pas JavaScript sont rares,  il semble utile de mettre en place une version  des pages web pour les navigateurs qui  ne supportent pas le JavaScript. 

Parlant toujours des inconvénients de l’utilisation de JavaScript, vous pouvez remarquer  :  

  • Une augmentation du temps de conception et de développement de vos pages web ; 
  • Que l’utilisation d’ajax est plus complexe que la création d’une application Web classique ;
  • Qu’il existe des exigences de sécurité qui vous empêche d’avoir accès aux informations de l’hôte qui vous a permis d’avoir la page initiale ;
  • Le fait que Ajax ne rend pas possible l’affichage des informations venant d’un autre serveur ;
  • Certaines pages Web qui utilisent la technologie AJAX ne sont pas compatibles avec les technologies de lecture d’écran comme  JAWS ;
  • Que des lecteurs d’écran qui ont la capacité d’utiliser Ajax ne sont pas en mesure de lire correctement le contenu  généré. 

Maintenant que vous avez une bonne compréhension de ce que c’est que la méthode AJAX, retrouvez dans les lignes suivantes comment il fonctionne et ce qu’il vous permet de réaliser. 

Chapitre 3 : Fonctionnement et quelques cas d’utilisation d’AJAX 

Dans ce chapitre, j’aborderai aussi bien les cas d’utilisation d’AJAX que son fonctionnement.

3.1. Dans quelles circonstances pouvez- vous utiliser  AJAX ? 

La technologie Ajax existe depuis 1998, et seulement une poignée d’applications l’utilisait. 

Ce n’est qu’au début des années 2005, notamment avec l’article de l’informaticien Jesse James Garrett qui introduit et explique le concept d’AJAX, que celui-ci a véritablement gagné en popularité.

En effet,  cet article a permis de comprendre qu’il était possible de faire réagir les sites internet comme des logiciels de bureau.

Pour tout dire AJAX devrait vous  permettre d’effectuer non seulement des recherches rapides et directes, mais aussi d’accéder instantanément aux résultats. 

Quoi qu’il en soit voici quelques cas d’utilisation de la technologie AJAX : 

3.1.1. La Saisie automatique

C’est grâce à AJAX que vous avez des applications de saisie automatique. 

La saisie automatique est une technique qui vous permet de compléter rapidement  ce que vous écrivez. Elle repose sur une analyse prédictive de ce que vous êtes en train de taper au clavier. 

La Saisie automatique

Les applications de saisie semi-automatique sont étroitement liées aux applications de recherche en direct qui tentent de deviner le mot que vous saisissez en obtenant une liste de mots similaires sur le serveur et en les affichant. 

3.1.2. Chattez avec des ami(e)s

Ajax vous permet également de chatter avec des amis. Il s’agit en réalité d’un bon choix pour les programmes de chat Web, où de nombreux utilisateurs peuvent discuter ensemble en même temps car les nouveaux éléments s’affichent sans un chargement entier du site web.

Partage social media réseaux sociaux

3.1.3. Modifier l’affichage des résultats de façon active

Ajax vous donne la possibilité de modifier de manière interactive l’affichage d’un résultat sur la base d’un changement des critères que l’utilisateur sélectionne au fur et à mesure.  Cet exemple est visible sur des sites qui proposent la configuration des options des produits qu’ils vendent. 

C’est le mode de fonctionnement par exemple des pages web qui vous donne la capacité de choisir les options d’un produit et de voir directement le résultat (et le prix). 

3.1.4. La validation des formulaires de connexion

Il est possible que vous utilisiez la méthode AJAX pour configurer la validation de vos formulaires.

Par exemple, lorsqu’un utilisateur tape son nom d’utilisateur et son mot de passe directement dans une page web.

La validation des formulaires de connexion

L’utilisation de la technologie AJAX se traduit par l’envoie d’une demande de connexion au serveur.

Ce dernier informe par la suite la page qu’elle peut se connecter. Il lui envoie aussi l’ensemble des éléments qui lui permettront d’afficher l’espace personnel de l’utilisateur. 

3.1.5. La mise en place de Widgets externes

Lorsque vous utilisez AJAX, la page qui utilise le JavaScript n’est pas seulement limitée au serveur sur lequel elle se trouve.

Widget pour WordPress 2

AJAX peut appeler n’importe quel serveur en ligne. C’est ainsi que fonctionnent un certain nombre de plug-ins pour les systèmes de gestion de contenu tels que WordPress et d’autres scripts tels que Google Adsense.

3.2. Le fonctionnement de la méthode AJAX 

Vous l’aurez compris AJAX permet de charger rapidement les pages web en modifiant la façon dont communique les navigateurs et les serveurs. 

De manière classique, la communication entre le navigateur et AJAX s’effectue de cette façon : 

L’utilisateur fait une manipulation, son navigateur envoie une requête au serveur qui lui envoie en retour la réponse correspondant. À chaque manipulation, il doit attendre la réponse du serveur avant d’effectuer une nouvelle manipulation.

Le-fonctionnement-de-la-methode-AJAX

Mais avec AJAX, la requête du navigateur au serveur se fait désormais par le biais d’un programme écrit en JavaScript et qui est incorporé à la page web que l’internaute demande. 

C’est ce programme qui envoie les requêtes au serveur Web. Il modifie ensuite le contenu de la page qui était affiché tout en évitant la transmission et l’affichage d’une nouvelle page complète. 

De façon plus approfondie voici les différentes étapes de ce processus : 

  • L’utilisateur envoie une requête HTTP à partir de son interface  ;
  • JavaScript créer un objet XMLHttpRequest, qui transfère les données de la requête dans un format XML du navigateur Web vers le  serveur Web ;
  • Le serveur traite la requête, crée une réponse qui est renvoyée au navigateur, qui utilise à son tour JavaScript pour traiter la réponse et l’afficher à l’écran comme contenu mis à jour.

Parce que la méthode Ajax repose sur l’envoi des requêtes HTTP par l’objet XMLHttprequest, j’aborderai dans une nouvelle partie la création des requêtes HTTP par l’objet XMLHttprequest. 

Chapitre 4 :  Créer une requête Ajax HTTP par l’objet XMLHttprequest 

La création d’une requête AJAX se fait selon les étapes suivantes : 

  • La création des requêtes par l’objet XMLHttprequest  ; 
  • L’initialisation de la requête ;
  • L’envoi de la requête vers le serveur ; 
  • La création d’un gestionnaire d’événements qui prendra en charge les réponses du navigateur

Je traiterai donc de la création, de l’initialisation et de l’envoi de la requête avant d’aborder la prise en charge de la réponse du navigateur

4.1. Création, initialisation et envoi des requêtes AJAX par l’objet XMLHttprequest

L’objet XMLHttprequest est un objet intégré sur la plupart des navigateurs qui permet de faire des requêtes HTTP en Javascript. Il permet également d’avoir des données dans d’autres format comme : 

  • XML ;
  • JSON ;
  • HTML ;
  • Etc.

Pour créer cet objet, il suffit juste d’utiliser le constructeur XMLHttprequest en entrant la ligne de code suivante : 

let xhr = new XMLHttprequest ()

Ensuite, vous devez initialiser votre requête grâce à la méthode open() de XMLHttprequest

En spécifiant : 

  • La méthode de la requête : Vous choisissez généralement entre GET ou POST. GET est utilisé pour récupérer des données sans modification, alors que Post est utilisé pour effectuer des opérations durant lesquelles des données peuvent être modifiés ;
  • L’URL de destination de votre requête : Autrement dit, là où on souhaite envoyer la requête ;
  • La façon dont la requête doit être faite : “false” pour une requête asynchrone et “true” pour une requête synchrone ;
  • Préciser un nom d’utilisateur et un mot de passe (ce n’est pas obligatoire)

Voici à quoi ressemble cette ligne : Xhr.open(“GET”, “URL”, false);

ajax_interaction

Après l’initialisation, vous allez maintenant spécifier le format dans lequel le serveur vous répondra. Pour ce faire, vous utilisez la méthode requesttype() de l’objet XMLHttprequest : xhr.requestType = “format”.

Voici la liste des formats possible dans lesquels vous pouvez recevoir la réponse du serveur : 

  •  »  » : Demande au serveur d’envoyer sa réponse sous forme de chaîne de caractères ;
  • « TEXT » : En spécifiant ce format, le serveur renvoi sa réponse sous forme de texte ;
  • « ARRAYBUFFER » : Ce format permet de demander au serveur d’envoyer sa réponse sous forme d’objet ArrayBuffer ;
  • « BLOB » : En utilisant ce format, le serveur renvoi sa réponse sous forme d’objet Blob ;
  • « Document » : Avec ce format, le serveur renvoi sa réponse sous forme de document XML ;
  • « JSON » : Permet de demander au serveur de renvoyer sa réponse sous forme JSON.

Une fois cette étape passée, il ne vous reste plus qu’à envoyer la requête en utilisant la méthode “send” : 

Xhr.send() de XMLHttprequest

4.2. La prise en charge de la réponse du serveur par le navigateur

À partir du moment où vous envoyez la requête au serveur, une série d’événements se produit. 

Pour suivre ces différents évènements, vous pouvez : 

4.2.1. Utiliser la méthode “EventTarget” de l’objet XMLHTTPRequest

Avec cette méthode on peut déterminer  : 

  • Si la requête a été bien envoyée au quel cas, l’événement “load” se déclenche
  • Si la requête n’a pas été envoyée, dans ce cas c’est l’événement “error” qui se déclenche
  • On peut également suivre l’évolution du traitement de la requête à partir du déclenchement de l’événement “progress

4.2.2. Utiliser la méthode “readystate” de l’objet XMLHttprequest

Ici, il s’agira de suivre votre requête  en examinant les valeurs de la propriété readystate de l’objet XMLHttprequest.

Ces valeurs sont : 

  • 0 : La valeur 0 signifie que la requête a été créé, mais qu’il n’a pas encore été initialisé ;
  • 1 : Cette valeur apparaît lorsque l’initialisation a été effectuée ;
  • 2 : La valeur 2 vient ensuite pour informer que la requête a été envoyé ;
  • 3 : Elle apparaît pour vous informer de la réception des en-têtes HTTP été du chargement des données de la réponse ;
  • 4 : La valeur 4 vous renseigne  que la réponse est entièrement reçue.

Script

Quelles que soient les méthodes utilisées pour suivre l’évolution de la requête, sachez que la réponse envoyée par le serveur peut être obtenue à l’aide des propriétés : “Statuts” et “statusText” de l’objet XMLHttprequest.

La propriété “status” affiche les codes d’état HTTP alors que la propriété “statusText” affiche le message text correspondant.

Par ailleurs, rappelons que les requêtes ajax peuvent également être créées avec la méthode Jquery.ajax ou par l’utilisation de l’API Fetch.

En résumé 

AJAX est une technologie qui concilie différentes méthodes de programmation pour assurer des échanges asynchrones entre navigateurs et serveurs web.  

Dans cet article, j’ai eu à aborder les mécanismes de son fonctionnement, les avantages et les difficultés qui peuvent découler de son utilisation ainsi que le processus par lequel vous pouvez créer une requête AJAX.

J’espère qu’il vous aura aider à voir un peu plus clair sur ce concept un peu difficile à appréhender.