Ajax et PHP5. Bonjour tout le monde ( Hello World ) en Ajax et PHP

Transcription

1 Ajax et PHP5 Ajax n est pas vraiment une technologie mais plutôt un ensemble de plusieurs technologies, parmi lesquelles se trouvent JavaScript Asynchrone, XML, XHTML et CSS. Le mot asynchrone est de la plus grande importance. Le mode de fonctionnement d un site web se fait par cycle : un utilisateur demande à recevoir une certaine page et on lui envoie exactement cette page. Lorsque l utilisateur demande à passer à la page suivante (par exemple en cliquant sur un lien), on passe au cycle suivant. Un autre point important à noter est que la page, une fois quittée, perd toutes les informations relatives à son état. Si des informations doivent être conservées pour une quelconque raison, il faut utiliser des techniques telles que les cookies, les variables GET et POST ou des variables de session, qui doivent être réinterprétées par le serveur à chaque fois qu une nouvelle page est réclamée par le client. Alors qu avec les techniques Ajax, un développeur astucieux peut demander à recevoir plusieurs flux d informations totalement indépendants. Les données peuvent être obtenues sans que la page n aient besoin d être rafraîchie et donc sans recommencer de nouveaux cycles et sans perdre des informations d état de la page en cours. L utilisateur bénéficie ainsi d une expérience plus riche et plus fluide tout en réduisant les besoins en bande passante pour le fournisseur du service web. Bonjour tout le monde ( Hello World ) en Ajax et PHP La version Ajax de «Bonjour tout le monde» («Hello World») peut être assez intimidante au premier abord car cela nécessite l implication de plusieurs langages de programmation: PHP et JavaScript. Contrairement aux applications web traditionnelles où la présentation et la gestion des données se font par PHP (ou n importe quel autre langage côté serveur), les applications PHP utilisant les technologies Ajax se contentent de créer les données et de déléguer à JavaScript (côté client) l interprétation de ces données. Si vous connaissez mal PHP 5, vous pouvez vous reporter à l Annexe où vous trouverez un aperçu des changements importants survenus entre les versions 4 et 5. Après avoir reçu une requête depuis une page PHP contenant des instructions Ajax, le serveur renvoie la page comme s il s agissait d une classique page PHP. La magie apparaît lorsque nous incluons dans cette page du code JavaScript qui est lié à certains types d actions. Lorsqu une de ces actions survient, une requête asynchrone est alors envoyée vers le serveur, qui à son tour renvoie les données demandées que JavaScript traitera alors en conséquence (voir Figure 1 ). Nous constatons que l acteur (le client visionnant notre page web) envoie une requête demandant à voir la page sélectionnée et il reçoit alors un mélange de HTML, de JavaScript et sans doute également quelques images. Le code JavaScript est conçu de manière à ce que, par le biais d Ajax, l utilisateur puisse exécuter des actions et recevoir des données en échange, sans avoir besoin de quitter ou de recharger la page en cours. 2

2 Serveur (PHP) Client (JavaScript) Figure 1. Diagramme de séquence générique d une application Ajax typique Requête page Transmet page Requête asynchrone Transmet données Action Affiche Étant donné que la page est générée par PHP, nous pouvons profiter de la puissance de ce langage de scripts et demander au serveur de nous envoyer une page contenant la date et l heure du système sans jamais avoir à quitter ou à recharger la page. Le fichier PHP PHP est simple. Lorsque le client passe la variable «NOW» («maintenant») via la méthode GET, le serveur renvoie la date et l heure ainsi qu un petit message qui devrait vous rappeler quelque chose. POST et GET sont deux méthodes primaires (ainsi que HEAD parmi d autres) de récupération de données via HTTP. Elles offrent toutes deux la possibilité de passer des variables au serveur. Dans le cas de GET, les variables sont conservées et encodées dans l URL sous forme de requête en chaîne de caractères (la partie de l URL qui apparaît après le premier point d interrogation). Nous souhaitons, à l aide d un script PHP très simple, créer une page qui affiche l heure du serveur lorsque l utilisateur clique sur un bouton : <?php function get_message() return "Bonjour tout le monde! Il est ".date("r"); if ( isset( $_GET["NOW"] ) ) header("cache-control: no-cache, must-revalidate"); header("content-type: text/plain"); echo get_message(); else?> <html> 3

