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

AJAX et les langages serveurs Exposé de système et réseaux Informatique et Réseaux - 3ème année – Mars 2007 Maxime Diawara.

Présentations similaires


Présentation au sujet: "AJAX et les langages serveurs Exposé de système et réseaux Informatique et Réseaux - 3ème année – Mars 2007 Maxime Diawara."— Transcription de la présentation:

1 AJAX et les langages serveurs Exposé de système et réseaux Informatique et Réseaux - 3ème année – Mars 2007 Maxime Diawara

2 Maxime Diawara Ajax et les langages serveurs2 Jai vraiment dis AJAX? Mythologie Grecque, Guerre de Troie, Ajax le grand, détail d'une amphore athénienne à figures noires d'Exékias, v av. J.-C. Club de football néerlandais basé à Amsterdam. 29 fois Champion des Pays-Bas. 4 fois vainqueur de la Ligue des champions. A accueilli de superbes joueurs tels que: Johan Cruyff & Edgar Davids Célèbre marque de produits ménager. Capable de laver plus blanc que blanc?

3 Maxime Diawara Ajax et les langages serveurs3 Table des matières Asynchronous Java And Xml Présentation Technologies mises en jeu Présentation des données Interaction Transfert Parcours et mise en forme des données Langages serveurs Formatage des données Transfert de responsabilité Framework Création automatique de requêtes Autocomplétion Développement

4 Maxime Diawara Ajax et les langages serveurs4 Le WEB 2 Ajax Technologies mises en jeu Langages serveurs Framework Aller plus loin La dénomination AJAX Asynchronous Javascript And Xml Article de Jesse James Garett le 18 février 2005 « Cest un ensemble de technologies différentes utilisées ensemble pour optimiser léchange dinformations entre les navigateurs Web et les serveurs. »

5 Maxime Diawara Ajax et les langages serveurs5 Quest-ce que cest? Ajax Technologies mises en jeu Langages serveurs Framework Aller plus loin On travaille toujours sur une même page Découper une page web en différentes zones daffichage Mettre à jour uniquement les zones modifiées On réduit le nombre dinformations transmises par rapport au rechargement total de la page. Informer lutilisateur des changements en cours Gérer les états « précédent » & « suivant »

6 Maxime Diawara Ajax et les langages serveurs6 Ajax Technologies mises en jeu Langages serveurs Framework Aller plus loin

7 Maxime Diawara Ajax et les langages serveurs7 Ajax Technologies mises en jeu Langages serveurs Framework Aller plus loin

8 Maxime Diawara Ajax et les langages serveurs8 Comment ça marche? Les technologies mises en jeu XHTML & CSS Structure de la page Javascript Interagir entre les éléments XMLHttpRequest Transfert des données XML, XSLT & DOM Parcours des données JSON Mise en forme des données Ajax Technologies mises en jeu Langages serveurs Framework Aller plus loin

9 Maxime Diawara Ajax et les langages serveurs9 Présentation des données - 1 XHTML HyperText Markup Language basé sur XML Langage à balises utilisé pour écrire des pages du World Wide Web. Toutes les balises sont fermées, écrites en minuscules et les attributs renseignés entre double-côtes. Ajax Technologies mises en jeu Langages serveurs Framework Aller plus loin

