Dans le cas des sites web "classiques", la plupart du temps, le serveur renvoie du code HTML au client (que ce soit du code HTML « statique » ou « fabriqué à la volée » par le serveur). À chaque échange client-serveur, une nouvelle page s'affiche ce qui rend la consultation du site quelque peu « hachée » (surtout si la connexion internet n'est pas très performante).

Il est possible d'éviter ces envois incessants de code HTML en « demandant » au serveur de nous envoyer non plus tout le code HTML, mais seulement ce qui est nécessaire pour actualiser la page côté client. Pour ce faire, une série de technologies est mise en œuvre. Toutes ces techniques sont regroupées sous le nom d'AJAX (Asynchronous JavaScript And XML).

Mon but n'est pas de m'étendre sur AJAX, vous devez juste savoir qu'à l'origine, les données qui vont permettre l'actualisation de la page web transitent entre le serveur et le client sous la forme de fichier XML (eXtensible Markup Language). Pour différentes raisons, le XML est de moins en moins utilisé au profit du JSON (JavaScript Object Notation), si vous désirez un retour sur le JSON, consultez les activités consacrées aux bases de données ici.

Dans les exemples qui vont suivre, le serveur enverra principalement au client des données au format JSON (et très peu de code HTML).

À faire vous-même 5.1

Créez une nouvelle application

Saisissez, étudiez et testez cet exemple

index.html


<!doctype html>
<html lang="fr">
<head>
 <meta charset="UTF-8">
 <title>Ajax</title>
 <script src="lib/jquery-2.1.4.min.js"></script>
 <script src="javascript/script.js"></script>
</head>
<body>
 <button>Afficher la liste</button>
 <div id="liste"></div>
</body>
</html>

script.js


$(function(){
$('button').on('click',function(){
 $.ajax({
  type :'GET',
  url : '/api/affiche',
  success : function(data){
   $('#liste').html('<h1>Liste des adhérents</h1>');
   for (var i=0;i<data.length;i++){
    $('#liste').append('<h3>Identifiant : '+data[i].id+'</h3>');
    $('#liste').append('<p>Nom : '+data[i].nom+'</p>');
    $('#liste').append('<p>Prénom : '+data[i].prenom+'</p>');
   }
  }
 })
})
});

serveur.js


var ficheInfo=[
 {
  id:1,
  nom:"Depuis",
  prenom:"Jean"
 },
 {
  id:2,
  nom:"Durand",
  prenom:"Christian"
 },
 {
  id:3,
  nom:"Martin",
  prenom:"Michel"
 }
]
var express = require('express');
var app = express();
app.use('/javascript', express.static(__dirname + '/javascript'));
app.use('/lib', express.static(__dirname + '/lib'));
app.get('/', function (req, res) {
 res.sendFile(__dirname + '/html/index.html');
});
app.get('/api/affiche', function(req, res) {
 res.json(ficheInfo);
});
app.listen(8080);

Quelques explications :

Analyse du fichier script.js

Nous utilisons une structure un peu spéciale : 


$.ajax({ type :'GET', url : '/api/affiche', success : function(data){.....}})

$.ajax est une méthode propre à jQuery, il permet d'envoyer une requête HTTP au serveur.

Cette méthode prend un objet JavaScript en paramètre :


{ type :'GET', url : '/api/affiche', success : function(data){.....}})

À quoi correspond le paramètre « data » vu dans le dernier point ci-dessus ?

Il correspond au corps de la réponse HTTP renvoyée par le serveur. Comme nous le verrons ci-dessous, "data" est, dans cet exemple, un tableau d'objet JavaScript.

Analyse du fichier serveur.js

ficheInfo est un tableau contenant des objets JavaScript (le tableau évoqué ci-dessus) :


	var ficheInfo=[{id:1,nom:"Depuis",prenom:"Jean"},{id:2,nom:"Durand",prenom:"Christian"},{id:3,nom:"Martin",prenom:"Michel"}]
			

app.get('/api/affiche', function(req, res) {res.json(ficheInfo);});

nous avons déjà eu l'occasion de parler de la méthode get de l'objet app, en revanche, le contenu de la fonction de callback est intéressant.


function(req, res) {res.json(ficheInfo);}

json est une méthode (de l'objet res) permettant de renvoyer dans le corps de la réponse HTTP un objet JavaScript ou un tableau contenant des objets JavaScript (ce qui est notre cas ici).

À faire vous-même 5.2

En vous inspirant de ce qui a été fait dans l'application créée dans le "À faire vous-même 5.2", créez une nouvelle application qui permettra d'afficher les informations contenues dans le tableau d'objets JSON suivant : 


[{'nom': 'Durand','prenom': 'Carole','age':32,'sexe': 'F','secret':false},
{'nom': 'Dupond','prenom': 'Jean-Pierre','age':19,'sexe': 'M','secret':false},
{'nom': 'Dupuis','prenom': 'Gérard','age':46,'sexe': 'M','secret':true},
{'nom': 'Michel','prenom': 'Justine','age':22,'sexe': 'F','secret':false},
{'nom': 'Martin','prenom': 'Gertrude','age':56,'sexe': 'F','secret':true},
{'nom': 'Ducro','prenom': 'Patrice','age':27,'sexe': 'M','secret':true},
{'nom': 'Asset','prenom': 'Christophe','age':20,'sexe': 'M','secret':false},
{'nom': 'Buloz','prenom': 'Marie','age':21,'sexe': 'F','secret':true},
{'nom': 'Pouvert','prenom': 'Pierre','age':56,'sexe': 'M','secret':false},
{'nom': 'Pichon','prenom': 'Paulette','age':45,'sexe': 'F','secret':false},
{'nom': 'Thetas','prenom': 'Jeanne','age':58,'sexe': 'F','secret':true}]

Attention ce tableau devra être "stocké" côté serveur, dans le fichier "serveur.js"