3 <head> <title>bonjour tout le monde</title> <!-- insérer le code JavaScript ici --> </head> <body> <div id="data"> <? if ( isset($_get["now-inline"]) ) echo get_message(); else echo "Cliquez sur Obtenir";?> </div> <a href="?now-inline" id="action">obtenir</a> </body> </html> <?php?> Maintenant, parcourons le fichier. Si vous parlez HTML, vous avez reconnu la metadonnée se trouvant à l intérieur du bloc «else» comme étant de l information formatée en HTML. Cette page n a rien de spécial, car nous nous concentrons ici sur l ajout de la fonctionnalité et non pas sur l esthétisme. La fonction get_message() renvoie la date et l heure de manière formatée. Nous avons déplacé la fonction echo dans une fonction tierce car nous l utilisons plusieurs fois : lorsque la variable $_GET["INLINE"] et lorque que NOW-INLINE sont affectées. Placez cette page dans un dossier accessible depuis votre serveur web et chargez-la depuis votre navigateur. Si PHP est correctement configuré, le texte «Cliquez sur Obtenir» devrait s afficher ainsi que le lien «Obtenir» juste en dessous. En cliquant sur ce lien, vous devriez voir apparaître une page contenant «Bonjour tout le monde! Il est Mon, 12 Feb :43: Obtenir». Si la page affiche bien la date et l heure de votre serveur, c est que nous avons pris un bon départ. Toutefois, la page ne contient pas de JavaScript et certainement pas de requêtes asynchrones. Nous allons remédier à cela et donc compléter cet exemple de manière à obtenir une application Ajax. Le code JavaScript Cet exemple utilise du code JavaScript directement dans la page. Parmi nos autres exemples, nous allons trouver des cas où le code JavaScript sera conservé dans des fichiers externes. Mais pour le moment, sachez juste que nous allons intégrer du code JavaScript au niveau du commentaire <!-- insérer le code JavaScript ici --> : 4

4 <script type="text/javascript"> <!-- var httpobj=null; function OnLoad() document.getelementbyid("action").href="javascript:update()"; function Update() if ( httpobj!= null ) return; document.getelementbyid("data").innerhtml = "Chargement en cours"; httpobj = NewHTTP(); httpobj.open("get","?now",true); httpobj.onreadystatechange = OnData; httpobj.send(null); function NewHTTP() try return new XMLHttpRequest(); catch (e) return new ActiveXObject("Microsoft.XMLHTTP"); function OnData() if ( httpobj.readystate==4 ) m=document.getelementbyid("data"); if (httpobj.status==200 ) m.innerhtml = httpobj.responsetext; else m.innerhtml="erreur lors de l'obtention de la date et heure."; httpobj = null; 5

5 --> </script> La première fonction à être appelée est OnLoad(). Elle devrait être exécutée lorsque la page aura terminé son chargement. Nous allons en apprendre davantage par la suite, dans JavaScript non-intrusif. Le gros du travail de notre script est effectué par la fonction Update() qui est appelée lorsque le bouton est actionné. Cet événement va déclencher plusieurs actions. S assurer que la variable httpobj est nulle. Si ce n est pas le cas, c est qu une requête est en cours d exécution, il ne faut donc pas en lancer d autre. Afficher «Chargement en cours» dans le champ ayant l id «data». Même si le script fonctionne parfaitement bien sans, il ne faut pas négliger cette étape car elle donne un retour immédiat à l utilisateur qui est ainsi informé qu une tâche est en cours d exécution en arrière plan. Cela lui épargnera quelque frustration et évitera qu il n appuie plusieurs fois sur le bouton Rafraîchir du navigateur ou pire qu il quitte votre application web. Généralement, il est très important de fournir un retour chaque fois que possible à l utilisateur. Un exemple typique serait le petit cercle signalant le «Chargement en cours» de données dans les applications Web 2.0. Créer un nouvel objet XMLHttpRequest avec la fonction NewHTTP(). Appeler la méthode open() de l objet qui indique la page à appeler sur le serveur. Le premier paramètre est la méthode à employer pour récupérer le fichier. Notez bien qu aucune donnée n a encore été envoyée au serveur. Dans la plupart des cas, ce sont les fameux GET et POST. Spécifier l URL, absolue ou relative, à charger. Une URL relative indique le chemin du fichier par rapport au fichier actuellement affiché tandis qu une URL absolue indique le chemin complet du fichier sur le serveur. Dans notre exemple, nous souhaitons récupérer la page courante avec la requête textuelle «NOW», c est pourquoi nous passons «?NOW» comme URL relative. Ceci a pour effet de demander au navigateur de charger la page actuelle avec la requête textuelle qui lui est passée. Dans la méthode open(), nous demandons à ce que l appel soit asynchrone en passant true. Si le troisième paramètre est false, le script est bloquant et l exécution est interrompue jusqu à ce que le fichier soit chargé. Mais du fait que notre troisième argument est true, le script redonne la main immédiatement au programme et laisse la gestion à la fonction de rappel (callback en anglais). Affecter la fonction de rappel. Une fonction de rappel (callback) est une fonction définie par l utilisateur. Elle doit être prédéfinie et est utilisée ultérieurement lorsqu un événement particulier est intercepté. Dans notre cas, la fonction est appelée lorsqu un événement HTTP indique l état prêt pour notre requête. Dans notre exemple la fonction est OnData(). L état prêt peut être assimilé à l état de la requête. Il ne reste qu à lancer la requête qui va demander au serveur de lui envoyer les informations dont elle a besoin. La méthode send() de l objet httpobj se charge de cela. Comme l objet est asynchrone, la méthode rend la main immédiatement et ne bloque pas l exécution du code jusqu à ce que la page soit chargée ou qu une erreur survienne. 6