Débuter avec Ajax

Débuter avec Ajax


Ce cours vous apprendra à utiliser de l'AJAX dans vos site web. Vous apprendrez de ce cours à obtenir des pages Web dynamiques, vraiment réactives et qui soulageront dans de grandes mesures les échanges avec le serveur.


Qu'est-ce que AJAX ?

Lorsque vous naviguez sur un site web de page en page, les actions de vos utilisateurs se traduisent par les actions suivantes :

  • Envoi d'une requête au serveur afin d'obtenir une nouvelle page à afficher,
  • Calcul de la nouvelle page par le serveur et envoi des données HTML/CSS correspondantes,
  • Affichage de ces données dans le navigateur.

Cela fonctionne très bien mais il arrive que parfois seule une partie de la page nécessite d'être mise à jour. C'est là que le rôle d'AJAX entre en jeu :

  • On envoie une requête au serveur afin d'obtenir les données qui seront affichées / rafraîchi dans une partie bien précise de la page actuelle,
  • Puis on calcule les données demandées par le serveur et on envoie ces données au navigateur.


Comment l'emploie-t-on ?

Le but de ce cours et que vous voyez à quoi cela peut ressembler ! Alors s'en plus attendre je vais vous montrer des exemples :


Mettre à jour du contenu

Ci-dessous, le code permet de mettre à jour du texte :

(Il est possible de mettre à jour une animation, une image, une vidéo, etc.)


<button id="texte1">Mise à jour du texte</button>

<div id="premiertexte">
   Ancien texte avant de mettre à jour par le nouveau texte
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
  $(function() {
    $('#texte1').click(function() {
      $('#premiertexte').load('texte1.html', function() {
        alert('La première zone a été mise à jour');
      });
    });
</script>


Mettre une animation pour faire patienter l'utilisateur

Il est possible que certaines requêtes Ajax nécessite plus de temps afin d'afficher le contenu. C'est pour cela qu'il faut faire patienter l'utilisateur avec une image au format gif.


<input type="button" id="afficher" value="Afficher"/>
<br/>
<div id="resultat"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
   $(function() {
      $('#afficher').click(function() {
         $('#resultat').html('<img src="https://www.votresite.com/mesimages/loader.gif" alt="load"/>');
         var param = '';
         $('#resultat').load('https://www.votresite.com/fichier.php', param);
      });  
   });
</script>
Par Clouder le 26 Feb 2019
Cette pub permet au site de vivre ...

4 commentaires

Tu veux participer ?
Alors connecte toi ou inscris toi et viens participer !
Clouder
le 14 Jan 2019 à 12:13
Synetic LoOny,
Merci 👍
Synetic LoOny
le 13 Jan 2019 à 22:38
Si ! J'ai mis ceci : 

et le problème c'est qu'il aurait fallut que je mette cela à la place :
Je n'ai pas assez réfléchie avant de poser la question c'etait assez evident  désolé. Néanmoins, il semble manquer }); a la fin du premier code. 😉
Clouder
le 29 Dec 2018 à 17:57
N'y a t'il pas une erreur dans le premier code ? 
Si ! J'ai mis ceci : 

et le problème c'est qu'il aurait fallut que je mette cela à la place :
Synetic LoOny
le 24 Dec 2018 à 17:07
N'y a t'il pas une erreur dans le premier code ?