Affinity-web`Blog

L'actu AW au quotidien

 

26

Juil 07

Tutorial : Ajax avec Prototype

Posté à 22:56 par Fr eMeRiKa - Catégorie 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 8794 fois

Article Précédent

 

Commentaires de cet article

 

 

Beau travail, beau tuto !

#1 Posté par Sopra le 26/07/07 à 23:15, son 1er 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 136ème commentaire

Voilà erreur corrigée!!

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

bonne continuation

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

dfdsfdsf

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

Merci

#7 Posté par laur le 31/07/08 à 17:08, son 1er 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 1er 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 136ème commentaire

 

* Pseudo :

* Email : (Non affiché)

Site web :

* Message :

95 articles dans la base de données

Archives ...

 

Oué il y a eu de ci de là des annonces de "fin du capitalisme&qu ...

Posté par eMeRiKa le 11/11/08 à 14:32 sur l'article Musique : une (fausse) crise

Après avoir suivi l'évolution de la crise actuelle et lu un certain n ...

Posté par dod le 10/11/08 à 20:39 sur l'article Musique : une (fausse) crise

Tu as tout à fait raison mais là c'est des histoires de mentalit&eacu ...

Posté par eMeRiKa le 10/11/08 à 19:15 sur l'article Musique : une (fausse) crise

Mais le but d'une entreprise est de ramasser le maximum d'argent et peu importe si ...

Posté par dod le 10/11/08 à 15:13 sur l'article Musique : une (fausse) crise

Le débat n'est pas de dire si les biens culturels sont au bon prix mais bien ...

Posté par eMeRiKa le 10/11/08 à 11:11 sur l'article Musique : une (fausse) crise

En réalité lorsque l'on s'interroge réellement sur le travail ...

Posté par dod le 09/11/08 à 22:17 sur l'article Musique : une (fausse) crise

Je ne sais pas comment les hologrammes fonctionnent mais cela a été u ...

Posté par dod le 09/11/08 à 22:07 sur l'article Fashionology LA : vêtement custom

C'était pas le but non plus ! la culture est pas gratuite, faut donc pas h&e ...

Posté par eMeRiKa le 03/11/08 à 11:27 sur l'article Musique : une (fausse) crise

422 commentaires dans la base de données

S'abonner au flux Rss

 

Springbreak mistake

Il faut faut Flash pour voir l'animation

jeux de skate sur iphone

Il faut faut Flash pour voir l'animation

Max Boublil nous parle de la Wii

Il faut faut Flash pour voir l'animation

Objet en lévitation

Il faut faut Flash pour voir l'animation

Comment énerver un flic en 30s

Il faut faut Flash pour voir l'animation

Google Streetview

Il faut faut Flash pour voir l'animation
 
LinkedIn
deviantart
Twitter
 
 
Cookee : idées recettes à partager

Voir toutes mes créations

 
  • @OSteEL non truc de dingue ! Ca marche avec flash ???
  • Wahou j'adore recevoir ce genre d'email ! Mon projet que relou que je dév depuis maintenant un bon moment se finit
  • @mrsize haha! Bah Counter-strike est tjs le jeu le plus joué sur le net (mis à part wow petre) et tourne sous le moteur de HL
  • Half Life à 98c pour fêter ses dix ans www.nofrag.com/2008/...
  • @JulienCoquet au fait dans tes clients tu as massivegamer.com ? :)
 

 

 

Chargement en cours!