Développeur PHP

Sadressant à tous ceux qui maîtrisent la « programmation ermettant de gérer un site Web cet article a pour but de vous mettre en main, très facilement, un outil pour dynamiser vos pages Web grâce à l’emploi d’AJAX. Developpez. com possède déjà un grand nombre de tutoriels et d’articles sur cette méthode AJAX. Le présent article n’a donc pour but que de vous apporter un éclairage sur le mécanisme de base dlAJAX, espérant ainsi vous permettre de dévorer bien plus facilement la totalité de nos formations et articles. Il faut préciser qu’AJAX n’est en rien associé au PHP et encore moins au SQL.

Cest uniquement notre exemple qui les tilise. Vous pourriez traiter directement un fichier texte ou un XML. Du reste, il s’agit de la vocation d’origine d’AJAX. Il – Prérequis Bon programmeur comme vous l’êtes, vous savez faire un formulaire appelant une page PHP qui analysera les éléments saisis, exécutera des tâches en fonction des saisies, traitera toute la logique PHP et les actions SQL si besoin, puis qui proposera une nouvelle page HTML ou appellera un autre fichier PHP. Ill – Dans cet article Si vous dominez ce mécanisme, alors vous allez faire un très grand pas en AJAX.

En effet, AJAX est un petit code JavaScript qui envole en POST ou en GET tout élément venant dune page HTML vers un fichier PHP du serveur (dans l’exemple que nous avons choisi). Et ce comme le ferait un simple formulaire tout en page HTM 3 3 active chez votre visiteur. Le « premier grand plus » est que ce mini-code peut envoyer les éléments (données saisies) d’un formulaire, mais également des événements de la page HTML et des paramètres de notre choix ! Un ordre qui peut être minuté par un setTimeout(), etc. AJAX signifie Asynchronous Javascript And XML.

Ce qui veut dire qu’AJAX traite de base les flux XML de façon synchrone. Notre article ne traitera que des liaisons HTML/ Javascript AJAX côté client (visiteur) appelant un fichier PHP pour un traitement côté serveur, lequel utilisera entre autres MySQL. La transaction sera asynchrone, mais elle pourrait être synchrone. C’est une option à paramétrer. Nous avons choisi ceci parce que cette façon d’utiliser AJAX vous ouvrira 90 % des possibilités de ce type de page dynamique. De plus, redisons que tout autre mode (en particulier XML) est largement expliqué dans d’autres articles du site.

Ce mini-code AJAX est loin de se contenter de préserver votre age HTML et d’envoyer des POST ou GET à un fichier PHP du sep,’eur. Il est capable de recevoir une réponse, par exemple un echo du PHP appelé et d’analyser cette réponse. Puis d’afficher le résultat dans la page HTML. -3Les sources présentées sur cette page sont libres de droits et droits d’auteur. Copyright @ 201 2 christele_r. Aucune Cette pape est déposée 4 3 loi jusqu’à trois ans de prison et jusqu’à 300 000 € de dommages et intérêts. Cette page est déposée à la SACD. Vous y êtes, c’est aussi simple que cela.

Une page HTML qui change dynamiquement sans se recharger. Alors, ous d’imaginer à quoi cela peut vous servir. Maintenant, nous allons donc décortiquer ce tout petit module JavaScript de quelques lignes qui fait tant de merveilles, puis nous l’appliquerons à une application simple… un chat ! IV – Le code AJAX Vous trouverez plusieurs versions de ce code sur le Web et dans nos articles, mais ne vous inquiétez pas, ils utilisent tous le même moteur ! function maFonctionAjax(unParametre,action) var MonAjax; if (window. XM LHttpRequest) h’ Mozilla, Safari, .

MonAjax – new XMLHttpRequest(); else if (window. ActiveXObject) MonAjax = new navigateur n’est pas adapté pour faire des requêtes AJAX… « ); MonAiax = false; 3 saurez TOUT sur I’AJAX. J’aimerais simplement vous faire remarquer que de nombreuses pages en AJAX sont réalisées avec un framework JavaScript proposant une version simplifiée de I’AJAX. Sachez juste qu’en réalité ces « usines à gaz », bien pratiques par ailleurs, ne font qu’utiliser strictement ce mini-code. Du reste, si vous lisez cet article c’est justement parce que vous voulez savoir comment cela fonctionne en réalité.

