Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

Technologies AJAX W.JAKJOUD 236 Les événements - II • AJAX = Asynchronous JavaS

Technologies AJAX W.JAKJOUD 236 Les événements - II • AJAX = Asynchronous JavaScript And XML • Méthode de développement d'applications Web. • Utilisation conjointe d'un ensemble de technologies couramment utilisées sur le Web : • HTML (ou XHTML) et CSS pour la mise en forme • DOM, JS et Jquery pour l’affichage et l’interaction avec l'information presenter • XML ou JSON pour l’échange des données avec le serveur web AJAX: Kesko? W.JAKJOUD 237 Les événements - II • AJAX est le résultat d'un ensemble de technologies du web qui fonctionnent ensemble pour arriver à un objectif simple : rafraîchir une partie de page web sans recharger la page complète. AJAX: Kesko? W.JAKJOUD 238 Les événements - II • Une technique qui fait usage des éléments suivants: • HTML. • CSS pour la présentation de la page. • JavaScript pour les traitements locaux, • DOM (Document Object Model) qui accède aux éléments de la page ou du formulaire …. • ASP.NET, PHP ou un autre langage de scripts peut être utilisé coté serveur. AJAX: Kesko? W.JAKJOUD 239 Les événements - II • "Asynchronous" - asynchrone - :l'exécution de JavaScript continue sans attendre la réponse du serveur qui sera traitée quand elle arrivera. • En mode synchrone, le navigateur serait gelé en attendant la réponse du serveur. • Cela permet de modifier le contenu d'une page selon les commandes de l'utilisateur, à partir de données préalablement fournies ou avec un texte tapé par l'utilisateur. AJAX: Kesko? W.JAKJOUD 240 Les événements - II • Ajax Modifier partiellement la page affichée par le navigateur pour la mettre à jour sans avoir à recharger la page entière. • Par exemple le contenu d'un champ de formulaire peut être changé, sans avoir à recharger la page avec le titre, les images, le menu, etc. • Permet ainsi d'effectuer des traitements sur le poste client (avec JavaScript) à partir d'informations prises sur le serveur. Cela répartit la charge de traitement. Auparavant, toutes les modifications de pages étaient faites sur le serveur AJAX: Pourquoi? W.JAKJOUD 241 Les événements - II • Soit un article sur le web, qui possède son propre fil de commentaire • On désire que les visiteurs puissent commenter l’article et mettre à jour le fil de commentaire sans que la page soit rechargée entièrement. • Le but du jeu est donc qu'au moment de la soumissions du formulaire, une logique se mette en route en JS, qui fera que le commentaire sera ajouté en base de données, et qu'il soit automatiquement ajouté au fil, le tout sans recharger la page ! • C'est totalement possible. Et d’ailleurs c’est le principe des commentaires dans les resaux sociaux. AJAX: Exemple? W.JAKJOUD 242 Les événements - II • Pour interagir avec une base de données, jQuery va devoir appeler des scripts côté serveur, qui eux sont capables de le faire. • AJAX repose sur ce fondement même, la communication asynchrone d'un langage côté client, avec un langage côté serveur. • Pour mettre en place un appel AJAX sur son site, jQuery ne va plus suffir. Il faut en plus: • Un langage côté client : bien sûr JavaScript, avec (ou sans) jQuery. • Un langage côté serveur : ASP.net, PHP,…. AJAX: Comment? W.JAKJOUD 243 Les événements - II • AJAX permet alors d’appeler des scripts serveur et interagir avec le serveur directement depuis jQuery. • Le script coté serveur (ASP ou PHP ,...) appelé fais son travail : envoi de mail, insertion en base de données... et surtout, il renvoie un résultat que jQuery va intercepter. • Ce résultat, c'est ce que jQuery utilisera pour mettra à jour la page ! C'est comme ça que le fil de commentaire de Facebook fonctionne AJAX: Comment? W.JAKJOUD 244 Les événements - II Algorithme d’ajout du commentaire: • On écoute l'évènement clic sur le bouton d'envoi. • Lorsque cet évènement est réalisé, on envoie une requête HTTP en POST ou GET vers un script serveur depuis jQuery. • Le script serveur renvoie le commentaire posté dans un format léger. • On ajoute le commentaire au DOM avec jQuery. AJAX: Comment? W.JAKJOUD 245 Les événements - II • Grace à AJAX toute la puissance des scripts serveurs est à notre disposition. • On voit de plus en plus d'applications réalisées complètement grâce à AJAX, citons Google Maps pour l'exemple ! AJAX: Comment? W.JAKJOUD 246 Les événements - II XML • se situe au niveau du retour que le script serveur fait et que jQuery intercepte. • Si on souhaite ajouter un nouveau commentaire, mieux vaut que le retour soit un peu structuré pour le rendre plus facilement exploitable, XML est alors tout indiqué. • On peut décider de renvoyer du HTML ou même du texte pur, ou méme un autre format, le JSON qui est plus simple à traiter et plus léger. AJAX: Agencement des technologies? W.JAKJOUD 247 Les événements - II • Script Serveur • Le script serveur doit renvoyer quelque chose, et c'est ce quelque chose qu’on va devoir utiliser pour rafraîchir la page. AJAX: Comment? W.JAKJOUD 248 Les événements - II • JAVASCRIPT ou JQUery • La base de chaque appel AJAX est une requête HTTP. • JavaScript est suffisamment puissant et évolué pour permettre d'envoyer des requêtes HTTP. • Jquery ne fait que simplifier énormément l'appel et le suivi de cette requête HTTP, et, en prime, de faciliter énormément le traitement du retour que fait le script serveur. • jQuery simplifie la vie, même à tel point que réaliser un appel AJAX grâce à jQuery est presque une promenade. AJAX: Comment? W.JAKJOUD 249 Les événements - II • Mozilla, • Firefox, • Internet Explorer 6 >>, • Konqueror, • Safari, • Opera 9 >> AJAX : Navigateurs Compatibles W.JAKJOUD 250 Les événements - II • Les clients WEB de messagerie Gmail, Yahoo Mail, HotMail • Google Maps • FlickR, Picasa • Deezer • Youtube, Dailymotion • Myspace, Facebook AJAX : Clients W.JAKJOUD 251 Les événements - II • Ajax ne permet pas de faire des requêtes cross-domain • les requêtes doivent être sur le domaine courant. • Par exemple si l'adresse de la page est www.exemple.com/mapage.html, on peut faire une requête sur www.exemple.com/test.html mais pas sur www.sample.com/test.html ni même sur sample.exemple.com/test.html. AJAX : Securité W.JAKJOUD 252 Les événements - II • Ajax utilise un modèle de programmation comprenant d'une part la présentation, d'autre part les évènements. • Les évènements sont les actions de l'utilisateur, qui provoquent l'appel des fonctions associées aux éléments de la page. • L'interaction avec l'utilisateur se fait à partir des formulaires ou boutons html. • Ces fonctions JavaScript identifient les éléments de la page grâce au DOM et communiquent avec le serveur par l'objet XMLHttpRequest. AJAX : Fonctionnement W.JAKJOUD 253 Les événements - II • Pour recueillir des informations sur le serveur cet objet dispose de deux méthodes: • open: établit une connexion. • send: envoie une requête au serveur. • Les données fournies par le serveur seront récupérées dans les champs de l'objet XMLHttpRequest: • responseXml pour un fichier XML ou • responseText pour un fichier de texte brut. AJAX : Fonctionnement W.JAKJOUD 254 Les événements - II • Il faut créer un nouvel objet XMLHttpRequest, pour chaque fichier qu’on veut charger. • Il faut attendre la disponibilité des données, et l'état est donné par l'attribut readyState de XMLHttpRequest. • Les états de readyState sont les suivants (seul le dernier est vraiment utile): 0: non initialisé. 1: connexion établie. 2: requête reçue. 3: réponse en cours. 4: terminé. AJAX : Fonctionnement W.JAKJOUD 255 Les événements - II • Composant embarqué dans presque tous les navigateurs récents • Au début, il a été développé par Microsoft, en tant qu'objet ActiveX, pour Internet Explorer 5 • Il a ensuite été repris et implémenté sous Mozilla 1 Safari 1.2, Konqueror 3.4 et Opera 8. • En avril 2006, il a été proposé pour devenir une recommandation du W3C. AJAX : objet XmlHttpRequest W.JAKJOUD 256 Les événements - II • Création d’un objet XmlHttpRequest: • Pour Internet Explorer (avant IE7), il faut créer un ActiveX de la manière suivante : xhr = new ActiveXObject("Microsoft.XMLHTTP"); ou xhr = new ActiveXObject("Msxml2.XMLHTTP"); AJAX : objet XmlHttpRequest W.JAKJOUD 257 Les événements - II • Création d’un objet XmlHttpRequest: • Pour les autres navigateurs (ou à partir d'IE7), l'objet XMLHttpRequest est supporté nativement : xhr = new XMLHttpRequest(); AJAX : objet XmlHttpRequest W.JAKJOUD 258 Les événements - II • Création d’un objet XmlHttpRequest en JAVSCRIPT: var xhr = null; if(window.XMLHttpRequest || window.ActiveXObject){ if(window.ActiveXObject){ try{ xhr = new ActiveXObject("Msxml2.XMLHTTP"); }catch(e){ xhr = new ActiveXObject("Microsoft.XMLHTTP"); } }else{ xhr = new XMLHttpRequest(); } }else{ alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest..."); return;} AJAX : objet XmlHttpRequest W.JAKJOUD 259 Les événements - II • Création d’un objet XmlHttpRequest en JQuery: $.(document).ready(function(){ /* * Utilisons $.ajax pour créer une instance de XmlHttpRequest */ $.ajax(); }); AJAX : objet XmlHttpRequest W.JAKJOUD 260 Les événements - II • Création d’un objet XmlHttpRequest en JQuery: Soit la page HTML myPost.html avec une div ou les commentaires vont étre ajouté, uploads/Histoire/ m10-supportdecours-ajax.pdf