Cyril Rabat


Utilisation d'AJaX

 26/10/2016     09/11/2016      Programmation PHP      Programmation client/serveur      AJaX   

Utilisation d'AJaX pour la réception de JSON

   Cet article présente un exemple simple d'utilisation d'AJaX avec la réception de données au format JSON.

Mots-clefs :   AJaX     JSON   

Archive de tous les fichiers correspond à cet article :

 AJaX.zip

Le fichier HTML

Ce fichier HTML est une coquille vide qui permettra d'afficher les informations reçues au format JSON, via une requête AJaX. Il comprend surtout un bouton qui génère une requête AJaX pour récupérer la news suivante. Il est associé à la fonction Javascript getNews.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <title>Afficheur de news</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        <meta name="description" content="Test d'AJaX"/>
        <meta name="author" content="Cyril Rabat"/>
    </head>
    <body>
      <h1>News</h1>
 
      <h2 id="titreNews"></h2>
      <p id="corpsNews"></p>
      <p id="dateNews"></p>
 
      <button type="button" onclick="javascript:getNews()">News suivante</button>
 
      <script src="fonctions.js"></script>
    </body>
 </html>

 Télécharger le fichier

Le fichier Javascript

Ce fichier contient les différentes fonctions qui seront utilisées pour envoyer la requête et traiter la réponse. En variable globale, nous retrouvons la requête http (AJaX), ainsi que le numéro de la news en cours. La fonction getNews est appelée lorsque l'utilisateur clique sur le bouton News suivante. La fonction handler est attachée à la requête http : elle est appelée lorsque la réponse est reçue (ou qu'une erreur est détectée).

var requeteHTTP = new XMLHttpRequest(); // Création de l'objet
requeteHTTP.onloadend = handler;        // Spécification de l'handler à exécuter
var courante = 0;                       // Numéro de la news courante
 
// Fonction pour récupérer la news suivante
function getNews() {
    var URL = "getNews.php?id=" + courante; 
    requeteHTTP.open("GET", URL, true);
    requeteHTTP.send();
}
 
function handler() {
    if((requeteHTTP.readyState == 4) && (requeteHTTP.status == 200)) {
        var docJSON = JSON.parse(requeteHTTP.responseText);
        document.getElementById("titreNews").innerHTML = docJSON['titre'];
        document.getElementById("corpsNews").innerHTML = docJSON['corps'];
        document.getElementById("dateNews").innerHTML = docJSON['date'];
        courante = docJSON['suivant'];
    }	  	
    else {
        alert("Erreur lors de la requête AJaX.");
    }
}

 Télécharger le fichier

Le script PHP

Le script PHP permet de générer une news au format JSON. Le numéro de la news est envoyé en mode GET. Le fichier JSON est lu puis la news correspondante est extraite, puis envoyée. À noter qu'il est possible de tester ce script directement en spécifiant le numéro de la news dans l'URL (en ajoutant par exemple ?id=0).

<?php
header("Content-type: application/json");
 
$listeNews = json_decode(file_get_contents("listeNews.json"), true);
 
if(!isset($_GET['id']))
    $num = 0;
else {
    $num = intval($_GET['id']);
    if(($num < 0) || ($num >= sizeof($listeNews)))
        $num = 0;
}
 
$news = $listeNews[$num];
$news["suivant"] = ($num + 1) % sizeof($listeNews);
echo json_encode($news);
?>

 Télécharger le fichier

Le fichier JSON

Ce fichier contient l'ensemble des news au format JSON. Il s'agit d'un tableau d'objets, chaque objet contenant un titre, un contenu et une date. Lors d'une requête, ce fichier est lu par le script PHP et la news choisie est envoyée au script HTML.

[
  {
    "titre" : "Première news",
    "corps" : "Aujourd'hui, il faut travailler.",
    "date" : "26/10/2016"
  },
  {
    "titre" : "Deuxième news",
    "corps" : "Comme tous les jours, il faut <b>toujours</b> travailler !!!",
    "date" : "26/10/2016"
  }
]

 Télécharger le fichier

Exécution

Pour exécuter les différents codes, il faut utiliser un serveur Web (par exemple UWamp, sous Windows). Les fichiers doivent être placés dans le répertoire www : on suppose ici qu'ils seront placés dans un sous-répertoire AJaX. Une fois le serveur exécuté, on accède à la page  http://localhost/AJaX/.


Version de cette page Mercredi 16 Décembre 2015

© Cyril Rabat 2016

Connexion

Mot de passe perdu

Dernières nouvelles

Aucune pour le moment

Contact

Courriel :
cyril.rabat [at] univ-reims.fr

Téléphone :
+33-326-91-33-81

Fax :
+33-326-91-33-97

Facebook :
lien Facebook direct