La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

BURInternet et HTML AJAX

Présentations similaires


Présentation au sujet: "BURInternet et HTML AJAX"— Transcription de la présentation:

1 BURInternet et HTML AJAX

2 PWB Présentation AJAX: (Asynchronous Javascript And XML) nest pas une technologie à part mais un regroupement de plusieurs technologies déjà existantes. AJAX regroupe deux technologies de base; Javascript et XML. Cependant il recourt très souvent à dautres technologies à savoir HTML, CSS, DOM (Document Object Model) et un langage de script coté serveur tel que PHP, ASP, CGI… Bref, lutilisation dAJAX nécessite une connaissances préalable de lensemble des technologies mentionnées. AJAX a pour objectif majeur loptimisation des ressources sur Internet. En effet, les pages dynamiques classiques qui reposent entièrement (ou partiellement) sur des scripts coté serveur nécessitent un rafraichissement après chaque requête passée au serveur Web. Ce dernier constitue alors le nœud central du trafic (traitement). Le but dAJAX est de soulager les serveurs en impliquant le client au processus du traitement (Partage du traitement entre le client et le serveur). De cette façon le serveur remet les données au client et ce dernier les traite en utilisant un script coté client qui est, dans ce cas, le JavaScript. Un avantage majeur est alors constaté. Il sagit du rafraichissement partiel de la page Web.

3 PWB Approche traditionnelle Html Serveur HTTP Requête 1 Génération du document pour la requête 1 Réponse 1 Html Requête 2 Génération du document pour la requête 2 Réponse 2 … Client

4 PWB Approche Asynchrone AJAX Html et Script Serveur HTTP Requête 1 Génération du document pour la requête 1 Réponse 1 Client Script Requête 2 Données Réponse 2 Génération du Document pour la requête 2 … Requête 3 Données Réponse 3 Génération du Document pour la requête 3

