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>
|
Boutique |
Sites |
Bar |
Forum |
PhpBB |
Actu |
Glossaire |
Codes |
Tips |
Liens |
Livres |
Lettre
