jQuery – AJAX

LEÇON

 

Qu'est-ce que AJAX ?

 

Le principe d'AJAX est très simple : faire une mise à jour depuis le serveur d'une partie de la page, sans rechargement de la page entière.

 

Peut-on faire un appel AJAX sans jQuery ?

 

Oui. On peut le faire en exploitant l'objet XMLHttpRequest qui est disponible de base en JavaScript.

En savoir plus : http://www.w3schools.com/xml/xml_http.asp

Mais en pratique, il est plus facile de faire un appel AJAX avec jQuery...

 

Exemple

 

Voici une page créée avec AJAX : http://www.web-design-codex.fr/samples/ajax/cac40/cac40.html

Remarquer que si on fait apparaître les réponses aux questions (on manipule le DOM) l'état de la page est conservé à travers les appels AJAX pour refraîchir le taux CAC40.

Si on avait codé la page pour rafraîchir la page toutes les 2 secondes (au lieu de faire un appel AJAX toutes les 2 secondes) alors l'état de la page serait remis à zéro pour chaque appel.

 

La partie intéressant du code JavaScript est la suivante :

 


function ajaxd() {
  $.ajax({
   url: "ws/cac40.php",
   dataType : "text",
   success: function(response){
     console.log(response);
     $('#cac40-taux').html(response);
   },
   error: function(xhr, status, errorThrown){
     $('#cac40-taux').html("error");
   }
  });
}

$(document).ready(function() {
  ajaxd();
  setInterval("ajaxd()",2000);
});

 

 

Tout le code côté client :

 

cac40.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>jQuery et AJAX</title>
        <link rel="stylesheet" href="cac40.css" type="text/css" />
        <script type="text/javascript" language="JavaScript" src="jquery-1.11.2.js"></script>
        <script type="text/javascript" language="JavaScript" src="cac40.js"></script>
    </head>

    <body>
        <img src="bourse.png">

        <div id="cac40-cadre">
          <p id="cac40-title">CAC40</p>
          <p id="cac40-taux"></p>
        </div>

        <h1>La Bourse</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer facilisis, est at tincidunt aliquam, elit mi placerat metus,
           non cursus turpis orci in diam. Morbi non malesuada lacus, in pharetra velit. Duis bibendum sem vel arcu ornare tincidunt.
           In vel dignissim est, eget aliquet metus. Pellentesque at lectus sit amet leo maximus pellentesque quis id metus. Fusce hendrerit
           vulputate tortor, eget gravida neque aliquam ac.</p>

        <h3><a href="javascript:ReverseDisplay('q1')">&gt; Quel est le rôle de la bourse ?</a></h3>
        <div id="q1" class="reponse" style="display:none;">
          <p>Vestibulum dolor metus, euismod quis dui eu, iaculis dignissim turpis. Cras efficitur eu magna ac sagittis. Ut a elit ac arcu
             suscipit mollis. Nullam volutpat nisl massa, vel commodo leo dictum ac. Donec ut viverra ex. Morbi et lorem sed tortor ornare
             aliquet. Nulla ac sodales odio. Sed non varius odio, ut condimentum magna. Phasellus sagittis lobortis tortor at cursus.</p>
        </div>

        <h3><a href="javascript:ReverseDisplay('q2')">&gt; Comprendre le CAC40 ...</a></h3>
        <div id="q2" class="reponse" style="display:none;">
          <p>Proin euismod facilisis accumsan. Donec odio diam, placerat vitae libero vel, sagittis hendrerit erat. Duis in rutrum velit.
             Sed aliquet sollicitudin ante, eleifend ultricies risus fermentum ac. Donec ut viverra ex. Morbi et lorem sed tortor ornare
             aliquet. Nulla ac sodales odio. Sed non varius odio, ut condimentum magna. Phasellus sagittis lobortis tortor at cursus.
             Aliquam ac est odio. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse vitae ligula vestibulum,
             lobortis odio sed, eleifend nisl. Phasellus venenatis dapibus lorem, eget dapibus mauris maximus dapibus.</p>
        </div>

        <h3><a href="javascript:ReverseDisplay('q3')">&gt; Que faire quand je suis riche ?</a></h3>
        <div id="q3" class="reponse" style="display:none;">
          <p>Aliquam ac est odio. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse vitae ligula vestibulum,
             lobortis odio sed, eleifend nisl. Phasellus venenatis dapibus lorem, eget dapibus mauris maximus dapibus. Duis in rutrum velit.
             Sed aliquet sollicitudin ante, eleifend ultricies risus fermentum ac. Donec ut viverra ex. Morbi et lorem sed tortor ornare
             aliquet. Nulla ac sodales odio. Sed non varius odio, ut condimentum magna. Phasellus sagittis lobortis tortor at cursus.
             Aliquam ac est odio. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
        </div>

        <h3>Morbi dictum maximus magna sit amet vestibulum</h3>

        <p>Ut viverra dapibus velit ac consequat. Nulla est elit, vulputate nec mi ut, maximus varius lorem. Aenean quis tristique eros.
           Morbi dictum maximus magna sit amet vestibulum. Maecenas accumsan neque vitae eleifend aliquet. Fusce tellus eros, tristique
           rhoncus sodales vel, fringilla at odio. Sed porta nisi non felis tincidunt, eget posuere quam pulvinar. Aenean dapibus pharetra
           lorem at blandit. </p>

           <p>Morbi dictum maximus magna sit amet vestibulum. Maecenas accumsan neque vitae eleifend aliquet. Fusce tellus eros, tristique
           ut viverra dapibus velit ac consequat. Nulla est elit, vulputate nec mi ut, maximus varius lorem. Aenean quis tristique eros.
           rhoncus sodales vel. Sed porta nisi non felis tincidunt, eget posuere quam pulvinar. Aenean dapibus pharetra
           lorem at blandit fringilla at odio. </p>

    </body>

