Composé de HTML, de la technologie JavaScript™, de DHTML et du DOM, Ajax constitue un excellent moyen de transformer des interfaces Web encombrantes en applications Ajax interactives. Cet article, rédigé par un expert Ajax, montre comment ces technologies fonctionnent ensemble (d'un aperçu général à une discussion détaillée) pour faire du développement Web efficace une réalité. Il démystifie également les concepts fondamentaux d'Ajax, notamment l'objet XMLHttpRequest.
Il y a cinq ans, si vous ne connaissiez pas XML, vous étiez un vilain petit canard que personne ne prenait au sérieux. Il y a dix-huit mois, Ruby est devenue le centre d'attention, et les programmeurs qui ne connaissaient pas Ruby ne pouvaient que s'asseoir sur le banc. Aujourd’hui, si vous souhaitez suivre les dernières tendances technologiques, votre destination est Ajax.
Mais Ajax est plus qu'une simple mode, c'est un moyen puissant de créer des sites Web qui n'est pas aussi difficile que d'apprendre une toute nouvelle langue.
Mais avant d’entrer dans les détails de ce qu’est Ajax, prenons quelques minutes pour comprendre ce que fait Ajax. Actuellement, il existe deux options de base lors de l'écriture d'applications :
· Applications de bureau · Applications Web
Les deux sont similaires, les applications de bureau sont généralement fournies sur CD (parfois téléchargeables à partir d'un site Web) et sont entièrement installées sur votre ordinateur supérieur. Les applications de bureau peuvent utiliser Internet pour télécharger des mises à jour, mais le code qui exécute ces applications se trouve sur l'ordinateur de bureau. Les applications Web s'exécutent quelque part sur un serveur Web. Il n'est pas surprenant que ces applications soient accessibles via un navigateur Web.
Cependant, la façon dont les applications fonctionnent et interagissent avec elles est plus importante que l'endroit où le code qui exécute ces applications est placé. Les applications de bureau sont généralement rapides (exécutées directement sur votre ordinateur sans attendre une connexion Internet), disposent d'une belle interface utilisateur (généralement dépendante du système d'exploitation) et sont remarquablement dynamiques. Vous pouvez cliquer, sélectionner, taper, ouvrir des menus et des sous-menus, naviguer et ne jamais attendre.
Les applications Web, en revanche, constituent la dernière tendance, fournissant des services qui ne sont pas possibles sur un ordinateur de bureau (comme Amazon.com et eBay). Cependant, avec la puissance du Web, il faut attendre, attendre que le serveur réponde, attendre que l'écran se rafraîchisse, attendre que la requête revienne et générer une nouvelle page.
Il s’agit évidemment d’une simplification excessive, mais le concept de base est le suivant. Comme vous l'avez peut-être deviné, Ajax tente de relier les fonctionnalités et l'interactivité des applications de bureau avec les applications Web en constante évolution. Vous pouvez utiliser des interfaces utilisateur dynamiques et de superbes contrôles comme ceux que l'on trouve dans les applications de bureau, mais dans une application Web.
Qu'est-ce que tu attends ? Voyons comment Ajax peut transformer des interfaces Web maladroites en applications Ajax réactives.
Ancienne technologie, nouvelles astuces
Lorsqu'il s'agit d'Ajax, cela implique en réalité une variété de technologies, et son utilisation flexible nécessite une compréhension approfondie de ces différentes technologies (les premiers articles de cette série aborderont chacune de ces technologies séparément). La bonne nouvelle est que vous êtes probablement déjà très familier avec la plupart de ces technologies, et mieux encore, elles sont faciles à apprendre et pas aussi difficiles qu'un langage de programmation complet comme Java ou Ruby.
Voici les technologies de base utilisées dans les applications Ajax :
· HTML est utilisé pour créer des formulaires Web et déterminer les champs utilisés par d'autres parties de l'application.
· Le code JavaScript est le code principal qui exécute les applications Ajax et contribue à améliorer la communication avec les applications serveur.
·DHTML ou Dynamic HTML pour la mise à jour dynamique des formulaires. Nous utiliserons des divs, des spans et d'autres éléments HTML dynamiques pour baliser le HTML.
·Le Document Object Model DOM est utilisé pour traiter (via le code JavaScript) la structure du HTML et (dans certains cas) le XML renvoyé par le serveur.
Définition d'Ajax
À propos, Ajax est l'abréviation de Asynchronous JavaScript et XML (et DHTML, etc.). Cette expression a été inventée par Jesse James Garrett d'Adaptive Path (voir Ressources), et comme l'explique Jesse, ce n'est pas un acronyme.
Analysons plus en détail les responsabilités de ces technologies. Je discuterai de ces technologies en profondeur dans les prochains articles, mais pour l'instant, familiarisez-vous simplement avec les composants et les technologies. Plus vous maîtriserez ces codes, plus il vous sera facile de passer d'une compréhension éparse de ces technologies à une véritable maîtrise de ces technologies (ce qui ouvre aussi véritablement la porte au développement d'applications Web).
Objet XMLHttpRequest
Le seul objet à comprendre est peut-être aussi le moins familier pour vous, le XMLHttpRequest. Il s'agit d'un objet JavaScript et sa création est simple, comme le montre le listing 1.
Listing 1. Création d'un nouvel objet XMLHttpRequest
<script language="javascript" type="text/javascript">
var xmlHttp = new XMLHttpRequest();
</script>
Nous aborderons cet objet plus en détail dans le prochain article, mais pour l'instant sachez que c'est l'objet qui gère toutes les communications du serveur. Avant de continuer la lecture, arrêtez-vous et réfléchissez à ceci : la technologie JavaScript est celle qui communique avec le serveur via l'objet XMLHttpRequest. Il ne s’agit pas d’un flux d’applications ordinaire, et c’est de là que vient la puissance d’Ajax.
Dans une application Web typique, l'utilisateur remplit les champs du formulaire et clique sur le bouton Soumettre. L'intégralité du formulaire est ensuite envoyée au serveur, qui le transmet à un script qui gère le formulaire (généralement PHP ou Java, peut-être un processus CGI ou quelque chose de similaire), puis renvoie une toute nouvelle page lorsque le script est terminé. La page peut être au format HTML avec un nouveau formulaire déjà rempli avec certaines données, il peut s'agir d'une page de confirmation ou d'une page avec certaines options sélectionnées en fonction des données saisies dans le formulaire d'origine. Bien entendu, l'utilisateur doit attendre que le script ou le programme sur le serveur traite et renvoie le nouveau formulaire. L'écran devient vide et attend que les données soient renvoyées par le serveur avant de redessiner. C'est pourquoi l'interactivité est faible, l'utilisateur ne reçoit pas de retour immédiat, ce qui le rend différent d'une application de bureau.
Ajax place essentiellement la technologie JavaScript et l'objet XMLHttpRequest entre le formulaire Web et le serveur. Lorsque l'utilisateur remplit le formulaire, les données sont envoyées vers du code JavaScript plutôt que directement vers le serveur. Au lieu de cela, le code JavaScript capture les données du formulaire et envoie une requête au serveur. Dans le même temps, le formulaire sur l'écran de l'utilisateur ne scintillera pas, ne disparaîtra pas et ne retardera pas. En d’autres termes, le code JavaScript envoie la requête en coulisses sans même que l’utilisateur sache que la requête est effectuée. Mieux encore, la requête est envoyée de manière asynchrone, ce qui signifie que le code JavaScript (et l'utilisateur) n'ont pas à attendre une réponse du serveur. Ainsi, l'utilisateur peut continuer à saisir des données, à faire défiler et à utiliser l'application.
Le serveur renvoie ensuite les données au code JavaScript (toujours dans le formulaire Web), qui décide quoi faire des données. Il met à jour rapidement les données du formulaire, donnant l'impression que la candidature est complétée instantanément, sans que le formulaire ne soit soumis ou actualisé et que l'utilisateur ne reçoive de nouvelles données. Le code JavaScript peut même effectuer certains calculs sur les données reçues et envoyer une autre requête, le tout sans intervention de l'utilisateur ! C'est la puissance de XMLHttpRequest. Il peut interagir seul avec le serveur selon les besoins, et l'utilisateur peut même ignorer complètement ce qui se passe dans les coulisses. Le résultat est une expérience dynamique, réactive et hautement interactive, similaire à une application de bureau, mais avec toute la puissance d'Internet derrière elle.
Aprèsavoir ajouté du JavaScript
pour obtenir le handle de XMLHttpRequest, l'autre code JavaScript est très simple. En fait, nous utiliserons le code JavaScript pour accomplir des tâches très basiques :
· Obtenir les données d'un formulaire : le code JavaScript peut facilement extraire les données d'un formulaire HTML et les envoyer au serveur.
·Modifier les données du formulaire : la mise à jour du formulaire est également simple, depuis la définition des valeurs des champs jusqu'au remplacement rapide des images.
·Analyser HTML et XML : utilisez le code JavaScript pour manipuler le DOM (voir la section suivante) et traiter la structure des données XML renvoyées par le serveur de formulaires HTML.
Pour les deux premiers points, vous devez être très familier avec la méthode getElementById(), comme indiqué dans le listing 2.
Listing 2. Capture et définition des valeurs de champ avec du code JavaScript
// Récupère la valeur du champ "phone" et la met dans une variable appelée phone
var phone = document.getElementById("phone").value;
// Définir certaines valeurs sur un formulaire à l'aide d'un tableau appelé réponse
document.getElementById("order").value = réponse[0];
document.getElementById("address").value = réponse[1];
Il n'y a rien de spécial à noter ici, c'est génial ! Vous devez comprendre qu’il n’y a rien de très compliqué ici. Une fois que vous maîtrisez XMLHttpRequest, le reste de votre application Ajax est constitué d'un simple code JavaScript, comme le montre le listing 2, mélangé à une petite quantité de HTML. En même temps, nous devons également utiliser un peu de DOM, alors jetons un coup d'œil.
Terminer avec DOM
Enfin, il y a DOM, le modèle objet de document. Le DOM peut être un peu intimidant pour certains lecteurs. Les concepteurs HTML l'utilisent rarement, et même les programmeurs JavaScript l'utilisent rarement à moins qu'ils ne souhaitent accomplir une tâche de programmation haut de gamme. Les programmes Java et C/C++ complexes font un usage intensif du DOM, ce qui peut expliquer pourquoi le DOM est considéré comme difficile à apprendre.
Heureusement, travailler avec le DOM dans la technologie JavaScript est simple et très intuitif. Maintenant, de manière conventionnelle, vous devriez probablement expliquer comment utiliser le DOM, ou au moins donner un exemple de code, mais cela pourrait également vous induire en erreur. Même si vous ignorez le DOM, vous pouvez toujours vous plonger dans Ajax, et c'est l'approche que je vais adopter. Nous reviendrons sur le DOM dans un prochain article, mais pour l'instant, il suffit de savoir que vous pourriez en avoir besoin. Nous approfondirons le DOM lorsque nous devrons transmettre du XML entre le code JavaScript et le serveur et modifier les formulaires HTML. Vous pouvez faire un travail intéressant sans cela, alors mettez le DOM de côté pour le moment.
Obtention de l'objet Request
Avec les connaissances de base ci-dessus, examinons quelques exemples spécifiques. XMLHttpRequest est au cœur des applications Ajax et peut être peu familier à de nombreux lecteurs, alors commençons par là. Comme vous pouvez le voir dans le listing 1, créer et utiliser cet objet est très simple, n'est-ce pas ? Attendez.
Vous vous souvenez de ces vilaines guerres de navigateurs d’il y a quelques années ? Rien ne donne les mêmes résultats sur différents navigateurs. Croyez-le ou non, ces guerres continuent, quoique à plus petite échelle. Mais étrangement, XMLHttpRequest est devenu l’une des victimes de cette guerre. Par conséquent, l’obtention de l’objet XMLHttpRequest peut nécessiter une approche différente. Je vais l'expliquer en détail ci-dessous.
Utilisation du navigateur Microsoft
Le navigateur Microsoft Internet Explorer utilise un analyseur MSXML pour traiter XML (vous pouvez en savoir plus sur MSXML dans Ressources). Par conséquent, si vous écrivez une application Ajax qui interagit avec Internet Explorer, vous devez créer des objets d'une manière particulière.
Mais ce n'est pas si simple. Il existe en réalité deux versions différentes de MSXML selon la version de la technologie JavaScript installée dans Internet Explorer, vous devez donc écrire un code distinct pour chaque cas. Voir le listing 3, qui contient du code qui crée un XMLHttpRequest sur un navigateur Microsoft.
Listing 3. Créez un objet XMLHttpRequest sur le navigateur Microsoft
var xmlHttp = false;
essayer {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} attraper (e) {
essayer {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} attraper (e2) {
xmlHttp = faux ;
}
}
Vous ne comprenez peut-être pas encore complètement le code, mais ce n'est pas grave. À la fin de cette série d'articles, vous aurez une compréhension plus approfondie de la programmation JavaScript, de la gestion des erreurs, de la compilation conditionnelle, etc. Maintenant, rappelez-vous simplement les deux lignes de code :
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
et
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");.
Ces deux lignes de code tentent essentiellement de créer un objet en utilisant une version de MSXML, et si cela échoue, créez l'objet en utilisant une autre version. Pas mal, non ? Si aucun des deux ne réussit, la variable xmlHttp est définie sur false, indiquant à votre code qu'il y a un problème. Si cela se produit, cela peut être dû au fait qu'un navigateur non Microsoft installé nécessite un code différent.
Gestion des navigateurs Mozilla et non-Microsoft
Si vous choisissez un navigateur autre qu'Internet Explorer, ou si vous écrivez du code pour un navigateur non-Microsoft, vous devrez utiliser un code différent. Il s'agit en fait d'une simple ligne de code présentée dans le listing 1 :
var xmlHttp = new XMLHttpRequest object ;.
Cette ligne de code beaucoup plus simple crée un objet XMLHttpRequest dans Mozilla, Firefox, Safari, Opera et pratiquement tout navigateur non Microsoft prenant en charge Ajax sous quelque forme que ce soit.
La clépour combiner cela
est de prendre en charge tous les navigateurs. Qui veut écrire une application qui fonctionne uniquement avec Internet Explorer ou les navigateurs non Microsoft ? Ou pire, rédiger une candidature deux fois ? Bien sûr que non! Par conséquent, le code doit prendre en charge à la fois Internet Explorer et les navigateurs non Microsoft. Le listing 4 montre un tel code.
Listing 4. Création d'un objet XMLHttpRequest d'une manière qui prend en charge plusieurs navigateurs
/* Crée un nouvel objet XMLHttpRequest pour communiquer avec le serveur Web */
var xmlHttp = faux ;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
essayer {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} attraper (e) {
essayer {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} attraper (e2) {
xmlHttp = faux ;
}
}
@end @*/
if (!xmlHttp && typeof XMLHttpRequest != 'indéfini') {
xmlHttp = nouveau XMLHttpRequest();
}
Pour l'instant, ignorez les symboles étranges commentés, tels que @cc_on, qui sont des commandes spéciales du compilateur JavaScript qui seront abordées en détail dans le prochain article sur XMLHttpRequest. Le cœur de ce code est divisé en trois étapes :
1. Créez une variable xmlHttp pour référencer l'objet XMLHttpRequest à créer.
2. Essayez de créer l'objet dans le navigateur Microsoft :
1) Essayez de le créer à l’aide de l’objet Msxml2.XMLHTTP.
2) En cas d'échec, essayez à nouveau l'objet Microsoft.XMLHTTP.
2. Si xmlHttp n'est toujours pas créé, créez l'objet d'une manière non Microsoft.
Enfin, xmlHttp doit référencer un objet XMLHttpRequest valide, quel que soit le navigateur qu'il exécute.
Une petite note sur la sécurité.
Qu'en est-il de la sécurité ? Les navigateurs permettent désormais aux utilisateurs d'augmenter leur niveau de sécurité, de désactiver la technologie JavaScript et de désactiver n'importe quelle option du navigateur. Dans ce cas, le code ne fonctionnera pas de toute façon. À ce stade, il est nécessaire de traiter le problème de manière appropriée, ce qui nécessite un article séparé pour plus tard (cette série est assez longue, n'est-ce pas ? Ne vous inquiétez pas, vous pourriez l'obtenir avant d'avoir fini de lire). Écrivons maintenant un morceau de code robuste mais pas parfait, ce qui est bon pour maîtriser Ajax. Nous en discuterons plus en détail plus tard.
Requête/Réponse dans le monde Ajax
Maintenant que nous avons introduit Ajax, nous avons une compréhension de base de l'objet XMLHttpRequest et de la manière de le créer. Si vous avez lu attentivement, vous savez probablement déjà que c'est la technologie JavaScript qui gère les applications Web sur le serveur, plutôt que les formulaires HTML soumis directement à cette application.
Qu'est-ce qui manque ? Exactement comment utiliser XMLHttpRequest. Parce que ce code est si important que chaque application Ajax que vous écrivez l'utilisera sous une forme ou une autre, commençons par examiner à quoi ressemble le modèle de base de requête/réponse d'Ajax.
Faire la requête
Maintenant que vous disposez d'un tout nouvel objet XMLHttpRequest, laissons-le faire un peu de travail. Tout d'abord, vous avez besoin d'une méthode JavaScript que la page Web peut appeler (par exemple, lorsque l'utilisateur saisit du texte ou sélectionne un élément dans un menu). Vient ensuite le processus qui est fondamentalement le même dans toutes les applications Ajax :
1. Obtenez les données requises à partir du formulaire Web.
2. Créez l'URL à connecter.
3. Ouvrez une connexion au serveur.
4. Définissez la fonction à exécuter par le serveur une fois terminée.
5. Envoyez une demande.
Les exemples de méthodes Ajax du Listing 5 sont organisés dans cet ordre :
Listing 5. Faire une requête Ajax
fonction callServer() {
// Récupère la ville et l'état à partir du formulaire Web
var ville = document.getElementById("ville").value;
var state = document.getElementById("state").value;
// Ne continue que s'il y a des valeurs pour les deux champs
if ((city == null) || (city == "")) return;
if ((state == null) || (state == "")) return;
// Crée l'URL à laquelle se connecter
var url = "/scripts/getZipCode.php?city=" + escape(city) + "&state=" + escape(state);
// Ouvrir une connexion au serveur
xmlHttp.open("GET", url, true);
// Configure une fonction que le serveur exécutera une fois terminé
xmlHttp.onreadystatechange = updatePage;
// Envoyer la requête
xmlHttp.send(null);
}
La signification de la plupart des codes est très claire. Le code au début utilise du code JavaScript de base pour obtenir les valeurs de plusieurs champs de formulaire. Définissez ensuite un script PHP comme cible du lien. Notez la façon dont l'URL du script est spécifiée, la ville et l'état (à partir du formulaire) sont ajoutés à l'URL à l'aide de simples paramètres GET.
Ensuite, une connexion est ouverte, ce qui est la première fois que vous voyez XMLHttpRequest utilisé. La méthode de connexion (GET) et l'URL à laquelle se connecter sont spécifiées. Le dernier paramètre, s'il est défini sur true, demandera une connexion asynchrone (c'est l'origine d'Ajax). Si false est utilisé, le code attendra une réponse du serveur après avoir effectué la demande. Si la valeur est true, les utilisateurs peuvent toujours utiliser le formulaire (et même appeler d'autres méthodes JavaScript) pendant que le serveur traite les requêtes en arrière-plan.
L'attribut onreadystatechange de xmlHttp (rappelez-vous qu'il s'agit d'une instance d'objet XMLHttpRequest) indique au serveur quoi faire une fois son exécution terminée (ce qui peut prendre cinq minutes ou cinq heures). Étant donné que le code n'attend pas le serveur, il doit indiquer au serveur quoi faire pour que vous puissiez répondre. Dans cet exemple, si le serveur a fini de traiter la requête, une méthode spéciale appelée updatePage() sera déclenchée.
Enfin, send() est appelé avec la valeur null. Étant donné que les données à envoyer au serveur (ville et état) ont été ajoutées à l'URL de la requête, aucune donnée ne doit être envoyée dans la requête. De cette façon, la demande est faite et le serveur fonctionne selon votre demande.
Si vous ne trouvez rien de nouveau, vous devriez comprendre à quel point c'est simple et direct ! En plus de garder à l’esprit la nature asynchrone d’Ajax, tout cela est assez simple. Soyez reconnaissant qu'Ajax vous permette de vous concentrer sur l'écriture de belles applications et interfaces au lieu de vous soucier du code de requête/réponse HTTP complexe.
Le code du Listing 5 illustre la facilité d'utilisation d'Ajax. Les données sont du texte simple et peuvent être utilisées dans le cadre de l’URL de la demande. Envoyez des requêtes avec GET au lieu du POST plus complexe. Il n'y a pas de XML ni d'en-tête de contenu à ajouter, ni de données à envoyer dans le corps de la requête. En d'autres termes, c'est l'utopie d'Ajax ;
Ne vous inquiétez pas, les choses vont se compliquer au fur et à mesure du déroulement de cette série d’articles. Vous verrez comment envoyer une requête POST, comment définir les en-têtes de requête et le type de contenu, comment encoder du XML dans le message, comment augmenter la sécurité de la requête, et vous pouvez faire bien plus encore ! Ne vous inquiétez pas de ces difficultés pour l'instant, maîtrisez simplement les éléments de base, et bientôt nous créerons un ensemble complet de bibliothèques d'outils Ajax.
Gestion de la réponse
Vient maintenant la réponse du serveur. Juste deux choses à savoir pour l'instant :
· Ne faites rien tant que la valeur de la propriété xmlHttp.readyState n'est pas égale à 4.
·Le serveur remplira la propriété xmlHttp.responseText avec la réponse.
Le premier d'entre eux, l'état prêt, sera abordé en détail dans le prochain article, et vous en apprendrez plus sur les étapes d'une requête HTTP que vous ne le pensiez probablement. Pour l'instant, il suffit de vérifier une valeur spécifique (4) (il y aura d'autres valeurs à aborder dans le prochain article). Deuxième point, utilisez la propriété xmlHttp.responseText pour obtenir la réponse du serveur, c'est très simple. L'exemple de méthode du listing 6 peut être appelé par le serveur en fonction des données envoyées dans le listing 5.
Listing 6. Gestion de
la fonction de réponse du serveur updatePage() {
si (xmlHttp.readyState == 4) {
var réponse = xmlHttp.responseText;
document.getElementById("zipCode").value = réponse;
}
}
Les codes ne sont également ni difficiles ni complexes. Il attend l'appel du serveur, et s'il est prêt, définit la valeur d'un autre champ du formulaire en utilisant la valeur renvoyée par le serveur (ici le code postal de la ville et de l'état renseigné par l'utilisateur). Alors du coup, le champ zipCode contenant le code postal apparaît sans que l'utilisateur n'appuie sur aucun bouton ! C'est ce que j'ai mentionné plus tôt en tant qu'application de bureau. Réponse rapide, sensation dynamique, etc., tout cela grâce à un petit morceau de code Ajax.
Les lecteurs attentifs remarqueront peut-être que zipCode est un champ de texte ordinaire. Une fois que le serveur renvoie le codage ZIP, la méthode updatePage() définit la valeur de ce champ avec le codage ZIP ville/état, que l'utilisateur peut remplacer. Ceci est fait pour deux raisons : garder l'exemple simple et illustrer que parfois vous souhaiterez peut-être que l'utilisateur puisse modifier les données renvoyées par le serveur. Gardez ces deux choses à l’esprit, elles sont importantes pour une bonne conception de l’interface utilisateur.
Qu'y a-t-il d'autre
pour se connecter à un formulaire Web
?En fait, il ne reste plus grand chose. Une méthode JavaScript capture les informations que l'utilisateur saisit dans le formulaire et les envoie au serveur, tandis que l'autre méthode JavaScript écoute et traite la réponse et définit la valeur du champ lorsque la réponse revient. Tout cela repose en fait sur l’appel de la première méthode JavaScript, qui lance l’ensemble du processus. La solution la plus évidente est d'ajouter un bouton au formulaire HTML, mais nous sommes en 2001, vous ne trouvez pas ? Utilisons la technologie JavaScript comme le listing 7.
Listing 7. Démarrage d'un processus Ajax
<form>
<p>Ville : <input type="text" name="city" id="city" size="25"
onChange="callServer();" /></p>
<p>État : <input type="text" name="state" id="state" size="25"
onChange="callServer();" /></p>
<p>Code postal : <input type="text" name="zipCode" id="city" size="5" /></p>
</form>
Si cela semble être un morceau de code assez courant, vous avez raison, c'est le cas ! Lorsque l'utilisateur saisit une nouvelle valeur dans le champ Ville ou État, la méthode callServer() est déclenchée et Ajax commence à s'exécuter. Comprenez-vous un peu ce qui se passe ? Eh bien, c'est tout !
Conclusion
Vous êtes probablement maintenant prêt à commencer à écrire votre première application Ajax, et souhaitez au moins lire attentivement les articles des ressources, n'est-ce pas ? Mais vous pouvez commencer avec une idée de base du fonctionnement de ces applications et une compréhension de base de l'objet XMLHttpRequest. Dans le prochain volet, vous maîtriserez cet objet et apprendrez à gérer la communication entre JavaScript et le serveur, à utiliser les formulaires HTML et à obtenir un handle DOM.
Prenez maintenant un moment pour réfléchir à la puissance des applications Ajax. Imaginez un formulaire Web qui répondait instantanément lorsque vous cliquiez sur un bouton, saisissiez un champ, sélectionniez une option dans une zone de liste déroulante ou faisiez glisser la souris sur l'écran. Pensez à ce que signifie réellement async, pensez au code JavaScript en cours d'exécution et n'attendez pas que le serveur réponde à sa demande. Quel genre de problèmes allez-vous rencontrer ? Dans quel type de domaine entrera-t-il ? Compte tenu de cette nouvelle approche, comment devrions-nous modifier la conception du formulaire lors de la programmation ?
Si vous consacrez un peu de temps à ces questions, vous gagnerez plus que simplement couper/coller du code dans une application que vous ne comprenez pas du tout. Dans le prochain volet, nous mettrons ces concepts en pratique, en détaillant le code nécessaire pour que l'application fonctionne de cette façon. Alors pour l’instant, profitez des possibilités qu’Ajax a à offrir.