10 Maxime Diawara Ajax et les langages serveurs10 Présentation des données - 2 CSS Cascading Style Sheets Feuilles de style utilisées pour définir la présentation dun document structurés (XHTML par exemple). table { background-image: url("url/img.png"); border: 1px solid black; } tr{ background-color: #fff000; } Ajax Technologies mises en jeu Langages serveurs Framework Aller plus loin

11 Maxime Diawara Ajax et les langages serveurs11 Mode sans ajax Ajax Technologies mises en jeu Langages serveurs Framework Aller plus loin

12 Maxime Diawara Ajax et les langages serveurs12 Le découpage de la page La balise à tout faire Les balises DIV possèdent un attribut ID Leur contenu est modifiable via cet ID Elles peuvent encapsuler toutes les autres balises Le but est donc de découper la page en différentes et de modifier leur contenu via leur ID contenu Ajax Technologies mises en jeu Langages serveurs Framework Aller plus loin

13 Maxime Diawara Ajax et les langages serveurs13 Le découpage de la page Ajax Technologies mises en jeu Langages serveurs Framework Aller plus loin

14 Maxime Diawara Ajax et les langages serveurs14 Linteraction avec le serveur JavaScript Cest un langage de programmation de type script, orienté objet, basé sur Java, très utilisé sur le Web. On lutilise pour émettre des requêtes vers le serveur et modifier le contenu des balises. function upDate(id, valeur){ document.getElementById(id).innerHTML = valeur; } Ajax Technologies mises en jeu Langages serveurs Framework Aller plus loin

15 Maxime Diawara Ajax et les langages serveurs15 Le transfert des données Ajax Technologies mises en jeu Langages serveurs Framework Aller plus loin

16 Maxime Diawara Ajax et les langages serveurs16 LObjet XMLHttpRequest XMLHttpRequest Objet Javascript Réalise des requêtes vers le serveur web. Utilise les mêmes paramètres que la balise XHTML On lutilise principalement de façon Asynchrone Ajax Technologies mises en jeu Langages serveurs Framework Aller plus loin

17 Maxime Diawara Ajax et les langages serveurs17 Lenvoi dune requête GET Utilisation de lobjet XMLHttpRequest url : chemin vers le fichier à consulter url : requête HTTP false : mode Asynchrone var requete_ajax = getHttpRequest(); requete_ajax.open('GET', url', false); requete_ajax.send(null); Ajax Technologies mises en jeu Langages serveurs Framework Aller plus loin

18 Maxime Diawara Ajax et les langages serveurs18 Création de lObjet XMLHttpRequest Mozilla Firefox function getHttpRequest() { var http_request = false; if (window.XMLHttpRequest) { // Mozilla, Safari,... http_request = new XMLHttpRequest(); if (http_request.overrideMimeType) { http_request.overrideMimeType('text/xml'); } } if (!http_request) { alert('Impossible de créer une instance XMLHTTP'); } return http_request; } Ajax Technologies mises en jeu Langages serveurs Framework Aller plus loin

19 Maxime Diawara Ajax et les langages serveurs19 Création de lObjet Msxml2.XMLHTTP Internet Explorer function getHttpRequest() { var http_request = false; if (window.ActiveXObject) { // IE try {http_request = new ActiveXObject("Msxml2.XMLHTTP");} catch (e){ try {http_request = new ActiveXObject("Microsoft.XMLHTTP");} catch (e) {} }} if (!http_request) { alert('Impossible de créer une instance XMLHTTP'); } return http_request; } Ajax Technologies mises en jeu Langages serveurs Framework Aller plus loin

20 Maxime Diawara Ajax et les langages serveurs20 Traitement des données Utilisation des données XML Fichiers XML parsés et mis sous forme arbre Manipulation avec DOM On peut traiter les données avec un moteur XSLT Faire des sélections dans les nœuds avec XPATH Ajax Technologies mises en jeu Langages serveurs Framework Aller plus loin

21 Maxime Diawara Ajax et les langages serveurs21 Traitement des données Les données XML var xmlData = null; if (window.XMLHttpRequest) { //Firefox xmlData = requete_ajax.responseXML; }else if (window.ActiveXObject) { //IE xmlData = new ActiveXObject("Microsoft.XMLDOM"); xmlData.loadXML(requete_ajax.responseText); } Récupérer le tableau des éléments des balises xmlData.getElementsByTagName('info') Récupérer le contenu de la première balise xmlData.getElementsByTagName('info')[0].firstChild.data; Ajax Technologies mises en jeu Langages serveurs Framework Aller plus loin

22 Maxime Diawara Ajax et les langages serveurs22 Traitement des données Les données JSON JavaScript Object Notation (XML en texte) Peut contenir du code javascript textData = eval('('+requete_ajax.responseText+')'); $(id').innerHTML = textData.Info; { Info:'chargement en cours… ', Site:'myajax.fr' } Ajax Technologies mises en jeu Langages serveurs Framework Aller plus loin

23 Maxime Diawara Ajax et les langages serveurs23 Démo simple dAJAX Ajax Technologies mises en jeu Langages serveurs Framework Aller plus loin

24 Maxime Diawara Ajax et les langages serveurs24 Envoi dune requête Post POST function sendData(id){ $(' infoUser').innerHTML = 'connexion au serveur'; var request_ajax = getHttpRequest(); request_ajax.onreadystatechange = function() { onResult(request_ajax); }; request_ajax.open('POST', « Context/Servlet", true); request_ajax.setRequestHeader('Content-Type','application/x-www- form-urlencoded'); var data = id =+id; request_ajax.send(data); } Ajax Technologies mises en jeu Langages serveurs Framework Aller plus loin

25 Maxime Diawara Ajax et les langages serveurs25 Envoi dune requête Post Requête & information de lutilisateur function onResult(request_ajax) { if (request_ajax.readyState == 4) { if (request_ajax.status == 200) { $(infoUser').innerHTML = ''; } Ajax Technologies mises en jeu Langages serveurs Framework Aller plus loin

26 Maxime Diawara Ajax et les langages serveurs26 Ajax & JSP A quoi peut servir lemploi dune JSP et dAJAX? Formater les données transmises au client Avoir accès aux données du serveur sans recharger la page Utiliser les variables de session en mode asynchrone Ajax Technologies mises en jeu Langages serveurs Framework Aller plus loin

27 Maxime Diawara Ajax et les langages serveurs27 Emploi des JSP pour écrire en JSON Ajax Technologies mises en jeu Langages serveurs Framework Aller plus loin " scope="session" /> { Val[{ val:" ", }], Infos[{ info:" ", }] }

28 Maxime Diawara Ajax et les langages serveurs28 Analyse des données récupérées Création du code HTML mis à jour requete_ajax.open('GET', 'data/infos.jsp', false); … data = eval('('+requete_ajax.responseText+')'); var html = " "; for(var i=0; i

29 Maxime Diawara Ajax et les langages serveurs29 Code généré Ajax & Jsp Création dune liste déroulante INFO … Ajax Technologies mises en jeu Langages serveurs Framework Aller plus loin

30 Maxime Diawara Ajax et les langages serveurs30 Démo JSP Ajax Technologies mises en jeu Langages serveurs Framework Aller plus loin

31 Maxime Diawara Ajax et les langages serveurs31 Ajax & ASP Permettre laccès à un serveur distant Certains navigateurs interdisent les connexions distantes en Ajax On peut alors créer un Proxy sur le serveur local Ajax interroge le proxy qui interroge le serveur distant Ajax Technologies mises en jeu Langages serveurs Framework Aller plus loin

32 Maxime Diawara Ajax et les langages serveurs32 Démo Proxy ASP Ajax Technologies mises en jeu Langages serveurs Framework Aller plus loin

33 Maxime Diawara Ajax et les langages serveurs33 Ajax clefs en main Les Frameworks Langage de haut niveau utilisant AJAX Ne nécessite pas de connaître AJAX Possède ses propres méthodes et objets Rend le traitement automatique Ajax Technologies mises en jeu Langages serveurs Framework Aller plus loin

34 Maxime Diawara Ajax et les langages serveurs34 Le Framework Prototype Création automatique de requêtes new Ajax.Request(URL',{ parameters: id='+id, method: 'get', onSuccess: showResponse }); function showResponse(req){ data = req.responseXML; … } Ajax Technologies mises en jeu Langages serveurs Framework Aller plus loin

35 Maxime Diawara Ajax et les langages serveurs35 Le Framework Scriptaculous La star des Frameworks Drag and Drop Autocomplétion Utilise Prototype Possède ses propres librairies Ajax Technologies mises en jeu Langages serveurs Framework Aller plus loin Vous reprendrez bien dune petite démo??

36 Maxime Diawara Ajax et les langages serveurs36 Les outils pour aller plus loin… Quelques IDE et technologies AJAX Eclipse avec Rich Ajax Project – release n°1 06/2007 Plugin Echo studio Java Server Faces Ajax Technologies mises en jeu Langages serveurs Framework Aller plus loin Bibliographie & sources: - Ajax le guide complet – Micro Application - - UMLV – Projet GL IR3 - Hawaii Team

37 Maxime Diawara Ajax et les langages serveurs37 Questions ??? Merci à tous pour votre attention!! Lécythe attique à fond blanc représentant peut-être le combat d'Ajax et d'Ulysse pour les armes d'Achille, Érétrie, v. 500 av. J.-C., musée du Louvre. Source Wikipedia


Télécharger ppt "AJAX et les langages serveurs Exposé de système et réseaux Informatique et Réseaux - 3ème année – Mars 2007 Maxime Diawara."

Présentations similaires


Annonces Google