Vous êtes sur la page 1sur 8

TP Ajax M.

Youssfi

TP AJAX

On considère Une base de données MYSQL qui contient deux tables « auteurs » et
« livres ». Un auteur peut créer plusieurs livres. La structure de cette base de données est la
suivante :
Table auteur
Table livre

On souhaite créer une application web utilisant la technologie Ajax qui permet de :
 Afficher tous les auteurs dans un tableau HTML
 En cliquant sur un auteur, afficher tous les livres de cet auteur.

1- Créer un script PHP out JSP qui permet de se connecter à la base de données et
retourner un fichier XML qui contient tous les auteurs (voir illustration ci dessous)

1/8
TP Ajax M.Youssfi

2- Créer un script PHP ou JSP qui reçoit un paramètre URL avec GET qui représente la
valeur id d’un auteur et qui permet de retourner un fichier XML qui contient tous les
livres de cet auteur. (voir illustration ci dessous)

3- Créer une page HTML qui permet de :


a. Envoyer une requête Ajax vers le fichier auteurs.php et de charger le fichier
XML retourné par ce script.
b. Afficher les auteurs dans un tableau HTML en utilisant java script et le DOM.
c. En cliquant sur un auteur,
 envoyer une requête Ajax vers le script livres.php en lui envoyant le
paramètre url « ida » par la méthode GET, qui contient la valeur de
idAuteur concerné par le lien.
 Charger le fichier XML de la réponse http correspondant à la requête
précédente.
 Afficher ces auteurs dans un autre tableau HTML

4- Refaire le même travail de la question précédente en utilisant des feuilles de style XSL
pour transformer les deux fichiers XML en HTML.
5- Refaire le même travail de la question précédente en utilisant le framework Ajax Spry.

2/8
TP Ajax M.Youssfi

Solution

1- auteurs.php

<?
$conn=mysql_connect("localhost","root","") or
die(mysql_error());
mysql_select_db("db_aj",$conn)or die(mysql_error());
$req="select * from auteur";
$rsAut=mysql_query($req)or die(mysql_error());
header('Content-Type:text/xml');
echo('<?xml version="1.0" encoding="iso-8859-1"?>');
?>
<auteurs>
<? while($aut=mysql_fetch_assoc($rsAut)){?>
<auteur id="<? echo $aut['id']?>" nom="<? echo
$aut['nom']?>"/>
<? }?>
</auteurs>

2- livres.php

<?
if (isset($_GET['ida'])){
$idauteur=$_GET['ida'];
}
else{
$idauteur=0;
}
$conn=mysql_connect("localhost","root","") or die(mysql_error());
mysql_select_db("db_aj",$conn)or die(mysql_error());
$req="select * from livre where idAuteur=$idauteur";
$rs=mysql_query($req)or die(mysql_error());
header('Content-Type:text/xml');
echo('<?xml version="1.0" encoding="iso-8859-1"?>');
?>
<auteur idAut="<? echo $idauteur ?>">
<? while ($liv=mysql_fetch_assoc($rs)){?>
<livre
id="<? echo($liv['id'])?>"
titre="<? echo($liv['titre'])?>"/>
<? }?>
</auteur>

3/8
TP Ajax M.Youssfi

3- Solution a vec Ajax (J ava Script et DO M)

a- xhr.js

