<!-- If the browser does not support frames put the first topic content here --> <div class="WordSection1"> <div style= 'border:solid windowtext 1.0pt;padding:1.0pt 4.0pt 1.0pt 4.0pt'> <h1 align="center" style= 'text-align:center;border:none;padding:0cm'><a name="node0" id= "node0"></a>Initiation à AJAX</h1> </div> <h2><a name="node1" id="node1"></a><span style= 'font-size:16.0pt;color:windowtext'>Une approche du web 2.0</span></h2> <table class="MsoNormalTable" border="1" cellspacing="0" cellpadding="0" width="643" style= 'width:482.4pt;border-collapse:collapse;border:none'> <tr> <td width="139" valign="top" style= 'width:104.4pt;border:solid windowtext 1.0pt; background:#99CCFF;padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" align="center" style= 'text-align:center;text-autospace:none'><b><span style= 'font-size:14.0pt;color:#000081'>Propriétés</span></b></p> </td> <td width="504" valign="top" style= 'width:378.0pt;border:solid windowtext 1.0pt; border-left:none;background:#99CCFF;padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" align="center" style= 'text-align:center;text-autospace:none'><b><span style= 'font-size:14.0pt;color:#000081'>Description</span></b></p> </td> </tr> <tr> <td width="139" valign="top" style= 'width:104.4pt;border:solid windowtext 1.0pt; border-top:none;padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" style='text-autospace:none'><b><span style= 'font-size: 9.0pt;color:#9A0033'>Intitulé long</span></b></p> </td> <td width="504" valign="top" style= 'width:378.0pt;border-top:none;border-left: none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt; padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" style='text-autospace:none'><span style= 'color:#000081'>Initiation à la technique de développement Ajax</span></p> </td> </tr> <tr> <td width="139" valign="top" style= 'width:104.4pt;border:solid windowtext 1.0pt; border-top:none;padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" style='text-autospace:none'><b><span style= 'font-size: 9.0pt;color:#9A0033'>Formation concernée</span></b></p> </td> <td width="504" valign="top" style= 'width:378.0pt;border-top:none;border-left: none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt; padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" style='text-autospace:none'><span style= 'color:#000081'>BTS SIO2 Option SLAM</span></p> </td> </tr> <tr> <td width="139" valign="top" style= 'width:104.4pt;border:solid windowtext 1.0pt; border-top:none;padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" style='text-autospace:none'><b><span style= 'font-size: 9.0pt;color:#9A0033'>Matière</span></b></p> </td> <td width="504" valign="top" style= 'width:378.0pt;border-top:none;border-left: none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt; padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" style='text-autospace:none'><span style= 'color:#000081'>S4</span></p> </td> </tr> <tr> <td width="139" valign="top" style= 'width:104.4pt;border:solid windowtext 1.0pt; border-top:none;padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" style='text-autospace:none'><b><span style= 'font-size: 9.0pt;color:#9A0033'>Présentation</span></b></p> </td> <td width="504" valign="top" style= 'width:378.0pt;border-top:none;border-left: none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt; padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" style='text-autospace:none'><span style= 'color:#000081'>Le Web 2.0 donne aux internautes la possibilité d’agir sur les modalités d’acquisition et de présentation des informations. Ajax est le support technique de cette évolution du <i>web</i> vers plus d’ergonomie et de fonctionnalités. Ce support de cours propose de faire connaissance avec ces techniques à travers quelques exemples progressifs.</span></p> </td> </tr> <tr> <td width="139" valign="top" style= 'width:104.4pt;border:solid windowtext 1.0pt; border-top:none;padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" style='text-autospace:none'><b><span style= 'font-size: 9.0pt;color:#9A0033'>Notions</span></b></p> </td> <td width="504" valign="top" style= 'width:378.0pt;border-top:none;border-left: none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt; padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" style='text-autospace:none'><span style= 'color:#000081'> </span></p> </td> </tr> <tr> <td width="139" valign="top" style= 'width:104.4pt;border:solid windowtext 1.0pt; border-top:none;padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" style='text-autospace:none'><b><span style= 'font-size: 9.0pt;color:#9A0033'>Outils</span></b></p> </td> <td width="504" valign="top" style= 'width:378.0pt;border-top:none;border-left: none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt; padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" style='text-autospace:none'><span style= 'color:#000081'>Un logiciel navigateur de type Internet Explorer 7, Opera 8 ou Firefox 2. Un service <i>web</i> type Apache ou IIS avec un interpréteur PHP.</span></p> </td> </tr> <tr> <td width="139" valign="top" style= 'width:104.4pt;border:solid windowtext 1.0pt; border-top:none;padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" style='text-autospace:none'><b><span style= 'font-size: 9.0pt;color:#9A0033'>Mots-clés</span></b></p> </td> <td width="504" valign="top" style= 'width:378.0pt;border-top:none;border-left: none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt; padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" style='text-autospace:none'><span style= 'color:#000081'>Ajax, javascript, PHP, XML, client-serveur, web, HTML.</span></p> </td> </tr> </table> <p class="MsoNormal"> </p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'> <u>Définition</u></p> <p class="MsoNormal" style='margin-right:-.05pt'><u><span style= 'text-decoration: none'> </span></u></p> <p class="MsoNormal" style='margin-right:-.05pt'>AJAX (<i>Asynchronous Javascript And Xml</i>) est une méthode permettant d'interroger un serveur http à partir d'un navigateur à l'aide du langage javascript. L'idée de base est d'envoyer une requête au serveur en javascript et d'en récupérer le résultat pour mettre à jour l'affichage de la page ou partie de celle-ci</p> <p class="MsoNormal" style='margin-right:-.05pt'>Remarques :</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style= 'margin-top:0cm;margin-right:-.05pt;margin-bottom: 0cm;margin-left:36.0pt;margin-bottom:.0001pt;text-indent:-18.0pt'> -<span style= 'font:7.0pt "Times New Roman"'> </span> Les exemples fournis ont été testés avec Internet Explorer 7, Opera 8 et Firefox 2.</p> <p class="MsoNormal" style= 'margin-top:0cm;margin-right:-.05pt;margin-bottom: 0cm;margin-left:36.0pt;margin-bottom:.0001pt;text-indent:-18.0pt'> -<span style= 'font:7.0pt "Times New Roman"'> </span> Le code HTML est volontairement minimaliste…</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <h1><a name="node2" id="node2"></a>L'objet XMLHttpRequest</h1> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <h2><a name="node3" id="node3"></a>a. Description</h2> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>Le fonctionnement d'Ajax est basé sur un objet javascript de la classe <i>XMLHttpRequest</i>. Cet objet était à l'origine un objet <i>ActiveX</i> introduit par Microsoft dans Internet Explorer 5. Les autres navigateur l'ont ensuite implémenté en tant qu'objet javascript, ce que Microsoft a également fait depuis IE7.</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>Un objet <i>XMLHttpRequest</i> permet d'envoyer une requête à un serveur http, de lui transmettre des informations via les méthodes GET ou POST, et de récupérer le résultat qui peut être du XML, du HTML ou du simple texte.</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>Les navigateurs trop anciens ou n'exécutant pas le code javascript ne donnent pas accès à cette technique.</p> <span style= 'font-size:10.0pt;font-family:"Arial","sans-serif";color:navy'><br clear="all" style='page-break-before:always' /></span> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <h2><a name="node4" id="node4"></a>b. Comment "utiliser" cet objet ?</h2> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>> D'une manière basique, il suffit d'écrire en javascript :</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="programlisting">requeteHttp = new XMLHttpRequest();</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>> Mais il y a des restrictions…</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>Ceci ne fonctionnerait pas avec IE5 ou IE6 pour lesquels cet objet est un objet ActiveX.</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>Pour ces deux navigateurs, il faut :</p> <p class="programlisting"> </p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">requeteHttp = new ActiveXObject("Microsoft.XMLHTTP");</span></p> <p class="MsoNormal" style='margin-right:-.05pt'><span lang="EN-GB" xml:lang="EN-GB"> </span></p> <p class="MsoNormal" style='margin-right:-.05pt'>Ou :</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="programlisting">requeteHttp = new ActiveXObject("Msxml2.XMLHTTP");</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>D'autre part, certains navigateurs basés sur Mozilla (Firefox notamment) exigent que le type de données utilisé par le serveur soit text/xml. On peut forcer ce type à l'aide de la méthode overrideMimeType, qui n'est pas appréciée par tout le monde.</p> <p class="MsoNormal" style='margin-right:-.05pt'>Mais nous pouvons considérer dorénavant que les navigateurs acceptent la 1<sup>ère</sup> formulation et nous excluerons également, pour faire plus simple, les navigateurs IE antérieurs à IE7.</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'></p> <table cellpadding="0" cellspacing="0"> <tr> <td width="214" height="82" bgcolor="white" style= 'border:.75pt solid black; vertical-align:top;background:white'> <table cellpadding="0" cellspacing="0" width="100%"> <tr> <td> <div style='padding:4.35pt 7.95pt 4.35pt 7.95pt'> <p class="MsoNormal">Création d'un objet XMLHttpRequest ce qui nous permettra d'implémenter les méthodes de cet objet.</p> </div> </td> </tr> </table> </td> </tr> </table> > Au final, il faut donc écrire : <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">function getRequeteHttp()</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">{</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> var requeteHttp;</span></p> <p class="programlisting"><span style= 'position:relative;z-index:251657728'><span style= 'left:0px;position:absolute;left:301px;top:-30px;width:85px;height:29px'> <img width="85" height="29" src="initAjax_V2_fichiers/image001.gif" alt="image" /></span></span><span lang="EN-GB" xml:lang= "EN-GB"> requeteHttp=new XMLHttpRequest();</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> </span> return requeteHttp;</p> <p class="programlisting">}</p> <span style= 'font-size:10.0pt;font-family:"Arial","sans-serif";color:navy'><br clear="all" style='page-break-before:always' /></span> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <h1><a name="node5" id="node5"></a>2. Techniques de base</h1> <h2><a name="node6" id="node6"></a>a. Premier exemple</h2> <p class="MsoNormal" style='margin-right:-.05pt'>L'exemple 1 ne présente aucun intérêt si ce n'est de mettre en œuvre le mécanisme vu précédemment</p> <p class="MsoNormal" style='margin-right:-.05pt'><span style= 'font-size:9.0pt'> </span></p> <p class="MsoNormal" style= 'margin-top:0cm;margin-right:-.05pt;margin-bottom: 0cm;margin-left:36.0pt;margin-bottom:.0001pt;text-indent:-18.0pt'> -<span style= 'font:7.0pt "Times New Roman"'> </span> La première page (page1.html) contient la fonction <i>getRequeteHttp</i> vue précédemment et affiche un lien qui provoque l'exécution de la requête vers le serveur.</p> <p class="MsoNormal" style= 'margin-top:0cm;margin-right:-.05pt;margin-bottom: 0cm;margin-left:36.0pt;margin-bottom:.0001pt;text-indent:-18.0pt'> -<span style= 'font:7.0pt "Times New Roman"'> </span> La seconde page (page2.html) ne contient en fait que le mot "coucou".</p> <p class="MsoNormal" style= 'margin-top:0cm;margin-right:-.05pt;margin-bottom: 0cm;margin-left:36.0pt;margin-bottom:.0001pt;text-indent:-18.0pt'> -<span style= 'font:7.0pt "Times New Roman"'> </span> Lorsque l'utilisateur clique sur le lien de page1.html, la requête est envoyée au serveur par une fonction javascript, celui-ci se contente de retourner le mot "coucou" sur le flux http et la fonction affiche le résultat.</p> <p class="MsoNormal" style='margin-right:-.05pt'><span style= 'font-size:9.0pt'> </span></p> <p class="MsoNormal" style='margin-right:-.05pt'><b><span lang= "EN-GB" xml:lang="EN-GB">Page1.html</span></b></p> <p class="MsoNormal" style='margin-right:-.05pt'><span lang="EN-GB" style='font-size:9.0pt' xml:lang="EN-GB"> </span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"><html></span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"><head></span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"><script type="text/javascript"></span></p> <p class="programlisting">function getRequeteHttp()</p> <p class="programlisting">{</p> <p class="programlisting"> // voir paragraphe 1 (page précédente)</p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">}</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">function envoyerRequete(url)</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">{</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> var requeteHttp=getRequeteHttp();</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> </span> if (requeteHttp==null)</p> <p class="programlisting"> {</p> <p class="programlisting"> alert("Impossible d'utiliser Ajax sur ce navigateur");</p> <p class="programlisting"> <span lang="EN-GB" xml:lang= "EN-GB">}</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> else</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> {</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> requeteHttp.open('GET',url,false);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> requeteHttp.send(null);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> if (requeteHttp.readyState==4)</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> </span> { // la requête est achevée, le résultat a été transmis</p> <p class="programlisting"> if (requeteHttp.status==200)</p> <p class="programlisting"> { // la requête s'est correctement déroulée</p> <p class="programlisting"> alert(requeteHttp.responseText);</p> <p class="programlisting"> }</p> <p class="programlisting"> else</p> <p class="programlisting"> {</p> <p class="programlisting"> // (pourrait être 404 pour non trouvé par exemple)</p> <p class="programlisting"> alert("La requête ne s'est pas correctement exécutée");</p> <p class="programlisting"> }</p> <p class="programlisting"> }</p> <p class="programlisting"> }</p> <p class="programlisting"> return; // C'est une fonction donc le return est logique et inutile</p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">}</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"></script></span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"></head></span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"><body></span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> <a href="javascript:envoyerRequete('page2.html');">requete</a></span></p> <p class="programlisting"></body></p> <p class="programlisting"></html></p> <p class="MsoNormal" style='margin-right:-.05pt'><span style= 'font-size:9.0pt'> </span></p> <p class="MsoNormal" style='margin-right:-.05pt'> <b>Page2.html</b></p> <p class="MsoNormal" style='margin-right:-.05pt'><span style= 'font-size:9.0pt'> </span></p> <p class="programlisting">Coucou</p> <p class="MsoNormal" style='margin-right:-.05pt'><span style= 'font-size:9.0pt'> </span></p> <p class="MsoNormal" style='margin-right:-.05pt'>Remarque : cette page ne contient que cela.</p> <span style= 'font-size:10.0pt;font-family:"Arial","sans-serif";color:navy'><br clear="all" style='page-break-before:always' /></span> <p class="MsoNormal" style='margin-right:-.05pt'><b>Autre exemple</b></p> <p class="MsoNormal" style='margin-right:-.05pt'><span style= 'font-size:8.0pt'> </span></p> <p class="MsoNormal" style='margin-right:-.05pt'>Dans l'exemple 2, on remplace le contenu de page2.html par :</p> <p class="MsoNormal" style='margin-right:-.05pt'><span style= 'font-size:8.0pt'> </span></p> <p class="programlisting"><html></p> <p class="programlisting"><body></p> <p class="programlisting"> <p>Ceci est la deuxi&egrave;me page.</p></p> <p class="programlisting"></body></p> <p class="programlisting"></html></p> <p class="MsoNormal" style='margin-right:-.05pt'><span style= 'font-size:8.0pt'> </span></p> <p class="MsoNormal" style='margin-right:-.05pt'>Et le traitement du résultat de la requête par :</p> <p class="MsoNormal" style='margin-right:-.05pt'><span style= 'font-size:8.0pt'> </span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">function envoyerRequete(url)</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">{</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> var requeteHttp=getRequeteHttp();// ou requeteHttp = new XMLHttpRequest();</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> if (requeteHttp==null)</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> </span> {</p> <p class="programlisting"> alert("Impossible d'utiliser Ajax sur ce navigateur");</p> <p class="programlisting"> <span lang="EN-GB" xml:lang= "EN-GB">}</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> else</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> {</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> requeteHttp.open('GET',url,false);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> requeteHttp.send(null);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> if (requeteHttp.readyState==4)</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> </span> { // la requête est achevée, le résultat a été transmis</p> <p class="programlisting"> if (requeteHttp.status==200)</p> <p class="programlisting"> { // la requête s'est correctement déroulée</p> <p class="programlisting"> // (pourrait être 404 pour non trouvé par exemple)</p> <p class="programlisting"> <span lang= "EN-GB" xml:lang= "EN-GB">document.write(requeteHttp.responseText);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> }</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> else</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> {</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> </span> alert("La requête ne s'est pas correctement exécutée");</p> <p class="programlisting"> }</p> <p class="programlisting"> }</p> <p class="programlisting"> }</p> <p class="programlisting"> return;</p> <p class="programlisting">}</p> <p class="MsoNormal" style='margin-right:-.05pt'><span style= 'font-size:8.0pt'> </span></p> <p class="MsoNormal" style='margin-right:-.05pt'>On obtient le remplacement de la page1 par la page2 dans le navigateur. Inutile car un simple lien fait la même chose.</p> <p class="MsoNormal" style='margin-right:-.05pt'><span style= 'font-size:8.0pt'> </span></p> <h2><a name="node7" id="node7"></a>b. Principe de fonctionnement</h2> <p class="MsoNormal" style='margin-right:-.05pt'><span style= 'font-size:8.0pt'> </span></p> <p class="MsoNormal" style='margin-right:-.05pt'>Lorsque l'utilisateur clique sur le lien, la fonction <i>envoyerRequete</i> est appelée et effectue les traitements suivants :</p> <p class="MsoNormal" style='margin-right:-.05pt'><span style= 'font-size:8.0pt'> </span></p> <p class="MsoNormal" style= 'margin-top:0cm;margin-right:-.05pt;margin-bottom: 0cm;margin-left:36.0pt;margin-bottom:.0001pt;text-indent:-18.0pt'> -<span style= 'font:7.0pt "Times New Roman"'> </span> Obtention d'un objet <i>XMLHttpRequest</i> à l'aide de la fonction <i>getRequeteHttp</i>.</p> <p class="MsoNormal" style= 'margin-top:0cm;margin-right:-.05pt;margin-bottom: 0cm;margin-left:36.0pt;margin-bottom:.0001pt;text-indent:-18.0pt'> -<span style= 'font:7.0pt "Times New Roman"'> </span> Ouverture de la requête (méthode <i>open</i>) en paramétrant :</p> <p class="MsoNormal" style= 'margin-top:0cm;margin-right:-.05pt;margin-bottom: 0cm;margin-left:72.0pt;margin-bottom:.0001pt;text-indent:-18.0pt'> <span style='font-family:"Courier New"'>o<span style= 'font:7.0pt "Times New Roman"'> </span></span> la méthode d'envoi de données au serveur (abordé plus tard),</p> <p class="MsoNormal" style= 'margin-top:0cm;margin-right:-.05pt;margin-bottom: 0cm;margin-left:72.0pt;margin-bottom:.0001pt;text-indent:-18.0pt'> <span style='font-family:"Courier New"'>o<span style= 'font:7.0pt "Times New Roman"'> </span></span> l'url de la page appelée,</p> <p class="MsoNormal" style= 'margin-top:0cm;margin-right:-.05pt;margin-bottom: 0cm;margin-left:72.0pt;margin-bottom:.0001pt;text-indent:-18.0pt'> <span style='font-family:"Courier New"'>o<span style= 'font:7.0pt "Times New Roman"'> </span></span> le mode d'appel, synchrone ou asynchrone (juste entrevu plus tard, page 7).</p> <p class="MsoNormal" style= 'margin-top:0cm;margin-right:-.05pt;margin-bottom: 0cm;margin-left:36.0pt;margin-bottom:.0001pt;text-indent:-18.0pt'> -<span style= 'font:7.0pt "Times New Roman"'> </span> Envoi de la requête (méthode <i>send</i>) en lui passant d'éventuelles informations destinées au serveur (nous y reviendrons).</p> <p class="MsoNormal" style= 'margin-top:0cm;margin-right:-.05pt;margin-bottom: 0cm;margin-left:36.0pt;margin-bottom:.0001pt;text-indent:-18.0pt'> -<span style= 'font:7.0pt "Times New Roman"'> </span> Une fois la requête exécutée par le serveur, la fonction teste l'état d'avancement (propriété <i>status</i>), 4 indique une requête terminée (0 : non initialisée, 1 : en cours de chargement, 2 : chargée, 3 : interaction en cours).</p> <p class="MsoNormal" style= 'margin-top:0cm;margin-right:-.05pt;margin-bottom: 0cm;margin-left:36.0pt;margin-bottom:.0001pt;text-indent:-18.0pt'> -<span style= 'font:7.0pt "Times New Roman"'> </span> La propriété <i>status</i> permet de savoir si tout s'est bien déroulé (valeur 200). L'exemple 404 pour une page non trouvée permet de comprendre la signification de cet indicateur.</p> <p class="MsoNormal" style= 'margin-top:0cm;margin-right:-.05pt;margin-bottom: 0cm;margin-left:36.0pt;margin-bottom:.0001pt;text-indent:-18.0pt'> -<span style= 'font:7.0pt "Times New Roman"'> </span> Le résultat est ensuite récupéré via la propriété <i>responseText</i>. Il est également possible d'exploiter la propriété <i>responseXML</i> pour obtenir la réponse sous la forme un document XML que l'on peut ensuite analyser à l'aide des routines DOM (vu à partir de la page 17).</p> <b><span style= 'font-size:13.0pt;font-family:"Arial","sans-serif";color:#B02200'><br clear="all" style='page-break-before:always' /></span></b> <h2><a name="node8" id="node8"></a>c. Que peut faire le serveur ?</h2> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>Nous avons vu qu'il peut retourner un simple texte comme "coucou", ou une page html complète. Il peut également retourner un document XML conforme au DOM (Document Object Model) qui peut ensuite être exploité en javascript.</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>L'important est de comprendre que quelle que soit la nature de ce qu'il retourne, il le fait par n'importe quel moyen valide : fichier (ce que nous avons fait), mais aussi PHP, ASP, etc… En fait tout ce qui permet d'envoyer de l'information sur un flux http.</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>Le script PHP (voirDate.php) ci-dessous (exemple 4) retourne la date courante sur le serveur et un message de bienvenue adapté à l'heure courante.</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"><?php</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> $jma=date('d/m/Y');</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> if (date('G')>20)</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> {</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> echo $jma.' Bonsoir.';</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> }</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> else</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> {</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> echo $jma.'</span> Bonjour';</p> <p class="programlisting"> }</p> <p class="programlisting">?></p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>Ce script peut être par exemple appelé par la page suivante (page1.html) :</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"><html></span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"><head></span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"><script type="text/javascript"></span></p> <p class="programlisting">function getRequeteHttp()</p> <p class="programlisting">{</p> <p class="programlisting"> // comme d'habitude</p> <p class="programlisting">}</p> <p class="programlisting">function envoyerRequete(url)</p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">{</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> var requeteHttp=getRequeteHttp();</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> if (requeteHttp==null)</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> </span> {</p> <p class="programlisting"> alert("Impossible d'utiliser Ajax sur ce navigateur");</p> <p class="programlisting"> <span lang="EN-GB" xml:lang= "EN-GB">}</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> else</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> {</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> requeteHttp.open('GET',url,false);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> requeteHttp.send(null);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> if (requeteHttp.readyState==4)</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> {</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> if (requeteHttp.status==200)</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> {</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> traiterReponse(requeteHttp.responseText);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> </span> // voir page suivante</p> <p class="programlisting"> }</p> <p class="programlisting"> else</p> <p class="programlisting"> {</p> <p class="programlisting"> alert("La requête ne s'est pas correctement exécutée");</p> <p class="programlisting"> <span lang="EN-GB" xml:lang="EN-GB">}</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> }</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> }</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> return;</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">}</span></p> <span lang="EN-GB" style= 'font-size:10.0pt;font-family:"Courier New";color:navy' xml:lang= "EN-GB"><br clear="all" style='page-break-before:always' /></span> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">function traiterReponse(reponse)</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">{</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> alert(reponse);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">}</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"></script></span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"></head></span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"><body></span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> </span> <a href="javascript:envoyerRequete('voirDate.php');">Voir la date</a></p> <p class="programlisting"></body></p> <p class="programlisting"></html></p> <p class="MsoNormal" style='margin-right:-.05pt'><span style= 'font-size:8.0pt'> </span></p> <p class="MsoNormal" style='margin-right:-.05pt'>La fonction <i>traiterReponse</i> ne change rien à l'affaire…</p> <p class="MsoNormal" style='margin-right:-.05pt'><span style= 'font-size:8.0pt'> </span></p> <h2><a name="node9" id="node9"></a>d. Un exemple concret</h2> <p class="MsoNormal" style='margin-right:-.05pt'>Tout ce que nous avons fait jusque là, nous aurions pu le faire sans Ajax… L'exemple 5 va enfin nous montrer l'intérêt de la technique.</p> <p class="MsoNormal" style='margin-right:-.05pt'><span style= 'font-size:8.0pt'> </span></p> <p class="MsoNormal" style='margin-right:-.05pt'>La page ci-dessous (page1.php) contient un certain nombre d'informations :</p> <p class="MsoNormal" style='margin-right:-.05pt'><span style= 'font-size:8.0pt'> </span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"><html></span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"><head></span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"><script type="text/javascript"></span></p> <p class="programlisting">function getRequeteHttp()</p> <p class="programlisting">{ // comme d'habitude</p> <p class="programlisting">}</p> <p class="programlisting">function envoyerRequete(url)</p> <p class="programlisting">{ // comme d'habitude</p> <p class="programlisting">}</p> <p class="programlisting">function traiterReponse(reponse)</p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">{</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> document.getElementById("heure").innerHTML=reponse;</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">}</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"></script></span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"></head></span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"><body></span></p> <p class="programlisting">Page appel&eacute;e à : <?php echo date('h:i:s'); ?><br /></p> <p class="programlisting">Ca va sauter dans 10 minutes, surveillez l'heure...<br /></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"><img src="bombe.gif"><br /></span></p> <p class="programlisting">Il y a plein de choses ici !<br /></p> <p class="programlisting">Il y a plein de choses ici !<br /></p> <p class="programlisting">Il y a plein de choses ici !<br /></p> <p class="programlisting">Il y a plein de choses ici !<br /></p> <p class="programlisting"><form></p> <p class="programlisting"><a href="javascript:envoyerRequete('majHeure.php');">Actualiser l'heure ci-dessous</a><br /></p> <p class="programlisting">Heure du serveur :</p> <p class="programlisting"><span id="heure"><b><?php echo date('h:i:s'); ?></b></span><br /></p> <p class="programlisting"><span lang="EN-GB" xml:lang="EN-GB">Nom : <input type="text"><br /></span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">Pr&eacute;nom : <input type="text"><br /></span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"></form></body></span></p> <p class="programlisting"></html></p> <p class="MsoNormal" style='margin-right:-.05pt'><span style= 'font-size:8.0pt'> </span></p> <p class="MsoNormal" style='margin-right:-.05pt'>Le code PHP mis en gras permet d'afficher l'heure du serveur. Le script PHP ci dessous (majHeure.php) rafraichit cette information.</p> <p class="MsoNormal" style='margin-right:-.05pt'><span style= 'font-size:8.0pt'> </span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"><?php</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> header("Cache-Control: no-cache, must-revalidate");</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> echo date('h:i:s');</span></p> <p class="programlisting">?></p> <p class="MsoNormal" style='margin-right:-.05pt'><span style= 'font-size:8.0pt'> </span></p> <p class="MsoNormal" style='margin-right:-.05pt'>La 1ère ligne oblige le navigateur à exécuter le script à chaque appel au lieu d'utiliser l'information présente dans son cache.</p> <span style= 'font-size:10.0pt;font-family:"Arial","sans-serif";color:navy'><br clear="all" style='page-break-before:always' /></span> <p class="MsoNormal" style='margin-right:-.05pt'>Cette fois, Ajax a servi a quelque chose :</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style= 'margin-top:0cm;margin-right:-.05pt;margin-bottom: 0cm;margin-left:36.0pt;margin-bottom:.0001pt;text-indent:-18.0pt'> -<span style= 'font:7.0pt "Times New Roman"'> </span> Pour afficher l'heure du serveur, on est bien obligé de la lui demander.</p> <p class="MsoNormal" style= 'margin-top:0cm;margin-right:-.05pt;margin-bottom: 0cm;margin-left:36.0pt;margin-bottom:.0001pt;text-indent:-18.0pt'> -<span style= 'font:7.0pt "Times New Roman"'> </span> Il doit donc y avoir une requête à chaque clic sur le lien.</p> <p class="MsoNormal" style= 'margin-top:0cm;margin-right:-.05pt;margin-bottom: 0cm;margin-left:36.0pt;margin-bottom:.0001pt;text-indent:-18.0pt'> -<span style= 'font:7.0pt "Times New Roman"'> </span> Classiquement, nous aurions dû recharger toute la page pour rafraichir l'heure.</p> <p class="MsoNormal" style= 'margin-top:0cm;margin-right:-.05pt;margin-bottom: 0cm;margin-left:36.0pt;margin-bottom:.0001pt;text-indent:-18.0pt'> -<span style= 'font:7.0pt "Times New Roman"'> </span> Ici, le trafic (et donc le temps de réponse) a été limité au strict nécessaire.</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <h1><a name="node10" id="node10"></a>3. Pour aller plus loin…(optionnel)</h1> <h2><a name="node11" id="node11"></a>a. Appel asynchrone</h2> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>Jusqu'ici, nous avons réalisé un appel synchrone au serveur dans la fonction <i>envoyerRequete</i> :</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">requeteHttp.open('GET',url,false);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">requeteHttp.send(null);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang="EN-GB">if (requeteHttp.readyState==4)</span></p> <p class="programlisting">{</p> <p class="programlisting"> ...</p> <p class="programlisting">}</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>Dans le code ci-dessus, la fonction javascript envoie la requête à l'aide de la méthode <i>send</i>, puis attend la réponse du serveur. Que se passe-t-il si la réponse est longue à venir ou pire, n'arrive jamais ? Le navigateur est figé…</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>Une autre solution est d'envoyer la requête en indiquant le nom de la fonction à appeler lorsque le résultat sera arrivé (fonction de callback), et donc de ne pas attendre le résultat pour continuer.</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>Le code de la fonction envoyerRequete devient (exemple 6) :</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">function envoyerRequete(url)</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">{</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> var requeteHttp=getRequeteHttp();</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> </span> if (requeteHttp==null)</p> <p class="programlisting"> {</p> <p class="programlisting"> alert("Impossible d'utiliser Ajax sur ce navigateur");</p> <p class="programlisting"> <span lang="EN-GB" xml:lang= "EN-GB">}</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> else</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> {</span></p> <p class="programlisting"><b><span lang="EN-GB" xml:lang= "EN-GB"> requeteHttp.open('GET',url,true);</span></b></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> requeteHttp.onreadystatechange=recevoirReponse;</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> requeteHttp.send(null);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> </span> }</p> <p class="programlisting"> return;</p> <p class="programlisting">}</p> <p class="programlisting">function recevoirReponse()</p> <p class="programlisting">{</p> <p class="programlisting"> alert('Mais elle est où cette réponse ?');</p> <p class="programlisting">}</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>La première ligne en gras montre que le troisième argument de la méthode <i>open</i> a changé. Il indique maintenant l'utilisation d'un appel asynchrone.</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>Que se passe-t-il lorsque l'on exécute cet exemple ?</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style= 'margin-top:0cm;margin-right:-.05pt;margin-bottom: 0cm;margin-left:36.0pt;margin-bottom:.0001pt;text-indent:-18.0pt'> -<span style= 'font:7.0pt "Times New Roman"'> </span> On ouvre l'objet <i>requeHttp</i> en précisant un appel asynchrone.</p> <p class="MsoNormal" style= 'margin-top:0cm;margin-right:-.05pt;margin-bottom: 0cm;margin-left:36.0pt;margin-bottom:.0001pt;text-indent:-18.0pt'> -<span style= 'font:7.0pt "Times New Roman"'> </span> On indique le nom de la fonction de rappel (callback).</p> <p class="MsoNormal" style= 'margin-top:0cm;margin-right:-.05pt;margin-bottom: 0cm;margin-left:36.0pt;margin-bottom:.0001pt;text-indent:-18.0pt'> -<span style= 'font:7.0pt "Times New Roman"'> </span> La requête est envoyée, l'exécution de la fonction <i>envoyerRequete</i> se termine, le navigateur n'est pas figé.</p> <p class="MsoNormal" style= 'margin-top:0cm;margin-right:-.05pt;margin-bottom: 0cm;margin-left:36.0pt;margin-bottom:.0001pt;text-indent:-18.0pt'> -<span style= 'font:7.0pt "Times New Roman"'> </span> Lorsque l'événement <i>readystatechange</i> se produit (c'est à dire à chaque fois que la valeur de la propriété <i>status</i> de l'objet <i>requeteHttp</i> change), la fonction <i>recevoirReponse</i> est appelée par le navigateur.</p> <p class="MsoNormal" style= 'margin-top:0cm;margin-right:-.05pt;margin-bottom: 0cm;margin-left:36.0pt;margin-bottom:.0001pt;text-indent:-18.0pt'> -<span style= 'font:7.0pt "Times New Roman"'> </span> On obtient donc 4 fois le message, l'état passant successivement par les valeurs 0, 1, 2, 3 et 4 (voir "principe de fonctionnement" page 4).</p> <p class="MsoNormal" style='margin-right:-.05pt'>Deux choses sont à remarquer :</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style= 'margin-top:0cm;margin-right:-.05pt;margin-bottom: 0cm;margin-left:36.0pt;margin-bottom:.0001pt;text-indent:-18.0pt'> -<span style= 'font:7.0pt "Times New Roman"'> </span> La réponse n'est réellement arrivée que lorsque l'état vaut 4.</p> <p class="MsoNormal" style= 'margin-top:0cm;margin-right:-.05pt;margin-bottom: 0cm;margin-left:36.0pt;margin-bottom:.0001pt;text-indent:-18.0pt'> -<span style= 'font:7.0pt "Times New Roman"'> </span> Il est impossible d'accèder à cette réponse puisque l'objet <i>requeteHttp</i> est local à la fonction <i>envoyerRequete</i>.</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>Il faut donc passer l'objet <i>requeteHttp</i> en paramètre à la fonction <i>recevoirReponse</i>, ce qui est impossible avec cette syntaxe. Il faut utiliser une "fonction anonyme", c'est-à-dire une fonction définie à la volée à l'aide de la syntaxe suivante (une autre solution serait d'utiliser une variable globale) :</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="programlisting">requeteHttp.onreadystatechange=function() {//code de la fonction};</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>L'exemple 7 utilise cette technique pour traiter correctement cette fois l'appel asynchrone :</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">function envoyerRequete(url)</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">{</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> var requeteHttp=getRequeteHttp();</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> </span> if (requeteHttp==null)</p> <p class="programlisting"> {</p> <p class="programlisting"> alert("Impossible d'utiliser Ajax sur ce navigateur");</p> <p class="programlisting"> <span lang="EN-GB" xml:lang= "EN-GB">}</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> else</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> {</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> requeteHttp.open('GET',url,true);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> requeteHttp.onreadystatechange=</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> function(){recevoirReponse(requeteHttp);};</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> requeteHttp.send(null);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> }</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> return;</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">}</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">function recevoirReponse(requeteHttp)</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">{</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> if (requeteHttp.readyState==4)</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> {</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> if (requeteHttp.status==200)</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> {</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> traiterReponse(requeteHttp.responseText);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> </span> }</p> <p class="programlisting"> else</p> <p class="programlisting"> {</p> <p class="programlisting"> alert("La requête ne s'est pas correctement exécutée");</p> <p class="programlisting"> }</p> <p class="programlisting"> }</p> <p class="programlisting">}</p> <p class="programlisting">function traiterReponse(reponse)</p> <p class="programlisting">{</p> <p class="programlisting"> document.getElementById("heure").innerHTML=reponse;</p> <p class="programlisting">}</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <b><span style= 'font-size:13.0pt;font-family:"Arial","sans-serif";color:#B02200'><br clear="all" style='page-break-before:always' /></span></b> <h2><a name="node12" id="node12"></a>b. Transmettre de l'information (méthode GET)</h2> <p class="MsoNormal" style='margin-right:-.05pt'><span style= 'font-size:8.0pt'> </span></p> <p class="MsoNormal" style='margin-right:-.05pt'>Envoyer une requête à un serveur http en javascript, c'est bien.</p> <p class="MsoNormal" style='margin-right:-.05pt'>Le faire en mode asynchrone, c'est mieux…</p> <p class="MsoNormal" style='margin-right:-.05pt'>Mais lui transmettre en plus de l'information, c'est le top !</p> <p class="MsoNormal" style='margin-right:-.05pt'><span style= 'font-size:8.0pt'> </span></p> <p class="MsoNormal" style='margin-right:-.05pt'>L'exemple 8 montre cette possibilité. Il utilise la base de données mysql nommée "ajax" :</p> <p class="MsoNormal" style='margin-right:-.05pt'><span style= 'font-size:8.0pt'> </span></p> <p class="programlisting">Categorie (ca_id, ca_libelle)</p> <p class="programlisting"> Clé primaire (ca_id)</p> <p class="programlisting"><span style= 'font-size:6.0pt'> </span></p> <p class="programlisting">Produit (pr_id, pr_libelle, pr_prix, pr_categorie)</p> <p class="programlisting"> Clé primaire (pr_id)</p> <p class="programlisting"> Clé étrangère (pr_categorie) en référence à categorie(ca_id)</p> <p class="MsoNormal" style='margin-right:-.05pt'><span style= 'font-size:8.0pt'> </span></p> <p class="MsoNormal" style='margin-right:-.05pt'>Cette base peut être constituée à l'aide du script "creerAjax.sql", après création de la base de données via phpMyAdmin par exemple.</p> <p class="MsoNormal" style='margin-right:-.05pt'><span style= 'font-size:8.0pt'> </span></p> <p class="MsoNormal" style='margin-right:-.05pt'>La page principale (page1.php) affiche la liste des catégories de produits. Lorsque l'utilisateur sélectionne une catégorie, une requête retournant le nombre de produits de cette catégorie est envoyée au serveur. Le résultat est affiché sur la page.</p> <p class="MsoNormal" style='margin-right:-.05pt'><span style= 'font-size:8.0pt'> </span></p> <p class="MsoNormal" style='margin-right:-.05pt'> <b>page1.php</b></p> <p class="MsoNormal" style='margin-right:-.05pt'><span style= 'font-size:8.0pt'> </span></p> <p class="programlisting"><html></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"><head></span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"><script type="text/javascript"></span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">function getRequeteHttp()</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang="EN-GB">{ // idem</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">}</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">function envoyerRequete(url,<b>idCateg</b>)</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">{</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> var requeteHttp=getRequeteHttp();</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> if (requeteHttp==null)</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> </span> {</p> <p class="programlisting"> alert("Impossible d'utiliser Ajax sur ce navigateur");</p> <p class="programlisting"> <span lang="EN-GB" xml:lang= "EN-GB">}</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> else</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> {</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> requeteHttp.open('GET',url + '?categ=' + escape(idCateg),true);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> requeteHttp.send(null);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> if (requeteHttp.readyState==4)</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> {</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> if (requeteHttp.status==200)</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> {</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> traiterReponse(requeteHttp.responseText);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> </span> }</p> <p class="programlisting"> else</p> <p class="programlisting"> {</p> <p class="programlisting"> alert("La requête ne s'est pas correctement exécutée");</p> <p class="programlisting"> <span lang="EN-GB" xml:lang="EN-GB">}</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> }</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> }</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> return;</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">}</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">function recevoirReponse(requeteHttp)</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang="EN-GB">{ // idem</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">}</span></p> <p class="programlisting">function traiterReponse(reponse)</p> <p class="programlisting">{</p> <p class="programlisting"> document.getElementById("nbPdt").innerHTML=reponse;</p> <p class="programlisting">}</p> <p class="programlisting"></script></p> <p class="programlisting"></head></p> <p class="programlisting"> </p> <p class="MsoNormal">La première ligne en gras montre le passage d'information à l'aide de la méthode GET. Il serait possible de passer plusieurs valeurs : <span class= "programlistingCar">monScript.php?nom=dupont&prenom=paul</span>. L’utilisation de la fonction <i>escape</i> permet de s’affranchir des problèmes liés aux caractères spéciaux.</p> <p class="MsoNormal"> </p> <p class="MsoNormal"><span lang="EN-GB" xml:lang="EN-GB">Corps du document :</span></p> <p class="MsoNormal"><span lang="EN-GB" xml:lang= "EN-GB"><body></span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"><form name="categorie"></span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> <select name="categ" size="4"</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> onchange="javascript:envoyerRequete('getNbProduits.php',this.value)"></span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> <?php</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> $cnx=mysql_connect('localhost','root','');</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> mysql_select_db('ajax',$cnx);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> $req=mysql_query('select * from categorie');</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> $ligne=mysql_fetch_assoc($req);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> </span> while($ligne)</p> <p class="programlisting"> {</p> <p class="programlisting"> echo '<option value='.$ligne['ca_id'].'>'.$ligne['ca_libelle'];</p> <p class="programlisting"> <span lang= "EN-GB" xml:lang="EN-GB">$ligne=mysql_fetch_assoc($req);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> }</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> mysql_close($cnx);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> ?></span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> </select></span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"></form></span></p> <p class="programlisting"><br /></p> <p class="programlisting">Nombre de produits : <span id="nbPdt">0</span></p> <p class="programlisting"></body></p> <p class="programlisting"></html></p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>La construction de la liste est classique. Sur l'événement <i>change</i>, la valeur sélectionnée est transmise à la fonction <i>envoyerRequete</i>.</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'><b><span lang= "EN-GB" xml:lang="EN-GB">getNbProduits.php</span></b></p> <p class="MsoNormal" style='margin-right:-.05pt'><span lang="EN-GB" xml:lang="EN-GB"> </span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"><?php</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> header("Cache-Control: no-cache, must-revalidate");</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> $cnx=mysql_connect('localhost','root','');</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> mysql_select_db('ajax',$cnx);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> $req=mysql_query('select count(*) as nb from produit</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> where pr_categorie='.$_GET['categ']);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> $res=mysql_fetch_assoc($req);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> echo $res['nb'];</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> mysql_close($cnx);</span></p> <p class="programlisting">?></p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>La première ligne n'est plus nécessaire si la base de données n'est pas modifiée par ailleurs. En effet, le code de catégorie change d'un appel à l'autre et ce changement force la réexécution de la requête HTTP. C'est d'ailleurs une technique possible pour forcer le navigateur à ne pas utiliser son cache : transmettre systématiquement un paramètre généré aléatoirement à la requête HTTP.</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>On pourrait également écrire l'appel de la fonction <i>envoyerRequete</i> en lui passant directement le paramètre : <i>onchange="javascript:envoyerRequete('getNbProduits.php?categ='+escape(this.value))"</i>.</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <u><span style= 'font-size:10.0pt;font-family:"Arial","sans-serif";color:navy'><br clear="all" style='page-break-before:always' /></span></u> <p class="MsoNormal" style='margin-right:-.05pt'><u><span style= 'text-decoration: none'> </span></u></p> <h2><a name="node13" id="node13"></a>c. Transmettre de l'information (méthode POST)</h2> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>Pour utiliser la méthode POST, il est nécessaire de paramétrer l'entête utilisé par la requête :</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">requeteHttp.open('POST',url,true);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">requeteHttp.setRequestHeader('Content-Type',</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> 'application/x-www-form-urlencoded');</span></p> <p class="MsoNormal" style='margin-right:-.05pt'><span lang="EN-GB" xml:lang="EN-GB"> </span></p> <p class="MsoNormal" style='margin-right:-.05pt'>Et de transmettre la ou les valeur(s) lors de l'envoi :</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">requeteHttp.send('categ=' + escape(idCateg));</span></p> <p class="MsoNormal" style='margin-right:-.05pt'><span lang="EN-GB" xml:lang="EN-GB"> </span></p> <p class="MsoNormal" style='margin-right:-.05pt'>Il est possible de transmettre plusieurs valeurs avec la syntaxe habituelle :</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="programlisting"> requeteHttp.send('nom=dupont&prenom=paul');</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>L'exemple 9 présente une transmission d'information à l'aide de la méthode POST et montre la possibilité de créer des pages très réactives.</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>L'utilisateur saisit le libellé d'un produit. La page est mise à jour à chaque caractère entré pour afficher les produits dont le début du libellé correspond à la saisie.</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'><b><span lang= "EN-GB" xml:lang="EN-GB">page1.php</span></b></p> <p class="MsoNormal" style='margin-right:-.05pt'><span lang="EN-GB" xml:lang="EN-GB"> </span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"><html></span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"><head></span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"><script type="text/javascript"></span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">function getRequeteHttp()</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang="EN-GB">{ // idem</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">function envoyerRequete(url, debut)</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">{</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> var requeteHttp=getRequeteHttp();</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> if (requeteHttp==null)</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> </span> {</p> <p class="programlisting"> alert("Impossible d'utiliser Ajax sur ce navigateur");</p> <p class="programlisting"> <span lang="EN-GB" xml:lang= "EN-GB">}</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> else</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> {</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> requeteHttp.open('POST',url,true);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> requeteHttp.setRequestHeader('Content-Type',</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> 'application/x-www-form-urlencoded');</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> requeteHttp.send('debutLib=' + escape(debut));</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> if (requeteHttp.readyState==4)</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> {</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> if (requeteHttp.status==200)</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> </span> {</p> <p class="programlisting"> traiterReponse(requeteHttp.responseText);</p> <p class="programlisting"> }</p> <p class="programlisting"> else</p> <p class="programlisting"> {</p> <p class="programlisting"> alert("La requête ne s'est pas correctement exécutée");</p> <p class="programlisting"> <span lang="EN-GB" xml:lang="EN-GB">}</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> }</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> }</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> return;</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">}</span></p> <span lang="EN-GB" style= 'font-size:10.0pt;font-family:"Courier New";color:navy' xml:lang= "EN-GB"><br clear="all" style='page-break-before:always' /></span> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> </span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">function recevoirReponse(requeteHttp)</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang="EN-GB">{ // idem</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">}</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">function traiterReponse(reponse)</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">{</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> var i,nb,selectPdt;</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> </span> var produits=reponse.split('/');</p> <p class="programlisting"> <span lang="EN-GB" xml:lang= "EN-GB">nb=produits.length;</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> selectPdt=document.getElementById("listePdt");</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> selectPdt.length=nb;</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> for (i=0; i<nb; i++)</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> {</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> selectPdt.options[i].text=produits[i];</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> }</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">}</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"></script></span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"></head></span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"><body></span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">Libell&eacute; :</span></p> <p class="programlisting"><input type="text"</p> <p class="programlisting"> onkeyup="javascript:envoyerRequete('getProduits.php',this.value)"></p> <p class="programlisting"><br /></p> <p class="programlisting">Liste des produits : <br /></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"><select id="listePdt" size="4"></span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"></select></span></p> <p class="programlisting"></body></p> <p class="programlisting"></html></p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>La fonction <i>envoyerRequete</i> transmet le début du libellé à l'aide de la méthode POST. La fonction <i>traiterReponse</i> reconstruit dynamiquement la liste des produits après avoir "découpé" la réponse (liste de libellés séparés par le caractère '/'). La mise à jour a lieu à chaque entrée de caractères.</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'><b><span lang= "EN-GB" xml:lang="EN-GB">getProduits.php</span></b></p> <p class="MsoNormal" style='margin-right:-.05pt'><span lang="EN-GB" xml:lang="EN-GB"> </span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"><?php</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> header("Cache-Control: no-cache, must-revalidate");</span></p> <p class="programlisting"><b><span lang="EN-GB" xml:lang= "EN-GB"> header('Content-Type: text/plain; charset=ISO-8859-1');</span></b><span lang="EN-GB" xml:lang= "EN-GB"> $cnx=mysql_connect('localhost','root','');</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> mysql_select_db('ajax',$cnx);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> $req=mysql_query("select * from produit</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> where pr_libelle like '".$_POST['debutLib']."%'");</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> $pdt=mysql_fetch_assoc($req);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> if ($pdt)</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> {</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> $resultat=$pdt['pr_libelle'];</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> $pdt=mysql_fetch_assoc($req);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> }</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> else</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> {</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> $resultat='';</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> }</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> while($pdt)</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> {</span></p> <p class="programlisting"><b><span lang="EN-GB" xml:lang= "EN-GB"> $resultat=$resultat.'/'.$pdt['pr_libelle'];</span></b></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> $pdt=mysql_fetch_assoc($req);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> }</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> mysql_close($cnx);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> echo $resultat;</span></p> <p class="programlisting">?></p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>La première ligne en gras permet de spécifier l'encodage des caractères.</p> <p class="MsoNormal" style='margin-right:-.05pt'>La seconde ligne en gras montre la construction de la réponse.</p> <h1><a name="node14" id="node14"></a>4. Un exemple complet</h1> <h2><a name="node15" id="node15"></a>a. Résultat à obtenir</h2> <p class="MsoNormal" style='margin-right:-.05pt'><span style= 'font-size:8.0pt'> </span></p> <p class="MsoNormal" style='margin-right:-.05pt'>L'idée est de créer un écran de recherche d'un produit :</p> <p class="MsoNormal" style='margin-right:-.05pt'><img width="168" height="140" src="initAjax_V2_fichiers/image002.jpg" alt= "image" /></p> <p class="MsoNormal" style='margin-right:-.05pt'><span style= 'font-size:8.0pt'> </span></p> <h2><a name="node16" id="node16"></a>b. Technique classique</h2> <p class="MsoNormal" style='margin-right:-.05pt'><span style= 'font-size:8.0pt'> </span></p> <p class="MsoNormal" style='margin-right:-.05pt'>La solution classique consiste à :</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style= 'margin-top:0cm;margin-right:-.05pt;margin-bottom: 0cm;margin-left:36.0pt;margin-bottom:.0001pt;text-indent:-18.0pt'> -<span style= 'font:7.0pt "Times New Roman"'> </span> Charger une première fois la liste des catégories, la liste des produits de la première catégorie et le prix du premier produit.</p> <p class="MsoNormal" style= 'margin-top:0cm;margin-right:-.05pt;margin-bottom: 0cm;margin-left:36.0pt;margin-bottom:.0001pt;text-indent:-18.0pt'> -<span style= 'font:7.0pt "Times New Roman"'> </span> Recharger entièrement la page lorsque l'utilisateur sélectionne une catégorie,</p> <p class="MsoNormal" style= 'margin-top:0cm;margin-right:-.05pt;margin-bottom: 0cm;margin-left:36.0pt;margin-bottom:.0001pt;text-indent:-18.0pt'> -<span style= 'font:7.0pt "Times New Roman"'> </span> Recharger entièrement la page lorsque l'utilisateur sélectionne un produit.</p> <p class="MsoNormal" style='margin-right:-.05pt'><span style= 'font-size:8.0pt'> </span></p> <p class="MsoNormal" style='margin-right:-.05pt'>Il est évident que cette solution entraine un trafic (donc une lenteur) inutile…</p> <p class="MsoNormal" style='margin-right:-.05pt'><span style= 'font-size:8.0pt'> </span></p> <h2><a name="node17" id="node17"></a>c. Un solution un peu lourde</h2> <p class="MsoNormal" style='margin-right:-.05pt'><span style= 'font-size:8.0pt'> </span></p> <p class="MsoNormal" style='margin-right:-.05pt'>Il est possible de faire mieux en constituant en php dès le premier chargement :</p> <p class="MsoNormal" style= 'margin-top:0cm;margin-right:-.05pt;margin-bottom: 0cm;margin-left:36.0pt;margin-bottom:.0001pt;text-indent:-18.0pt'> -<span style= 'font:7.0pt "Times New Roman"'> </span> Un tableau javascript contenant toutes les informations concernant les catégories et les produits.</p> <p class="MsoNormal" style= 'margin-top:0cm;margin-right:-.05pt;margin-bottom: 0cm;margin-left:36.0pt;margin-bottom:.0001pt;text-indent:-18.0pt'> -<span style= 'font:7.0pt "Times New Roman"'> </span> Un ensemble de fonctions javascript destinées à mettre à jour l'affichage.</p> <p class="MsoNormal" style='margin-right:-.05pt'><span style= 'font-size:6.0pt'> </span></p> <p class="MsoNormal" style='margin-right:-.05pt'>Mais cette solution est un peu lourde et conduit à créer des pages HTML assez volumineuses.</p> <p class="MsoNormal" style='margin-right:-.05pt'><span style= 'font-size:8.0pt'> </span></p> <h2><a name="node18" id="node18"></a>d. Avec Ajax !</h2> <p class="MsoNormal" style='margin-right:-.05pt'><span style= 'font-size:6.0pt'> </span></p> <p class="MsoNormal" style='margin-right:-.05pt'>Avec Ajax, la solution est simple… Seules les informations nécessaires sont rechargées, la page est plus réactive, le trafic limité et la charge du SGBD optimisée. L'exemple 10 implémente cette solution.</p> <p class="MsoNormal" style='margin-right:-.05pt'><span style= 'font-size:8.0pt'> </span></p> <p class="MsoNormal" style='margin-right:-.05pt'> <b>page1.php</b></p> <p class="MsoNormal" style='margin-right:-.05pt'><span style= 'font-size:8.0pt'> </span></p> <p class="programlisting"><html></p> <p class="programlisting"><head></p> <p class="programlisting"><script type="text/javascript"></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">function getRequeteHttp()</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang="EN-GB">{ // idem</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">}</span></p> <p class="programlisting"><span lang="EN-GB" style= 'font-size:8.0pt' xml:lang="EN-GB"> </span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">function envoyerRequeteListeProduits(idCateg)</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">{</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> var requeteHttp=getRequeteHttp();</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> if (requeteHttp==null)</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> </span> {</p> <p class="programlisting"> alert("Impossible d'utiliser Ajax sur ce navigateur");</p> <p class="programlisting"> <span lang="EN-GB" xml:lang= "EN-GB">}</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> else</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> {</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> requeteHttp.open('POST','getProduits.php',true);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> requeteHttp.setRequestHeader('Content-Type',</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> 'application/x-www-form-urlencoded');</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> requeteHttp.send('categ=' + escape(idCateg));</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> recevoirListeProduits(requeteHttp);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> }</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> return;</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">}</span></p> <p class="programlisting"><span lang="EN-GB" style= 'font-size:8.0pt' xml:lang="EN-GB"> </span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">function recevoirListeProduits(requeteHttp)</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">{</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> if (requeteHttp.readyState==4)</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> {</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> if (requeteHttp.status==200)</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> </span> <span lang="NL" xml:lang= "NL">{</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> var selectPdt=document.getElementById("listePdt");</span></p> <p class="programlisting"><span lang="NL" xml:lang= "NL"> </span> <span lang= "EN-GB" xml:lang= "EN-GB">if(requeteHttp.responseText=='')</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> {</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> selectPdt.length=0;</span></p> <p class="programlisting"><b><span lang="EN-GB" xml:lang= "EN-GB"> </span></b> <b>document.getElementById("prix").innerHTML='';</b></p> <p class="programlisting"> <span lang="EN-GB" xml:lang="EN-GB">}</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> else</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> {</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> var produits,i,nb,pdt;</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> produits=requeteHttp.responseText.split('/');</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> nb=produits.length;</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> selectPdt.length=nb;</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> for (i=0; i<nb; i++)</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> {</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> pdt=produits[i].split('*');</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> selectPdt.options[i].value=pdt[0];</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> selectPdt.options[i].text=pdt[1];</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> }</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> selectPdt.options[0].selected='selected';</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> envoyerRequeteProduit(selectPdt.options[0].value);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> </span> }</p> <p class="programlisting"> }</p> <p class="programlisting"> else</p> <p class="programlisting"> {</p> <p class="programlisting"> alert("La requête ne s'est pas correctement exécutée");</p> <p class="programlisting"> }</p> <p class="programlisting"> }</p> <p class="programlisting">}</p> <p class="programlisting"> </p> <p class="MsoNormal">// La ligne en gras est destinée à mettre à jour l'affichage du prix du produit sélectionné.</p> <p class="programlisting"><span style= 'font-size:8.0pt'> </span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">function envoyerRequeteProduit(idPdt)</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">{</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> var requeteHttp=getRequeteHttp();</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> if (requeteHttp==null)</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> </span> {</p> <p class="programlisting"> alert("Impossible d'utiliser Ajax sur ce navigateur");</p> <p class="programlisting"> <span lang="EN-GB" xml:lang= "EN-GB">}</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> else</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> {</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> requeteHttp.open('POST','getInfoProduit.php',true);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> requeteHttp.setRequestHeader('Content-Type',</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> 'application/x-www-form-urlencoded');</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> requeteHttp.send('pdt=' + escape(idPdt));</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> </span> recevoirInfoProduit(requeteHttp);</p> <p class="programlisting"> }</p> <p class="programlisting">}</p> <span style= 'font-size:10.0pt;font-family:"Courier New";color:navy'><br clear= "all" style='page-break-before:always' /></span> <p class="programlisting">function recevoirInfoProduit(requeteHttp)</p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">{</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> if (requeteHttp.readyState==4)</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> {</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> if (requeteHttp.status==200)</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> {</span></p> <p class="programlisting"><b><span lang="EN-GB" xml:lang= "EN-GB"> document.getElementById("prix").innerHTML=requeteHttp.responseText;</span></b></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> }</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> else</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> </span> {</p> <p class="programlisting"> alert("La requête ne s'est pas correctement exécutée");</p> <p class="programlisting"> <span lang= "EN-GB" xml:lang="EN-GB">}</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> }</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">}</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"></script></span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"></head></span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"><body></span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"><?php</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> echo '<select name="idCateg"</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> </span> onchange="javascript:envoyerRequeteListeProduits(this.value)">';</p> <p class="programlisting"> <span lang="EN-GB" xml:lang= "EN-GB">$cnx=mysql_connect('localhost','root','');</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> mysql_select_db('ajax',$cnx);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> $req=mysql_query('select * from categorie');</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> $ligne=mysql_fetch_assoc($req);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> if ($ligne)</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> {</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> $categ1=$ligne['ca_id'];</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> }</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> else</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> {</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> $categ1=null;</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> }</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> while($ligne)</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> {</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> echo '<option value='.$ligne['ca_id'].'>'.$ligne['ca_libelle'];</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> $ligne=mysql_fetch_assoc($req);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> }</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> echo '</select>';</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> echo '<br />';</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> </span></p> <p class="programlisting">echo 'Liste des produits : <br />';</p> <p class="programlisting"> <span lang="EN-GB" xml:lang= "EN-GB">echo '<select id="listePdt" size="4"</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> </span> onchange="javascript:envoyerRequeteProduit(this.value)">';</p> <p class="programlisting"> <span lang="EN-GB" xml:lang= "EN-GB">if ($categ1!=null)</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> {</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> $req=mysql_query('select * from produit</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> where pr_categorie='.$categ1);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> $ligne=mysql_fetch_assoc($req);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> if ($ligne)</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> {</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> echo '<option selected</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> </span> value='.$ligne['pr_id'].'>'.$ligne['pr_libelle'];</p> <p class="programlisting"> $prix1=$ligne['pr_prix'];</p> <p class="programlisting"> $ligne=mysql_fetch_assoc($req);</p> <p class="programlisting"> }</p> <p class="programlisting"> else</p> <p class="programlisting"> {</p> <p class="programlisting"> $prix1='';</p> <p class="programlisting"> }</p> <p class="programlisting"> while($ligne)</p> <p class="programlisting"> {</p> <p class="programlisting"> echo '<option value='.$ligne['pr_id'].'>'.$ligne['pr_libelle'];</p> <p class="programlisting"> <span lang="EN-GB" xml:lang="EN-GB">$ligne=mysql_fetch_assoc($req);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> }</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> }</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> echo '</select>';</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> echo '<br />';</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> echo 'Prix : <span id="prix">'.$prix1.'</span>';</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> mysql_close($cnx);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">?></span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"></body></span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"></html></span></p> <p class="MsoNormal" style='margin-right:-.05pt'><span lang="EN-GB" xml:lang="EN-GB"> </span></p> <p class="MsoNormal" style='margin-right:-.05pt'><b><span lang= "EN-GB" xml:lang="EN-GB">getProduits.php</span></b></p> <p class="MsoNormal" style='margin-right:-.05pt'><span lang="EN-GB" xml:lang="EN-GB"> </span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"><?php</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> header("Cache-Control: no-cache, must-revalidate");</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> header('Content-Type: text/plain; charset=ISO-8859-1');</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> $cnx=mysql_connect('localhost','root','');</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> mysql_select_db('ajax',$cnx);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> $req=mysql_query('select * from produit</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> where pr_categorie='.$_POST['categ']);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> $pdt=mysql_fetch_assoc($req);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> if ($pdt)</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> {</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> $resultat=$pdt['pr_id'].'*'.$pdt['pr_libelle'];</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> $pdt=mysql_fetch_assoc($req);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> }</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> else</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> {</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> $resultat='';</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> }</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> while($pdt)</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> {</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> $resultat=$resultat.'/'.$pdt['pr_id'].'*'.$pdt['pr_libelle'];</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> $pdt=mysql_fetch_assoc($req);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> }</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> mysql_close($cnx);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> echo $resultat;</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">?></span></p> <span lang="EN-GB" style= 'font-size:10.0pt;font-family:"Arial","sans-serif"; color:navy' xml:lang="EN-GB"><br clear="all" style= 'page-break-before:always' /></span> <p class="MsoNormal" style='margin-right:-.05pt'><b><span lang= "EN-GB" xml:lang="EN-GB">getInfoProduit.php</span></b></p> <p class="MsoNormal" style='margin-right:-.05pt'><span lang="EN-GB" xml:lang="EN-GB"> </span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"><?php</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> header("Cache-Control: no-cache, must-revalidate");</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> header('Content-Type: text/plain; charset=ISO-8859-1');</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> $cnx=mysql_connect('localhost','root','');</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> mysql_select_db('ajax',$cnx);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> $req=mysql_query('select pr_prix from produit</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> where pr_id='.$_POST['pdt']);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> $pdt=mysql_fetch_assoc($req);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> </span> mysql_close($cnx);</p> <p class="programlisting"> echo $pdt['pr_prix'];</p> <p class="programlisting">?></p> <span style= 'font-size:10.0pt;font-family:"Arial","sans-serif";color:navy'><br clear="all" style='page-break-before:always' /></span> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <h1><a name="node19" id="node19"></a>5. Et le X dans tout cela ?</h1> <h2><a name="node20" id="node20"></a>a. Introduction</h2> <p class="MsoNormal" style='margin-right:-.05pt'>Le X d'ajax signifie XML. Document Object Model (DOM) est une norme permettant de manipuler des documents XML. Il est possible de récupérer le résultat d'une requête ajax sous la forme d'un document XML et de l'exploiter à l'aide de DOM.</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <h2><a name="node21" id="node21"></a>b. Structure d'un document XML selon DOM</h2> <p class="MsoNormal" style='margin-right:-.05pt'>Considérons le fichier XML <i>donnees.xml</i> (répertoire <i>Exemple11</i>) ci-dessous :</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'> <b>donnees.xml</b></p> <p class="MsoNormal" style='margin-right:-.05pt'><span style= 'font-size:8.0pt'> </span></p> <p class="programlisting"><?xml version="1.0" encoding="ISO-8859-1" ?></p> <p class="programlisting"> <catalogue><produit><ref>p01</ref><des>chaise</des></produit><produit><ref>p02</ref><des>table</des></produit></catalogue></p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'><b>Représentation DOM</b></p> <p class="MsoNormal" style='margin-right:-.05pt'><span style= 'font-size:8.0pt'> </span></p> <p class="MsoNormal" style='margin-right:-.05pt'>L'arbre ci-dessous représente ce document en indiquant pour chaque nœud son type, son nom et sa valeur (<i>nodeType</i>, <i>nodeName</i> et <i>nodeValue</i>).</p> <table cellpadding="0" cellspacing="0" align="left"> <tr> <td width="35" height="10"></td> </tr> <tr> <td></td> <td><img width="565" height="363" src= "initAjax_V2_fichiers/image003.gif" alt="image" /></td> </tr> </table> <h1> </h1> <h1> </h1> <p class="MsoNormal"> </p> <p class="MsoNormal"> </p> <p class="MsoNormal"> </p> <p class="MsoNormal"> </p> <p class="MsoNormal"> </p> <p class="MsoNormal"> </p> <p class="MsoNormal"> </p> <p class="MsoNormal"> </p> <p class="MsoNormal"> </p> <p class="MsoNormal"> </p> <p class="MsoNormal"> </p> <p class="MsoNormal"> </p> <p class="MsoNormal"> </p> <p class="MsoNormal"> </p> <p class="MsoNormal"> </p> <p class="MsoNormal"> </p> <p class="MsoNormal"> </p> <p class="MsoNormal"> </p> <span style= 'font-size:10.0pt;font-family:"Arial","sans-serif";color:navy'><br clear="all" style='page-break-before:always' /></span> <p class="MsoNormal"> </p> <br clear="all" /> <h1><a name="node22" id="node22"></a>6. Présentation de DOM</h1> <h2><a name="node23" id="node23"></a>a. Introduction</h2> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>Les principaux objets (ce sont en réalité des interfaces) exploitables à l'aide de DOM sont : Node, NodeList, Attr, Element, Document et NamedNodeMap. Seuls les éléments les plus importants à mes yeux sont présentés ici.</p> <p class="MsoNormal" style='margin-right:-.05pt'>Pour une description plus complète, voir <i>http://xmlfr.org/w3c/TR/REC-DOM-Level-1/level-one-core.html</i>.</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <h2><a name="node24" id="node24"></a>b. Types de nœuds</h2> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>1 : élément XML</p> <p class="MsoNormal" style='margin-right:-.05pt'>2 : attribut</p> <p class="MsoNormal" style='margin-right:-.05pt'>3 : texte</p> <p class="MsoNormal" style='margin-right:-.05pt'>9 : Document</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <h2><a name="node25" id="node25"></a>c. Node</h2> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>Représente un nœud XML.</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>> Propriétés :</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <table class="MsoNormalTable" border="1" cellspacing="0" cellpadding="0" style='border-collapse:collapse;border:none'> <tr> <td width="92" valign="top" style= 'width:69.2pt;border:solid windowtext 1.0pt; padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" style='margin-right:-.05pt'><b>Nom</b></p> </td> <td width="95" valign="top" style= 'width:70.9pt;border:solid windowtext 1.0pt; border-left:none;padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" style='margin-right:-.05pt'><b>Type</b></p> </td> <td width="85" valign="top" style= 'width:63.75pt;border:solid windowtext 1.0pt; border-left:none;padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" style='margin-right:-.05pt'> <b>Modifiable</b></p> </td> <td width="371" valign="top" style= 'width:278.0pt;border:solid windowtext 1.0pt; border-left:none;padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" style='margin-right:-.05pt'> <b>Commentaire</b></p> </td> </tr> <tr> <td width="92" valign="top" style= 'width:69.2pt;border:solid windowtext 1.0pt; border-top:none;padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" style='margin-right:-.05pt'>nodeType</p> </td> <td width="95" valign="top" style= 'width:70.9pt;border-top:none;border-left:none; border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt; padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" style='margin-right:-.05pt'>Entier</p> </td> <td width="85" valign="top" style= 'width:63.75pt;border-top:none;border-left: none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt; padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" style='margin-right:-.05pt'>Non</p> </td> <td width="371" valign="top" style= 'width:278.0pt;border-top:none;border-left: none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt; padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" style='margin-right:-.05pt'>Le type du nœud</p> </td> </tr> <tr> <td width="92" valign="top" style= 'width:69.2pt;border:solid windowtext 1.0pt; border-top:none;padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" style='margin-right:-.05pt'>nodeName</p> </td> <td width="95" valign="top" style= 'width:70.9pt;border-top:none;border-left:none; border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt; padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" style='margin-right:-.05pt'>Chaîne</p> </td> <td width="85" valign="top" style= 'width:63.75pt;border-top:none;border-left: none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt; padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" style='margin-right:-.05pt'>Non</p> </td> <td width="371" valign="top" style= 'width:278.0pt;border-top:none;border-left: none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt; padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" style='margin-right:-.05pt'>Le nom du nœud</p> </td> </tr> <tr> <td width="92" valign="top" style= 'width:69.2pt;border:solid windowtext 1.0pt; border-top:none;padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" style='margin-right:-.05pt'>nodeValue</p> </td> <td width="95" valign="top" style= 'width:70.9pt;border-top:none;border-left:none; border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt; padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" style='margin-right:-.05pt'>Chaîne</p> </td> <td width="85" valign="top" style= 'width:63.75pt;border-top:none;border-left: none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt; padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" style='margin-right:-.05pt'>Oui</p> </td> <td width="371" valign="top" style= 'width:278.0pt;border-top:none;border-left: none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt; padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" style='margin-right:-.05pt'>La valeur du nœud</p> </td> </tr> <tr> <td width="92" valign="top" style= 'width:69.2pt;border:solid windowtext 1.0pt; border-top:none;padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" style='margin-right:-.05pt'>parentNode</p> </td> <td width="95" valign="top" style= 'width:70.9pt;border-top:none;border-left:none; border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt; padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" style='margin-right:-.05pt'>Node</p> </td> <td width="85" valign="top" style= 'width:63.75pt;border-top:none;border-left: none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt; padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" style='margin-right:-.05pt'>Non</p> </td> <td width="371" valign="top" style= 'width:278.0pt;border-top:none;border-left: none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt; padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" style='margin-right:-.05pt'>Le nœud parent</p> </td> </tr> <tr> <td width="92" valign="top" style= 'width:69.2pt;border:solid windowtext 1.0pt; border-top:none;padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" style='margin-right:-.05pt'>childNodes</p> </td> <td width="95" valign="top" style= 'width:70.9pt;border-top:none;border-left:none; border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt; padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" style='margin-right:-.05pt'>NodeList</p> </td> <td width="85" valign="top" style= 'width:63.75pt;border-top:none;border-left: none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt; padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" style='margin-right:-.05pt'>Non</p> </td> <td width="371" valign="top" style= 'width:278.0pt;border-top:none;border-left: none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt; padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" style='margin-right:-.05pt'>La liste des nœuds enfants</p> </td> </tr> <tr> <td width="92" valign="top" style= 'width:69.2pt;border:solid windowtext 1.0pt; border-top:none;padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" style='margin-right:-.05pt'><span lang="EN" xml:lang="EN">firstChild</span></p> </td> <td width="95" valign="top" style= 'width:70.9pt;border-top:none;border-left:none; border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt; padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" style='margin-right:-.05pt'><span lang="EN" xml:lang="EN">Node</span></p> </td> <td width="85" valign="top" style= 'width:63.75pt;border-top:none;border-left: none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt; padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" style='margin-right:-.05pt'><span lang="EN" xml:lang="EN">Non</span></p> </td> <td width="371" valign="top" style= 'width:278.0pt;border-top:none;border-left: none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt; padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" style='margin-right:-.05pt'>Le premier nœud enfant</p> </td> </tr> <tr> <td width="92" valign="top" style= 'width:69.2pt;border:solid windowtext 1.0pt; border-top:none;padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" style='margin-right:-.05pt'><span lang="EN" xml:lang="EN">lastChild</span></p> </td> <td width="95" valign="top" style= 'width:70.9pt;border-top:none;border-left:none; border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt; padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" style='margin-right:-.05pt'><span lang="EN" xml:lang="EN">Node</span></p> </td> <td width="85" valign="top" style= 'width:63.75pt;border-top:none;border-left: none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt; padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" style='margin-right:-.05pt'><span lang="EN" xml:lang="EN">Non</span></p> </td> <td width="371" valign="top" style= 'width:278.0pt;border-top:none;border-left: none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt; padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" style='margin-right:-.05pt'>Le dernier nœud enfant</p> </td> </tr> <tr> <td width="92" valign="top" style= 'width:69.2pt;border:solid windowtext 1.0pt; border-top:none;padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" style='margin-right:-.05pt'>attributes</p> </td> <td width="95" valign="top" style= 'width:70.9pt;border-top:none;border-left:none; border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt; padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" style='margin-right:-.05pt'>NamedNodeMap</p> </td> <td width="85" valign="top" style= 'width:63.75pt;border-top:none;border-left: none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt; padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" style='margin-right:-.05pt'>Non</p> </td> <td width="371" valign="top" style= 'width:278.0pt;border-top:none;border-left: none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt; padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" style='margin-right:-.05pt'>La liste des attributs d'un élément</p> </td> </tr> </table> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>> Méthodes</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>- booléen hasChildNodes()</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>Retourne vrai si le nœud courant (celui avec lequel on appelle la méthode) possède des nœuds enfants.</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>- Node insertBefore(Node nouveau, Node positionNoeud)</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>Insère le nœud <i>nouveau</i> avant le nœud <i>positionNoeud</i> dans la liste des enfants du nœud courant. Retourne le nœud inséré.</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>- Node appendChild(Node nouveau)</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>Ajoute le nœud <i>nouveau</i> à la fin des enfants du nœud courant.</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>- Node removeChild(Node ancien)</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>Supprime le nœud <i>ancien</i> de la liste des enfants du nœud courant. Retourne le nœud supprimé.</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>- Node replaceChild(Node nouveau, Node ancien)</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>Remplace le nœud <i>ancien</i> par le nœud <i>nouveau</i> dans la liste des enfants du nœud courant. Si le nœud <i>nouveau</i> appartenait déjà à l'arbre formé par le document XML, il se trouve en fait déplacé. Retourne le nœud <i>ancien</i>.</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>- Node cloneNode(booléen enProfondeur)</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>Retourne une copie du nœud courant. Si <i>enProfondeur</i> vaut vrai, la fonction retourne l'ensemble du sous arbre représenté par le nœud.</p> <b><span style= 'font-size:13.0pt;font-family:"Arial","sans-serif";color:#B02200'><br clear="all" style='page-break-before:always' /></span></b> <h2><a name="node26" id="node26"></a>d. NodeList</h2> <p class="MsoNormal" style='margin-right:-.05pt'>Représente une liste ordonnée de nœuds.</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>> Propriétés :</p> <table class="MsoNormalTable" border="1" cellspacing="0" cellpadding="0" style='border-collapse:collapse;border:none'> <tr> <td width="92" valign="top" style= 'width:68.85pt;border:solid windowtext 1.0pt; padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" style='margin-right:-.05pt'><b>Nom</b></p> </td> <td width="115" valign="top" style= 'width:86.35pt;border:solid windowtext 1.0pt; border-left:none;padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" style='margin-right:-.05pt'><b>Type</b></p> </td> <td width="85" valign="top" style= 'width:63.55pt;border:solid windowtext 1.0pt; border-left:none;padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" style='margin-right:-.05pt'> <b>Modifiable</b></p> </td> <td width="356" valign="top" style= 'width:266.9pt;border:solid windowtext 1.0pt; border-left:none;padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" style='margin-right:-.05pt'> <b>Commentaire</b></p> </td> </tr> <tr> <td width="92" valign="top" style= 'width:68.85pt;border:solid windowtext 1.0pt; border-top:none;padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" style='margin-right:-.05pt'>length</p> </td> <td width="115" valign="top" style= 'width:86.35pt;border-top:none;border-left: none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt; padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" style='margin-right:-.05pt'>entier</p> </td> <td width="85" valign="top" style= 'width:63.55pt;border-top:none;border-left: none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt; padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" style='margin-right:-.05pt'>Non</p> </td> <td width="356" valign="top" style= 'width:266.9pt;border-top:none;border-left: none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt; padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" style='margin-right:-.05pt'>Le nombre de nœuds de la liste</p> </td> </tr> </table> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>> Méthodes</p> <p class="MsoNormal" style='margin-right:-.05pt'>- Node item(entier pos)</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>Retourne le nœud à la position <i>pos</i> dans la liste. Le premier nœud de la liste est à la position 0.</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <h2><a name="node27" id="node27"></a>e. Attr</h2> <p class="MsoNormal" style='margin-right:-.05pt'>Représente un attribut XML, hérite de Node.</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>> Propriétés :</p> <table class="MsoNormalTable" border="1" cellspacing="0" cellpadding="0" style='border-collapse:collapse;border:none'> <tr> <td width="92" valign="top" style= 'width:68.85pt;border:solid windowtext 1.0pt; padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" style='margin-right:-.05pt'><b>Nom</b></p> </td> <td width="115" valign="top" style= 'width:86.35pt;border:solid windowtext 1.0pt; border-left:none;padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" style='margin-right:-.05pt'><b>Type</b></p> </td> <td width="85" valign="top" style= 'width:63.55pt;border:solid windowtext 1.0pt; border-left:none;padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" style='margin-right:-.05pt'> <b>Modifiable</b></p> </td> <td width="356" valign="top" style= 'width:266.9pt;border:solid windowtext 1.0pt; border-left:none;padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" style='margin-right:-.05pt'> <b>Commentaire</b></p> </td> </tr> <tr> <td width="92" valign="top" style= 'width:68.85pt;border:solid windowtext 1.0pt; border-top:none;padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" style='margin-right:-.05pt'>name</p> </td> <td width="115" valign="top" style= 'width:86.35pt;border-top:none;border-left: none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt; padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" style='margin-right:-.05pt'>Chaîne</p> </td> <td width="85" valign="top" style= 'width:63.55pt;border-top:none;border-left: none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt; padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" style='margin-right:-.05pt'>Non</p> </td> <td width="356" valign="top" style= 'width:266.9pt;border-top:none;border-left: none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt; padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" style='margin-right:-.05pt'>Le nom de l'attribut</p> </td> </tr> <tr> <td width="92" valign="top" style= 'width:68.85pt;border:solid windowtext 1.0pt; border-top:none;padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" style='margin-right:-.05pt'>value</p> </td> <td width="115" valign="top" style= 'width:86.35pt;border-top:none;border-left: none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt; padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" style='margin-right:-.05pt'>Chaîne</p> </td> <td width="85" valign="top" style= 'width:63.55pt;border-top:none;border-left: none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt; padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" style='margin-right:-.05pt'>Oui</p> </td> <td width="356" valign="top" style= 'width:266.9pt;border-top:none;border-left: none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt; padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" style='margin-right:-.05pt'>La valeur de l'attribut</p> </td> </tr> </table> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <h2><a name="node28" id="node28"></a>f. Element</h2> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>Représente un élément XML, hérite de Node.</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>> Propriétés :</p> <table class="MsoNormalTable" border="1" cellspacing="0" cellpadding="0" style='border-collapse:collapse;border:none'> <tr> <td width="92" valign="top" style= 'width:68.85pt;border:solid windowtext 1.0pt; padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" style='margin-right:-.05pt'><b>Nom</b></p> </td> <td width="115" valign="top" style= 'width:86.35pt;border:solid windowtext 1.0pt; border-left:none;padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" style='margin-right:-.05pt'><b>Type</b></p> </td> <td width="85" valign="top" style= 'width:63.55pt;border:solid windowtext 1.0pt; border-left:none;padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" style='margin-right:-.05pt'> <b>Modifiable</b></p> </td> <td width="356" valign="top" style= 'width:266.9pt;border:solid windowtext 1.0pt; border-left:none;padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" style='margin-right:-.05pt'> <b>Commentaire</b></p> </td> </tr> <tr> <td width="92" valign="top" style= 'width:68.85pt;border:solid windowtext 1.0pt; border-top:none;padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" style='margin-right:-.05pt'>tagName</p> </td> <td width="115" valign="top" style= 'width:86.35pt;border-top:none;border-left: none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt; padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" style='margin-right:-.05pt'>Chaîne</p> </td> <td width="85" valign="top" style= 'width:63.55pt;border-top:none;border-left: none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt; padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" style='margin-right:-.05pt'>Non</p> </td> <td width="356" valign="top" style= 'width:266.9pt;border-top:none;border-left: none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt; padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" style='margin-right:-.05pt'>Le nom de l'élément (attribut ID)</p> </td> </tr> </table> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>> Méthodes</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>- Chaîne getAttribute(chaîne nom)</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>Retourne la valeur de l'attribut <i>nom</i> de l'élément courant.</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>- Attr getAttributeNode(chaîne nom)</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>Retourne l'objet attribut (et pas seulement sa valeur) nommé <i>nom</i> de l'élément courant.</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>- void setAttribute(chaîne nom, chaîne valeur)</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>Si l'attribut <i>nom</i> existe, sa valeur devient <i>valeur</i>. S'il n'existe pas, il est ajouté aux attributs de l'élément courant.</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>- Attr setAttributeNode(Attr nouveau)</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>Si l'élément courant ne possède pas d'attribut de même nom que l'attribut <i>nouveau</i>, cet attribut est ajouté et la fonction retourne null. Si l'élément courant possède déjà un attribut de même nom, il est remplacé par l'attribut <i>nouveau</i> et l'ancien attribut est retourné par la fonction.</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>- void removeAttribute(chaîne nom)</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>Supprime l'attribut <i>nom</i> des attributs de l'élément courant.</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <span style= 'font-size:10.0pt;font-family:"Arial","sans-serif";color:navy'><br clear="all" style='page-break-before:always' /></span> <p class="MsoNormal" style='margin-right:-.05pt'>- Attr removeAttributeNode(Attr ancien)</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>Supprime l'attribut <i>ancien</i> des attributs de l'élément courant. Retourne l'attribut supprimé.</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>- NodeList getElementsByTagName(chaîne nom)</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>Retourne la liste de tous les éléments de nom <i>nom</i> enfants de l'élément courant. Si <i>nom</i> vaut " * ", tous les éléments enfants sont retournés.</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <h2><a name="node29" id="node29"></a>g. Document</h2> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>Représente un document XML. Hérite de Node.</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>> Propriétés :</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <table class="MsoNormalTable" border="1" cellspacing="0" cellpadding="0" style='border-collapse:collapse;border:none'> <tr> <td width="92" valign="top" style= 'width:68.85pt;border:solid windowtext 1.0pt; padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" style='margin-right:-.05pt'><b>Nom</b></p> </td> <td width="115" valign="top" style= 'width:86.35pt;border:solid windowtext 1.0pt; border-left:none;padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" style='margin-right:-.05pt'><b>Type</b></p> </td> <td width="85" valign="top" style= 'width:63.55pt;border:solid windowtext 1.0pt; border-left:none;padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" style='margin-right:-.05pt'> <b>Modifiable</b></p> </td> <td width="356" valign="top" style= 'width:266.9pt;border:solid windowtext 1.0pt; border-left:none;padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" style='margin-right:-.05pt'> <b>Commentaire</b></p> </td> </tr> <tr> <td width="92" valign="top" style= 'width:68.85pt;border:solid windowtext 1.0pt; border-top:none;padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" style='margin-right:-.05pt'> documentElement</p> </td> <td width="115" valign="top" style= 'width:86.35pt;border-top:none;border-left: none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt; padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" style='margin-right:-.05pt'>Element</p> </td> <td width="85" valign="top" style= 'width:63.55pt;border-top:none;border-left: none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt; padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" style='margin-right:-.05pt'>Non</p> </td> <td width="356" valign="top" style= 'width:266.9pt;border-top:none;border-left: none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt; padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" style='margin-right:-.05pt'>L'élément racine du document</p> </td> </tr> </table> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>> Méthodes</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>- Element createElement(chaîne nom)</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>Crée un nouvel élement de nom <i>nom</i> et le retourne.</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>- Text createTextNode(chaîne valeur)</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>Crée un nouveau nœud texte de contenu <i>valeur</i>. Le type <i>Text</i> est dérivé de <i>Node</i>.</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>- Attr createAttribut(chaîne nom)</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>Crée un nouvel attribut de nom <i>nom</i>.</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>- NodeList getElementsByTagName(chaîne nom)</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>Retourne la liste de tous les éléments de nom <i>nom</i> enfants du document courant. Si <i>nom</i> vaut " * ", tous les éléments enfants sont retournés.</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <h2><a name="node30" id="node30"></a>h. NameNodeMap</h2> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>Représente une collection non ordonnée de nœuds XML.</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>> Propriétés :</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <table class="MsoNormalTable" border="1" cellspacing="0" cellpadding="0" style='border-collapse:collapse;border:none'> <tr> <td width="92" valign="top" style= 'width:68.85pt;border:solid windowtext 1.0pt; padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" style='margin-right:-.05pt'><b>Nom</b></p> </td> <td width="115" valign="top" style= 'width:86.35pt;border:solid windowtext 1.0pt; border-left:none;padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" style='margin-right:-.05pt'><b>Type</b></p> </td> <td width="85" valign="top" style= 'width:63.55pt;border:solid windowtext 1.0pt; border-left:none;padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" style='margin-right:-.05pt'> <b>Modifiable</b></p> </td> <td width="356" valign="top" style= 'width:266.9pt;border:solid windowtext 1.0pt; border-left:none;padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" style='margin-right:-.05pt'> <b>Commentaire</b></p> </td> </tr> <tr> <td width="92" valign="top" style= 'width:68.85pt;border:solid windowtext 1.0pt; border-top:none;padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" style='margin-right:-.05pt'>length</p> </td> <td width="115" valign="top" style= 'width:86.35pt;border-top:none;border-left: none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt; padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" style='margin-right:-.05pt'>entier</p> </td> <td width="85" valign="top" style= 'width:63.55pt;border-top:none;border-left: none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt; padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" style='margin-right:-.05pt'>Non</p> </td> <td width="356" valign="top" style= 'width:266.9pt;border-top:none;border-left: none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt; padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" style='margin-right:-.05pt'>Le nombre de nœuds de la collection</p> </td> </tr> </table> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>> Méthodes</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>- Node item(entier pos)</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>Retourne le nœud à la position <i>pos</i> dans la liste. Le premier nœud de la liste est à la position 0. Contrairement au type NodeList, l'ordre des nœuds n'est pas défini par DOM, mais il est possible de les obtenir tous en balayant la collection de la position 0 à la position length-1.</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>- Node getNamedItem(chaîne nom)</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>Retourne le nœud XML de nom <i>nom</i> s'il appartient à la collection, null sinon.</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'><span lang="NL" xml:lang="NL">- Node setNamedItem(Node nouveau)</span></p> <p class="MsoNormal" style='margin-right:-.05pt'><span lang="NL" xml:lang="NL"> </span></p> <p class="MsoNormal" style='margin-right:-.05pt'>Ajoute le nœud <i>nouveau</i> à la collection et retourne le nœud ajouté. Si un nœud de même nom existe déjà dans la collection il est remplacé par le nœud <i>nouveau</i>.</p> <p class="MsoNormal" style='margin-right:-.05pt'>- Node removeNamedItem(chaîne ancien)</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>Retire le nœud de nom <i>ancien</i> de la collection et le retourne.</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <h1><a name="node31" id="node31"></a>7. Mise en œuvre de DOM</h1> <p class="MsoNormal" style='margin-right:-.05pt'><u><span style= 'text-decoration: none'> </span></u></p> <h2><a name="node32" id="node32"></a>a. Premier exemple</h2> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>Dans l'exemple 11, nous exploitons un fichier <i>donnees.xml</i> contenant un catalogue de produits. La requête envoyée de manière asynchrone retourne ce fichier qui est ensuite exploré via DOM pour en afficher le contenu.</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'> <b>donnees.xml</b></p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="programlisting"><?xml version="1.0" encoding="ISO-8859-1" ?></p> <p class="programlisting"> <catalogue><produit><ref>p01</ref><des>chaise</des></produit><produit><ref>p02</ref><des>table</des></produit></catalogue></p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>Remarque : il n'y a aucun retour à la ligne dans le contenu XML du fichier.</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'><b><span lang= "EN-GB" xml:lang="EN-GB">page1.html</span></b></p> <p class="MsoNormal" style='margin-right:-.05pt'><span lang="EN-GB" xml:lang="EN-GB"> </span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"><html></span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"><head></span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"><script type="text/javascript"></span></p> <p class="programlisting">function getRequeteHttp()</p> <p class="programlisting">{ // comme d'habitude</p> <p class="programlisting">}</p> <p class="programlisting">function envoyerRequete(url)</p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">{</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> var requeteHttp=getRequeteHttp();</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> if (requeteHttp==null)</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> {</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> alert("Impossible d'utiliser Ajax sur ce navigateur");</span></p> <p class="programlisting"> <span lang="EN-GB" xml:lang= "EN-GB">}</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> else</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> {</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> requeteHttp.open('GET',url,true);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> requeteHttp.onreadystatechange=</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> function() {recevoirReponse(requeteHttp);};</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> requeteHttp.send(null);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> }</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> return;</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">}</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> </span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">function recevoirReponse(requeteHttp)</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">{</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> if (requeteHttp.readyState==4)</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> {</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> if (requeteHttp.status==200)</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> </span> {</p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> traiterReponse(requeteHttp.responseXML);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> }</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> else</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> {</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> alert("La requête ne s'est pas correctement exécutée");</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> }</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> }</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">}</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> </span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">function traiterReponse(reponseXML)</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">{</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> var pdts=reponseXML.getElementsByTagName("produit");</span></p> <p class="programlisting"> <span lang="EN-GB" xml:lang= "EN-GB">var i,pdt;</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> for (i=0;i<<b>pdts.length</b>;i++)</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> {</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> pdt=pdts.item(i);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> alert('ref : ' + pdt.childNodes.item(0).firstChild.nodeValue);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> alert('des : ' + pdt.childNodes.item(1).firstChild.nodeValue);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> }</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">}</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"></script></span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"></head></span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"><body></span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> <a href="javascript:envoyerRequete('donnees.xml');"></span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> envoyer requete ajax</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> </a></span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"></body></span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"></html></span></p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>Fonctionnement :</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style= 'margin-top:0cm;margin-right:-.05pt;margin-bottom: 0cm;margin-left:36.0pt;margin-bottom:.0001pt;text-indent:-18.0pt'> -<span style= 'font:7.0pt "Times New Roman"'> </span> La ligne en gras dans la fonction <i>recevoirReponse</i> montre que l'on va traiter cette fois le résultat sous la forme d'un document XML et non comme un texte.</p> <p class="MsoNormal" style= 'margin-top:0cm;margin-right:-.05pt;margin-bottom: 0cm;margin-left:36.0pt;margin-bottom:.0001pt;text-indent:-18.0pt'> -<span style= 'font:7.0pt "Times New Roman"'> </span> Dans la fonction <i>traiterReponse</i>, la variable <i>pdts</i> reçoit la liste des nœuds XML correspondants à un élément <i>produit</i>.</p> <p class="MsoNormal" style= 'margin-top:0cm;margin-right:-.05pt;margin-bottom: 0cm;margin-left:36.0pt;margin-bottom:.0001pt;text-indent:-18.0pt'> -<span style= 'font:7.0pt "Times New Roman"'> </span> On explore ensuite cette liste dont la taille est donnée par la propriété <i>length</i>.</p> <p class="MsoNormal" style= 'margin-top:0cm;margin-right:-.05pt;margin-bottom: 0cm;margin-left:36.0pt;margin-bottom:.0001pt;text-indent:-18.0pt'> -<span style= 'font:7.0pt "Times New Roman"'> </span> Pour chaque élément <i>produit</i>, on récupère la liste des nœuds enfants (<i>childNodes</i>) et on exploite le fait que le premier nœud enfant <i>item(0)</i> correspond à la référence du produit, le second <i>item(1)</i> à sa désignation.</p> <p class="MsoNormal" style= 'margin-top:0cm;margin-right:-.05pt;margin-bottom: 0cm;margin-left:36.0pt;margin-bottom:.0001pt;text-indent:-18.0pt'> -<span style= 'font:7.0pt "Times New Roman"'> </span> Le texte contenu dans ces deux nœuds est contenu dans leur premier (et seul) nœud enfant (propriété <i>firstChild</i>).</p> <span style= 'font-size:10.0pt;font-family:"Arial","sans-serif";color:navy'><br clear="all" style='page-break-before:always' /></span> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <h2><a name="node33" id="node33"></a>b. Problèmes des éléments vides</h2> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>Si le document XML contient des retours à la ligne, il y aura des éléments vides de type texte. Le problème, c'est que les navigateurs les traitent différemment : IE les ignore, Mozilla les prend en compte…</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>Pour résoudre ce problème, la meilleure solution est de ne prendre en compte que les nœuds correpondant à des éléments à l'aide de la méthode <i>getElementsByTagName</i> de chaque élément <i>produit</i> obtenu.</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>L'exemple 12 met en œuvre cette technique.</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'> <b>donnees.xml</b></p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"><?xml version="1.0" encoding="ISO-8859-1" ?></span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"><catalogue></span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> <produit></span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> <ref>p01</ref></span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> <des>chaise</des></span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> </produit></span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> <produit></span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> <ref>p02</ref></span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> <des>table</des></span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> </produit></span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"></catalogue></span></p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'> <b>Page1.html</b></p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">function traiterReponse(reponseXML)</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">{</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> var pdts=reponseXML.getElementsByTagName("produit");</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> var i,j,pdt,elements,nom,valeur;</span></p> <p class="programlisting"> <span lang="EN-GB" xml:lang= "EN-GB">i=0;</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> for (i=0;i<pdts.length;i++)</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> {</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> pdt=pdts.item(i);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> elements=pdt.getElementsByTagName("*");</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> for(j=0;j<elements.length;j++)</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> {</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> nom=elements.item(j).nodeName;</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> valeur=elements.item(j).firstChild.nodeValue;</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> alert(nom + ':' + valeur);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> }</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> }</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">}</span></p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style= 'margin-top:0cm;margin-right:-.05pt;margin-bottom: 0cm;margin-left:36.0pt;margin-bottom:.0001pt;text-indent:-18.0pt'> -<span style= 'font:7.0pt "Times New Roman"'> </span> La première ligne en gras montre la récupération des éléments enfants de l'élement <i>produit</i>.</p> <p class="MsoNormal" style= 'margin-top:0cm;margin-right:-.05pt;margin-bottom: 0cm;margin-left:36.0pt;margin-bottom:.0001pt;text-indent:-18.0pt'> -<span style= 'font:7.0pt "Times New Roman"'> </span> La seconde montre l'accès au nœud de type <i>Text</i> enfant du nœud <i>ref</i> ou <i>des</i>.</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'><u>Autre solution</u></p> <p class="MsoNormal" style='margin-right:-.05pt'><u><span style= 'text-decoration: none'> </span></u></p> <p class="MsoNormal" style='margin-right:-.05pt'>Une autre manière de résoudre ce problème est de "passer" les nœuds vides dans la liste des nœuds explorés en prenant en compte la propriété <i>nodeType</i> :</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style= 'margin-top:0cm;margin-right:-.05pt;margin-bottom: 0cm;margin-left:36.0pt;margin-bottom:.0001pt;text-indent:-18.0pt'> -<span style= 'font:7.0pt "Times New Roman"'> </span> Les nœuds vides sont des nœuds texte (<i>nodeType</i> = 3).</p> <p class="MsoNormal" style= 'margin-top:0cm;margin-right:-.05pt;margin-bottom: 0cm;margin-left:36.0pt;margin-bottom:.0001pt;text-indent:-18.0pt'> -<span style= 'font:7.0pt "Times New Roman"'> </span> Pour les nœuds correspondant à un élément, la propriété <i>nodeType</i> est à 1.</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>Le fichier <i>page2.html</i> (répertoire <i>Exemple12</i>) présenté page suivante implémente cette autre solution.</p> <span style= 'font-size:10.0pt;font-family:"Arial","sans-serif";color:navy'><br clear="all" style='page-break-before:always' /></span> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'> <b>Page2.html</b></p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">function traiterReponse(reponseXML)</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">{</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> var pdts=reponseXML.getElementsByTagName("produit");</span></p> <p class="programlisting"> <span lang="EN-GB" xml:lang= "EN-GB">var i,j,pdt;</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> i=0;</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> for (i=0;i<pdts.length;i++)</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> {</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> pdt=pdts.item(i);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> j=0;</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> while(pdt.childNodes.item(j).nodeType!=1) j++; // passer les vides</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> alert('ref : ' + pdt.childNodes.item(j).firstChild.nodeValue);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> j++;</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> while(pdt.childNodes.item(j).nodeType!=1) j++; // passer les vides</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> alert('des : ' + pdt.childNodes.item(j).firstChild.nodeValue);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> }</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">}</span></p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>Les deux boucles en gras permettent de passer les éléments vides avec les navigateurs basés sur Mozilla.</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <span lang="EN-GB" style= 'font-size:10.0pt;font-family:"Courier New";color:navy' xml:lang= "EN-GB"><br clear="all" style='page-break-before:always' /></span> <p class="programlisting" style='margin-left:0cm'><span lang= "EN-GB" xml:lang="EN-GB"> </span></p> <h2><a name="node34" id="node34"></a>c. Cas des attributs</h2> <p class="MsoNormal" style='margin-right:-.05pt'>Il est également possible de traiter les éléments XML possédant des attributs. L'exemple 13 manipule de tels éléments.</p> <p class="MsoNormal" style='margin-right:-.05pt'><span style= 'font-size:9.0pt'> </span></p> <p class="MsoNormal" style='margin-right:-.05pt'> <b>donnees.xml</b></p> <p class="MsoNormal" style='margin-right:-.05pt'><span style= 'font-size:9.0pt'> </span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"><?xml version="1.0" encoding="ISO-8859-1" ?></span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"><catalogue></span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> <produit ref="p01"></span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> <des>chaise</des></span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> </produit></span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> <produit ref="p02"></span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> <des>table</des></span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> </produit></span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"></catalogue></span></p> <p class="MsoNormal" style='margin-right:-.05pt'><span style= 'font-size:9.0pt'> </span></p> <p class="MsoNormal" style='margin-right:-.05pt'> <b>page1.html</b></p> <p class="MsoNormal" style='margin-right:-.05pt'><span style= 'font-size:9.0pt'> </span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">function traiterReponse(reponseXML)</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">{</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> var pdts=reponseXML.getElementsByTagName("produit");</span></p> <p class="programlisting"> <span lang="EN-GB" xml:lang= "EN-GB">var i,j,pdt,ref;</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> for (i=0;i<pdts.length;i++)</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> {</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> pdt=pdts.item(i);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> ref=pdt.attributes.getNamedItem('ref').nodeValue;</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> alert('ref : ' + ref);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> j=0;</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> while(pdt.childNodes.item(j).nodeType!=1) j++; // passer les vides</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> alert('des : ' + pdt.childNodes.item(j).firstChild.nodeValue);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> }</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">}</span></p> <p class="MsoNormal" style='margin-right:-.05pt'><span style= 'font-size:9.0pt'> </span></p> <p class="MsoNormal" style='margin-right:-.05pt'>La ligne en gras montre comment utiliser la propriété <i>attributes</i> et la méthode <i>getNamedItem</i> pour récupérer la référence du produit.</p> <p class="MsoNormal" style='margin-right:-.05pt'><span style= 'font-size:9.0pt'> </span></p> <p class="MsoNormal" style='margin-right:-.05pt'>Remarque : le contenu XML peut bien entendu être généré en PHP. C'est ainsi que la requête adressant le document <i>donnees.php</i> du répertoire <i>Exemple13</i> peut être traité de la même manière que le fichier <i>donnees.xml</i> par la page <i>page2.html</i>.</p> <p class="MsoNormal" style='margin-right:-.05pt'><b><span style= 'font-size:9.0pt'> </span></b></p> <p class="MsoNormal" style='margin-right:-.05pt'><b><span lang= "EN-GB" xml:lang="EN-GB">donnees.php</span></b></p> <p class="MsoNormal" style='margin-right:-.05pt'><span lang="EN-GB" style='font-size:9.0pt' xml:lang="EN-GB"> </span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"><?php</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> header("Cache-Control: no-cache, must-revalidate");</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> header('Content-Type: text/xml; charset=ISO-8859-1');</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> echo '<?xml version="1.0" encoding="ISO-8859-1"?>'; </span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> echo '<catalogue>';</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> echo '<produit ref="p01">';</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> echo '<des>chaise</des>';</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> echo '</produit>';</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> echo '<produit ref="p02">';</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> echo '<des>table</des>';</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> echo '</produit>';</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> echo '</catalogue>';</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">?></span></p> <p class="MsoNormal" style='margin-right:-.05pt'><span style= 'font-size:9.0pt'> </span></p> <p class="MsoNormal" style='margin-right:-.05pt'> <b>page2.html</b></p> <p class="MsoNormal" style='margin-right:-.05pt'><span style= 'font-size:9.0pt'> </span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> <a href="javascript:envoyerRequete(<b>'donnees.php'</b>);"></span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> envoyer requete ajax</a></span></p> <b><span style= 'font-size:14.0pt;font-family:"Arial","sans-serif";color:#7D9BFF'><br clear="all" style='page-break-before:always' /></span></b> <h1><a name="node35" id="node35"></a>8. DOM et la page HTML</h1> <h2><a name="node36" id="node36"></a>a. Principe</h2> <p class="MsoNormal" style='margin-right:-.05pt'>La variable javascript <i>document</i> représente le document HTML affiché par le navigateur. Ce document peut être lui aussi manipulé à l'aide de DOM, ce qui offre de nombreuses possibilités pour rendre les pages réactives. Il est en effet possible de manipuler le document affiché pour le modifier dynamiquement en javascript à l'aide de DOM, l'affichage étant automatiquement mis à jour par le navigateur.</p> <h2><a name="node37" id="node37"></a>b. Exemple</h2> <p class="MsoNormal" style='margin-right:-.05pt'>L'exemple 14 utilise ces possibilités pour construire dynamiquement une liste d'options sur la page HTML en cours d'affichage. La liste est créée à partir du fichier <i>donnees.xml</i> récupéré à l'aide d'une requête ajax.</p> <p class="MsoNormal" style='margin-right:-.05pt'><span style= 'font-size:8.0pt'> </span></p> <p class="MsoNormal" style='margin-right:-.05pt'> <b>donnees.xml</b></p> <p class="MsoNormal" style='margin-right:-.05pt'><span style= 'font-size:6.0pt'> </span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"><?xml version="1.0" encoding="ISO-8859-1" ?></span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"><catalogue></span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> <produit></span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> <ref>p01</ref></span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> <des>chaise</des></span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> </produit></span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> <produit></span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> <ref>p02</ref></span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> <des>table</des></span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> </produit></span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"></catalogue></span></p> <p class="MsoNormal" style='margin-right:-.05pt'><span style= 'font-size:8.0pt'> </span></p> <p class="MsoNormal" style='margin-right:-.05pt'> <b>page1.html</b></p> <p class="MsoNormal" style='margin-right:-.05pt'><span style= 'font-size:6.0pt'> </span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">function traiterReponse(reponseXML)</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">{</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> var pdts=reponseXML.getElementsByTagName("produit");</span></p> <p class="programlisting"> <span lang="EN-GB" xml:lang= "EN-GB">var bodyHtml=document.getElementsByTagName("body").item(0);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> var listePdt=document.createElement("select");</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> listePdt.setAttribute("id","listePdt");</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> listePdt.setAttribute("size","4");</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> listePdt.onchange=function() {afficher(this.value);};</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> var i,j,pdt,option,elements,nom,valeur;</span></p> <p class="programlisting"> <span lang="EN-GB" xml:lang= "EN-GB">for (i=0;i<pdts.length;i++)</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> {</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> option=document.createElement("option");</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> pdt=pdts.item(i);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> elements=pdt.getElementsByTagName("*");</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> for(j=0;j<elements.length;j++)</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> {</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> nom=elements.item(j).nodeName;</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> valeur=elements.item(j).firstChild.nodeValue;</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> if (nom=='ref')</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> </span> {</p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> option.setAttribute("value",valeur);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> }</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> else</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> {</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> option.appendChild(document.createTextNode(valeur));</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> listePdt.appendChild(option);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> }</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> }</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> }</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> bodyHtml.appendChild(listePdt);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">}</span></p> <span lang="EN-GB" style= 'font-size:10.0pt;font-family:"Courier New";color:navy' xml:lang= "EN-GB"><br clear="all" style='page-break-before:always' /></span> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">function afficher(ref)</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">{</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> alert(ref);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">}</span></p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>Les lignes en gras dans la fonction <i>traiterReponse</i> montrent la construction de la liste et son ajout au document HTML.</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>Pour la gestion de l'événement onchange, le respect de DOM aurait voulu que l'on écrive :</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> listePdt.setAttribute("onchange","javascript:afficher(this.value)");</span></p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>Cette solution ne fonctionne malheureusement pas avec Internet Explorer.</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <h1><a name="node38" id="node38"></a>9. Retour sur notre exemple</h1> <h2><a name="node39" id="node39"></a>a. Rappel du résultat attendu</h2> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>Il s'agit de reproduire la page de recherche d'un produit de l'exemple 10 (paragraphe 4) en utilisant cette fois DOM pour manipuler le résultat de la requête ajax et pour mettre à jour la page HTML.</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'><img width="184" height="154" src="initAjax_V2_fichiers/image004.jpg" alt= "image" /></p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <h2><a name="node40" id="node40"></a>b. Solution</h2> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>L'exemple 15 répond à ce cahier des charges :</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style= 'margin-top:0cm;margin-right:-.05pt;margin-bottom: 0cm;margin-left:36.0pt;margin-bottom:.0001pt;text-indent:-18.0pt'> -<span style= 'font:7.0pt "Times New Roman"'> </span> Une requête ajax est envoyée au serveur lorsque l'utilisateur sélectionne une catégorie.</p> <p class="MsoNormal" style= 'margin-top:0cm;margin-right:-.05pt;margin-bottom: 0cm;margin-left:36.0pt;margin-bottom:.0001pt;text-indent:-18.0pt'> -<span style= 'font:7.0pt "Times New Roman"'> </span> S'il existe des produits dans cette catégorie, la liste des produits est construite en utilisant DOM.</p> <p class="MsoNormal" style= 'margin-top:0cm;margin-right:-.05pt;margin-bottom: 0cm;margin-left:36.0pt;margin-bottom:.0001pt;text-indent:-18.0pt'> -<span style= 'font:7.0pt "Times New Roman"'> </span> Une autre requête affiche le prix lorsque l'utilisateur sélectionne un produit dans la liste.</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'><b><span lang= "EN-GB" xml:lang="EN-GB">getProduits.php</span></b></p> <p class="MsoNormal" style='margin-right:-.05pt'><span lang="EN-GB" xml:lang="EN-GB"> </span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"><?php</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> header("Cache-Control: no-cache, must-revalidate");</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> header('Content-Type: text/xml; charset=ISO-8859-1');</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> echo '<?xml version="1.0" encoding="ISO-8859-1"?>';</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> echo '<catalogue>';</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> $cnx=mysql_connect('localhost','root','');</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> mysql_select_db('ajax',$cnx);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> $req=mysql_query('select * from produit</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> where pr_categorie='.$_POST['categ']);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> $pdt=mysql_fetch_assoc($req);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> while($pdt)</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> {</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> echo '<produit>';</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> echo '<ref>'.$pdt['pr_id'].'</ref>';</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> echo '<des>'.$pdt['pr_libelle'].'</des>';</span></p> <p class="programlisting"> <span lang= "EN-GB" xml:lang="EN-GB">echo '</produit>';</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> $pdt=mysql_fetch_assoc($req);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> }</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> mysql_close($cnx);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> echo '</catalogue>';</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">?></span></p> <p class="MsoNormal" style='margin-right:-.05pt'><b><span lang= "EN-GB" xml:lang="EN-GB">getInfoProduit.php</span></b></p> <p class="MsoNormal" style='margin-right:-.05pt'><span lang="EN-GB" xml:lang="EN-GB"> </span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"><?php</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> header("Cache-Control: no-cache, must-revalidate");</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> header('Content-Type: text/xml; charset=ISO-8859-1');</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> echo '<?xml version="1.0" encoding="ISO-8859-1"?>';</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> echo '<infos>';</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> $cnx=mysql_connect('localhost','root','');</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> mysql_select_db('ajax',$cnx);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> $req=mysql_query('select pr_prix from produit</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> where pr_id='.$_POST['pdt']);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> $pdt=mysql_fetch_assoc($req);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> mysql_close($cnx);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> echo '<prix>'.$pdt['pr_prix'].'</prix>';</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> echo '</infos>';</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">?></span></p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'> <b>page1.php</b></p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"><html></span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"><head></span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"><script type="text/javascript"></span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">function getRequeteHttp()</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang="EN-GB">{ // comme d'habitude</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">}</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> </span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">function envoyerRequeteListeProduits(idCateg)</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">{</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> var requeteHttp=getRequeteHttp();</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> if (requeteHttp==null)</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> {</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> alert("Impossible d'utiliser Ajax sur ce navigateur");</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> }</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> else</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> {</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> requeteHttp.open('POST','getProduits.php',true);</span></p> <p class="programlisting"> <span lang= "EN-GB" xml:lang="EN-GB">requeteHttp.onreadystatechange=</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> function() {recevoirListeProduits(requeteHttp);};</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> requeteHttp.setRequestHeader('Content-Type',</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> 'application/x-www-form-urlencoded');</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> requeteHttp.send('categ=' + escape(idCateg));</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> }</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> return;</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">}</span></p> <p class="MsoNormal" style='margin-right:-.05pt'><span lang="EN-GB" xml:lang="EN-GB"> </span></p> <span lang="EN-GB" style= 'font-size:10.0pt;font-family:"Courier New";color:navy' xml:lang= "EN-GB"><br clear="all" style='page-break-before:always' /></span> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">function recevoirListeProduits(requeteHttp)</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">{</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> if (requeteHttp.readyState==4)</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> {</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> if (requeteHttp.status==200)</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> </span> {</p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> var pdts=requeteHttp.responseXML.getElementsByTagName("produit");</span></p> <p class="programlisting"> <span lang="EN-GB" xml:lang="EN-GB">var bodyHtml=document.getElementsByTagName("body").item(0);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> var selectPdt=bodyHtml.getElementsByTagName("select").item(1);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> bodyHtml.removeChild(selectPdt);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> selectPdt=document.createElement("select");</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> selectPdt.setAttribute("id","listePdt");</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> selectPdt.setAttribute("size","4");</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> selectPdt.onchange=function() {envoyerRequeteProduit(this.value);};</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> var i,j,pdt,option,elements,nom,valeur;</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> for (i=0;i<pdts.length;i++)</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> {</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> option=document.createElement("option");</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> if(i==0)</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> {</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> option.setAttribute("selected","selected");</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> }</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> pdt=pdts.item(i);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> elements=pdt.getElementsByTagName("*");</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> for(j=0;j<elements.length;j++)</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> {</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> nom=elements.item(j).nodeName;</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> valeur=elements.item(j).firstChild.nodeValue;</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> if (nom=='ref')</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> </span> {</p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> option.setAttribute("value",valeur);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> }</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> else</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> {</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> option.appendChild(document.createTextNode(valeur));</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> selectPdt.appendChild(option);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> }</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> }</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> }</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> var brPrix=bodyHtml.getElementsByTagName("br").item(2);</span></p> <p class="programlisting"> <span lang="EN-GB" xml:lang= "EN-GB">bodyHtml.insertBefore(selectPdt,brPrix);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> if(pdts.length>0)</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> {</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> envoyerRequeteProduit(selectPdt.firstChild.getAttribute("value"));</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> }</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> else</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> </span> {</p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> document.getElementById("prix").innerHTML='';</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> }</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> }</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> else</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> {</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> alert("La requête ne s'est pas correctement exécutée");</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> }</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> }</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">}</span></p> <span lang="EN-GB" style= 'font-size:10.0pt;font-family:"Courier New";color:navy' xml:lang= "EN-GB"><br clear="all" style='page-break-before:always' /></span> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">function envoyerRequeteProduit(idPdt)</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">{</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> var requeteHttp=getRequeteHttp();</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> if (requeteHttp==null)</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> {</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> alert("Impossible d'utiliser Ajax sur ce navigateur");</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> }</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> else</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> {</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> requeteHttp.open('POST','getInfoProduit.php',true);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> requeteHttp.onreadystatechange=</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> function() {recevoirInfoProduit(requeteHttp);};</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> requeteHttp.setRequestHeader('Content-Type',</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> 'application/x-www-form-urlencoded');</span></p> <p class="programlisting"> <span lang= "EN-GB" xml:lang="EN-GB">requeteHttp.send('pdt=' + escape(idPdt));</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> }</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">}</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> </span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">function recevoirInfoProduit(requeteHttp)</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">{</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> if (requeteHttp.readyState==4)</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> {</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> if (requeteHttp.status==200)</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> {</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> document.getElementById("prix").innerHTML=requeteHttp.responseText;</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> }</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> else</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> </span> {</p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> alert("La requête ne s'est pas correctement exécutée");</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> }</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> }</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">}</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"></script></span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"></head></span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"><body></span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"><?php</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> echo '<select name="idCateg" onchange=</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> "javascript:envoyerRequeteListeProduits(this.value)">';</span></p> <p class="programlisting"> <span lang="EN-GB" xml:lang= "EN-GB">$cnx=mysql_connect('localhost','root','');</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> mysql_select_db('ajax',$cnx);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> $req=mysql_query('select * from categorie');</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> $ligne=mysql_fetch_assoc($req);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> if ($ligne)</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> {</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> $categ1=$ligne['ca_id'];</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> echo '<option selected value='</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> .$ligne['ca_id'].'>'.$ligne['ca_libelle'];</span></p> <p class="programlisting"> <span lang= "EN-GB" xml:lang="EN-GB">$ligne=mysql_fetch_assoc($req);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> while($ligne)</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> {</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> echo '<option value='.$ligne['ca_id'].'>'.$ligne['ca_libelle'];</span></p> <p class="programlisting"> <span lang="EN-GB" xml:lang="EN-GB">$ligne=mysql_fetch_assoc($req);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> }</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> }</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> else</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> {</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> $categ1=null;</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> }</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> echo '</select>';</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> echo '<br />';</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> echo '<span>Liste des produits : </span><br />';</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> echo '<select id="listePdt" size="4" onchange=</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> "javascript:envoyerRequeteProduit(this.value)">';</span></p> <p class="programlisting"> <span lang="EN-GB" xml:lang= "EN-GB">if ($categ1!=null)</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> {</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> $req=mysql_query('select * from produit</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> where pr_categorie='.$categ1);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> $ligne=mysql_fetch_assoc($req);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> if ($ligne)</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> {</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> echo '<option selected value='</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> .$ligne['pr_id'].'>'.$ligne['pr_libelle'];</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> $prix1=$ligne['pr_prix'];</span></p> <p class="programlisting"> <span lang="EN-GB" xml:lang="EN-GB">$ligne=mysql_fetch_assoc($req);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> </span> }</p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> else</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> {</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> $prix1='';</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> }</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> while($ligne)</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> {</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> echo '<option value='.$ligne['pr_id'].'>'.$ligne['pr_libelle'];</span></p> <p class="programlisting"> <span lang="EN-GB" xml:lang="EN-GB">$ligne=mysql_fetch_assoc($req);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> }</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> }</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> echo '</select>';</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> echo '<br />';</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"> echo 'Prix : <span id="prix">'.$prix1.'</span>';</span></p> <p class="programlisting"> <span lang="EN-GB" xml:lang= "EN-GB">mysql_close($cnx);</span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB">?></span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"></body></span></p> <p class="programlisting"><span lang="EN-GB" xml:lang= "EN-GB"></html></span></p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'> <b><u>Conclusion</u></b></p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>Une fois bien comprise, la technique ajax est simple à mettre en oeuvre et permet d'obtenir des pages très réactives. Certains y voient le retour en force de javascript…</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>Pour ce qui est de l'utilisation de DOM, il est certain que les différences de comportement entre navigateurs compliquent un peu les choses.</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>L’utilisation d’Ajax n’a pas que des avantages...</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>D’une part, il faut rester conscient que tout ceci ne fonctionne plus si le navigateur est trop ancien ou encore si l’utilisateur a désactivé l’exécution des scripts javascript sur son poste de travail. Il est important d’utiliser la balise HTML <i>noscript</i> pour parer à cette éventualité. Bien sûr, le problème ne se pose pas en intranet puisque l’on maîtrise la configuration des postes clients.</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>D’autre part, on peut estimer qu’une application Web possède 4 composantes clairement identifiées :</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style= 'margin-top:0cm;margin-right:-.05pt;margin-bottom: 0cm;margin-left:36.0pt;margin-bottom:.0001pt;text-indent:-18.0pt'> -<span style= 'font:7.0pt "Times New Roman"'> </span> L’information présentée à l’utilisateur décrite en HTML,</p> <p class="MsoNormal" style= 'margin-top:0cm;margin-right:-.05pt;margin-bottom: 0cm;margin-left:36.0pt;margin-bottom:.0001pt;text-indent:-18.0pt'> -<span style= 'font:7.0pt "Times New Roman"'> </span> la présentation de cette information exprimée en CSS,</p> <p class="MsoNormal" style= 'margin-top:0cm;margin-right:-.05pt;margin-bottom: 0cm;margin-left:36.0pt;margin-bottom:.0001pt;text-indent:-18.0pt'> -<span style= 'font:7.0pt "Times New Roman"'> </span> les données servant de ressources à l’information mémorisées dans une base de données,</p> <p class="MsoNormal" style= 'margin-top:0cm;margin-right:-.05pt;margin-bottom: 0cm;margin-left:36.0pt;margin-bottom:.0001pt;text-indent:-18.0pt'> -<span style= 'font:7.0pt "Times New Roman"'> </span> les traitements nécessaires à l’application exécutés par le moteur PHP du serveur http.</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'>Le retour de javascript risque de « casser » cette belle organisation en réintroduisant du traitement sur le poste client.</p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> <p class="MsoNormal" style='margin-right:-.05pt'> </p> </div>
Table des matières
Sujets
Recherche
Initiation à AJAX
Une approche du web 2.0
L'objet XMLHttpRequest
a. Description
b. Comment "utiliser" cet objet ?
2. Techniques de base
a. Premier exemple
b. Principe de fonctionnement
c. Que peut faire le serveur ?
d. Un exemple concret
3. Pour aller plus loin…(optionnel)
a. Appel asynchrone
b. Transmettre de l'information (méthode GET)
c. Transmettre de l'information (méthode POST)
4. Un exemple complet
a. Résultat à obtenir
b. Technique classique
c. Un solution un peu lourde
d. Avec Ajax !
5. Et le X dans tout cela ?
a. Introduction
b. Structure d'un document XML selon DOM
6. Présentation de DOM
a. Introduction
b. Types de nœuds
c. Node
d. NodeList
e. Attr
f. Element
g. Document
h. NameNodeMap
7. Mise en œuvre de DOM
a. Premier exemple
b. Problèmes des éléments vides
c. Cas des attributs
8. DOM et la page HTML
a. Principe
b. Exemple
9. Retour sur notre exemple
a. Rappel du résultat attendu
b. Solution
2. Techniques de base
3. Pour aller plus loin…(optionnel)
4. Un exemple complet
5. Et le X dans tout cela ?
6. Présentation de DOM
7. Mise en œuvre de DOM
8. DOM et la page HTML
9. Retour sur notre exemple
a. Appel asynchrone
a. Description
a. Introduction
a. Introduction
a. Premier exemple
a. Premier exemple
a. Principe
a. Rappel du résultat attendu
a. Résultat à obtenir
b. Comment "utiliser" cet objet ?
b. Exemple
b. Principe de fonctionnement
b. Problèmes des éléments vides
b. Solution
b. Structure d'un document XML selon DOM
b. Technique classique
b. Transmettre de l'information (méthode GET)
b. Types de nœuds
c. Cas des attributs
c. Node
c. Que peut faire le serveur ?
c. Transmettre de l'information (méthode POST)
c. Un solution un peu lourde
d. Avec Ajax !
d. NodeList
d. Un exemple concret
e. Attr
f. Element
g. Document
h. NameNodeMap
Initiation à AJAX
L'objet XMLHttpRequest
Une approche du web 2.0
Générée avec
chmProcessor
Générée avec
chmProcessor