p. 1

[close]

p. 2

ajax développez pour le web 2.0 luc van lancker résumé ce livre s adresse à des lecteurs avertis qui souhaitent découvrir ce qui se cache derrière le terme très médiatisé d ajax et ce qu apporte cette nouvelle méthode de conception de sites web il sera également très utile aux développeurs professionnels pour leur donner une perception globale d ajax avant qu ils n abordent les kits de développement framework utilisés dans leur environnement de travail habituel il suppose des connaissances préalables en xhtml et css son objectif est d expliquer de façon simple et néanmoins précise les divers composants d ajax et de montrer comment leur utilisation conjointe peut aboutir à des applications web novatrices après une présentation générale d ajax l auteur détaille javascript notions fondamentales fonctions et méthodes conditions et boucles gestionnaire d évènements formulaires manipulation des chaînes de caractères tableaux le xml présentation syntaxe les xsl le dom présentation les noeuds l accès aux objets aux attributs l objet xmlhttprequest présentation propriétés et méthodes les deux derniers chapitres proposent la mise en application des composants étudiés dans les chapitres précédents pour réaliser de l ajax ainsi que des exemples de développements cet ouvrage est écrit dans un style concis et précis avec de nombreux exemples significatifs et illustrations pour donner au lecteur une vision juste des possibilités d ajax les exemples de code utilisés dans l ouvrage sont en téléchargement sur le site de l éditeur l auteur depuis les débuts d internet luc van lancker enthousiasmé par l idée de communication universelle que véhicule ce concept s investit complètement dans ce domaine après le html le xhtml les css il était naturel qu il se passionne aujourd hui pour l ajax formateur expérimenté et grand pédagogue il a su transmettre au lecteur toute sa passion pour cette nouvelle technologie ce livre numérique a été conçu et est diffusé dans le respect des droits d auteur toutes les marques citées ont été déposées par leur éditeur respectif la loi du 11 mars 1957 n autorisant aux termes des alinéas 2 et 3 de l article 41 d une part que les copies ou reproductions strictement réservées à l usage privé du copiste et non destinées à une utilisation collective et d autre part que les analyses et les courtes citations dans un but d exemple et d illustration toute représentation ou reproduction intégrale ou partielle faite sans le consentement de l auteur ou de ses ayants droit ou ayant cause est illicite alinéa 1er de l article 40 cette représentation ou reproduction par quelque procédé que ce soit constituerait donc une contrefaçon sanctionnée par les articles 425 et suivants du code pénal copyright editions eni © eni editions all rigths reserved 1-

[close]

p. 3

principe et définition le terme ajax est apparu pour la première fois le 18 février 2005 dans un essai de james garret intitulé ajax une nouvelle approche pour les applications web ajax est un acronyme d asynchonous javascript and xml javascript et xml asynchrone qui désigne une approche innovante dans la conception de pages web dont l objectif est d optimiser leur interactivité et leur confort d utilisation ajax n est pas une technologie nouvelle c est un terme synthétique qui désigne l utilisation conjointe dans les pages web de différentes technologies ainsi ajax incorpore q le xhtml et les feuilles de style css le javascript le document object model dom l objet xmlhttprequest le xml et le xsl qqqq le xhtml et les feuilles de style css prennent en charge la présentation des pages de façon standardisée le javascript qui marque ainsi son grand retour dans l univers de la publication sur le web est omniprésent dans les applications ajax les objets du document sont pris en charge selon le document object model le dom du consortium w3c l objet xmlhttprequest permet de lancer des requêtes de la page web vers le serveur pour y récupérer des fichiers son fonctionnement permet d effectuer ces requêtes de façon asynchrone soit en arrièreplan de la page et de façon complètement transparente pour l utilisateur les fichiers récupérés sont au format xml les apports de ce format dans le domaine de l échange des données n est plus à présenter il s agit donc de techniques du javascript au xml en passant par le dom et l objet xmlhttprequest qui sont éprouvées standardisées et maîtrisées ce qui est assez prometteur quant à la compatibilité d ajax avec les navigateurs actuellement utilisés sur le web mais c est dans l utilisation conjointe de ces différentes technologies que réside l originalité du fonctionnement d ajax que nous appellerons par la suite le modèle ajax © eni editions all rigths reserved 1-

[close]

p. 4

