Travaux sur Machine de aci
8. AJAX & SQL, un exemple avec une base de CD audio

L’intérêt de requêtes HTTP asynchrones est nettement perceptible lorsque celles-ci sont longues à honorer, typiquement parce que le serveur HTTP doit devenir lui-même client d’un serveur de base de données, SQL ou autre. Le but de la présente séance est d’écrire un formulaire HTML essentiellement composé de code JavaScript interrogeant de manière asynchrone un serveur accédant à la base de données freedb qui indique le nom, les titres et les musiciens de 2 millions de CD audio.

Une copie partielle de cette base a été installée sur la machine poux.ufr-info-p6.jussieu.fr uniquement accessible des salles de travaux sur machines. On l’interroge à l’aide d’un script qui retourne une table HTML décrivant les entrées retenues (la réponse est donc du XML commençant par une balise table puis tr, puis une suite de th pour le titre des colonnes, puis des tr et td pour le contenu proprement dit). Ce script, nommé ˜esj/ACI/cddb.php, admet 3 paramètres select, from, where permettant de construire un requête SQL sans imbrications (en raison d’un filtre de sécurité draconien) sur les tables définies ci-après :

— Cette table contient tous les titres des disques et morceaux
create table title (
id int4 primary key,
title varchar(255)
) ;
— Cette table contient tous les commentaires d’albums (EXTD) ou morceaux (EXTT).
create table extt (
id int4 primary key,
comment varchar(255)
) ;
— Cette table contient tous les genres (DGENRE).
create table genre (
id int2 primary key,
name varchar(255)
) ;
— Cette table décrit un disque.
— titre, genre et commentaire général sont référencés dans leur table respective.
create table cd (
id char(8) primary key,
duration int2 not null, — en secondes
title_id int4 not null references title, — titre du disque
year int2 null,
genre_id int2 not null references genre,
extt_id int4 not null references extt
) ;
— Cette table indique les titres des plages de tous les disques
create table content (
cd_id char(8) not null references cd,
track int2 not null,
title_id int4 not null references title
) ;
— Cette table indique les commentaires des plages de tous les disques
create table extra (
cd_id char(8) not null references cd,
track int2 not null,
extt_id int4 not null references extt
) ;


1 Affichage d’une description sommaire

Ecrire un formulaire HTML permettant de saisir une clause Select, une clause From et une clause Where. A la soumission, une fonction JavaScript devra être appelée. Elle invoquera le script cddb.php avec les arguments saisis et placera à la suite du formulaire la réponse envoyée par le script. Elle utilisera évidemment la fonction ajax vue aux transparents 17 et 18 du cours 9 ici rappelée :

function ajax(rappel, method, url, flux){
 var req = window.XMLHttpRequest ? new XMLHttpRequest() :
        (window.ActiveXObject ?  new ActiveXObject("Microsoft.XMLHTTP") : '');
 if (req) {
         req.onreadystatechange = function () {rappel(req);}
         req.open(method,  url, true);
         req.send(flux);
 } else alert("Ajax ?");
}

Obtenir un formulaire de soumission de comptes rendus

2 AJAX et invisibilité

On considère le cas particulier d’un requête commençant par SELECT title.title, cd.id FROM title, cd. Le script a donc ramené une table HTML de deux colonnes mentionnant seulement le titre d’un disque et son identifiant.

Modifier ce résultat, de sorte que seuls les titres sont affichés, et quand l’utilisateur clique sur l’un d’eux, le navigateur demande au script de lui retourner la liste des titres du disque. A réception, cette liste s’affiche en dessous du titre de l’album dans la table originale dont le reste de l’affichage est inchangé.


Obtenir un formulaire de soumission de comptes rendus

logo-spip E. Saint-James & F. Kordon - Master Informatique - UPMC Valid XHTML 1.0!
Calculé le 19 janvier 2021 à 07h30min