function getXhr(){
var xhr = null;
if(window.XMLHttpRequest) // Firefox et autres
xhr = new XMLHttpRequest();
else if(window.ActiveXObject){ // Internet Explorer
try {
xhr = new ActiveXObject("Msxml2.XMLHTTP"); }
catch (e) { xhr = new
ActiveXObject("Microsoft.XMLHTTP"); }}
else {
// XMLHttpRequest non supporté par le navigateur
alert("Le navigateur ne supporte pas les objets
XMLHTTPRequest...");
xhr = false; }
return xhr
}

b- Biblio2.htm

<html>
<head>
<title>Biblio</title>
<script src="JS/xhr.js" type="text/javascript"></script>
<script type="text/javascript">
function chargerLivres(idA){

var xhr=getXhr();
xhr.onreadystatechange=function(){
if((xhr.readyState==4) && (xhr.status==200)){

var dsL=xhr.responseXML;
var tabL=dsL.getElementsByTagName("livre");
var res='<table><tr><th>Livres</th></tr>';
for(i=0;i<tabL.length;i++){
idL=tabL[i].attributes[0].value;
nomL=tabL[i].attributes[1].value;
res=res+'<tr><td>'+nomL +'</td></tr>';
}
res=res+"</table>";
//alert(res);
document.getElementById("livres").innerHTML=res;
//auteurs.innerHTML=res;
}
}
xhr.open("GET","livres.php?ida="+idA,true);
xhr.send(null);
}
</script>
</head>
<body>

4/8
TP Ajax M.Youssfi

<table width="625" border="1">


<tr>
<td width="296" valign="top"><div
id="auteurs">Auteurs</div></td>
<td width="258" valign="top"><div id="livres">Livres</div></td>
</tr>
</table>
<script type="text/javascript">
var xhr=getXhr();

xhr.onreadystatechange=function(){
if((xhr.readyState==4) && (xhr.status==200)){

var dsAut=xhr.responseXML;
var tabAut=dsAut.getElementsByTagName("auteur");
var res='<table><tr><th>Auteurs</th></tr>';
for(i=0;i<tabAut.length;i++){
idL=tabAut[i].attributes[0].value;
nomL=tabAut[i].attributes[1].value
res=res+'<tr><td><a
href="javascript:chargerLivres('+idL+')">'
+nomL +'</td></tr>';
}
res=res+"</table>";
//alert(res);
var region= document.getElementById("auteurs");
region.innerHTML=res;
//auteurs.innerHTML=res;
}
}
xhr.open("GET","auteurs.php",true);
xhr.send(null);
</script>
</body>
</html>

4- Solution en utilisant XSL


a. auteurs.xsl
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
version="1.0">
<xsl:template match="/">
<table>
<tr>
<td>ID</td><td>NOM</td>
</tr>
<xsl:for-each select="auteurs/auteur">
<xsl:variable name="id" select="@id"/>
<xsl:variable name="nom" select="@nom"/>
<tr>
<td><xsl:value-of select="$id"/></td>
<td><a
href="javascript:chargerLivres({$id})"><xsl:value-of
select="$nom"/></a>
</td>

5/8
TP Ajax M.Youssfi

</tr>
</xsl:for-each>
</table>
</xsl:template>
</xsl:stylesheet>

b. livres.xsl

<?xml version="1.0" encoding="UTF-8"?>


<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:template match="/">
<table>
<tr>
<td>ID</td><td>NOM</td>
</tr>
<xsl:for-each select="auteur/livre">
<tr>
<td><xsl:value-of select="@id"/></td>
<td><xsl:value-of select="@titre"/></td>
</tr>
</xsl:for-each>
</table>
</xsl:template>
</xsl:stylesheet>

5- BiblioXSL.htm

<html>
<head>
<title>Biblio</title>
<script src="JS/xhr.js" type="text/javascript"></script>
<script type="text/javascript">
var xslDoc2=null;
function chargerLivres(idA){
var xhr=getXhr();
xhr.open("GET","livres.php?ida="+idA,false);
xhr.send(null);
var xmlDoc=xhr.responseXML;
if(xslDoc2==null){
var xhrXSL=getXhr()
xhrXSL.open("GET","livres.xsl",false);
xhrXSL.send(null);
xslDoc2=xhrXSL.responseXML;
}
var res=xmlDoc.transformNode(xslDoc2);
livres.innerHTML=res;

}
</script>
</head>
<body>
<table width="625" border="1">
<tr>
<td width="296" valign="top"><div id="auteurs">Auteurs</div></td>
<td width="258" valign="top"><div id="livres">Livres</div></td>

6/8
TP Ajax M.Youssfi

</tr>
</table>
<script type="text/javascript">
var xhr=getXhr();
var xhrXSL=getXhr()
xhr.open("GET","auteurs.php",false);
xhr.send(null);
var xmlDoc=xhr.responseXML;
xhrXSL.open("GET","auteurs.xsl",false);
xhrXSL.send(null);
var xslDoc=xhrXSL.responseXML;
var res=xmlDoc.transformNode(xslDoc);
auteurs.innerHTML=res;
</script>
</body>
</html>

6- Solution avec Ajax Spry

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:spry="http://ns.adobe.com/spry">
<head>
<title>TP Ajax avec Spry</title>
<script src="SpryAssets/xpath.js" type="text/javascript"></script>
<script src="SpryAssets/SpryData.js"
type="text/javascript"></script>
<script type="text/javascript">
<!--
var dsAut = new Spry.Data.XMLDataSet("auteurs.php",
"auteurs/auteur");
var dsL = new Spry.Data.XMLDataSet("livres.php?ida={dsAut::@id}",
"auteur/livre");
//-->
</script>
</head>

<body>
<table width="684" border="1">
<tr>
<td width="317"><div spry:region="dsAut">
<table>
<tr>
<td width="110">Auteurs</td>
</tr>
<tr spry:repeat="dsAut" spry:setrow="dsAut">
<td><a href="#">{@nom}</a></td>
</tr>
</table>
</div></td>
<td width="278"><div spry:region="dsL">
<table>
<tr>
<th>Livres</th>
</tr>
<tr spry:repeat="dsL">

7/8
TP Ajax M.Youssfi

<td>{@titre}</td>
</tr>
</table>
</div></td>
</tr>
</table>
</body>
</html>

8/8