ce modèle ajax se décompose comme suit q la page web s affiche comme à l accoutumé dans le navigateur appelé aussi le client la moindre interaction de l utilisateur par exemple l encodage d un formulaire ou le cliquer/déplacer d un élément est prise en charge par la gestion des événements de javascript le code javascript de la page initie une requête xmlhttprequest vers un fichier xml situé sur le serveur le fichier xml réclamé est renvoyé vers le navigateur de l utilisateur il est alors pris en charge par le dom et toujours par le javascript pour être traité et affiché de façon dynamique dans la page initiale qqqq toute cette procédure s est déroulée de façon transparente pour l utilisateur sans nécessiter le rechargement fastidieux de la page le modèle ajax permet ainsi de sortir du schéma traditionnel de la conception de pages web qui necessitait que chaque nouvelle information réclame une nouvelle page 2 © eni editions all rigths reserved

[close]

p. 5

avec ajax une nouvelle information peut être récupérée dans un petit fichier situé sur le serveur ce fragment d information peut alors être pris en charge et affiché dans une zone de la page et compléter ainsi la page initiale en évitant l actualisation de la page et la perte de temps que cela entraîne les applications gagnent ainsi en fluidité en outre l ergonomie s en trouve améliorée car l utilisateur peut rester concentré sur la lecture de la page ou la tâche accomplie le schéma traditionnel de la relation clientserveur mis en place dès les origines du web par la caractéristique hypertexte des pages web est ainsi mis en question selon celuici la plupart des interactions de l utilisateur comme le clic sur un lien ou l envoi d un formulaire déclenchent une requête http vers le serveur web ce dernier après le traitement éventuel des données retourne une nouvelle page html ou xhtml au client la session de l utilisateur est alors une succession de requêtes http et de réponses du serveur cet allerretour incessant du client vers le serveur affiche à chaque fois une nouvelle page dans le navigateur avec le schéma ajax la page web initiale comprend une part importante de code ajax qui permet soit de prendre en charge une série d opérations comme la validation de formulaires soit d initier des requêtes xmlhttprequest pour toutes informations complémentaires nécessaires les données ainsi retournées viennent s incorporer de façon asynchrone dans la page initiale en apportant une facilité d utilisation et une réactivité inconnues à ce jour sur la toile le schéma traditionnel © eni editions all rigths reserved 3-

[close]

p. 6

le schéma ajax la puissance du concept ajax est telle que l on peut envisager des applications web qui se rapprochent des applications logicielles appelées aussi applications de bureau ce qui modifie complètement la richesse de l interface et la potentialité des services des pages web mais l enjeu d ajax va plus loin que ces considérations techniques son fonctionnement réactif permet de reconsidérer totalement l ergonomie des sites web alors que pendant près d une décennie la réalisation de sites plaisants à l oe il était d actualité à présent la conception de sites plaisants à être utilisés est envisageable l utilisateur devient ainsi l élément central des préoccupations des développeurs la définition d ajax n est cependant pas à prendre à la lettre l approche ajax est dans la pratique plus souple soulignons par exemple que l objet xmlhttprequest permet de récupérer non seulement des fichiers xml mais aussi de simples fichiers de texte au sens informatique du terme cette caractéristique élargit considérablement le champ des possibilités offertes aux développeurs le concept ajax est mis en avant et soutenu par google de nombreuses applications signées google en reprennent l approche on songe ainsi à google maps et google suggest que nous allons aborder au point suivant il met également à la disposition des concepteurs un kit de développement en open source le fait qu une figure emblématique du web comme google s investisse ainsi dans les applications ajax ne peut que susciter ou renforcer l intérêt des développeurs de sites web 4 © eni editions all rigths reserved

[close]

p. 7

exemples sur le web 1 google maps google maps est un service en ligne gratuit de cartes géographiques calcul d itinéraires et de vues satellites ce site permet à partir de l échelle d un continent ou d un pays de zoomer par un double clic ou par l utilisation de la roulette de la souris jusqu à l échelle d une rue on peut aussi basculer d un simple clic de la carte classique avec le nom des rues des quartiers et des villes à des images satellites de la même localisation il peut être consulté dans sa version française à l adresse http maps.google.fr en quoi le site google maps reprendil l approche ajax il faut d abord savoir qu une carte est divisée en petits carrés pour les cartes classiques ces petits morceaux au format png ont une dimension de 256 x 256 pixels et un nombre de couleurs limité à 256 ce qui en fait des fichiers de taille réduite et ce qui implique un temps de transfert très faible © eni editions all rigths reserved 1-

[close]

p. 8