5 PWB Principe dAJAX AJAX repose sur lobjet XMLHttpRequest. Cest un objet développé par Microsoft qui la aussi inclus dans son fameux navigateur Internet Explorer à partir de la version 4.0 sous la forme dun ActiveX. Il a ensuite été adopté par les autres navigateurs tel que Mozilla, Safari… Lobjet XMLHttpRequest (ou lActiveX sur IE) est accessible par JavaScript. 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 (souvent 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, boutons ou toute autre objet html. Ces fonctions JavaScript identifient les éléments de la page grâce au DOM et communiquent avec le serveur par l'objet XMLHttpRequest. Noter qu'il faut instancier un objet XMLHttpRequest, pour chaque fichier que vous voulez charger.

6 PWB XMLHttpRequest - I XMLHttpRequest permet d'interagir avec le serveur, grâce à ses méthodes et ses attributs. Attributs readyState : Renvoie un entier compris entre 0 et 4 indiquant létat de transfert entre client et serveur: 0: transfert non initialisé. 1: connexion établie avec le serveur (requête en cours denvoie). 2: requête reçue par le serveur. 3: réponse en cours de transfert vers le client. 4: terminé. Les données sont disponibles chez le client. Létat qui nous intéresse est sans doute létat 4 où les données qui seront traités par le navigateur (scripts JavaScript) sont disponible chez le client. Tout autre état (de 0 à 3) sont traduits par une attente.

7 PWB XMLHttpRequest - II status: Renvoie un identifiant (entier) qui permet de savoir si laccès au document se passe comme il fau. Quelques valeurs spéciales: 200: ok (le document cherché est disponible sur le serveur) 404: la fameuse erreur HTTP qui signifie que le document na pas été trouvée sur le serveur. 500: Problème de fonctionnement interne du serveur responseText : Renvoie le résultat (contenu du document chargé) sous forme dune chaîne de caractères que lon peut traiter avec JavaScript sur le navigateur (client). responseXML: Renvoie le résultat en format XML. Les méthodes de DOM permettent de les extraire et les réorganiser. onreadystatechange: attribut ou événement activée à chaque fois quun changement détat (changement de la valeur de lattribut readyState) est détecté (le préfixe on familier en JavaScript).

8 PWB XMLHttpRequest - III Méthodes open: permet douvrir le fichier désiré sur le serveur. Il possède trois paramètres obligatoires Methode: GET ou POST URL: Chemin relatif ou absolu du fichier sur le serveur Valeur booléenne (True ou False) : désigne si le mode utilisé est synchrone ou asynchrone; True pour Asynchrone. send: Permet denvoyer les paramètres au serveur sous forme dune chaîne de caractères qui respecte la structure suivante: paramètre1=valeur1¶mètre2=valeur2&... Si la méthode utilisée est GET alors send contient la chaîne « null » setRequestHeader: cette méthode permet de définir le codage des données passées au serveur. Elle est utilisée avec la méthode POST. La syntaxe compète est la suivante: setRequestHeader(Content-Type,application/x-www-form-urlencoded)

9 PWB Construire une requête - I Création dune instance Cest une instance de classe classique mais il faut évaluer le type exact de lobjet XMLHttpRequest supporté par le navigateur. Pour cela la syntaxe standard de linstance est la suivante: xhr=false; try { xhr= new XMLHttpRequest() ; } catch(e) { try { xhr=new ActiveXObject(Msxml2.XMLHTTP); } catch(e1) { try {xhr=new ActiveXObject(Microsoft.XMLHTTP); } } On utilise les exceptions de Javascript try … catch sinon on peut utiliser les structures de contrôle if … else.

10 PWB Construire une requête - II Création dune instance - suite xhr=false; if (window.XMLHttpRequest) xhr=new XMLHttpRequest(); else { if (window.ActiveXObject) xhr=new ActiveXObject(Microsoft.XMLHTTP); else alert (Objet non supporté par votre navigateur!); } En utilisant cette méthode on se contente de déclarer lobjet ActiveX de type Microsoft.XMLHTTP car cest le seul supporté par les navigateurs IE actuels.

11 PWB Construire une requête - III Création dune instance - suite Dans le cas général trois cas de figures sont envisageables: -Les navigateurs de la famille Mozilla, Safari qui supportent lobjet XMLHttpRequest() -Les anciens navigateurs Microsoft (Internet Explorer) qui supportent lobjet ActiveXObject(Msxml2.XMLHTTP) -Les nouvelles versions du navigateur Microsoft (IE) qui supportent la nouvelle version de lActiveXObject ActiveXObject(Microsoft.XMLHTTP) Mais dans la pratique on na besoin que de créer lun des deux objets XMLHttpRequest() ou ActiveXObject(Microsoft.XMLHTTP) car ce sont les deux objets supportés par les navigateurs standardisés actuels.

12 PWB Construire une requête - IV Attendre la réponse du serveur - I Le traitement de la réponse et les traitements qui suivent sont inclus dans une fonction, et la valeur de retour de cette fonction sera assignée à l'attribut onreadystatechange de l'objet précédemment créé. xhr.onreadystatechange = function() { If ((xhr.readyState==4) && (xhr.status==200)) Traitement; else Attendre; } Le traitement consiste généralement à lapplication de la réponse du serveur dans un endroit repéré par la balise à laide dun traitement DOM. Il ressemble souvent à quelque chose comme: document.getElementById(id-de-div).innerHTML=xhr.responseText;

13 PWB Construire une requête - V Attendre la réponse du serveur - II Il est possible dextraire la réponse sous la forme XML à laide de responseXML, et en appliquant les DOM on peut extraire les données décrites dans le document chargé depuis le serveur. En attendant que les données soient chargées sur le client il faut rassurer linternaute que la requête quil a passé au serveur est entrain dêtre exécutée. En effet, AJAX procède à un chargement partiel de la page (Cest lobjectif principal) ce qui donne limpression que rien de spécial ne se passe sur le navigateur alors quen réalité les données sont entrain dêtre acheminées vers le client. Cest la raison pour laquelle le traitement dattente doit être perçu par linternaute. Par exemple, laffichage du message « Veuillez patienter SVP! » ou un simple affichage dune Gif animée, dailleurs cest la méthode la plus utilisée par les sites Web qui exploitent AJAX.

14 PWB Construire une requête - VI Passer la requête au serveur - I Le passage de la requête sur le serveur est assuré par deux méthodes principales open et send. open ( Méthode, URL du document, true ou false ) ; Méthode: POST ou GET. POST permet de transférer les paramètres dans lentête du document tandis que GET utilise lURL en tant que moyen de transfert. URL: Chemin du fichier à charger sur le client. Le fichier peut être XML (le cas idéal), texte, html, php… Le plus courant est dutiliser un langage de script coté serveur pour communiquer avec une base de données. Valeur booléenne (True ou False): Cette valeur spécifie le mode utilisé; synchrone ou asynchrone. True désigne le mode asynchrone. Le mode synchrone fige le navigateur lors dun transfert. Celui-ci nest accessible par linternaute quaprès lachèvement de ce transfert.

15 PWB Construire une requête - VII Passer la requête au serveur - II Le mode asynchrone permet de rendre accessible le navigateur même lors dun transfert. Le navigateur peut cliquer sur un lien, actualiser la page, écrire dans une zone de texte… Bref, le navigateur nest pas figé même avant lachèvement de laction en cours. send ( paremètres ) ; send permet de passer des paramètres au serveur. Si la méthode utilisée est GET le paramètre envoyé par la méthode send est null. Dans le cas de POST, la page peut envoyer des paramètres personnalisées sous forme dune chaine de caractères telle que: param1=valeur1¶m2=valeur2. En plus, pour la méthode poste, une troisième méthode est obligatoire. Cest la méthode: setRequestHeader(Content-Type, application/x-www-form-urlencoded); Cette méthode permet de définir le type de codage à utiliser pour le transfert des paramètres au serveur.

16 PWB Inconvénients dAJAX Malgré ses avantages incontestables, AJAX est atteint tout de même par des inconvénients. En fait, Toute cette technologie est basée sur lutilisation de JavaScript pour procéder au traitement au coté du client. Si JavaScript est désactivé alors rien ne marchera. En plus lobjet XMLHttpRequest est un objet supporté par, pratiquement, tous les navigateurs standardisés (conformes aux règlements du W3C). Cependant, il existe des navigateurs qui ne le supportent pas. Dans ce cas lAJAX ne pourra pas fonctionner. Lincompatibilité des navigateurs oblige souvent le développeur à multiplier les traitements sur la page Web. Ces traitements sont généralement liés aux styles CSS qui améliorent le design des exploits de lAJAX. Le développeur est alors tenu à tester le comportement de ses pages sur les différents types de navigateur standardisés à savoir, Internet Explorer, Mozilla, Safari, Opera… Un autre inconvénient dAJAX réside dans la difficulté de publication des mots clés pour le référencement (voir le chapitre suivant: Web Marketing).

17 PWB En Pratique Dans la pratique, un site en AJAX doit être accompagné dune version classique du même site accessible par les anciens navigateurs ou les navigateurs non standardisés qui ne supportent pas lobjet XMLHttpRequest. La commutation dune version de site à une autre se fait avec des simples scripts en JavaScript qui vérifient la compatibilité du navigateur et qui décident laquelle le navigateur peut charger.

18 PWB 18 JSON Le XML est une calamité à parser en JavaScript Le format JSON est beaucoup plus approprié JSONJSON (JavaScript Object Notation) est un format de données générique qui utilise la notation des objets JavaScript pour transmettre de linformation structurée Exemple : {"menu": { "id": "file", "value": "File", "popup": { "menuitem": [ {"value": "New", "onclick": "CreateNewDoc()"}, {"value": "Open", "onclick": "OpenDoc()"}, {"value": "Close", "onclick": "CloseDoc()"} ] } }}

19 PWB 19 Comment utiliser le format JSON Coté client JSON faisant partie de la norme JavaScript. Le contenu d'un fichier JSON, ou la définition de données dans ce format sont assignés à une variable, laquelle devient un objet du programme. Coté serveur Les fichiers au format JSON s'utilisent dans différents langages de programmation, notamment PHP et Java grâce à des parseurs qui permettent d'accéder au contenu, et éventuellement de le convertir en classes et attributs, dans ce langage. L'échange de données inclusion directe du fichier dans la page HTML au même titre qu'un fichier.js de JavaScript. Ou emploi de XMLHttpRequest.

20 PWB 20 Exemple dutilisation de JSON Le code XMLHttpRequest: var req = new XMLHttpRequest(); req.open("GET", "fichier.json", true); req.onreadystatechange = monCode; req.send(null); Le code JavaScript: function monCode() { if (req.readyState == 4) { var doc = eval('(' + req.responseText + ')'); } } Utilisation des données: var nomMenu = document.getElementById('jsmenu'); // trouver un champ nomMenu.value = doc.menu.value; // assigner une valeur au champ Accéder aux données : doc.commands[0].title // lire la valeur de "title" dans le tableau doc.commands[0].action // lire la valeur de "action" dans le tableau

21 PWB 21 Les premiers « Frameworks » Comme il était devenu difficile de coder du javascript pour tous les navigateurs, sont apparus des « Frameworks » permettant une spécification unique, indépendante du navigateur PrototypeJS - script.aculo.us Mootools - mootools.net DoJo Toolkit - Yahoo UI - developer.yahoo.com/yui/ ExtJS - UIZE -

22 PWB 22 JQuery Une bibliothèque javascript open-source et cross-browser Elle permet de traverser et manipuler très facilement l'arbre DOM des pages web à l'aide d'une syntaxe fortement similaire à celle d'XPath. JQuery permet par exemple de changer/ajouter une classe CSS, créer des animations, modifier des attributs, etc. Gérer les événements javascript Faire des requêtes AJAX simplement

23 PWB 23 une simple bibliothèque à importer Disponible sur le site de Jquery Ou directement sur Google code

24 PWB 24 La fonction jQuery() jQuery repose sur une seule fonction : jQuery() ou $(). Cest une fonction JavaScript Elle accepte des paramètres Elle retourne un objet $ : Syntaxe issue de « Prototype »

25 PWB 25 $('anything') $ accepte un sélecteur CSS en argument $ accepte des ID : $('#nomID') retourne un élément document.getElementById $ accepte des classes : $('.nomClasse') retourne tous les éléments qui correspondent à cette classe $ accepte plusieurs sélecteurs $('.article,.nouvelles,.edito')

26 PWB 26 $(anything) $ accepte des sélecteurs spécifiques : $(':radio'), $(':header'), $(':first-child') des sélecteurs en forme de filtres : $(':checked'), $(':odd'), $(':visible') plus fort: $(':contains(du texte)') des attributs $('a[href]'), $('a[href^=http://'), $('img[src$=.png]'

27 PWB 27 Exemple Bonjour disparition

28 PWB 28 jQuery: un objet les méthodes s'appliquent généralement à tous les éléments sélectionnés $('.classe').hide(); $('.classe').show(); de nombreuses méthodes utilitaires parcourir le DOM:.parent(),.next(),.children(),.parents() ajouter ou retirer des classes CSS: addClass, removeClass manipuler: append, wrap, prepend Intérêt fondamental: la plupart des méthodes de l'objet retournent l'objet lui-même on peut chaîner les appels ! $('anything').parent().find('still anything').show(); Cette propriété est extrêmement puissante !

29 PWB 29 Ajax JQuery possède toute une panoplie de fonctions permettant de simplifier les requêtes Ajax La plus simple : $('#maDiv').load('page.html'); Plus complexe : $.get('test.html', function(data) { faire quelque chose ); Générale : $.ajax({ url: 'document.xml', type: 'GET', dataType: 'xml', timeout: 1000, error: function(){alert('Erreur chargement'); }, success: function(xml){faire quelque chose} });

30 PWB 30 Inconvénients dAJAX / XML XML est délicat à parser en Javascript/jQuery $.ajax({ type: "GET", url: "courses.xml", dataType: "xml", complete : function(data, status) { var products = data.responseXML; var html = ""; $(products).find('product').each(function(){ var id = $(this).attr('id'); var name = $(this).find('name').text(); var price =$(this).find('price').text(); html += " #"+id +" - "+name+" : " +price+" "; }); $("#cousesList").html(html); }});

31 PWB 31 Inconvénients dAJAX / Sécurité pour des raisons de sécurité, les navigateurs interdisent de faire du « cross-domain » avec XMLHttpRequest dont le résultat serait du XML (et donc du HTML) ….mais pas pour des scripts Javascript ! Doù lidée de définir un modèle de données sous la forme dobjet Javascript JSON

32 PWB 32 JSON (JavaScript Object Notation) format de données textuel, générique, dérivé de la notation des objets de JavaScript permet de représenter de l'information structurée. décrit par la RFC 4627 de lIETF. Exemple : { "Image": { "Width": 800, "Height": 600, "Title": "Vue du 15ème étage", "Thumbnail": { "Url": "http://www.example.com/ ", "Height": 125, "Width": "100" }, "IDs": [116, 943, 234, 38793] } }

33 PWB 33 Les avantages de JSON Type de données générique et abstrait pouvant être représenté dans n'importe quel langage de programmation représenter n'importe quelle donnée concrète. simple à mettre œuvre tout en étant complet. peu verbeux, lisible aussi bien par un humain que par une machine facile à apprendre, syntaxe réduite types de données sont connus et simples à décrire indépendant du langage de programmation (bien qu'utilisant une notation JavaScript) Le type MIME application/json est utilisé pour le transmettre par le protocole HTTP (notamment en Ajax)

34 PWB 34 Les avantages de JSON Vis-à-vis de JavaScript, un document JSON représente un objet, d'où son nom. Il est donc plus facile à interpréter qu'un XML. var donnees = eval('('+donnees_json+')'); Le site json.org fournit une liste de parseurs pour d'autres langages Il peut aussi être utilisé pour : la sérialisation et déserialisation d'objets ; lencodage de documents ;

35 PWB 35 jQuery et JSON jQuery.getJSON( url, [ data ], [ callback(data, textStatus) ] ) Exemple : $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tag s=besancon&tagmode=any&format=json&jsoncallback=?", function(data){ $.each(data.items, function(i,item){ $(" ").attr("src", item.media.m).appendTo("#images"); if ( i == 3 ) return false; });

36 PWB 36 jQuery UI Un ensemble de composants graphiques téléchargeable à l'adresse un noyau (Core) des « comportements » ( interactions ) draggable : pour glisser-déplacer un élément droppable : pour « déposer » un élément resizable : pour redimensionner un élément selectable : pour sélectionner des éléments à la souris sortable : pour trier des éléments

37 PWB 37 jQuery UI des « widgets » « accordéon » « calendrier » boîte de dialogue barre de progression curseur onglets des « effets » Clignotement, disparition, apparition, éclatement, transition… Une collection de thèmes

38 PWB 38 jQuery Plugins On peut étendre facilement jQuery en utilisant des « plugins » Les méthodes ajoutées sont au même niveau que les méthodes natives Ils conservent les mêmes sémantiques que les méthodes natives: retourner l'objet jQuery, appliquer la méthode à tous les éléments représentés Des centaines plugins existent d'ores et déjà, de qualité variable; certains mis en avant par l'équipe de développement des menus Galerie photo : VisualLightbox

39 PWB 39 Conclusion jQuery est un framework complet et facile à utiliser Bibliothèque légère à charger Simplifier et unifie la syntaxe daccès au DOM Permet de faire des requètes AJAX simplement UI et nombreux plugins complémentaires Dautres frameworks sont disponibles et ne sont pas à oublier : il est possible de combiner les frameworks

40 PWB Qu'est-ce que Dojo ? Ensemble Open Source de librairies JavaScript Simplifie le code javascript Appartient à Google aujourd'hui (qui a racheté Jot) Supporté par > IBM, Sun, JotSpot, SitePen, Renkoo, AOL TurboAjax, OpenLaszlo, Nexaweb, Bea Systems Indépendant de la techologie serveur et des langages utilisés (java, c#, python, ruby...) source: dojotoolkit.org

41 PWB Les librairies du Toolkit Dojo

42 PWB Dojo 3 parties : Dojo > Support cross-browser, chargement des packages, accès et manipulation du DOM, debugger Firebug Lite, évènements, composants MVC, Drag and drop, appels Ajax asynchrones, encodage, décodage JSON dijit > Widgets, Contrôles avancés d'interface utilisateur,système de template dojoX > innovations: graphiquess, support du mode offline, widgets évolués comme les tableaux (grid), etc

43 PWB 1) L'application télécharge des morceaux de Dojo depuis le net : Google: La balise script est utilisée pour charger le script dojo.js, toujours obligatoire.

44 PWB 2) Ajouter Dojo dans son application (il sera déployé avec l'application) Downloader depuis Unzipper le fichier à côté des pages web ou jsp du projet. Inclure dojo comme ceci dans les pages qui l'utilisent

Annonces Google