TP Ajax

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>
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>
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>
<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>
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>
</head>
<body>
<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

TP Ajax

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

TP Ajax

Загружено:

Авторское право:

Доступные форматы

TP Ajax M.

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

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

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

4- Solution en utilisant XSL

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

6- Solution avec Ajax Spry

Вам также может понравиться