lorsque l utilisateur déplace la carte dans un sens par le simple glissement du curseur de la souris cette action est prise en charge par le javascript celuici récupère la longitude la latitude et l intensité du zoom des carrés qui devront être dévoilés l objet xmlhttprequest envoie une requête vers le serveur pour réclamer les petites images manquantes À la réception le dom se chargera de les afficher dynamiquement à l endroit adéquat parfaitement alignées les unes avec les autres toute cette opération se fait sans rechargement de la page sans modification de l adresse de la page sans apparition de la barre d avancement du téléchargement dans la barre d état et sans réclamer l installation d un plugin spécifique 2 google suggest l interface est proche de celle de la page d accueil habituelle de google cependant cet outil suggère automatiquement une liste de 10 mots ou expressions qui se rapprochent de ce qui est encodé dans la zone de texte consacrée aux motsclés cet outil affiche également en face de chacun des mots ou expressions le nombre de résultats trouvés dans la banque de données de google l utilisateur peut ensuite effectuer une sélection dans cette liste de suggestions et continuer sa recherche sur google À chaque encodage d une lettre cette liste de 10 expressions est recréée et affichée de façon dynamique ce site en version beta est consultable à l adresse labs.google.com/suggest la vitesse de fonctionnement est assez surprenante en effet google suggest dialogue avec les serveurs de google pendant que l internaute tape sa requête et met à jour l affichage de façon quasi instantanée et toujours sans nécessiter un rafraîchissement de la page le fonctionnement d ajax dans cette application peut être décomposé comme suit q l encodage dans la zone de texte est récupéré par javascript une requête xmlhttprequest est initiée avec la valeur de l encodage comme paramètre ici le mot ajax le serveur retourne les informations demandées sous forme de deux tableaux array javascript new array ajax tutorial ajax tutorials ajax examples ajaxian ajax framework ajax php ajax example ajax4jsf ajax asp.net ajax amsterdam new array 25,800,000 results 51,400,000 results 3,790,000 results 2,230,000 results 33,900,000 results 138,000,000 results 17,800,000 results 199,000 results 9,170,000 results 3,530,000 results le dom entre alors en action pour créer une liste déroulante de 10 lignes javascript se charge quant à lui de répartir les données du tableau array dans chaque ligne q q q nous proposons dans le chapitre ajax par l exemple un exemple appelé une suggestion d encodage qui s inspire largement de la façon de procéder de google suggest 2 © eni editions all rigths reserved

[close]

p. 9

3 google agenda google agenda comme son nom l indique permet de gérer votre emploi du temps en toute simplicité de façon très conviviale et colorée encoder des événements modifier votre planning d un simple cliquer/glisser de la souris partager avec votre permission votre agenda de disposer de rappels d événements par un email par une fenêtre popup ou par un message sur votre téléphone portable voici quelques unes des fonctionnalités très variées de google agenda une démonstration de ce nouveau service http www.google.com/intl/fr/googlecalendar/tour.html en ligne est disponible à l adresse le service en luimême est accessible à partir de la page d accueil de google et nécessite l ouverture gratuite d un compte le nombre important de fonctionnalités de google agenda illustre bien la richesse des applications ajax cellesci permettent de mettre en place des sites qui n ont plus rien à envier aux applications logicielles 4 google document et tableur créer éditer ou encore partager des documents demande toujours l installation sur notre système d un logiciel en général microsoft office ou openoffice et si on pouvait faire tout cela avec seulement un navigateur web google avec document et tableur propose une solution très alléchante qui va nous permettre de disposer d une application bureautique accessible depuis n importe quel poste relié à l internet sans aucune installation à effectuer © eni editions all rigths reserved 3-

[close]

p. 10

google document et tableur permet donc de créer rapidement des documents et surtout de les partager pour faciliter le travail collaboratif le tout peut être enregistré au format html rtf word openoffice et pdf et ce n est pas seulement un traitement de texte qui est à votre disposition mais aussi un tableur avec la mise en forme de formules même complexes des bruits circulent qu un outil de présentation du même style que powerpoint de la suite bureautique office de microsoft serait bientôt disponible une visite guidée vous attend à l adresse http www.google.com/googleds/intl/fr/tour1.html le service en luimême est accessible à partir de la page d accueil de google et nécessite l ouverture gratuite d un compte 4 © eni editions all rigths reserved

[close]

p. 11

