Médiaforma

All posts tagged asynchrone

Pour mettre à jour un élément sur une page Web en utilisant des données stockées sur le serveur, le plus simple consiste à utiliser la méthode jQuery load() :

load('URL de l'élément', function() {

//une ou plusieurs instructions exécutées après le chargement des données

});

 

La fonction callback est facultative. Si elle est présente, les instructions qui la composent seront exécutées lorsque le fichier aura été entièrement rapatrié par la méthode load().

A titre d’exemple, ce document (load.htm) contient deux boutons et un élément div. Le premier bouton va être utilisé pour afficher un texte dans l’élément div et le deuxième pour afficher une image dans ce même élément :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Chargement AJAX avec load()</title>
    <style>
      #zone {
        width: 300px;
        height: 315px;
        border-style: solid;
        border-width: 3px;
        border-color: black;
      }
    </style>
  </head>
  <body>
    <script src="jquery.js"></script>
    <button id="charge-texte">Charger le texte</button>
    <button id="charge-image">Charger l'image</button><br/><br/>
    <div id="zone"></div>
    <script>
      $(function() {
        $('#charge-texte').on('click', function(){
          $('#zone').load('texte.htm');
        });
        $('#charge-image').on('click', function(){
          $('#zone').load('image.htm');
        });
      });
    </script>
  </body>
</html>

 

Dans cet exemple, aucune fonction callback n’étant spécifiée dans les paramètres de la méthode load(), cette dernière se contente de charger les fichiers HTML correspondants et de les afficher dans l’élément div.

Voici le code du fichier texte.htm :

<!DOCTYPE html>
<html>
  <head>
    <title>Texte</title>
  </head>
  <body>
    <p>
    <font size="3"><i>Lorem <b>ipsum</b> dolor sit amet, consectetur adipiscing elit. Sed non
    risus. Lectus tortor, dignissim sit amet, adipiscing nec,
    ultricies sed, dolor. Cras elementum ultrices diam. Maecenas
    ligula massa, varius a, semper congue, euismod non, mi. Proin
    porttitor, orci nec nonummy molestie, enim est eleifend mi, non
    fermentum diam nisl sit amet erat. Duis semper.</i></font>
    </p>
  </body>
</html>

Et voici le code du fichier image.htm :

<!DOCTYPE html>
<html>
  <head>
    <title>Image</title>
    <style type="text/css">
      p { text-align: center;}
    </style>
  </head>
  <body>
    <p><img src="chat.jpg"></p>
  </body>
</html>

Dans un site Web traditionnel (non AJAX), lorsque l’utilisateur demande l’affichage d’une nouvelle page, par exemple en cliquant sur un lien hypertexte, une requête http est envoyée au serveur. Ce dernier retourne une page HTML et des règles de mise en forme CSS qui sont interprétées dans le navigateur pour afficher la nouvelle page.

Dans un site Web qui exploite la technologie AJAX, il est possible de mettre à jour une partie d’une page et non la page entière. Le client envoie une requête http au serveur pour obtenir les données souhaitées. Les données sont envoyées au client. Ces données sont reçues par le client et le moteur AJAX les envoie dans l’élément qui doit les recevoir sans toucher au reste de la page.