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...
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
Aucun commentaire:
Enregistrer un commentaire