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 :

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

Table auteur Table livre

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- Solution avec Ajax (Java Script et DOM)

a- xhr.js

3 / 8

TP Ajax M.Youssfi

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><table width="625" border="1"> <tr> <td width="296" valign="top"><div id="auteurs">Auteurs</div></td>

4 / 8

TP Ajax M.Youssfi

<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 XSLa. 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> </tr> </xsl:for-each> </table> </xsl:template></xsl:stylesheet>

5 / 8

TP Ajax M.Youssfi

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> </tr> </table> <script type="text/javascript"> var xhr=getXhr(); var xhrXSL=getXhr()

6 / 8

TP Ajax M.Youssfi

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"></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"> <td>{@titre}</td> </tr> </table> </div></td> </tr></table>

7 / 8

TP Ajax M.Youssfi

</body></html>

8 / 8

Documents

TP AJAX