Designed by Maunakea !
71 en ligne   Boutique | Sites | Bar | Forum | PhpBB | Actu | Glossaire | Codes | Tips | Liens | Livres | Lettre  


 Recherche

 NewsLetter






   

Tutoriel AJAX simple (1/4)

En avant vers le WEB2.0





Vonscott
Depuis peu, nous entendons parler d'AJAX un peu partout, comme quoi c'est un outil formidable, rapide, langage du futur, et précurseur du WEB2.0. Malheureusement, en recherchant sur le net, soit on ne trouve que des fonctions de création de l'objet XMLHttpRequest, soit des classes complètes imcompréhensibles aux developpeurs-amateurs. Mais AJAX est beaucoup moins compliqué ( à comprendre ) qu'il n'y parait. Excusez-moi d'avance si ce tutoriel comporte de légères erreurs, je ne suis qu'un amateur autodidacte.

Je ne traiterai ici que de l'ajax en mode asynchrone et en method POST.

Pour plus d'info en mode synchrone ou en method GET Autre tuto

Allez on se lance dans le corps du sujet.

Si vous voulez tester ce(s) script(s), voici l'architecture de l'exemple

- index.php //Le formulaire
- ajax.js //Notre bibliotheque AJAX
- verifformu.php //La page de contrôle du formulaire

Le dossier AJAX contenant :
- verifnserie.php
- ajaxrecupaddr.php
- ajaxiris.php

Commencons par le plus simple, créons notre formulaire.

----index.php---- ( Non commenté )

<html> <head> <title>Saisie</title> <script src="ajax.js" type="text/javascript"></script> </head> <body> <form method="post" action="verifformu.php"> <table> <tr> <th colspan="2">INFORMATIONS CLIENTS</th> </tr> <tr> <td>N° de code client</td> // Nous utilisons onchange car nous ne verifions pas chaque frappe mais la saisie complete <td><input type="text" size="6" name="cdcl" id="cdcl" onchange="ajaxcdcl()" /></td> </tr> <tr> <td>Nom du revendeur</td> <td><input type="text" size="20" name="revendeur" id="revendeur" /></td> </tr> <tr> <td>Adresse</td> <td><input type="text" size="30" name="adresserev" id="adresserev" /></td> </tr> <tr> <td>Code postal</td> <td><input id="coderev" type="text" size="5" maxlength="5" name="cdpostrev" /></td> </tr> <tr> <th colspan="2">APPAREIL</th> </tr> <tr> <td>Fournisseur</td> <td><input type="text" name="fournisseur" id="fournisseur" size="20" /></td> </tr> <tr> <td>Reference de l'appareil</td> <td><input type="text" size="20" name="refapp" /></td> </tr> <tr> <td>N° de serie</td> <td><input type="text" size="20" name="nserie" id="nserie" onchange="verifnserie()"/> <span id="affnserie"></span></td> </tr> <tr> <th colspan="2">CODE IRIS</th> </tr> <tr> <td colspan="2"> <div id="iris"> <input type="radio" onclick="ajaxiris('lavage')" name="codiris"> Lavage <input type="radio" onclick="ajaxiris('froid')" name="codiris"> Froid <input type="radio" onclick="ajaxiris('cuisson')" name="codiris"> Cuisson </div> </td> </tr> <tr> <th colspan="2"><input type="submit" value="Valider" /></th> </tr> </table> </form> </body> </html>




Pour pouvoir écrire dans ce forum, identifiez-vous !

 Lire  17/04/09 15:11 de Kalou37
