DEVENIR-WEBMASTER.COM Log In
 5
close

A quoi sert AJAX ?

Visiter ma chaine Youtube

Il faut avoir fait les tutoriels sur JAVASCRIPT et sur PHP/MYSQL pour pouvoir comprendre correctement ce tutoriel sur AJAX.

# AJAX permet de mettre en place un canal de communication entre votre navigateur et votre serveur close

On pourrait considérer qu'on a déjà répondu à la question mais tout de même ce qui nous intéresse c'est de voir ce que l'on va faire de ce canal de communication et comment il va se positionner au milieu des autres technologies que l'on a abordé jusqu'ici.

On avait vu dans le tutoriel sur JAVASCRIPT que ce canal de communication pouvait être utilisé par le JAVASCRIPT pour aller chercher des données sur le serveur et s'en servir pour modifier le document.

Communication entre client et serveur

En fait grâce à AJAX un internaute qui produit un clic sur votre page peut déclencher une requête vers votre serveur de manière à aller y chercher des données. C'est important ici de noter qu'il n'y a pas besoin de recharger la totalité de la page.

# Qui prend en charge la communication côté navigateur et qui le fait côté serveur ? close

Du côté du navigateur c'est en JAVASCRIPT que l'on va mettre en place le code qui interroge le serveur.

Du côté du serveur c'est en PHP que l'on va mettre en place le code qui répond au navigateur.

Une requête Ajax

# Sur un exemple on fait "la même chose" avec et sans AJAX et on va comparer close

Dans la fenêtre de gauche nous allons repartir de notre exemple de page dynamique étudié dans le PHP-MYSQL. Je vous rappelle que pour changer d'année il fallait le faire dans la barre d'adresse du navigateur.

Dans la fenêtre de droite je vais utiliser AJAX et je vais vous montrer tout de suite l'intérêt d'utiliser Ajax.

Sur cette page j'ai ajouté un sélecteur qui permet de sélectionner l'année.

Changez l'année et vous allez déclencher une requête vers le serveur. Evidemment c'est les données de l'année en question que vous allez chercher. Ensuite c'est le code JAVASCRIPT qui va mettre à jour le tableau. Vous voyez ici que vous changez d'année sans recharger la page.

# Lecture commentée des codes JAVASCRIPT/AJAX côté client et PHP/MYSQL côté serveur close

On va examiner le code JAVASCRIPT que j'ai dû mettre en place. Le code ci dessous sera exécuté grâce à la mise en place d'un gestionnaire d'événement qui déclenchera l'exécution de ce code que lorsque la valeur du sélecteur changera.

Une requête Ajax

Ce code s'exécute en 4 étapes :

  1. On crée un canal de communication.
  2. On se met immédiatement en attente d'une réponse sur ce canal mais ce n'est pas bloquant.
  3. On continue en envoyant la requête avec les arguments. Ici l'année.
  4. On traite la réponse quand elle arrive.

On va examiner le code PHP qui répond aux requêtes AJAX.

Réponse à une requête AJAX côté serveur

Ce code s'exécute en 4 étapes :

  1. L'année concernée est récupérée.
  2. On sélectionne les données de l'année concernée dans la database.
  3. On les place dans un tableau spécifique.
  4. On les transfère vers le client.

Il faut remarquer une chose c'est que c'est le navigateur qui se fait son tableau. C'est pas le serveur. Le serveur envoie juste les données. Ça on ne peut pas faire moins. Mais le serveur ne refabrique pas toute la page. Vous imaginez si vous avez des milliers de clients, ce que je vous souhaite...le gain est énorme pour le serveur et pour la charge réseau en général.

C'est au moment de l'apparition de ce mécanisme en 2006 / 2007 qu'on s'est mis à parler de web 2.0

Pour le concepteur on peut dire que ça change tout. Beaucoup de choses qui se faisaient en PHP côté serveur se retrouvent déplacées et sont programmées en JAVASCRIPT pour s'exécuter côté client.

Certaines difficultés vont apparaître. Le JAVASCRIPT est assez bavard et côté client c'est bien beau mais le navigateur change d'un client à un autre.

Pour remédier à ça les programmeurs vont créer une librairie par dessus JAVASCRIPT et qui est JQUERY.