Web dynamique Données asynchrones (AJAX)

Ajax

Ajax est un moyen de recharger dynamiquement des parties de contenus dans la page.

Exercice : Introduire une dynamique ajax par la lecture d'un flux RSS

Comment faire...

Pourquoi pas le faire avec jQuery

La documentation jQuery explique l'utilisation de la méthode $.ajax()

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
  function myAjax(){
    $.ajax({
      url: "07_ajax.php"
    }).done(function( txt ) {
      $('div#RSSReader').html( txt );
    });
  }
</script>

Après avoir lié la librairie jQuery, il est possible de faire appel à la fonction $.ajax(). Cette fonction effectue l'appel en HTTP de contenus sur le serveur de manière asynchrone. Il suffit d'y introduire l'adresse du fichier en initiant la valeur "url"

Dans le cas où du contenu est retournée par le serveur, il peut être récupérée par la fonction done() ce qui permet notamment de l'introduire ensuite dans le contenu HTML de la page. C'est le cas de l'exemple présenté ci-dessous en utilisant la fonction jQuery html().

Appel à la fonction au chargement de la page

$(window).load( function(){
  myAjax();
  checkRSS = setInterval( function(){ myAjax(); }, 5000 );
});

La fonction (méthode) "$(window).load" fait appel à la fonction "doRSSUpdate()" toutes les 5 secondes grâce à la fonction Javascript "setInterval".

HTML : Préparer un conteneur qui affiche les contenus transmis

<div id="RSSReader"></div>

Ne sert qu'à afficher le résultat du processus AJAX.

PHP : Transmettre des données asynchrones

Contenu à afficher

Le fichier PHP est consulté toutes 5 secondes par le processus AJAX. Tout contenu édité dans ce fichier sera automatiquement mis à jour dans la page HTML.

Pour pousser la dynamique encore plus loin, le fichier PHP peut se connecter à un flux RSS (au format) XML et afficher son contenu.

PHP : Lecture du flux RSS

<?php
$ch = curl_init();
curl_setopt( $ch, CURLOPT_URL, 'http://www.24heures.ch/monde/rss.html' );
curl_setopt( $ch, CURLOPT_RETURNTRANSFER, 1 );
$output = curl_exec( $ch );
curl_close( $ch );

$xml = simplexml_load_string($output);
?>

<ol>
<?php
foreach( $xml->channe->item as $item ){
   ?>
   <li>
      <a href="<?php echo $item->link; ?>"><?php echo $item->title; ?></a><br />
   </li>
   <?php
}
?>
</ol>

Le code PHP consulte le fichier situé à l'adresse "http://www.24heures.ch/monde/rss.html" par la fonction PHP "curl_setopt()" destinée à récupérer les données du fichier distant (en occurrence au format XML, bien que l'extension indique HTML).

Les données contenus dans les balises <link> et <title> du fichier XML sont directement inscrites dans le code HTML par l'entremise d'une boucle pour extraire chaque article présent dans le fichier.