Tutoriel AJAX simple (1/4)
En avant vers le WEB2.0
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>
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 !