avantages et inconvénients il ne faut pas se laisser aveugler par l effet ajax tous les sites ne se prêtent pas à cette approche surtout que développer un site en ajax sera plus difficile et plus long que les méthodes de publication utilisées à ce jour pour vous aider dans votre choix voici quelques éléments qui vous aideront à prendre la bonne décision 1 avantages q ajax c est principalement la révolution asynchrone la technique qui consiste à charger en arrièreplan des éléments de réponse aux interactions de l utilisateur est au coe ur du modèle ajax il est certain que le potentiel est énorme et qu il n est à ce jour à peine exploré gageons que la créativité des développeurs y trouvera un terrain où elle pourra pleinement s exprimer l interface est plus réactive car seulement une petite partie est mise à jour donnant ainsi l impression à l utilisateur que les changements se réalisent instantannément le temps d attente de l utilisateur est réduit car il n est plus nécessaire de recharger toute la page pour obtenir une nouvelle information les applications ajax apportent ainsi une fluidité inhabituelle aux pages web certains qualifient même ajax comme étant le web des impatients je gage que certains lecteurs vont se reconnaître le temps de transfert entre le client et le serveur est considérablement réduit car il lui suffit de transférer les éléments de la réponse au lieu d envoyer toute la page avec des éléments le plus souvent redondants un site ajax bien réalisé sera agréable d utilisation pour le visiteur ce qui ne peut que valoriser en termes d image la communication avec l utilisateur la maintenance du site sera plus aisée car grâce à l architecture mise en place par ajax il suffira de ne mettre à jour que des fichiers de taille réduite parfois simplement en format texte cette mise à jour pourra même être confiée à des personnes dont les compétences sont plus orientées bureautique que conception de sites web qqqqq 2 inconvénients q même si ajax utilise des composants connus comme le javascript le xml le dom et l objet xmlhttprequest son code est pointu et délicat à mettre en place le fait de développer une application ajax peut augmenter sensiblement le temps de conception et donc le coût il est admis de façon unanime qu ajax est plus difficile à mettre en place qu une application web classique à cause de l utilisation conjointe des différentes technologies ajax comporte beaucoup de javascript les utilisateurs qui ont désactivé la prise en charge du javascript par leur navigateur n ont pas accès aux applications ajax on peut raisonnablement estimer que cette population est faible mais elle existe le concept ajax est orienté vers l utilisateur cependant par divers aspects il risque de désorienter l utilisateur moyen comme certaines parties de la page ne correspondront plus à la page initiale les fonctions de l historique et de la mise en favoris du navigateur risquent de ne pas être représentatives de l état actuel de la page de plus cliquer sur le bouton précédent du navigateur peut n avoir aucun effet puisque l adresse de la page est restée inchangée l accessibilité des applications ajax avec les systèmes de lecture d écran utilisés par les personnes visuellement déficientes est assez problématique déjà la prise en compte du javascript est très partielle et souvent aléatoire en outre vient s ajouter l objet xmlhttprequest qui modifie en cours de lecture le contenu de la page ainsi au moins dans un premier temps il importe de prévoir une page alternative pour les personnes ayant un handicap visuel comme l objet xmlhttprequest peut envoyer des requêtes du navigateur vers le serveur de façon transparente pour l utilisateur certaines personnes s inquiètent quant au respect de la vie privée de l internaute on peut comprendre leur point de vue mais internet est et restera un système ouvert dans toutes les implications du terme la limitation de l objet xmlhttprequest qui ne peut envoyer ou recevoir des requêtes qqqq © eni editions all rigths reserved 1-

[close]

p. 12

que vers le domaine du site web qui contient la page pourra partiellement les rassurer q il est difficile à l heure actuelle courant 2007 d avoir un avis tranché en matière de sécurité informatique des applications ajax comme toujours lors de l apparition d une nouvelle technologie des détracteurs se font entendre tandis que d autres se veulent rassurant il est un fait que le concept ajax se base sur des composants connus et que seul le nombre de requêtes entre le navigateur et le serveur risque d augmenter dans les applications ajax pour le reste il est simplement trop tôt pour se prononcer le référencement des pages en ajax n est pas simple à réaliser comme pour les sites en javascript et les pages en flash le référencement réclamera toutes les attentions du concepteur l indexation par les moteurs de recherche n est pas moins problématique car avec le système ajax une même page peut selon les actions de l internaute avoir plusieurs contenus différents q 2 © eni editions all rigths reserved

[close]

p. 13