Donc vous avez une page HTML et vous voulez lui ajouter une fonction AJAX pour afficher un texte dans une div ou dans une autre. Dans votre JavaScript, il vous suffit d’ajouter la fonction que nous avons appelée maFonctionAjax. Tiens, c’est écrit function maFonctionAjax(unParametre, action). En effet, dans notre cas nous appellerons cette fonction chaque fois que nous voudrons afficher le résultat d’une requête SQL sur l’id unparametre et que nous attendons le résultat dans une div selon la valeur fait 1 ou fait2 qui est représentée par action. Voilà, nous sommes dans la fonction avec nos deux paramètres.

En premier lieu, nous allons déclarer un pointeur qui va devenlr essentiel. Ce sera notre pointeur AJAX. 4Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. par contre, la page Cette page est déposée à la SACD. 6 3 dommages et intérêts. Cette page est déposée à la SACD. Tout est prêt pour initialiser le moteur AJAX Pour cela nous allons voir sous quelle forme nous l’appelons en tenant compte du navigateur. Fidèles à l’esprit de cet article, nous le faisons sous une forme simplifiée qui convient à tout navigateur de dernière génération. h’ Mozilla, Safari…

MonAjax = false; Avec ce code, nous initialisons MonAjax. Tout est déjà prêt l’emploi. Vous admettrez que ce n’était pas sorcier ! Cest le moment de préciser quelques points sur la fonction XMLHttpRequest. Un bijou capable d’envoyer une requête à un serveur et de recevoir une ré onse. À l’origine c’est Microsoft qui avait lancé c avec un ActiveX indique au moteur que nous sommes en mode asynchrone. Cest-à-dire que le JavaScript poursuit son travail en parallèle de la requête AJAX. Il n’attend pas la réponse qu arrivera plus tard. Nous pouvons réaliser notre réception de la réponse par Requete. esponseText (c’est notre cas) ou par Requete. responseXML. Ces propriétés nous permettent de savoir comment considérer la réponse. Avec Requete. responseText, nous traiterons du texte. Avec Requete. responseXML, nous traiterons un document XML Nous avons opté pour une réponse sous forme d’echo depuis notre fichier PHP. Cela aurait bien entendu pu être un fichier texte. Nous aurions alors écrit MonAJax. open(« GET », « http:www. monsite/unfichier. txt true);. MonAjax. open(POST’, »a. php »,true); MonAjax. onreadystatechange = function() onreadystatechange alerte le JavaScript qu’une réponse est arrivée du serveur *l f (MonAjax. eadyState 4 && MonAjax. status 200) { document. getElementByld(‘LeRetour1 ‘). innerHTML MonAjax. responseText;} if(action-= »fait2″) MonAjax. setRequestH eader(‘Content-type l, ‘applicatio n/x-www- form-urlencoded’); Les statuts (état de la requête) permettent de suivre l’évolution de la requête. Tenons compte des statuts qui nous intéressent dans le onrea . Voici les valeurs 8 3 2 : headers reçus, send() a été appelée, les headers et les statuts sont disponibles • 3 : chargement, responseText contient des données partielles ; 4 : OK, l’opération est terminée.

Donc seul le « 4 » nous intéresse ! pour status, nous nous attendons à recevoir la réponse « 200 » qui signifie qu’il n’y a eu aucune erreur de protocole. Lorsque nous recevons la réponse, si les status sont bons, alors nous écrivons MonAjax. responseText dans la div précisée par action comme nous l’avons expliqué. Il me reste à vous dire que le fichier a. php appelé lors de la requête AJAX est strictement identique à tout autre fichier PHP. Il peut, avec les paramètres reçus, traiter du SQL et préparer un texte en guise de réponse. puis, il peut se terminer par un echo.

Celui ui doit être envoyé, celui qui contiendra la réponse ! Ai Ons souvent des tête de fichier : Tous les codes AJAX utilisent en fait ce moteur. Mais selon la complexité de notre besoin, la page HTML a souvent plusieurs de ses éléments qui sollicitent cette fonction AJAX. Alors, devons-nous en faire des copies ? NON NON… Comme beaucoup de langages (à commencer par le « C ») chaque appel dune fonction crée en mémoire une copie de celle-ci ! Donc, non seulement le code AJAX est une toute petite fonction, mais sa seule présence permet des combinaisons de requêtes complexes.