
Cette 2ème et dernière partie sur l'initiation à Ajax va consister à réaliser un petit système de Tchat. Nous allons plus précisément apprendre ici à récupérer des informations formatées en XML (en l'occurence des messages), puis de les intégrer dans notre tchat.
Tout d'abord nous allons réaliser une fonction Javascript qui effectuera une requête Ajax de type GET et qui ajoutera dynamiquement dans la BDD un message. Au passage, notre table comportera les champs id, date, pseudo et texte. Voici son script pour la créer:
Puis toutes les 2 secondes nous allons demander au serveur d'afficher les messages qui sont nouveaux: Il y 'aura donc 2 cas: soit le script vient de se lancer et l'on veut récupérer les 5 derniers messages, soit on veut récupérer les messages supérieurs à un identifiant donné (et auquel cas on devra connaître précisément cet identifiant).
Voici le document HTML sur lequel nous allons nous baser, vous pouvez noter que j'inclus la librairie Jquery 1.3.1 comme dans le tuto précédent mais aussi un autre fichier tchat.js qui comportera les différentes fonctions javascript propre au tchat que nous allons réaliser par la suite.
Et enfin voici la CSS correspondante:
Vous l'aurez peut-être remarqué dans le code HTML, le formulaire possède un attribut action qui renvoit vers une fonction javascript, le navigateur peut le différencier car on lui ajoute la valeur "javascript:" devant la fonction.
Cette étape va donc consister à compléter la fonction envoyerMessage(), qui récupèrera les valeurs du formulaire et demandera au serveur de les ajouter dans la BDD. Cette fonction se trouve dans le fichier tchat.js:
Cette requête va être très semblable à celle effectuée dans le tuto précédent, à la seule différence qu'au lieu de supprimer dans la BDD, nous allons ajouter (faire un INSERT INTO en SQL). Notre script PHP nous renverra 1 si l'insertion s'est correctement passée:
Le fichier config.php pour se connecter est semblable au tutoriel précédent. Ici, nous effectuerons simplement une requête de type INSERT INTO en reprenant nos variables issues de la superglobale GET, et en insérant de la même façon la date actuelle, à l'aide de la fonction date() prenant en paramètre le format (ici le format SQL (année-mois-jour heure:minute:secondes)).
Le principe ici est d'éxécuter une fonction javascript toutes les 2 secondes qui va récupérer tous les nouveaux messages dans un format XML. Dans notre fichier tchat.js nous aurons donc ce type de code:
$(document).ready(function()... sera éxécuté dés la fin du chargement de la page, nous incluerons donc la fonction raffraichirMessages(0) (qui initialisera les messages), la fonction raffraichirMessages prend en paramètre l'identifiant du dernier message se trouvant déjà dans notre page, étant donné qu'on en a aucun, on le met à 0...
Nous allons commencer par voir le code PHP qui récupère et transmet les messages:
Vous pouvez remarquez que la requête sera différente selon l'identifiant envoyé. Lorsque la requête est éxécutée on parcourt le tableau comme si l'on écrivait un document XML. L'élemént racine étant <tchat>, Celui ci devra être écrit en dehors de la boucle qui parcourt les lignes de notre requête. Notre balise <message> sera composée des balises <id>(qui servira à reconnaître le numéro du dernier message), et des balises <pseudo>, <texte> et <date> (qui lui sera convertit dans un format un peu plus lisible pour l'internaute).
Au passage, vous vous demandez peut-être pourquoi on formate les données en XML si c'est après pour les mettre en xHTML. Les 2 méthodes sont correctes mais cependant, le fait de formater ces données XML isole complètement la couche serveur qui transmet des données, à la couche navigateur qui va ensuite donner un sens à ces données. Si par exemple un autre site veut utiliser votre système de tchat avec vos données et qu'il ne veut pas mettre les messages dans des li, mais plutôt la jouer très futé avec des <br />. C'est là que ca pose problème...
Enfin voici la fonction Javascript raffraichirMessages() avec les commentaires nécéssaires à sa compréhension:
Vous l'aurez remarqué, ce bout de code est plus difficile à appréhender car on doit récupérer l'identifiant du dernier message et effectué un traitement pour l'afficher progressivement.
Sinon pour traiter le XML obtenu, rien de plus simple avec Jquery. On effectue une boucle each qui fonctionne de la même manière que foreach en PHP.
Pour récupérer la balise message et son contenu, à l'intèrieur de la boucle, on utilise $(this) qui correspondra à une balise message. Ensuite si l'on veut par exemple récupérer le pseudo, on utilise les fonctions find('pseudo') et text() qui renvoient le contenu textuel de la balise pseudo.
J'ai ajouté au code quelques fonctionnalités pour supprimer les messages si il y'en a plus de 5, afficher les nouveaux messages progressivement, et quelques autres choses... mais ce n'est pas l'objet de ce tuto. En tout cas j'espère que vous aurez appris et compris l'intérêt d'Ajax à travers cette très courte série de tutoriels.