247
Étude de cas : Roma Italia
Interactivité avec Ajax et jQuery
Lorsque.j’ai.abordé.le.sujet.d’Ajax.au.cours.d’un.atelier.de.travail.il.y.a.quelques.années,.
je.n’ai.pas.vu.beaucoup.de.mains.se.lever.quand.j’ai.demandé.qui.avait.déjà.développé.des.
sites.et.des.applications.avec.Ajax..Si.je.devais.poser.la.même.question.aujourd’hui,.il.est.
probable.que.vous.seriez.nombreux.à.lever.le.bras..Il.en.irait.sans.doute.de.même.si.l’on.
posait.cette.question.à.propos.de.jQuery..
Ajax.et.jQuery.ont.en.effet.trouvé.leur.place.dans.les.sites.de.haut.niveau.comme.le.duo.de.
choix.pour.l’interactivité.riche.sur.le.Web..Les.deux.peuvent.évidemment.s’utiliser.l’un.sans.
l’autre,.mais.il.est.courant.de.les.employer.en.tandem..Des.technologies.émergentes,.comme.
Flex.d’Adobe.ou.Silverlight.de.Microsoft.prétendent.contester.la.suprématie.de.ce.duo,.mais.
j’ai.toutes.les.raisons.de.croire.qu’Ajax.et.les.frameworks.resteront.les.principaux.acteurs.du.
Web.pour.quelques.années.encore..
Cette.section.n’a.pas.pour.but.de.les.présenter.en.détail..Il.existe.de.nombreux.livres,.didacticiels.et.articles.de.blog.sur.le.sujet..J’aimerais.plutôt.proposer.une.brève.introduction.(ou.
un.rappel).à.Ajax.et.jQuery.et.montrer.comment.ils.sont.utilisés.dans.le.site.Roma.Italia..Si.
vous.êtes.déjà.familiarisé.avec.ces.technologies,.passez.directement.à.la.section."Utilisation.
d’Ajax.et.de.jQuery.pour.la.fonctionnalité.de.recherche".
Ajax
Ajax.–.l’acronyme.approximatif.d’Asynchronous JavaScript and XML.(JavaScript.et.XML.
asynchrones).–.inclut.généralement.au.moins.trois.composants :
•. une.communication.asynchrone.avec.le.serveur,.réalisée.à.l’aide.de.XMLHttpRequest ;
•. une. manipulation. du. DOM. (Document Object Model. ou. modèle. objet. de. document).
pour.l’affichage.dynamique.et.l’interaction ;
•. du.JavaScript.pour.ficeler.le.tout..
L’aspect.asynchrone.de.la.requête.est.le.composant-clé.d’Ajax.(et.de.toute.technologie.Internet.riche.en.la.matière),.car.c’est.lui.qui.donne,.dans.l’environnement.web,.cette.impression.
de.travailler.sur.une.application.native.extrêmement.réactive..Au.lieu.du.modèle.classique.
de.requête/réponse.qui.récupère.la.page.entière.en.opérant.un.aller-retour.complet.vers.le.
serveur,.l’asynchronie.se.contente.de.n’extraire.que.les.données.d’une.portion.sélectionnée.
de.la.page.(par.exemple,.en.vérifiant.la.disponibilité.d’un.nom.d’utilisateur.lors.de.l’ouverture.d’un.compte)..
Dans.le.site.Roma.Italia,.nous.avons.simulé.la.communication.asynchrone.avec.le.serveur.
pour.les.besoins.de.la.démonstration,.en.utilisant.du.code.JavaScript.et.en.extrayant.les.données.de.quelques.pages.PHP.statiques :
•. imageLoad.php.pour.les.images.du.diaporama ;
•. search.php.pour.la.fonctionnalité.de.saisie.semi-automatique.du.champ.de.recherche.
Étude de cas : Roma Italia
Interactivité avec Ajax et jQuery
Lorsque.j’ai.abordé.le.sujet.d’Ajax.au.cours.d’un.atelier.de.travail.il.y.a.quelques.années,.
je.n’ai.pas.vu.beaucoup.de.mains.se.lever.quand.j’ai.demandé.qui.avait.déjà.développé.des.
sites.et.des.applications.avec.Ajax..Si.je.devais.poser.la.même.question.aujourd’hui,.il.est.
probable.que.vous.seriez.nombreux.à.lever.le.bras..Il.en.irait.sans.doute.de.même.si.l’on.
posait.cette.question.à.propos.de.jQuery..
Ajax.et.jQuery.ont.en.effet.trouvé.leur.place.dans.les.sites.de.haut.niveau.comme.le.duo.de.
choix.pour.l’interactivité.riche.sur.le.Web..Les.deux.peuvent.évidemment.s’utiliser.l’un.sans.
l’autre,.mais.il.est.courant.de.les.employer.en.tandem..Des.technologies.émergentes,.comme.
Flex.d’Adobe.ou.Silverlight.de.Microsoft.prétendent.contester.la.suprématie.de.ce.duo,.mais.
j’ai.toutes.les.raisons.de.croire.qu’Ajax.et.les.frameworks.resteront.les.principaux.acteurs.du.
Web.pour.quelques.années.encore..
Cette.section.n’a.pas.pour.but.de.les.présenter.en.détail..Il.existe.de.nombreux.livres,.didacticiels.et.articles.de.blog.sur.le.sujet..J’aimerais.plutôt.proposer.une.brève.introduction.(ou.
un.rappel).à.Ajax.et.jQuery.et.montrer.comment.ils.sont.utilisés.dans.le.site.Roma.Italia..Si.
vous.êtes.déjà.familiarisé.avec.ces.technologies,.passez.directement.à.la.section."Utilisation.
d’Ajax.et.de.jQuery.pour.la.fonctionnalité.de.recherche".
Ajax
Ajax.–.l’acronyme.approximatif.d’Asynchronous JavaScript and XML.(JavaScript.et.XML.
asynchrones).–.inclut.généralement.au.moins.trois.composants :
•. une.communication.asynchrone.avec.le.serveur,.réalisée.à.l’aide.de.XMLHttpRequest ;
•. une. manipulation. du. DOM. (Document Object Model. ou. modèle. objet. de. document).
pour.l’affichage.dynamique.et.l’interaction ;
•. du.JavaScript.pour.ficeler.le.tout..
L’aspect.asynchrone.de.la.requête.est.le.composant-clé.d’Ajax.(et.de.toute.technologie.Internet.riche.en.la.matière),.car.c’est.lui.qui.donne,.dans.l’environnement.web,.cette.impression.
de.travailler.sur.une.application.native.extrêmement.réactive..Au.lieu.du.modèle.classique.
de.requête/réponse.qui.récupère.la.page.entière.en.opérant.un.aller-retour.complet.vers.le.
serveur,.l’asynchronie.se.contente.de.n’extraire.que.les.données.d’une.portion.sélectionnée.
de.la.page.(par.exemple,.en.vérifiant.la.disponibilité.d’un.nom.d’utilisateur.lors.de.l’ouverture.d’un.compte)..
Dans.le.site.Roma.Italia,.nous.avons.simulé.la.communication.asynchrone.avec.le.serveur.
pour.les.besoins.de.la.démonstration,.en.utilisant.du.code.JavaScript.et.en.extrayant.les.données.de.quelques.pages.PHP.statiques :
•. imageLoad.php.pour.les.images.du.diaporama ;
•. search.php.pour.la.fonctionnalité.de.saisie.semi-automatique.du.champ.de.recherche.