Évolution ou révolution s il y a une question qui a alimenté et qui alimentera encore les forums de discussion c est bien cellelà tentons de faire le point au sujet des arguments développés 1 Évolution il est évident qu ajax est une façon d utiliser plusieurs technologies préexistantes le javascript omniprésent dans ajax est ce vilain petit canard de la publication sur le web inventé en 1996 par netscape pauvrement normalisé par le ecmascript avec ses bugs et ses incompatibilités il marque pourtant avec le concept ajax son retour sur le devant de la scène l utilisation conjointe des feuilles de style css du javascript et du dom sur fond de page html ou xhtml n est pas sans rappeler la définition du dhtml qui lui aussi prônait déjà l interactivité des pages web l objet xmlhttprequest ne fait qu apporter au dhtml la possibilité de récupérer des données du serveur et en ce qui concerne l objet xmlhttprequest il n est pas récent lui non plus car il était déjà été implanté dans internet explorer 5.0 en 1999 et passa tout ce temps inaperçu auprès des développeurs ajax et le web 2.0 ne seraient alors qu une évolution naturelle de ce formidable outil qu est la web après 15 années d existence et le web qui s est implanté dans la vie quotidienne connaîtra encore bien des évolutions ou des mutations 2 révolution pourtant on ne peut que s étonner audelà du battage médiatique du formidable mouvement de synergie créé autour de l approche ajax par les professionnels du web et d internet la mise en place en février 2006 de openajax alliance consortium de firmes réputées comme adobe backbase bea dojo foundation eclipse foundation google ibm novell oracle sap et red hat pour promouvoir la technologie ajax en est une preuve À la vue des exemples présentés lors du présent chapitre il faut bien admettre que la mutation des pages web traditionnelles en véritables platesformes applicatives va modifier de façon significative les usages de la toile avec la richesse des interfaces avec la multiplication des fonctionnalités avec les avancées de l ergonomie et de l usabilité des sites c est assurément une nouvelle façon de naviguer qui s instaure la véritable nouveauté d ajax ne réside pas tant dans son aspect technologique mais bien dans la nouvelle stratégie mise en place c est la première fois depuis l apparition du web que l utilisateur ou autrement dit le consommateur est placé au centre des préoccupations des développeurs ajax permet la conception de sites réactifs ergonomiques intuitifs axés sur le consommateur du web et ses nouvelles attentes d utilisation du web © eni editions all rigths reserved 1-

[close]

p. 14

prérequis l objectif de cet ouvrage après avoir parcouru les éléments nécessaires est de faire percevoir au lecteur le fonctionnement concret et les énormes potentialités des applications ajax force est de constater après la lecture du chapitre présentation générale d ajax que du xhtml en passant par les feuilles de style css le javascript le xml le dom et l objet xmlhttprequest les différentes technologies ne manquent pas afin d éviter de proposer une encyclopédie de la conception de pages web il semble judicieux de limiter les matières abordées dans ce livre À ce stade de l intérêt du lecteur pour les nouvelles perspectives de la publication sur le net il paraît raisonnable de penser que celuici possède déjà des notions basiques ou avancées du langage html ou xhtml ainsi que des feuilles de style css ajax met en oe uvre à travers différents composants comme le dom et l objet xmlhttprequest un code pointu et a priori complexe qui réclamera toute votre attention une certaine aisance dans le langage html et les feuilles de style css ne peut que faciliter l étude du lecteur pour parfaire vos connaissances sur le xhtml et les feuilles de style css vous pouvez vous reporter à l ouvrage xhtml 1 et css 1 et 2.1 les nouveaux standards du web aux Éditions eni ressources informatiques du même auteur l a connaissance de langage html ou xhtml et des feuilles de style css est un prérequis indispensable à une étude fructueuse de cet ouvrage consacré à ajax tous les exemples du livre sont écrits en xhtml 1.0 de type transitional © eni editions all rigths reserved 1-

[close]

p. 15

limites de ce livre la lecture du chapitre présentation générale d ajax a fait découvrir que l approche ajax permettait de traiter dans le navigateur de l utilisateur application côtéclient des fichiers externes à la page présents sur le serveur application côtéserveur les données de ces fichiers externes peuvent être traitées par des langages de programmation comme par exemple le php et l asp ce qui élargit encore et de façon considérable les compétences réclamées pour produire des pages web en ajax À ce niveau la frontière entre le lecteur averti et le professionnel nous semble franchie ainsi nous limiterons l étude de cet ouvrage sur ajax à des applications côtéclient qui récupéreront des fichiers externes au format xml ou texte et qui les afficheront de façon asynchrone dans la page web par ailleurs la vague d intérêt suscitée par ajax fait fleurir de nombreux assistants logiciels à la production d applications ajax appelés frameworks qui exploitent certains aspects répétitifs du code mis en place par celuici là aussi il s agit d outils professionnels qui ne seront pas abordés ici © eni editions all rigths reserved 1-

[close]