Affinity-web`Blog

L'actu AW au quotidien

Juil 07

Tutorial : Ajax avec Prototype

Posté à 22:56 par eMeRiKa - Catégorie : Programmation

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.

Cet article a été lu 132fois.

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 :

<html> <head> <title>Ajax avec Prototype</title> <script type="text/javascript"> </script> </head> <body> <p id="compteurAUpdate">Cet article a été lu 1 fois!!!</p> <p><a onclick="MiseAjourCompteur();" href="#nogo"></a></p> </body> </html>

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.

function MiseAjourCompteur() { var options = { method: "post" } var ajaxCall = new Ajax.Updater("compteurAUpdate", "MiseAjourCompteur.php", options); }

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 :

$exec = mysql_query('SELECT NombreLecture FROM matable WHERE article = "13"'); $infos = mysql_fetch_array($exec); echo "Cet article a été lu ".$infos['NombreLecture']." fois!!!";

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.

<p id="compteurAUpdate">Cet article a été lu 1 fois!!!</p> <p><a onclick="MiseAjourCompteur('13');" href="#nogo"></a></p>

La fonction Javascript devient :

function MiseAjourCompteur(id) { var options = { method: "get", parameters: "idarticle="+id } var ajaxCall = new Ajax.Updater("compteurAUpdate", "MiseAjourCompteur.php", options); }

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

Lu 9544 fois

Article Précédent

Commentaires de cet article

Beau travail, beau tuto !

#1 Posté par Sopra le 26/07/07 à 23:15, son 1^er commentaire

Joli article. Cependant lors du test du compteur sur ton article j'ai une erreur : Error

Aller a tchao bonne continuation

Cyril

#2 Posté par Cyril le 02/08/07 à 17:24, son 2^ème commentaire

Ha zut?

Hum je vois d'où vient le prob.. C'est le problème d'avoir 3PC pour bosser, on écrase des fichiers ayant été modifs.

#3 Posté par eMeRiKa le 02/08/07 à 17:52, son 153^ème commentaire

Voilà erreur corrigée!!

#4 Posté par eMeRiKa le 02/08/07 à 18:00, son 153^ème commentaire

bonne continuation

#5 Posté par tiesto le 09/08/07 à 17:01, son 1^er commentaire

dfdsfdsf

#6 Posté par v le 27/01/08 à 17:25, son 1^er commentaire

Merci

#7 Posté par laur le 31/07/08 à 17:08, son 1^er commentaire

t as oublier le signe "="
pour parameters: "idarticle"+id
c est parameters: "idarticle="+id c est mieux

#8 Posté par kulyk le 12/10/08 à 23:50, son 1^er commentaire

A vrai dire j'ai plu la tête dans prototype mais je te fais confiance je corrige.

#9 Posté par eMeRiKa le 13/10/08 à 00:12, son 153^ème commentaire

Article Précédent : L'actu esport marquante

Zend Framework

26 Déce 08

Auto-Entrepreneur : tout savoir

24 Déce 08

Tuto : système de vote Ajax via Mootools

23 Déce 08

eGame, l'aventure commence

18 Déce 08

[MAJ] Microsoft abuse !

17 Déce 08

Blogosphère la mode des concours

07 Déce 08

Le patron de Facebook n'est pas "riche"

04 Déce 08

Ne pas laisser filer ses idées

03 Déce 08

106 articles dans la base de données

Archives ...

Enorme projet et énormément de travail à effectuer. C'est un e ...

Posté par dod le 06/01/09 à 13:28 sur l'article Le programme de Janvier

Merci pour ces infos. Cà m'étonne pas cette histoire de performance ...

Posté par eMeRiKa le 04/01/09 à 22:32 sur l'article Zend Framework

Je bosse avec KohanaPHP depuis un moment, grand frère de CodeIgniter, il est ...

Posté par zim le 04/01/09 à 20:46 sur l'article Zend Framework

Bon courage !

Posté par VuThé le 04/01/09 à 12:55 sur l'article Le programme de Janvier

Super programme ! Si tu as besoin d'un collaborateur pour la partie réf. et/ ...

Posté par Rémy Bigot le 03/01/09 à 17:53 sur l'article Le programme de Janvier

Joli programme ! courage et abnégation !

Posté par weetabix le 03/01/09 à 17:50 sur l'article Le programme de Janvier

Que de bonnes nouvelles alors. =) En espérant que tout ira pour le mieux. ...

Posté par viki53 le 03/01/09 à 17:42 sur l'article Le programme de Janvier

Beau programme ! ça fait plaisir de voir se construire des projet comme &cce ...

Posté par Enneite le 03/01/09 à 17:11 sur l'article Le programme de Janvier

474 commentaires dans la base de données

Rêve des femmes vs Rêve des hommes

Pub Diesel xxx vintage retro sexy

L'auto-entrepreneur, comment ça marche ? par Hervé Novelli

PSY 4 de la rime Luciano

Patrick Sebastien - Ah... si tu pouvais fermer ta gueule...

ITW LeWeb Marc Simoncini (Meetic)

Autopia - Annonces automobiles entre particuliers

replonge dans le code, ça faisait un bail que j'avais pas tater du PHP ! Et à retrouver l'envie de coder !! Good news vu ce qui m'attend
@kennyfeed eCPM de décembre 0,21 $... C'est la mort adsense, toujours les mêmes pubs et pas tjs ciblées (immobilier pour du jeux-vidéo tss)
@kennyfeed ça fait 10 fois plus pour moi ! Je me méfie du discours commercial du type mais même du 1? le CPM ça me va pour le moment
@kennyfeed ils font l'intermédiaire entre régie pub et éditeurs. Le type au tél m'a parlé de 2 à 3? le CPM. je vais tester 1mois j'te dirai
@kennyfeed t'as déjà testé Gestionpub.com ?

Chargement en cours!