mardi 25 juin 2013

Ajax + Php

Un duo incontournable


Avec l'arrivée de Facebook, les gens se sont habitués à la fainéantise! Fini les F5 à répétition pour actualiser votre page, il suffit de montrer un signe de présence (scroll, focus, click) pour signaler au site en question que nous sommes là... Et comme le gentil chien chien à sa memère, Facebook, va vous chercher automatiquement du nouveau contenu.
Avec L'arrivé du HTML5 et des websocket c'est un peu différent maintenant. Mais peu importe, nous n'avons plus l'habitude des sites qui rechargent les pages pour la moindre petite action. C'est pourquoi on va faire appel à notre duo JavaScript et PHP et plus particulièrement à notre librairie Jquery.

Fonctionnement


On va créer un lien qui lorsqu'il sera cliqué, exécutera une fonction JavaScript dans laquelle nous aurons notre fonction Ajax qui elle-même appellera un fichier PHP, le tout en en arrière plan. => Comprendo si ?
Le fichier PHP appelé peut contenir n'importe quelle sorte de code, il peut s'agir d'une requête SQL par exemple.

1 - On télécharge la dernière version de Jquery sur le site officiel puis on l'appelle à l’intérieur des balises <head></head>
<script type="text/javascript" src="/jquery.js"></script>
2 - On code notre lien html à l’intérieur des balsies <body></body>
<a href="#" title="requête Ajax" onclick="ajaxFunction('une_variable');">
   ma requête Ajax
</a>
<div id="retour"></div>
3 - On code notre fonction Ajax à l’intérieur des balises <head></head>
   function ajaxFunction(maVariable)
   {
     $.ajax({
       type : "GET", //méthode utiliser pour envoyer des variables au fichier php
       url : "/appelPlus.php", //fichier appelé
       data : "txt="+maVariable, //variables envoyées
       success : function traitementReponse(msg) // N'est pas nécessaire s'il n'y a pas de retour attendu
       {
         document.getElementById('retour').innerHTML=msg; //On envoi le retour du fichier php dans notre div
       }
     });
   }

Sur cet exemple, on pourrait insérer le code ci-dessous dans notre fichier php. Ce qui nous afficherait alors le texte "une_variable" à l’intérieur de notre div
echo $_GET['txt'];

Astuce


J'utilise le duo firefox+firebug qui m'affiche la requête Ajax traitée en arrière plan. Super pratique pour déceler les bugs, etc...
Sur l'exemple ci-dessus on peut remarquer l'appel du fichier appelPlus.php en GET avec la variable emailUser... L'onglet réponse affichera un aperçu et l'onglet HTML affichera le code HTML généré par le serveur apache.

Conclusion


On a vu qu'il est facile et rapide de mettre en place une requête Ajax. Attention à ne pas les utiliser de façon abusive. Il n'est pas du tout recommandé, et même inutile, de construire son site entièrement en Ajax.
Vous allez ralentir de façon considérable la fluidité du site côté client.
Attention également à ne pas boucler une requête Ajax toutes les 1-2 secondes (pour un chat' par exemple) surtout lorsque que le fichier appelé est lourd et contient des fonction SQL.
En cas de forte fréquentation, votre serveur MySQL va vite s’essouffler. Tournez vous de préférence vers la combinaison HTML5 + Websocket