Vous êtes sur la page 1sur 12

D.

Laurent Ingmedia 2007 / 2008 Master 2 IM

Master 2 IM Ingemedia 2007 / 2008

Programmation Ajax XMLHttpRequest

1 / 12

D. Laurent Ingmedia 2007 / 2008 Master 2 IM

Introduction :
1.1 - Gnralits :

L'objet XMLHttpsRequest t introduit par Microsoft en 1999 sous la forme d'un activeX, cette technologie n'ayant pas encore t battue en brche par ses innombrables failles de scurits. Il est ensuite apparu en tant qu'objet natif du DOM dans Mozilla 1,0 en 2002, on le retrouve donc dans Firefox et Camino. Les autres navigateurs tels que Safari, Konqueror on suivis par la suite. Sont utilisation est tellement rpandue, que le W3c est en passe d'en faire une standardisation

1-2 Contexte de travail :

Nous allons dans un premier temps travailler sur une structure de base de donne dj toute prte sur un serveur distant, le but tant de manipuler le plus tt possible cet objet. Dans un deuxime temps vous serez amen crer en local votre propre base de donnes pour raliser le mme travail, et ainsi, crer toute la chane de production dun mini site. La base de donne est disponible aux paramtres suivants :

Adresse du serveur : 213.246.51.14 base de donne : voiture username : ingemedia password : inge83

Lexemple se compose deux pages : - une page index.php reprsentant la page o vont safficher les rsultats - un page resultat.php qui vas produire la rponse la requte

Lexemple porte sur une base de voitures doccasions dont les paramtres clefs sont : - la marque - le model - le prix - le kilomtrage
2 / 12

D. Laurent Ingmedia 2007 / 2008 Master 2 IM

Ces paramtres - simplistes- ainsi que le design - primaire - de lexemple sont l uniquement des fins dillustration. Il est vident que pour un site professionnel, ces paramtres seront beaucoup plus complexes et graphiquement plus labors. Cependant, le principe restera le mme.

1-3 Chronologie :
La chronologie se prsente ainsi : a) construction de la page index.php : Code Xhtml : Cration de la structure de la page Cration des champs de recherche o o implmentation des champs choix de lvnement qui dclenchera laction

Cration de la zone daffichage

Code Javascript : - cration de la fonction laborant la requte et lanant lappel - dtection du navigateur - instanciation de lobjet - fabrication de la requte de travail vers la page resultat.php - ouverture du canal de communication - appel de la fonction daffichage du rsultat - cration de la fonction daffichage du rsultat - test de ltat de la requte - sur ltat 4 , affichage du rsultat dans la page

b) Construction de la page resultat.php : - cration de la requte SQL en fonction des donnes reues - lancement de la requte auprs du serveur Mysql - Affichage du rsultat sous la forme dune table

3 / 12

D. Laurent Ingmedia 2007 / 2008 Master 2 IM

2 Description de l'objet XMLHttpRequest :


2-1 Cration de la structure de la page et des champs de recherche:
La structure de la page est simple : un table pour raliser la partie moteur de recherche :

<table> <tr> <th colspan="4">RECHERCHE</th> </tr> <tr> <td>Marque :</td> <td><label> <input type="text" name="marque" id="marque" onkeyup="SendGetRequest()" value=""/> </label></td> <td>Prix :</td> <td><input type="text" name="prix" id="prix" onkeyup="SendGetRequest()" /></td> </tr> <tr> <td>Model :</td> <td><label> <input type="text" name="model" id="model" onkeyup="SendGetRequest()"/> </label></td> <td>KM :</td> <td><label> <input type="text" name="km" id="km" onkeyup="SendGetRequest()"/> </label></td> </tr> <tr> <td colspan="4"><label> <input type="submit" name="go" id="go" value="Envoyer" /> </label></td> </tr> </table>

et la Div accueillant le rsultat : <div id="divResult"></div>

Lensemble peut bien sur tre intgr dans une page avec une css pour tre plus agrable.

4 / 12

D. Laurent Ingmedia 2007 / 2008 Master 2 IM

2-1 Cration de la fonction principale :

On dclare au pralable lobjet qui accueillera lXMLHttpRequest, puis on fait une structure simple de fonction en Javascript :

<script type="text/javascript" language="javascript"> var xhr_object = null; function SendGetRequest(){ }

</script>

2-2 Dtection du navigateur et construction de lobjet :


Etant donn la diffrence d'implmentation de l'objet, soit en tant qu'activeX soit en tant qu'objet du DOM, il convient avant de l'employer de savoir comment instancier l'objet. Le code ci aprs le permet :

dans le cas de MSIE jusqu' la version 6, d'instancier l'objet au niveau de l'activeX dans le cas d'un navigateur a base Mozilla ou IE 7 , d'instancier l'objet du DOM if ( window.XMLHttpRequest ) { // Objet XmlHttpRequest pour les moteurs GECKO xhr_object = new XMLHttpRequest(); } else if ( window.ActiveXObject ) { // Objet XmlHttpRequest pour Internet Explorer xhr_object = new ActiveXObject( 'Microsoft.XMLHTTP' ); } else { // Navigateur non-compatible alert( 'Votre navigateur ne supporte pas les objets XMLHTTPRequest...' ); return; }

