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 Magazines - Le N°128 de Programmez est disponible Magazines - Le N°127 de Programmez est disponible Dreamweaver CS4 + Php + Mysql - Trucs et Astuces - Part 6 Pour continuer dans le même style, je vous propose une suite au précédent article. Rechercher tous ... Adobe - Adobe Photoshop.com Mobile pour iPhone 1.1 JavaScript - Ajouter une page dans vos favorites Dreamweaver CS4 + Php + Mysql - Trucs et Astuces - Part 5 - Je vous propose cette fois deux astuces. Comment exporter une feuille de style avec l'aide de ... SharePoint Personalization Site Links - Les liens personnalisés des MySite SharePoint Nous avons vu dans les articles précédents comment agrémenter les pages de recherche afin de ... Magazines - Le n°126 de Programmez est disponible Outils - Traducteur en ligne automatique pour site web Adobe - Adobe Photoshop.com Mobile pour Iphone Magazines - Le n°125 de Programmez est disponible Adobe - Adobe AIR 2 et Flash Player 10.1version bêta Les conférences autour des technologies Microsoft - Liste non exhaustive des grands évènements Nous allons essayer de regrouper un grand nombre des évènements autour des technologies Microsoft ... Magazines - Le n°124 de Programmez est disponible PHP - Forum PHP 2009 Composants - eFace - XAML en Java WPF - Désactiver le bouton de réduction d'une fenêtre Magazines - Le n°123 de Programmez est disponible Magazines - Le n°122 de Programmez est disponible Auditer une ferme SharePoint - Assurer le bon fonctionnement de SharePoint Dans le cadre de la bonne gestion de son environnement SharePoint, il est utile de faire un ... SQL Server 2008 Report Builder 2.0 - Installation et utilisation de Report Builder 2.0 Dans le cadre de la création de rapports pour SQL Server Reporting Services 2008, un outil est ... Magazines - Le HS N° 1 de Web Design est disponible Adobe - Adobe propose en Open Source les frameworks..... Outils - EntityBuilder CSharp - Sérialisation XML de vos objets Magazines - Le n°121 de Programmez est disponible Adobe - Adobe annonce MAX 2009 ! Outils - WhoIs [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 ... Outils - Crypt 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 ... Magazines - Le n° 120 de Programmez est disponible 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