Affinity-web`Blog
L'actu AW au quotidien
26
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.
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
Lu 17391 fois
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 192ème commentaire
Voilà erreur corrigée!!
#4 Posté par eMeRiKa le 02/08/07 à 18:00, son 192è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 192ème commentaire
Simple , clair et précis :)
Merci.
#10 Posté par Yo4nn le 25/04/09 à 14:26, son 1er commentaire
Bonjour tout le monde, Merci eMeRiKa pour ce tuto très clair, mais j'aimerais avoir ton aide ou une autre aide que toi.
Je suis entrain de faire un site pour une installation photovoltaïque (automate+pc+onduleur+panneaux solaire+eWON (passerelle programmable)) et j'ai une page avec un tableau et des données à l'intérieur tel que (courant, tension, puissance, energie, status) et au dessus de ce tableau j'ai une case ou j'entre le numéro (la valeur est inscrite dans une variable de mon eWON) de mon onduleur pour avoir ses caractéristiques mais lorsque je clique sur le bouton submit (qui est à côté de la case ou j'entre le numéro) ça me change la variable dans mon eWON mais pour voir les valeurs je dois actualiser manuellement avec F5, j'ai essayé de mettre un raffraichissement de la page automatique (2,3,4 secondes) mais c'est vraiment pas pratique.
Ce que j'aimerais pouvoir faire c'est rafraichir mon tableau grâce à ajax.updater mais ça n'a pas l'air de marcher pour moi.
En espérant avoir une réponse, vous pouvez mon contacter sur l'email que j'ai laissé en postant ce commentaire.
Bonne journée à vous
#11 Posté par spykoN le 30/04/10 à 10:45, son 1er commentaire
135 articles dans la base de données
Archives ...
bonjour moi je connais une adresse mail contact francophone oiu on peut commander s ...
Posté par seb le 11/08/10 à 22:24 sur l'article Acheter ses cigarettes sur internet
bonjour ou on peut acheté des clop en ligne
Posté par nana le 08/08/10 à 16:40 sur l'article Acheter ses cigarettes sur internet
Pour la livraison je compte 2 semaines
J'y suis depuis quelques temps je oeux vous ...
Posté par jean le 07/06/10 à 08:39 sur l'article Acheter ses cigarettes sur internet
Posté par extrem le 28/05/10 à 13:11 sur l'article Digipresse en ligne
Cigarettes bon marché en ligne
Cigarettes bon marché - Les cigaret ...
Posté par 561zeevwi le 03/05/10 à 12:37 sur l'article Acheter ses cigarettes sur internet
Bonjour tout le monde, Merci eMeRiKa pour ce tuto très clair, mais j'aimerai ...
Posté par spykoN le 30/04/10 à 10:45 sur l'article Tutorial : Ajax avec Prototype
Je ne trouve pas de référence à FF comme le principal concurre ...
Posté par eMeRiKa le 18/04/10 à 18:27 sur l'article Google Chrome
Je ne suis pas d'accord sur le fait que Firefox soit le principal concurrent de Chr ...
Posté par Tof le 17/04/10 à 00:51 sur l'article Google Chrome
664 commentaires dans la base de données
Carnet de bord
Singstar : une love story qui sonne faux
Clip the parachute ending - Birdy Nam Nam
Google Street View Slow motion
Cat Shower 2
Wii Kebab
Le Jour du Permis - Facebook
- RT @blozie: Facebook adopte le modèle d?influence de Twitter tinyurl.com/27qf47p...
- @bJonathan merci pour le rt:)
- @startupz ça c'est du FF, merci
- sympa la campagne du SELL sur les jeux violents http://bit.ly/aW4HS4
- #FF @clmntlxndr @XavierRapido @VincentGarreau @startupz
Chargement en cours!
