Et voici un cours complet pour créer un carnet d’adresses alimentés par AJAX.
L’application affiche une liste avec plusieurs noms. Lorsque l’utilisateur choisit une personne, ses coordonnées sont affichées. Les informations sur les personnes sont stockées sur le serveur dans un fichier XML.
Tout est dans la formation ci-dessous.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
La technique pour créer un carnet adresses avec AJAX
Bonjour à tous et bienvenu sur Développement Facile.
Là on attaque un nouveau cours, on va faire que de la pratique. Dans ce cours là et tous les suivants, ensemble on va créer plusieurs applications, des applications très simples pour vous montrer le fonctionnement d’Ajax, à quoi ça peut servir, toujours très pratique, ensemble on va construire un carnet d’adresse à partir d’un fichier XML, les données seront chargées d’un fichier XML tout ça en direct via Ajax.
Création d’un carnet d’adresses
Comme je vous l’ai dit, l’application vous affiche un formulaire avec une liste de plusieurs noms, l’utilisateur choisit une personne et les coordonnées sont affichées de cette personne. Toutes les informations sont stockées sur le serveur dans un fichier XML, qui est interrogé à la demande, dès que l’utilisateur a choisi une personne.
Je vous montre le code source, donc c’est vraiment une application très simple, le fichier XML classique avec plusieurs personnes dedans, et le fichier HTML, je vais assez vite parce que maintenant vous devez avoir une bonne connaissance avec Ajax, ça doit aller très bien, la liste de personnes ici, avec des prénoms, on load, on appelle la fonction JavaScript loadData, en donnant le nom de la liste de personne, le fichier XML, là ou sont stockées toutes les données personnes ici, réponse serveur c’est ici, on veut afficher les réponses, et charger les données. Qu’est-ce que fait loadData ? magique, ça vous connaissez je passe, tout ça je passe, on récupère le fichier XML, et on fait un affichage du contenu du fichier XML, mais uniquement le contenu qui nous intéresse, qu’est-ce qui nous intéresse ?
On récupère la personne qui a été sélectionnée par l’utilisateur ici, avec l’ordre donc si il a sélectionné aucune personne, on affiche rien, sinon on récupère, pour l’affichage, et on récupère les info byTagName, nom, prénom, téléphone, mail, personnes, donc ici, nom, prénom, téléphone, mail, personne, on récupère toutes ces infos et après, avec l’ordre, donc l’ordre c’est le numéro 0, 1, 2, 3, 4, 5, 6, c’est l’index comme dans un tableau, avec l’index on va récupérer .firstChild.nodeValue, byTagName, nom, prénom, tel, mail, le job avec l’attribut et on construit notre affichage XML, là aucune donnée n’est chargée évidemment je n’ai pas assez de choix, les données de Matthieu, Matthieu tel avec une petite mise en forme, développeur, le téléphone et tout. Aurélia par exemple, présentatrice, à prendre Marine, c’est toujours en dessous de chargement du fichier XML toujours avec cette notion de cache là, qui est très importante, à chaque fois on force le navigateur à charger un nouveau fichier XML, voilà, et la Alice, chargement direct, vous voyez c’est très rapide l’affichage, et le code est vraiment très simple.
Reprenez cette application, c’est vraiment un exemple d’application mais c’est pour vous donner un avant-goût du potentiel d’Ajax, reprenez cet exemple d’application, créez-vous des sites, des applications, des sites Internet Web 2.0 avec Ajax, magnifique, vous pouvez même m’envoyer les liens des sites que vous avez créé, je serais ravi de les consulter, si vous avez des questions posez-les directement sous ce cours vidéo, moi je vous dis à très bientôt sur Développement Facile.
[/ppmtoggle][/ppmaccordion]
Téléchargez l’exemple AJAX carnet d’adresses
Et voici le code source commenté de l’application carnet d’adresses via AJAX.
Téléchargement du code source Carnet d'adresses via AJAX