</html>

 

cac40.css

body
{
  width:960px;
  margin:0 auto;
  background-color:#ffffe0;
  color:black;
}

img
{
  margin:0;
  padding:0;
}

a
{
  text-decoration:none;
  color:teal;
}

.reponse
{
  color:gray;
}

#cac40-cadre
{
  float:right;
  border:5px solid gray;
  width:230px;
  height:100px;
  background-color:#ffffc0;
  margin:10px 0px 30px 50px;
  font-family:sans-serif;
  padding:10px;
}

#cac40-title
{
  font-size:20px;
  font-weight:bold;
  margin:0px 0px 5px 0px;
  color:red;
}

#cac40-taux
{
  font-size:48px;
  font-weight:bold;
  color:blue;
  margin:0;
}

 

cac40.js

function ReverseDisplay(d)
{
  if(document.getElementById(d).style.display == "none") {
    document.getElementById(d).style.display = "block";
  }
  else {
    document.getElementById(d).style.display = "none";
  }
}

function ajaxd() {
  $.ajax({
   url: "ws/cac40.php",
   dataType : "text",
   success: function(response){
     console.log(response);
     $('#cac40-taux').html(response);
   },
   error: function(xhr, status, errorThrown){
     $('#cac40-taux').html("error");
   }
  });
}

$(document).ready(function() {
  ajaxd();
  setInterval("ajaxd()",2000);
});

 

 

Le code côté serveur :

 

Le côté serveur dans cet exemple est un web-service écrit en PHP. C'est un simulateur de taux CAC40.

Etant une URL à part, on peut appeler ce web-service directement : http://www.web-design-codex.fr/samples/ajax/cac40/ws/cac40.php

Pour info, voici le code du simulateur CAC40 :

 

ws/cac40.php

<?php
//get previous rate or default if none
$fichier = ("cac40.data");
$contenu = file($fichier);
$prev_rate_str = $contenu[0];

//parse the rate into a float
$prev_rate = floatval($prev_rate_str);
$new_rate = $prev_rate;

//add a random fluctuation but apply limits
if ($prev_rate < 4000.0)
{
  $fluctuation = rand(0,5000) / 1000.0; //under 4000 positive move only
  $new_rate = $prev_rate + $fluctuation;
}
elseif ($prev_rate < 4500.0)
{
  $fluctuation = (rand(0,7500) - 2500) / 1000.0; //under 4500 more likely to be a positive move
  $new_rate = $prev_rate + $fluctuation;
}
elseif ($prev_rate > 6000.0)
{
  $fluctuation = rand(0,5000) / 1000.0; //over 6000 negative move only
  $new_rate = $prev_rate - $fluctuation;
}
elseif ($prev_rate > 5500.0)
{
  $fluctuation = (rand(0,7500) - 2500) / 1000.0; //over 5500 more likely to be a negative move
  $new_rate = $prev_rate - $fluctuation;
}
else
{
  $fluctuation = (rand(0,10000) - 5000) / 1000.0; //in between 4500 and 5500 free random move up or down
  $new_rate = $prev_rate + $fluctuation;
}

//convert new rate to string
$new_rate_str = number_format($new_rate, 2, '.', ''); //2 decimal places, decimal point is comma, no thousands separator

//write the new rate to file
$fp = fopen($fichier , "w");
fputs($fp , $new_rate_str);
fclose($fp);

//output the rate
echo $new_rate_str;
?>

 

Et voici le fichier dans lequel le script PHP stocke le taux actuel. Le contenu est le contenu de départ pour un nouveau service.

ws/cac40.data

5000.00