Petit tutorial qui a l'air fort intéressant mais égal...
  • 17/04/09 16:06 de DB77 Tu peux lire mon tuto si tu veux :) Le cod...
  • 17/04/09 16:40 de Vonscott Depuis le 26/10/2007, tu est bien le ...
  • 20/04/09 12:10 de Kalou37 Dans ton fichier ajaxiris.php : echo ...
  • 20/04/09 16:12 de Vonscott Salut, Effectivement je n'avais pa...
  • 23/04/09 16:47 de Kalou37 Réponse un peu tardive mais en fait da...
  • 23/04/09 17:14 de DB77 Kalou37 : tu parles à qui car mon tuto a ét...
  • 23/04/09 17:49 de Kalou37 Je continue un peu... xhr.send("typ...
  • 23/04/09 17:57 de Kalou37 Désolé DB77, je suivait toujours le tu...
  • 24/04/09 17:17 de Kalou37 Je conclue enfin, j'ai trouvé le probl...
  •   v1.3p © ASP-PHP.net 2002  

    Vonscott le 20/04/2009 (109 420 hits)
    Didier Testez gratuitement la plateforme web de Windows Server 2008 !
    Gagnez un voyage aux Etats-Unis pour la MS Project Conference !
    Au fil des news  
    Adobe - Adobe annonce MAX 2009 !
    [MAJ] Dreamweaver MX + Php + MySql - Les formulaires - partie 3
    Mise à jour du code, par DB 77, affichage du code erreur, dans la page erreur.php, traduction des ...
    PHP - News avec photo - Système de gestion - affichage
    Gestion - Administration - Affichage d'une "News", "Actualité", "Info", ... avec : - mise en forme ...
    Dreamweaver Php Mysql - Région répétée imbriquée
    Je rebondis, sur un post du forum, pour vous montrer comment obtenir grâce à l'extension Simulated ...
    Gérer les bases de contenu SharePoint - Gérer la croissance du volume des données
    Dans le cadre de la gestion quotidienne de ferme SharePoint, il existe une partie qu'il faut ...
    PHP - Le Coach PHP sur Visual Studio
    .NET - Ecrire une application .NET utilisant MySQL
    PHP - Utilisation de PHP dans le monde Microsoft
    Magazines - Le n° 119 de Programmez est disponible
    Adobe - Adobe annonce Photoshop Marketplace
    [MAJ] Tutoriel AJAX simple - En avant vers le WEB2.0
    Mis à jour le 20/04/2009
    Captcha «maison» sans extension - Et en plus, c'est gratuit ;)
    Un ami m'a demandé de l'aide ce matin pour insérer un captcha dans un formulaire pour son site ...
    Dreamweaver CS4 - Photoshop CS4 - Alliance parfaite pour la gestion des images
    Pour changer un peu des pages de code, je vous propose de voir ensemble, la fonctionnalité très ...
    JavaScript - Calcul automatique d'une facture
    Amélioration du Search MOSS: Manipulation XSL - Utilisation du XSL dans l'affichage des résultats
    Parmi tous les articles sur l'amélioration du moteur de recherche de Microsoft Office SharePoint ...
    Outils - Editeur d'icônes IcoFX
    Magazines - Le n°118 de Programmez est disponible
    JavaScript - Imprimer une autre page que celle en cours
    CSS - div pour imiter frame (Bandeau/Menu FIXES)
    [MAJ] [PHP] Un calendrier très complet -
    ajout des événements au calendrier
    PowerShell - Winforms pour l'aide des commandes GET PowerShell
    Adobe - Adobe Photoshop Lightroom 2 est offert ....
    Amélioration du Search MOSS: synonyme et Best Bet - La gestion des synonymes dans MOSS Search
    Le moteur de recherche de MOSS permet la configuration d'une liste de synonymes. Nous verrons donc ...
    AJAX - récup champs formulaires pour POST en AJAX
    PowerShell - Un windows Forms pour SharePoint en PowerShell
    Sondage associatif (compatibilité) - Qui va bien avec qui ?
    Cette fois, c'est un petit sondage que je vous propose. Il pourra bien sûr être adaptée à vos ...
    ASP - Hashage MD5 (cryptage irréversible)
    Adobe - 80% de réduction sur les versions Adobe Creative
    CSharp - Interroger un serveur Whois
    CSharp - Equivalent de la fonction PHP htmlentities()
    CSharp - Somme de contrôle CRC32
    Magazines - Le n°117 de Programmez est disponible
    Hebergement - Hébergement ASP et ASP.Net
    MOSS - Mon Profil - Personnalisation des profils utilisateurs de MOSS
    La gestion des profils utilisateurs de SharePoint fait partie des fonctionnalités de base de ...
    Dreamweaver CS3 + Php + Mysql - Le Jeu d'Enregistrements - Les fondamentaux Part-3
    La 3ème partie des fondamentaux, traitera essentiellement du jeu d'enregistrements ou Recordset. ...
    Mon mini-site @ Home - avec Windows, Free, Wamp & DynDNS
    Envie d'héberger votre petit site chez vous, sur votre ordinateur ? de partager des fichiers avec ...
    Magazines - Le n°116 de Programmez est disponible
    Recevoir ses identifiants par mél - Bien pratique pour les petites têtes
    Encore une question posée sur le forum et zou... Le problème est simple : On a oublié ses ...
    ASP.NET - code pour le bouton enregistrer
    Microsoft - Grand jeu-concours MSDN : l'indice d'ASP-PHP.net !
    Tutorial : HTML | Scripting | ASP-PHP | ASP.net | SQL Server | XML
    Sharepoint | XAML | Pocket | Dreamweaver | VML | Divers
      Scripts : Scripting | ASP-PHP | ASP.net | Divers
      Boutique | Annuaire | Bannières | Météo | Tribune | Partenariats
    v3b © Didier 2003   
     

    Corpo Sciences de Reims Partitions gratuites Carte, météo, annonces
     The Inquirer FR Wygwam Codes Sources ASP-magazine DotNet Project CodePPC Groupes Utilisateurs Microsoft MVP El Roubio TechNet