5 / 12

D. Laurent Ingmedia 2007 / 2008 Master 2 IM

Cette condition est intgre dans la fonction cr en 2.1 :

var xhr_object = null; function SendGetRequest(){ if ( window.XMLHttpRequest ) { // Objet XmlHttpRequest pour les moteurs GECKO xhr_object = new XMLHttpRequest(); } else if ( window.ActiveXObject ) { // Objet XmlHttpRequest pour Internet Explorer xhr_object = new ActiveXObject( 'Microsoft.XMLHTTP' ); } else { // Navigateur non-compatible alert( 'Votre navigateur ne supporte pas les objets XMLHTTPRequest...' ); return; } </script>

2-3 Fabrication de la requte de travail :

On utilise les possibilits daccs au DOM de la page par lintermdiaire de document.getElementById() pour chaque champs de recherche quil faut rcuprer. La valeur des champs est stocke dans des variables. Ces variables seront concatnes avec lurl atteindre- on suppose que lon vas utiliser la mthode GET dans ce cas. Les nom des variables utilises dans lurl seront bien sur les mme que celles utilises dans la page rsultat.php.

marqueVoiture=document.getElementById('marque').value; prixVoiture = document.getElementById('prix').value; modelVoiture=document.getElementById('model').value; kmVoiture=document.getElementById('km').value; var xhr_url = 'resultat.php?marque='+marqueVoiture+'&prix='+prixVoiture+'&model='+mo delVoiture+'&km='+kmVoiture;

6 / 12

D. Laurent Ingmedia 2007 / 2008 Master 2 IM

Le code est - comme prcdament - intgr dans la fonction principale. La position par rapport la dtection du navigateur na pas dimportance :

<script type="text/javascript" language="javascript"> var xhr_object = null; function SendGetRequest(){ marqueVoiture=document.getElementById('marque').value; prixVoiture = document.getElementById('prix').value; modelVoiture=document.getElementById('model').value; kmVoiture=document.getElementById('km').value; var xhr_url = 'resultat.php?marque='+marqueVoiture+'&prix='+prixVoiture+'&model='+mo delVoiture+'&km='+kmVoiture; if ( window.XMLHttpRequest ) { // Objet XmlHttpRequest pour les moteurs GECKO xhr_object = new XMLHttpRequest(); } else if ( window.ActiveXObject ) { // Objet XmlHttpRequest pour Internet Explorer xhr_object = new ActiveXObject( 'Microsoft.XMLHTTP' ); } else { // Navigateur non-compatible alert( 'Votre navigateur ne supporte pas les objets XMLHTTPRequest...' ); return; }}

</script>

2-4 ouverture du canal de communication, envois de la requete et appel de la fonction de retour :

// On ouvre la requete vers la page dsire xhr_object.open( 'GET', xhr_url, true ); // On lui donne le pointeur de fonction de retour xhr_object.onreadystatechange = CallBackRequest; // On envoi la requete xhr_object.send( null );

7 / 12

D. Laurent Ingmedia 2007 / 2008 Master 2 IM

Ce code est a nouveau intgr la fin de la fonction principale. Cette dernire doit ressembler ceci :

<script type="text/javascript" language="javascript"> var xhr_object = null; function SendGetRequest(){ marqueVoiture=document.getElementById('marque').value; prixVoiture = document.getElementById('prix').value; modelVoiture=document.getElementById('model').value; kmVoiture=document.getElementById('km').value; var xhr_url = 'resultat.php?marque='+marqueVoiture+'&prix='+prixVoiture+'&model='+mo delVoiture+'&km='+kmVoiture; if ( window.XMLHttpRequest ) { // Objet XmlHttpRequest pour les moteurs GECKO xhr_object = new XMLHttpRequest(); } else if ( window.ActiveXObject ) { // Objet XmlHttpRequest pour Internet Explorer xhr_object = new ActiveXObject( 'Microsoft.XMLHTTP' ); } else { // Navigateur non-compatible alert( 'Votre navigateur ne supporte pas les objets XMLHTTPRequest...' ); return; } // On ouvre la requete vers la page dsire xhr_object.open( 'GET', xhr_url, true ); // On lui donne le pointeur de fonction de retour xhr_object.onreadystatechange = CallBackRequest; // On envoi la requete xhr_object.send( null ); } </script>

8 / 12

D. Laurent Ingmedia 2007 / 2008 Master 2 IM

2-5 Requte synchrone ou Asynchrone ?


Une requte synchrone bloque le navigateur dans lattente de la rponse, il ny a alors plus aucune raction aucun vnement tant que la rponse nest pas arrive. La requte asynchrone par contre permet lutilisateur de continuer travailler en attendant la rponse, la communication seffectue en parallle. Cest pourquoi, la plupart du temps, le travail doit seffectuer sur le mode asynchrone, dans le cas de lautocompletion par exemple ou dans le cas des flux RSS. Dans le cas de la suggestion de saisie, cette dernire doit tre parallle la requte et ne pas tre bloque par elle. Le mode synchrone pourrait tre choisi dans le cas de saisie en cascade de champs dpendant les uns des autres : lintrt du mode synchrone est en effet dempcher des actions inopines de lutilisateur. On peut cependant obtenir le mme comportement en dsactivant les objets inopportuns pendant le cours de la requte.

2-6 Fonction daffichage du rsultat :


function CallBackRequest() { // Sur le retour de la requete, on teste son tat if ( xhr_object.readyState == 4 ) { // On injecte notre retour dans la DIV prevue a cet effet document.getElementById( 'divResult' ).innerHTML = xhr_object.responseText; } }

Cette fonction est incluse dans le script, indpendamment de la fonction Javascript.

9 / 12

D. Laurent Ingmedia 2007 / 2008 Master 2 IM

3 - Fabrication de la page de rsultat :


Il sagit dune page en php, acceptant en paramtre durl les critres de choix dfinis dans le requte Ajax : un partie du code en php fabrique lurl et interroge la base de donnes lautre partie structure la rponse dans une table :

3-1 Premire partie : code en php, on remarquera l inclusion de deux fichier :


un fichier de connexion la base de donnes un fichier routines contenant un script basique de redimensionnement homothtique des images.

<?php require_once('../../Connections/voitures.php'); ?> <?php require_once('routines.php'); $colname_liste_voiture = "-1"; if (isset($_GET['marque'])) { $colname_liste_voiture = $_GET['marque']; } mysql_select_db($database_voitures, $voitures); $query_liste_voiture = "SELECT * FROM voitures WHERE 1 "; if ($_GET['marque'] != "") {$query_liste_voiture .=" AND marque LIKE '%".$_GET['marque']."%' ";} if ($_GET['model'] != "") {$query_liste_voiture .=" AND model LIKE '%".$_GET['model']."%' ";} if ($_GET['km'] != "") {$query_liste_voiture .=" AND kilometrage < ".$_GET['km']." ";} if ($_GET['prix'] != "") {$query_liste_voiture .=" AND prix > ".($_GET['prix']*1.1)." ";} //echo $query_liste_voiture; $liste_voiture = mysql_query($query_liste_voiture, $voitures) or die(mysql_error()); $row_liste_voiture = mysql_fetch_assoc($liste_voiture); $totalRows_liste_voiture = mysql_num_rows($liste_voiture); ?>

Fichier connection bdd ;

<?php $hostname_voitures = "213.246.51.14"; $database_voitures = "voiture"; $username_voitures = "ingemedia"; $password_voitures = "inge83"; $voitures = mysql_pconnect($hostname_voitures, $username_voitures, $password_voitures) or trigger_error(mysql_error(),E_USER_ERROR); ?>

10 / 12

D. Laurent Ingmedia 2007 / 2008 Master 2 IM

Fichier routines :

<? function redimage($img_src,$dst_w,$dst_h) { // Lit les dimensions de l'image $size = GetImageSize($img_src); $src_w = $size[0]; $src_h = $size[1]; // Teste les dimensions tenant dans la zone $test_h = round(($dst_w / $src_w) * $src_h); $test_w = round(($dst_h / $src_h) * $src_w); // Si Height final non prcis (0) if(!$dst_h) $dst_h = $test_h; // Sinon si Width final non prcis (0) elseif(!$dst_w) $dst_w = $test_w; // Sinon teste quel redimensionnement tient dans la zone elseif($test_h>$dst_h) $dst_w = $test_w; else $dst_h = $test_h; // Affiche les dimensions optimales echo "width=".$dst_w." height=".$dst_h; } ?>

11 / 12

D. Laurent Ingmedia 2007 / 2008 Master 2 IM

3-2 Fabrication de la rponse :


<table class="table"> <tr> <th>Photo</th> <th >Marque</th> <th>Modele</th> <th >Km</th> <th >Prix</th> <th >&nbsp;</th> </tr> <?php if($totalRows_liste_voiture==0) {?> <tr> <td colspan="5">Pas de vhicule pour ces critres .....</td> </tr> <? } else {

do { ?> <tr> <td class="th2"><a href="#<?php echo $row_liste_voiture['url_photo']; ?>" rel="lightbox" onclick="initLightbox()" ><img src="<?php echo "photos/".$row_liste_voiture['url_photo']; ?>" <? redimage("photos/".$row_liste_voiture['url_photo'],80,0);?> /></a></td> <td class="th2"><?php echo $row_liste_voiture['marque']; ?></td> <td class="th2"><?php echo $row_liste_voiture['model']; ?></td> <td class="th2"><?php echo $row_liste_voiture['kilometrage']; ?></td> <td class="th2"><?php echo $row_liste_voiture['prix']; ?></td> <td class="th2">&nbsp;</td> </tr> <?php } while ($row_liste_voiture = mysql_fetch_assoc($liste_voiture)); } ?> </table>

Le rsultat est visible cette adresse : http://dominique-laurent.com/ingemedia/auto-ajax/

12 / 12