Affinity-web`Blog

Cet article a pour but de vous présenter AJAX, et comment s'en servir avec le framework Prototype JS.

Il fait suite à un précédent article expliquant les bases de Prototype que vous pouvez lire ici.

AJAX (Asynchronous JavaScript and XML)

Ajax est dans la bouche de tous les développeurs actuellement. Tous les sites qui sont crées l'utilisent mais que représente-il? Quels sont ses avantages et utilités?.

Ajax n'est ni un langage ni une création récente. Il s'agit de la combinaison de Technologies "anciennes" telles que le xHTML, le CSS, le Javascript et la manipulation du DOM. Ajax est lié à l'objet XMLHttp conçu par Microsoft pour Internet Explorer en 2001. Aujourd'hui tous les navigateurs intègrent cette objet.

L'apparition de nombreux frameworks JS a facilité son utilisation, et l'intérêt grandissant pour Internet (et le nombre exponentielle de startups et sites web 2.0) l'a mis en avant.

Utilisation pratique

Le but de cet article n'est pas de vous faire une présentation théorique de l'Ajax mais bien de s'en servir dans la pratique.

Ajax permet d'envoyer des données au serveur sans recharger votre page. Il permet également de remplacer le contenu d'une partie de votre site de manière transparente en ayant été chercher les informations dans la base de donnée.

Par exemple, imaginons que vous voudriez savoir combien de personne ont lu cet article. A chaque lecture j'incrémente le nombre de lecture de l'article dans ma base de donnée. Le nombre de lecteurs est inscrit dans la case suivante.

Maintenant, vous avez passé 2min à lire le début de cet article et ce nombre a peut être changé. Sans ajax, pour voir le nouveau nombre, vous devriez recharger entièrement la page et redescendre voir ce compteur.

Cliquez sur ce lien : Mise à jour compteur.

Le nombre a été mis à jour instantanément grâce à une requète Ajax. Vous voulez voir encore d'autres exemples?

• Essayez d'ajouter un commentaire sur cet article, vous verrez une fenetre de chargement apparaître, et votre commentaire sera instantanément enregistré en base de donnée et ajouté à la liste des commentaires sans rechargement de la page.
• Faites une recherche d'article dans les archives. Pas besoin de rechargement de la page pour afficher les résultats.
• Le dernier exemple n'update rien mais exécute une requète MySQL en arrière plan. Cliquez sur l'un des liens et quand vous recharcherez la page vous verrez que le nombre de clics a augmenté d'un.

Libre à vous d'inventer toutes les possibilités à partir de ces exemples. On peut très bien imaginer un formulaire qui à partir d'un code postal irait chercher dans une base de donnée la liste des villes avec ce code postale et mettrait à jour le select de la ville.

Ajax avec prototype

Maintenant que vous savez à quoi sert l'Ajax je vais vous apprendre à réaliser le premier exemple.

Créez vous un fichier xHTML avec le code suivant :

Pour ne pas compliquer, je ne me servirai pas de event pour le onclick comme dans l'article précédent sur Prototype. Mais une fois que vous aurez bien compris, déclenchez la requète Ajax via un event de Prototype.

Lorsqu'on cliquera sur le lien, la fonction javascript MiseAjourCompteur fera une requète AJAX dites Asynchrone, c'est à dire indépendamment du chargement de la page.

Je rajoute une ancre #nogo sur le href pour que le lien ne se fasse pas. Il cherche une ancre qui n'existe pas dans la page et donc ne fais rien.

Voici le code de la fonction JS que je vais vous expliquer. Placez la fonction dans les balises script du xHTML.

On utilise ici la méthode Ajax.Updater de Prototype, qui va update un id dans notre page via l'éxecution d'un script php. Retrouvez sa documentation pour plus d'informations.

Dans un premier temps on définit la méthode utilisée, post ou get. Celà n'a pas d'importance ici vu que nous n'envoyons aucune donnée à notre script PHP.

Ensuite on crée une variable ajaxCall qui va appeler Ajax.Updater en lui donnant l'id à modifier compteurAUpdate en exécutant le script MiseAjourCompteur.php avec les options indiquées.

Le fichier MiseAjourCompteur.php contient par exemple dans ce cas :

Le fichier est exécuté normalement et vous pouvez y placer ce que vous désirez. Il vous suffit de mettre un echo pour mettre à jour l'élément de la page xHTML.

Vous avez réussi le premier exemple, bravo maintenant essayons de transmettre des données à notre script php.

Transmettre des données en Ajax.

On voudrait toujours mettre à jour notre compteur mais cette fois l'id de l'article ne sera pas en dur mais dans l'appel de la fonction.

La fonction Javascript devient :

Il suffira ensuite de récupérer dans votre script PHP $_GET['idarticle']

Le prochain article "tutorial Prototype, Ajax" vous apprendra à envoyer plusieurs variables en GET, transmettre les données d'un formulaire en POST et réaliser un système de vote en AJAX.

Les derniers articles de la catégorie : Programmation

• Tuto PHP : couper une chaîne fin d'un mot
• IE 6 enfin accessible sous Windows Vista
• Tuto: menu rollover et preload des images
• Un site web valide W3C ne prouve rien ...
• HTML5 un petit air de Paradis...
• PHP6 à l'approche !
• Tuto : Système de vote Ajax via Prototype