ITII Programmation Web FMC Page 1

Save this PDF as:
 WORD  PNG  TXT  JPG

Dimension: px
Commencer à balayer dès la page:

Download "ITII Programmation Web FMC Page 1"

Transcription

1 Programmation Web FMC Page 1

2 Définition d'ajax AJAX signifie Asynchronous JavaScript and XML : c'est un ensemble de technologies (CSS, JavaScript, XML...) utilisées ensemble afin de permettre des communications asynchrones entre le client (navigateur) et le serveur Web. Google Suggest par exemple utilise AJAX: désactivez JavaScript dans votre navigateur et vous verrez. Programmation Web FMC Page 2

3 Histoire d'ajax Ce terme apparaît en 2005 dans un article de Jesse James Garrett: Ajax : A New Approach to Web Applications. AJAX permet d'éviter le rechargement complet de la page lors de chaque requête. Programmation Web FMC Page 3

4 Principe d'ajax Communication entre client et serveur classique. Communication entre client, moteur AJAX et serveur Web. Programmation Web FMC Page 4

5 AJAX en pratique 1 AJAX réagit aux actions de l'utilisateur sur la page. 2 Le code JavaScript contenu dans la page communique ensuite avec le serveur, et modifie éventuellement le contenu de la page. 3 L'utilisateur agit à nouveau sur la page : retour au point 1. Pour que cela soit possible, AJAX utilise XMLHttpRequest, un objet JavaScript, qui gère les communications avec le serveur. Programmation Web FMC Page 5

6 AJAX : L'objet XMLHttpRequest (1) C'est un objet utilisé côté client, depuis le langage JavaScript. D'abord créé par Microsoft sous la forme d'un objet ActiveX, il a été ensuite généralisé sur tous les navigateurs. Repris par l'ensemble des navigateurs, il est désormais en cours de recommandation par le W3C. (Voir du 20/08/09) Comme son nom ne l'indique pas, il permet de récupérer toutes sortes de données, et pas simplement du XML. Programmation Web FMC Page 6

7 AJAX : L'objet XMLHttpRequest (2) Cet objet comporte 6 attributs: 1: readystate (indique la disponibilité des données) 2: status et statustext (code et message HTTP retournés par la requête: 200/OK, 403/Forbidden...) 3: responsetext (réponse au format texte) 4: responsexml (réponse au format XML) 5: onreadystatechange (indique quelle fonction appeler quand Et 6 méthodes: a: open (ouvre une connexion) b: send (envoie une requête) c: abort (annule une requête) l'attribut readystate varie) d: setrequestheader (fixe les en-têtes HTTP) e: getallresponseheaders (lit les en-têtes) f: getresponseheader (lit un en-tête précis) Programmation Web FMC Page 7

8 AJAX : L'objet XMLHttpRequest (3) 1: readystate L'attribut readystate indique la progression de la requête envoyée par le client au serveur. Il passe successivement des valeurs 0 à 4: 0 non initialisé 1 transfert des données 2 données transférées 3 données partiellement disponibles 4 données disponibles en totalité Programmation Web FMC Page 8

9 AJAX : L'objet XMLHttpRequest (4) 2: status et statustext L'attribut status indique le code HTTP renvoyé par le serveur; il est donc possible de tester sa valeur et de réagir en conséquence : if(marequete.status == 200) alert("code HTTP " + marequete.status + " OK"); else alert("code HTTP " + marequete.status + " KO"); Info: l'attribut statustext permet d'afficher le message accompagnant le code renvoyé par le serveur: OK, Forbidden, Not found, etc. Programmation Web FMC Page 9

10 AJAX : L'objet XMLHttpRequest (5) 3: responsetext L'attribut responsetext contient la valeur résultat renvoyée par la page distante, au format texte, sans structure particulière: le programmeur peut donc y écrire du HTML, du code JavaScript (à utiliser ou non avec la commande eval), etc. // création de la requête var marequete = new XMLHttpRequest();... // affiche le résultat dans une boîte d'alerte alert(marequete.responsetext); Programmation Web FMC Page 10

11 AJAX : L'objet XMLHttpRequest (6) 4: responsexml L'attribut responsexml contient la valeur résultat renvoyée par la page distante, au format XML: il est donc possible d'utiliser les fonctions fournies par le Document Object Model afin de manipuler les informations obtenues. // création de la requête var marequete = new XMLHttpRequest(); // il faut préciser que le type de résultat attendu est XML marequete.overridemimetype('text/xml');... Programmation Web FMC Page 11

12 AJAX : L'objet XMLHttpRequest (7) 5: onreadystatechange L'attribut onreadystatechange est associé à une fonction appelée à chaque fois que la valeur de l'attribut readystate est modifiée. // affectation de la fonction à l'attribut marequete.onreadystatechange=statechanged;... function statechanged() { } if (marequete.readystate == 4) { alert("résultat = " + marequete.responsetext); } Programmation Web FMC Page 12

13 AJAX : L'objet XMLHttpRequest (8) a: open(mode, url, boolean, user, password) mode : GET, POST, PUT, DELETE, HEAD url : l'url de la page à atteindre (dans le même domaine) boolean : true (= requête asynchrone) ou false (= requête synchrone) user et password : si nécessaires pour atteindre url Info: Une requête synchrone attend la fin du traitement courant avant que le script ne continue, alors qu'avec une requête asynchrone (à utiliser prioritairement), les différents scripts présents sur la page continueront de s'exécuter. Programmation Web FMC Page 13

14 AJAX : L'objet XMLHttpRequest (9) b: send(data) data: vaut null dans le cas d'une requête GET. avec POST, est soit une liste de couples clefs-valeurs (a), soit un élément DOM (b). (a) var1=valeur1?var2=valeur2?var3=valeur3 (b) document.getelementbyid("test").value Info: Il faut préciser, lors de l'utilisation de la méthode POST, le type de contenu transféré, à l'aide de la méthode setrequestheader() (voir e). Programmation Web FMC Page 14

15 AJAX : L'objet XMLHttpRequest (10) c: abort() La méthode abort permet d'abandonner la requête courante. // création de la requête marequete = new XMLHttpRequest(); // ouverture de la connexion marequete.open('get', 'exemple/monphp.php', true); // envoi marequete.send(null); // arrêt marequete.abort() Programmation Web FMC Page 15

16 AJAX : L'objet XMLHttpRequest (11) d: setrequestheader() Cette méthode permet de fixer le type de contenu transféré lors de l'utilisation de la méthode POST: - application/x-www-form-urlencoded (par défaut) - multipart/form-data (si transfert d'informations binaires) Voir pour plus de détails sur les formulaires Web. Programmation Web FMC Page 16

17 AJAX : L'objet XMLHttpRequest (12) e: getallresponseheaders() Cette méthode permet de récupérer la liste des en-têtes de la réponse HTTP envoyée par le serveur, uniquement si readystate vaut 3 ou 4, et la valeur "null" sinon. alert(marequete.getallresponseheaders()); affiche comme résultat: Programmation Web FMC Page 17

18 AJAX : L'objet XMLHttpRequest (13) f: getresponseheader(header) Cette méthode permet de récupérer la valeur d'un en-tête précis transmis par la réponse HTTP du serveur. alert(xmlhttp.getresponseheader('x Powered By')); affiche : Programmation Web FMC Page 18

19 Exemple d'utilisation : suggestion.hml <html> <head> <script src="aide.js"></script> </head> <body> <form> Prénom: <input type="text" id="monprenom" onkeyup="aide(this.value)"/> </form> <p>suggestions: <span id="aide"></span></p> </body> </html> Programmation Web FMC Page 19

20 Exemple d'utilisation : aide.js (1) var xmlhttp function aide(str) { if (str.length==0) { document.getelementbyid("aide").innerhtml=""; return; } xmlhttp=getxmlhttpobject(); xmlhttp.overridemimetype('text/xml'); if (xmlhttp==null) { alert ("Your browser does not support XMLHTTP!"); return; } var url="aide.php"; url=url+"?q="+str; xmlhttp.onreadystatechange=statechanged; } xmlhttp.open("get",url,true); xmlhttp.send(null); Programmation Web FMC Page 20

21 Exemple d'utilisation : aide.js (2) function statechanged() { if (xmlhttp.readystate==4) { document.getelementbyid("aide").innerhtml=xmlhttp.responsetext; xmldoc=xmlhttp.responsexml; repnode = xmldoc.getelementsbytagname('reponse').item(0); } } function GetXmlHttpObject() { if (window.xmlhttprequest) { // code pour IE7+, Firefox, Chrome, Opera, Safari return new XMLHttpRequest(); } if (window.activexobject) { // code pour IE6, IE5 return new ActiveXObject("Microsoft.XMLHTTP"); } return null; } Programmation Web FMC Page 21

22 Exemple d'utilisation : aide.php <?php // noms des élèves $a[]="albin"; $a[]="alexandre"; $a[]="françois"; $a[]="joanna"; $a[]="julien"; $a[]="karima"; // récupère le paramètre q passé dans l'url $q=$_get["q"]; // vérifie si le paramètre est vide if (strlen($q) > 0) { $hint=""; for($i=0; $i<count($a); $i++) { if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q)))) { if ($hint=="") { $hint=$a[$i]; } else { $hint=$hint.", ".$a[$i]; } } } } if ($hint == "") { $response="aucune proposition"; } else { $response=$hint; } // réponse format XML: echo '<?xml version="1.0"?><a><reponse>'.$response.'</reponse></a>';?> Programmation Web FMC Page 22

23 Exemple d'utilisation : résultat Programmation Web FMC Page 23

24 AJAX : Conclusion Permet de dynamiser la consultation des pages Web. Sans plugin supplémentaire car basé sur des technologies largement diffusées. Supporté par tous les navigateurs, mais pas de la même façon! Il est difficile de développer et de corriger les erreurs en JavaScript. Programmation Web FMC Page 24

Technologies Web. Technologies Web AJAX TCM-TWEB Julien BEAUCOURT 2006 pour ETNA

Technologies Web. Technologies Web AJAX TCM-TWEB Julien BEAUCOURT 2006 pour ETNA AJAX Sommaire Introduction Applications Web Applications AJAX Avantages / Inconvénients Exemple Introduction AJAX, ou Asynchronous JavaScript And XML («XML et Javascript asynchrones»), est un acronyme

Plus en détail

AJAX Licence 3 ère Année

AJAX Licence 3 ère Année BDWeb : AJAX Licence 3 ère Année Fabrice Lefèvre 2010 Asynchronous Javascript + XML nom donné à un ensemble de techniques préexistantes dépend essentiellement de XMLHttpRquest, un objet coté client utilisable

Plus en détail

Exemples d applications Ajax

Exemples d applications Ajax Web 2.0 et Ajax AJAX Exemples d applications Ajax Complétion automatique Validation en temps réel des données d un formulaire Navigation dynamique Lecture d un flux RSS Sauvegarde automatique des documents

Plus en détail

Programmation Web AJAX

Programmation Web AJAX /25 Programmation Web AJAX Thierry Hamon Bureau H202 Institut Galilée - Université Paris 13 & LIMSI-CNRS hamon@limsi.fr http://perso.limsi.fr/hamon/teaching/progweb-20132014/ 2/25 Asynchronous Javascript

Plus en détail

Tutoriel Ajax en exemples. nom Ajax ne se soit répandu, dès la parution d'un article de J. J. Garrett. Sommaire

Tutoriel Ajax en exemples. nom Ajax ne se soit répandu, dès la parution d'un article de J. J. Garrett. Sommaire Page 1 sur 9 Rechercher Ajax XUL JavaScript CSS HTML 5 FAQ-Forum Ajax Tutoriel Ajax XMLHttpRequest Frameworks Démos et scripts Tutoriel Ajax Web 2.0 Techniques Application web Tutoriel RSS XUL & XML Tutoriel

Plus en détail

AJAX. Magali Contensin. JoSy AJAX et bibliothèques JS pour les ASR. 3 novembre 2011

AJAX. Magali Contensin. JoSy AJAX et bibliothèques JS pour les ASR. 3 novembre 2011 AJAX Magali Contensin 3 novembre 2011 JoSy AJAX et bibliothèques JS pour les ASR Plan Comment actualiser une partie d'une page web? Principe Quelques applications Etapes Sécurité Support par les navigateurs

Plus en détail

Introduction à Ajax. CNAM le 2013 O. Pons S. Rosmorduc

Introduction à Ajax. CNAM le 2013 O. Pons S. Rosmorduc 2013 Introduction à Ajax CNAM le 2013 O. Pons S. Rosmorduc 1 / 18 Principe général de fonctionnement Faire des requettes http sans avoir recharger une page entiere. Communication de javascript avec les

Plus en détail

Cours 11 - Interaction : AJAX

Cours 11 - Interaction : AJAX 1/35 UPMC Paris Universitas Programmation des interactions et interfaces homme machine Cours 11 - Interaction : AJAX Carlos Agon - Choun Tong LIEU 8 avril 2016 2/35 Introduction à Javascript Un langage

Plus en détail

AJAX. Magali Contensin. ANF Dev Web ASR Carry-le-Rouet. 25 octobre 2012

AJAX. Magali Contensin. ANF Dev Web ASR Carry-le-Rouet. 25 octobre 2012 AJAX Magali Contensin 25 octobre 2012 ANF Dev Web ASR Carry-le-Rouet Plan Présentation d AJAX Principe Etapes Prendre en compte la latence Support par les navigateurs Inconvénients Avantages Présentation

Plus en détail

AJAX. Asynchronous JavaScript - XML

AJAX. Asynchronous JavaScript - XML AJAX Asynchronous JavaScript - XML Rédacteur : Morel Alexandre Version : 1.2 Date : 08 novembre 2005 Tables des matières Introduction 3 L'objet XMLHttpRequest 3 Qu'est-ce qu'ajax? 3 Utilisation 4 Étape

Plus en détail

AJAX AJAX. Asynchronous JavaScript And XML. Technologie pour créer des pages web interactives Basées sur XML, HTML et JavaScript

AJAX AJAX. Asynchronous JavaScript And XML. Technologie pour créer des pages web interactives Basées sur XML, HTML et JavaScript AJAX Ajax 1 AJAX Asynchronous JavaScript And XML. Technologie pour créer des pages web interactives Basées sur XML, HTML et JavaScript Utilise: HTML pour le marquage XML pour représenter les résultats

Plus en détail

AJAX - Développez pour le Web 2.0 Entrez dans le code : JavaScript, XML, DOM, XMLHttpRequest2... (2ième édition)

AJAX - Développez pour le Web 2.0 Entrez dans le code : JavaScript, XML, DOM, XMLHttpRequest2... (2ième édition) Présentation générale d'ajax 1. Principe et définition 11 2. Exemples sur le Web 16 2.1 Google Maps 16 2.2 Google Suggest 18 2.3 Google Agenda 19 2.4 Google Docs, Google Sheets et Google Slides 20 3. Avantages

Plus en détail

Programmation Web Avancée. Cours 7 Web Storage Ajax.

Programmation Web Avancée. Cours 7 Web Storage Ajax. Programmation Web Avancée Cours 7 Web Storage Ajax kn@lri.fr Plan 1 Introduction/ Généralité et rappels sur le Web/ Javascript : survol du langage 2 Objets/Portée des variables/tableaux/rappels MVC 3 Visiteur/Expressions

Plus en détail

INSA - ASI TechnoWeb : AJAX 1/40. Technologie Web AJAX. Alexandre Pauchet. INSA Rouen - Département ASI. BO.B.RC.18,

INSA - ASI TechnoWeb : AJAX 1/40. Technologie Web AJAX. Alexandre Pauchet. INSA Rouen - Département ASI. BO.B.RC.18, INSA - ASI TechnoWeb : AJAX 1/40 Technologie Web AJAX Alexandre Pauchet INSA Rouen - Département ASI BO.B.RC.18, pauchet@insa-rouen.fr INSA - ASI TechnoWeb : AJAX 2/40 Plan 1 Introduction 2 Fonctionnement

Plus en détail

Ajax et PHP5. Bonjour tout le monde ( Hello World ) en Ajax et PHP

Ajax et PHP5. Bonjour tout le monde ( Hello World ) en Ajax et PHP Ajax et PHP5 Ajax n est pas vraiment une technologie mais plutôt un ensemble de plusieurs technologies, parmi lesquelles se trouvent JavaScript Asynchrone, XML, XHTML et CSS. Le mot asynchrone est de la

Plus en détail

Les API de HTML5. Michel Gagnon École Polytechnique de Montréal

Les API de HTML5. Michel Gagnon École Polytechnique de Montréal Les API de HTML5 Michel Gagnon École Polytechnique de Montréal Cache d application L idée ici consiste à garder en cache les ressources nécessaires pour continuer à utiliser une application web même si

Plus en détail

Ajax. Asynchronous Javascript and XML. <tv>lt La Salle Avignon BTS IRIS</tv>

Ajax. Asynchronous Javascript and XML. <tv>lt La Salle Avignon BTS IRIS</tv> Ajax Asynchronous Javascript and XML Le terme Ajax a été introduit par Jesse James Garrett (informaticien américain), le 18 février 2005, dans un article sur le site Web Adaptive Path (http://www.scriptol.fr/ajax/ajax-garrett.php)

Plus en détail

XML DOM. Taha Zerrouki

XML DOM. Taha Zerrouki XML DOM Taha Zerrouki Définition Le Document de référence Objet Modèle (DOM) est une norme de W3C. Il définit une norme pour l'accès aux documents comme HTML et XML. 2 Définition par W3C Le modèle objet

Plus en détail

App hybrides. Merci de vous installer par binôme de niveau différent

App hybrides. Merci de vous installer par binôme de niveau différent App hybrides Merci de vous installer par binôme de niveau différent Programme (1/2) Introduction: panorama du dev mobile Le web et le HTML Évaluation 1 (QCM) La mise en page avec CSS Les bases de Javascript

Plus en détail

Web dynamique. approche client/serveur

Web dynamique. approche client/serveur Web dynamique approche client/serveur Client/serveur Serveur requête (url) réponse (fichiers) Client url = adresse IP + /chemin/vers/fichier réponse = fichier (lu sur le DD du serveur) Le client gère la

Plus en détail

Développement Web. Communication Client-Serveur LI328 UPMC. Sylvain Lamprier

Développement Web. Communication Client-Serveur LI328 UPMC. Sylvain Lamprier 1 / 57 Développement Web Communication Client-Serveur LI328 Sylvain Lamprier UPMC Communication Client-Serveur 2 / 57 Navigateur Serveur Base de données HTML AJAX (Tomcat) MySQL CSS Javascript JSON Base

Plus en détail

Programmation Web Avancée AJAX

Programmation Web Avancée AJAX 1/28 Programmation Web Avancée AJAX Thierry Hamon Bureau H202 - Institut Galilée Tél. : 33 1.48.38.35.53 Bureau 150 LIM&BIO EA 3969 Université Paris 13 - UFR Léonard de Vinci 74, rue Marcel Cachin, F-93017

Plus en détail

Pour naviguer sur le Web, il faut : Naviguer: dialoguer avec un serveur web

Pour naviguer sur le Web, il faut : Naviguer: dialoguer avec un serveur web 1. 2. Pour naviguer sur le Web, il faut : Une connexion au réseau Réseau Connexion physique (câbles,sans fils, ) à des machines Protocoles de communication Plusieurs niveau (couche) : Internet, protocole

Plus en détail

Introduction à AJAX. Isabelle Mougenot mougenot@lirmm.fr. May 13, 2009. LIRMM Université Montpellier 2

Introduction à AJAX. Isabelle Mougenot mougenot@lirmm.fr. May 13, 2009. LIRMM Université Montpellier 2 LIRMM Université Montpellier 2 May 13, 2009 Quelques clés de compréhension Asynchronous JavaScript And XML (adossé à JavaScript comme à XML) 2005, J.Garret, popularité accrue au travers de quelques applications

Plus en détail

Introduction Implantation Format des données Restriction. Programmation WEB. Ajax. Programmation licence. IUT de Fontainebleau.

Introduction Implantation Format des données Restriction. Programmation WEB. Ajax. Programmation licence. IUT de Fontainebleau. Ajax IUT de Fontainebleau 1 er mars 2015 Sommaire Introduction 1 Introduction 2 3 4 Sommaire Introduction 1 Introduction 2 3 4 Introduction AJAX se base sur l objet JavaScript XMLHttpRequest qui permet

Plus en détail

Programmation Web Serveur

Programmation Web Serveur Programmation Web Serveur Bilan intermédiaire 2 - Formulaires D'après les cours de Philippe Renevier Fabien Givors Université de Nice Sophia Antipolis Département Informatique fabien.givors@unice.fr FONCTIONS

Plus en détail

Programmation Web IMAC TD 7 : AJAX et JSON. 18 novembre 2015

Programmation Web IMAC TD 7 : AJAX et JSON. 18 novembre 2015 Programmation Web IMAC 2015-2016 TD 7 : AJAX et JSON 18 novembre 2015 Objectif: Ce TD a pour but de decouvrire les syntaxes AJAX et JSON, ainsi que leur liens avec jquery. 1 AJAX AJAX (acronyme de Asynchronous

Plus en détail

DOM - Document Object Model

DOM - Document Object Model DOM - Document Object Model 1 But de DOM Interfacer les langages de programmation avec les documents XML en les associant avec un modèle orienté objet DOM permet aux programmes et scripts : d'accéder et

Plus en détail

Comprendre les concepts fondamentaux de jquery Mettre en place des applications web 2.0 dynamiques avec HTML, CSS, jquery et Ajax

Comprendre les concepts fondamentaux de jquery Mettre en place des applications web 2.0 dynamiques avec HTML, CSS, jquery et Ajax Formation jquery Objectif(s): Comprendre les concepts fondamentaux de jquery Mettre en place des applications web 2.0 dynamiques avec HTML, CSS, jquery et Ajax Durée : 2 jour(s) Pré-requis : Avoir suivi

Plus en détail

PHP. Arnaud Sallaberry montp3.fr. Programma;on pour le Web 1

PHP. Arnaud Sallaberry montp3.fr. Programma;on pour le Web 1 PHP Arnaud Sallaberry arnaud.sallaberry@univ- montp3.fr 06/02/2015 Programma;on pour le Web 1 Plan Les principaux langages du Web Côté client Côté serveur Autres Récapitula;f PHP Introduc;on Types de données

Plus en détail

Séance d Exercices Dirigés Compréhension d AJAX (XHTML, Javascript et PHP)

Séance d Exercices Dirigés Compréhension d AJAX (XHTML, Javascript et PHP) Séance d Exercices Dirigés Compréhension d AJAX (XHTML, Javascript et PHP) Exercice : AJAX - Interrogez votre serveur avec JavaScript Savez-vous que JavaScript est capable de se connecter à un serveur

Plus en détail

Le client/serveur dans le cas du Web

Le client/serveur dans le cas du Web Le client/serveur dans le cas du Web Olivier Flauzac & Cyril Rabat olivier.flauzac@univ-reims.fr cyril.rabat@univ-reims.fr Licence 3 Info - Info0503 - Introduction à la programmation client/serveur 2015-2016

Plus en détail

Programmation client / serveur

Programmation client / serveur Benjamin Canou - Christian Queinnec Cours 5 du 17/12/2012 Programmation côté client Rappels rapides sur JavaScript Manipulation du document et du style via DOM L'inévitable JavaScript La mode est aux applications

Plus en détail

Formulaire HTML et PHP

Formulaire HTML et PHP Formulaire HTML et PHP Partie 1 Les langages du Web Vincent Bouvier vincent.bouvier@kware.fr HTML - Les formulaires Un formulaire permet à l'utilisateur d'envoyer des données au serveur Un formulaire commence

Plus en détail

Séance 3. Javascript/DHTML

Séance 3. Javascript/DHTML Séance 3 Javascript/DHTML Nils Schaefer (nils.schaefer@sn-i.fr) Langage Javascript Vrai langage de programmation Exécution côté client Apporter du dynamisme aux pages HTML Syntaxe générale similaire au

Plus en détail

SESSION, AUTHENTIFICATION ET CONTRÔLE D ACCÈS

SESSION, AUTHENTIFICATION ET CONTRÔLE D ACCÈS SESSION, AUTHENTIFICATION ET CONTRÔLE D ACCÈS Développer des applications Web 1 Gestion de sessions Session 2 En informatique, le terme «session» désigne un temps durant lequel un programme est en interaction

Plus en détail

Projet DELIRE. Introduction à PHP

Projet DELIRE. Introduction à PHP Projet DELIRE Introduction à PHP Pages dynamiques page statique Nous sommes le 28/03/2007 Probleme : Afficher une page différente en fonction

Plus en détail

Formation Webmaster Avancé : HTML5/CSS3, JavaScript/DOM + Responsive Design et XML, JSON, AJAX/jQuery

Formation Webmaster Avancé : HTML5/CSS3, JavaScript/DOM + Responsive Design et XML, JSON, AJAX/jQuery Objectif(s): Formation Webmaster Avancé : HTML5/CSS3, JavaScript/DOM + Responsive Design et XML, JSON, AJAX/jQuery Maîtriser HTML5/CSS3 Mettre en œuvre les techniques de conception de sites web adaptatifs

Plus en détail

Introduction. Javascript. L événement onsubmit. Javascript et les formulaires. IFT1147 Programmation Serveur Web avec PHP

Introduction. Javascript. L événement onsubmit. Javascript et les formulaires. IFT1147 Programmation Serveur Web avec PHP IFT1147 Programmation Serveur Web avec PHP Au delà du HTML création dynamique de Javascript, d images et de fichiers PDF Introduction PHP ne permet pas seulement de générer du code HTML. On peut, entre

Plus en détail

Documentation technique Back-office

Documentation technique Back-office MEEVY Documentation technique Back-office Juillet 2010 MEEVY a pour but de fournir aux artistes des outils pour promouvoir leur musique sur internet et proposer à l auditeur une plateforme de musique en

Plus en détail

TP JAVASCRIPT Série N 4

TP JAVASCRIPT Série N 4 TP JAVASCRIPT Série N 4 GESTION D UN FORMULAIRE DE CONTACT Objectif : Nous souhaitons réaliser un formulaire de contact comprenant les champs suivants : NOM PRENOM ADRESSE MAIL MESSAGE Ci-dessous un exemple

Plus en détail

Manuel d'utilisation API Pastell

Manuel d'utilisation API Pastell Manuel d'utilisation API Pastell Rev. 31 API Pastell Page 1/11 Évolution du document Version Nature des changements Date 1.0 Création du document (Eric Pommateau - Sigmalis) 14/01/2012 1.1 Mise à jour

Plus en détail

Table des matières. Introduction 1

Table des matières. Introduction 1 Table des matières Introduction 1 1 Les bases de JavaScript 5 Compréhension de JavaScript (et de son histoire) 5 Établissement d un système de test 8 Configuration de navigateurs Web 9 Inclusion du code

Plus en détail

Formulaire HTML 1. Introduction. 2. Définition de formulaire. ligne de texte 4. Mot de passe 5. Bouton radio 6. Cases à Cocher»

Formulaire HTML 1. Introduction. 2. Définition de formulaire. ligne de texte 4. Mot de passe 5. Bouton radio 6. Cases à Cocher» Formulaire HTML 1. Introduction. 2. Définition de formulaire. 3. Entrée e d une d ligne de texte 4. Mot de passe 5. Bouton radio 6. Cases à Cocher 7. Bouton «Envoyer» 8. Bouton «Reset» 9. Bouton «Général»

Plus en détail

PHP 7 - Développez un site web dynamique et interactif Complément vidéo : Créez un mini blog

PHP 7 - Développez un site web dynamique et interactif Complément vidéo : Créez un mini blog Préambule 1. Objectif de l'ouvrage 11 2. Bref historique de PHP 12 3. Où se procurer PHP? 13 4. Conventions d'écriture 14 Introduction à PHP 1. Qu'est-ce que PHP? 15 2. Structure de base d'une page PHP

Plus en détail

AJAX. Cours Nouvelles Technologies du web

AJAX. Cours Nouvelles Technologies du web AJAX Cours Nouvelles Technologies du web Application traditionnelle Application WEB traditionnelle : Le client envoie une requête HTTP Le serveur renvoie une page Requête 1 Réponse 1 Html Génération du

Plus en détail

Traitement des Formulaires

Traitement des Formulaires Traitement des Formulaires 1 Requetês et réponses Exemple de requête: demande d une page GET / HTTP/1.1 Host: exemple.org Exemple de réponse HTTP/1.1 200 OK Content Type: text/html Content Length: 419

Plus en détail

UNIX ET PROGRAMMATION WEB

UNIX ET PROGRAMMATION WEB UNIX ET PROGRAMMATION WEB Cours 6 kn@lri.fr http://www.lri.fr/~kn Plan 1 Systèmes d'exploitation (1/2) 2 Systèmes d'exploitation (2/2) 3 Réseaux, TCP/IP 4 Web et HTML 5 CSS 6 PHP : Introduction 6.1 Introduction

Plus en détail

Technologies de l internet Date: 26 juillet 2011, 14h30 17h20

Technologies de l internet Date: 26 juillet 2011, 14h30 17h20 IFT3225-E2011 Examen Final Consignes Technologies de l internet Date: 26 juillet 2011, 14h30 17h20 Philippe Langlais Les calculatrices, téléphones, ordinateurs, etc. ne sont pas autorisés (vous pouvez

Plus en détail

Série JavaScript. Exercice n 1 : Ecrire le code d'un fichier HTML qui permet de saisir trois notes (DC1, DC2, DS) puis calcule et affiche la moyenne.

Série JavaScript. Exercice n 1 : Ecrire le code d'un fichier HTML qui permet de saisir trois notes (DC1, DC2, DS) puis calcule et affiche la moyenne. Série JavaScript Exercice n 1 : Ecrire le code d'un fichier HTML qui permet de saisir trois notes (DC1, DC2, DS) puis calcule et affiche la moyenne. Exercice n 2 : Ecrire le code d'un fichier HTML qui

Plus en détail

TP Websockets avec JavaScript et Node.js

TP Websockets avec JavaScript et Node.js Intervenant : Chouki TIBERMACINE TP Websockets avec JavaScript et Node.js Objectifs du TP. - Écrire un serveur Node.js simple capable de communiquer avec le protocole Websockets - Écrire un client JavaScript

Plus en détail

Web 2.0 Introduction à Ajax et à quelques technologies AJAX/Java DWR (Direct Web toolkit) Google Web Toolkit (GWT)

Web 2.0 Introduction à Ajax et à quelques technologies AJAX/Java DWR (Direct Web toolkit) Google Web Toolkit (GWT) Web 2.0 Introduction à Ajax et à quelques technologies AJAX/Java DWR (Direct Web toolkit) Google Web Toolkit (GWT) Philippe Genoud - UJF (c) - Février 2009 1 Caractéristiques des applications Web "Classiques"

Plus en détail

Cet article décrit le connecteur php, son installation, son paramétrage et son utilisation.

Cet article décrit le connecteur php, son installation, son paramétrage et son utilisation. Cet article décrit le connecteur php, son installation, son paramétrage et son utilisation. Le connecteur php est une application php livrée avec un exemple qui permet de l'illustrer et mettre en oeuvre

Plus en détail

Programme Formation Webmaster Opérationnel niveau 2

Programme Formation Webmaster Opérationnel niveau 2 Programme Formation Webmaster Opérationnel niveau 2 Objectif : Savoir personnaliser et dynamiser le contenu de sites web par la connaissance de l'html5/css3, du PHP MySQL, du JavaScript et d'ajax. Compétences

Plus en détail

Formation JavaScript : Perfectionnement. Programme. L approche AJAX. L objet XMLHttpRequest. Objectif(s):

Formation JavaScript : Perfectionnement. Programme. L approche AJAX. L objet XMLHttpRequest. Objectif(s): Formation JavaScript : Perfectionnement Objectif(s): Comprendre l'approche AJAX Comprendre l'objet XMLHttpRequest Durée : 2 jour(s) Pré-requis : Bonnes connaissances en (X)HTML, CSS et JavaScript Public

Plus en détail

Le langage PHP. Le langage PHP p.1/??

Le langage PHP. Le langage PHP p.1/?? Le langage PHP Le langage PHP p.1/?? Le langage PHP p.2/?? Sommaire Les principaux aspects du langage PHP généralités littéraux, variables et constantes tableaux associatifs et indicés boucles et tests

Plus en détail

NFA016 : Introduction. Pour naviguer sur le Web, il faut : Naviguer: dialoguer avec un serveur web

NFA016 : Introduction. Pour naviguer sur le Web, il faut : Naviguer: dialoguer avec un serveur web NFA016 : Introduction O. Pons, S. Rosmorduc Conservatoire National des Arts & Métiers Pour naviguer sur le Web, il faut : 1. Une connexion au réseau Réseau Connexion physique (câbles,sans fils, ) à des

Plus en détail

Bases de données et Sites Web. Li345 Le langage PHP 4 ème partie. Lien avec MySQL

Bases de données et Sites Web. Li345 Le langage PHP 4 ème partie. Lien avec MySQL Bases de données et Sites Web. Li345 Le langage PHP 4 ème partie Lien avec MySQL 1 Rappel d architecture Principe : création de documents à partir d une BD MySQL : stockage, protection des données, interface

Plus en détail

PHP MySQL N 0 IUT SRC TOULON

PHP MySQL N 0 IUT SRC TOULON PHP MySQL N 0 IUT SRC TOULON 2016-2017 I Intro Relation Client / Serveur Client = Visiteur d un site web, personne qui demande à voir une page web. Serveur = Machine qui s occupe de distribuer le site

Plus en détail

Javascript. Javascript : les bases du langage. Intégration de javascript dans la page html. Un style de programmation impératif

Javascript. Javascript : les bases du langage. Intégration de javascript dans la page html. Un style de programmation impératif : les bases du langage Technologies du Web 1 Jean-Christophe Routier Licence 1 SESI Université Lille 1 présentation partielle, et parfois partiale un langage fonctionnel à objet à base de prototypes un

Plus en détail

Séance 1. Bases et HTML

Séance 1. Bases et HTML Séance 1 Bases et HTML Nils Schaefer (nils.schaefer@sn-i.fr) Serveur Web Hébergement des sites Web Utilisation du port 80 Réception des requêtes HTTP des navigateurs Traitement des requêtes HTTP Exemples

Plus en détail

UE8.III - TD algorithmique 1/6

UE8.III - TD algorithmique 1/6 TD 12.1 HTML Construction de page Web 1- On propose de construire une nouvelle page web. Pour cela, on crée un nouveau document avec le "Bloc-notes" et on saisit les éléments suivants : un premier

Plus en détail

Pour communiquer sur Internet, les périphériques utilisent leurs adresses IP numériques.

Pour communiquer sur Internet, les périphériques utilisent leurs adresses IP numériques. DNS = Domain Name System DNS = Système de noms de domaine Pour communiquer sur Internet, les périphériques utilisent leurs adresses IP numériques. Cependant, les utilisateurs d Internet ne peuvent pas

Plus en détail

Développement d Applications Web

Développement d Applications Web Développement d Applications Web (Cours 5) 2 ème année Licence Informatique Université Abou-Bekr Belkaïd - Tlemcen Année 2016/2017 Mahfoud Houari mahfoud.houari@gmail.com hmahfoud.wordpress.com Plan du

Plus en détail

Introduction au langage PHP

Introduction au langage PHP Introduction au langage PHP Les bases de PHP Traitement de données Structuration par couches Nicolas Moyroud Cemagref - UMR TETIS 25 Juin 2008 Présentation générale de PHP Plan 1 Présentation générale

Plus en détail

TP PHP n 1 : les bases

TP PHP n 1 : les bases TP PHP n 1 : les bases 2013-2016 Sommaire Les bases 2 Exercice n 1.1 : généreration de code HTML............................ 2 Exercice n 1.2 : des informations sur le serveur...........................

Plus en détail

Algorithmique et développement web S2 6. Gestion des formulaires

Algorithmique et développement web S2 6. Gestion des formulaires Algorithmique et développement web S2 6. Gestion des formulaires Christophe BLANC IUT MMI IUT d Allier Université Clermont Auvergne www.christophe-blanc.fr 2016-2017 1 / 15 Rappel Un formulaire est un

Plus en détail

javascript : éléments du langage

javascript : éléments du langage javascript : éléments du langage Université Lille 1 Technologies du Web javascript : les bases 1 au programme... 1 introduction 2 types 3 fonctions 4 structures 5 conversions 6 objets Université Lille

Plus en détail

Développement W eb. Série V3, question 1 : fragment XHTML valide

Développement W eb. Série V3, question 1 : fragment XHTML valide G. Hunault Angers, novembre 2016 Licence DSCS Développement W eb Série V3, question 1 : fragment XHTML valide Ecrire le fragment de texte XHTML valide au sens transitionnel qui correspond aux indications

Plus en détail

Lycée Alfred-Kastler Stenay. TP info : Les bases de la programmation Python

Lycée Alfred-Kastler Stenay. TP info : Les bases de la programmation Python Lycée Alfred-Kastler Stenay TP info : Les bases de la programmation Python 1 Introduction au langage python: Python est un langage informatique facile à prendre en main, très utile pour une première approche

Plus en détail

Apprenez à concevoir des interfaces Web qui s'adaptent aux différents supports de consultation!

Apprenez à concevoir des interfaces Web qui s'adaptent aux différents supports de consultation! Formation foundation 5 Objectif(s): Apprenez à concevoir des interfaces Web qui s'adaptent aux différents supports de consultation! Durée : 1 jour(s) Pré-requis : Bonnes connaissances en (X)HTML et CSS

Plus en détail

PHP et MySQL. Originaux. Auteurs et version. Prérequis. Modules

PHP et MySQL. Originaux. Auteurs et version. Prérequis. Modules PHP et MySQL PHP et MySQL act-php-mysql Code: act-php-mysql Originaux url: http://tecfa.unige.ch/guides/tie/html/act-php-mysql/act-php-mysql-fc.html url: http://tecfa.unige.ch/guides/tie/pdf/files/act-php-mysql-fc.pdf

Plus en détail

Pré-requis à l'utilisation du Hub. Pré-requis à l'utilisation du Hub. 1. Navigateurs compatibles. 2. Configuration de l'application Java.

Pré-requis à l'utilisation du Hub. Pré-requis à l'utilisation du Hub. 1. Navigateurs compatibles. 2. Configuration de l'application Java. Pré-requis à l'utilisation du Hub by LegalBox Pré-requis à l'utilisation du Hub Si vous rencontrez des difficultés quant à l'utilisation de l'application, vérifiez que vous respectez les pré-requis Table

Plus en détail

JavaScript NÉCESSAIRE WEB XAVIER BLANC UNIVERSITÉ DE BORDEAUX

JavaScript NÉCESSAIRE WEB XAVIER BLANC UNIVERSITÉ DE BORDEAUX JavaScript NÉCESSAIRE WEB XAVIER BLANC UNIVERSITÉ DE BORDEAUX Script JavaScript est un langage de script Un script est une séquence d instructions qui seront interprétées les unes après les autres Les

Plus en détail

Introduction Les bases du langage Transmission de variables La persistance. Formation PHP. Maxime Arthaud. net7. Mardi 22 octobre 2013.

Introduction Les bases du langage Transmission de variables La persistance. Formation PHP. Maxime Arthaud. net7. Mardi 22 octobre 2013. Maxime Arthaud net7 Mardi 22 octobre 2013 PHP, Qu est-ce que c est? Client / Serveur Développer en local Syllabus 1 Introduction PHP, Qu est-ce que c est? Client / Serveur Développer en local 2 3 4 PHP,

Plus en détail

UTILISER LA PROGRAMMATION OBJET, DÉVELOPPER DES SITES WEB INTERACTIFS PROFESSIONNELS, PERFORMANTS ET SÉCURISÉS

UTILISER LA PROGRAMMATION OBJET, DÉVELOPPER DES SITES WEB INTERACTIFS PROFESSIONNELS, PERFORMANTS ET SÉCURISÉS Référence : IJSO Durée : 4 jours (28h.) Tarif : 2090 HT Contact : 01 43 34 90 94 Niveau : Intermédiaire Cours à distance : Possible Eligible : CPF Certification : MCSD: Web Applications Prochaines sessions

Plus en détail

Documents web dynamiques. 20 novembre 2007 Architecture Multi-Niveaux 54

Documents web dynamiques. 20 novembre 2007 Architecture Multi-Niveaux 54 Documents web dynamiques 20 novembre 2007 Architecture Multi-Niveaux 54 Documents web dynamiques Contenu Statique Le client envoie une requête avec un nom de fichier Le serveur répond en lui retournant

Plus en détail

Cours 4 AJAX avec jquery

Cours 4 AJAX avec jquery Licence CRRW IUT de Marne-la-Vallée 02/11/2016 Cours de jquery Cours 4 AJAX avec jquery Philippe Gambette Sources Cours de Jean-Loup Guillaume http://jlguillaume.free.fr/www/documents/teaching/ntw1213/li385_c5_jquery.pdf

Plus en détail

Environnement Client/Serveur. Cours 7 JavaServer Pages (1) kn@lri.fr

Environnement Client/Serveur. Cours 7 JavaServer Pages (1) kn@lri.fr Environnement Client/Serveur Cours 7 JavaServer Pages (1) kn@lri.fr Plan 1 Rappels sur les systèmes d'exploitations / Communication par mémoire partagée 2 Réseaux généralités, IP, UDP 3 TCP, Rappels sur

Plus en détail

<?php. /* Interaction client serveur */ $_GET[] /* */

<?php. /* Interaction client serveur */ $_GET[] /* */ générer pour l interactivité $q = $_GET["query"]; switch($q) { case "subject": //Get a given subject $id = $_GET["id"];

Plus en détail

1. Manipulation des formulaires avec PHP. 2. Transmission d'arguments entre pages : méthodes GET et POST. 3. Manipulation du JavaScript avec le PHP.

1. Manipulation des formulaires avec PHP. 2. Transmission d'arguments entre pages : méthodes GET et POST. 3. Manipulation du JavaScript avec le PHP. TP5: LES FORMULAIRES OBJECTIFS : 1. Manipulation des formulaires avec PHP. 2. Transmission d'arguments entre pages : méthodes GET et POST. 3. Manipulation du JavaScript avec le PHP. PARTIE 1: Formulaire

Plus en détail

PHP, TEMPLATE ET HTTP

PHP, TEMPLATE ET HTTP PHP, TEMPLATE ET HTTP Développer des application Web Notion de template 1 Un template est modèle de document, c est-à-dire un document dont la forme est définie, mais dont une partie du contenu est variable.

Plus en détail

Javascript. Eléments de base du langage

Javascript. Eléments de base du langage Javascript Eléments de base du langage 1 1990 : début du Web HTML 1995 : Scripts Clients Javascript, Jscript Applets Java, ActiveX, Flash et 2000: scripts Serveurs PHP, ASP et ASP.NET, JSP. 2005: cohabitation

Plus en détail

TP JAVASCRIPT OMI4 TP5 SRC1 2011-2012

TP JAVASCRIPT OMI4 TP5 SRC1 2011-2012 TP JAVASCRIPT OMI4 TP5 SRC1 2011-2012 FORMULAIRE DE CONTACT POUR PORTFOLIO PRINCIPE GENERAL Nous souhaitons réaliser un formulaire de contact comprenant les champs suivants : NOM PRENOM ADRESSE MAIL MESSAGE

Plus en détail

INF04-06 Langages et structure du Web. Benoît Habert

INF04-06 Langages et structure du Web. Benoît Habert INF04-06 Langages et structure du Web Benoît Habert Séance 8 - début Rappels Les limites de l appel à un autre script AJAX Modèle/Vue/Contrôleur : un patron de conception MVC en action : revisiter l exemple

Plus en détail

3I 023 Projet Java Serveur HTTP et Morpion Semaine du 20 février 2017

3I 023 Projet Java Serveur HTTP et Morpion Semaine du 20 février 2017 Serveur HTTP et Morpion Semaine du 20 février 2017 Introduction L objectif de ce mini-projet est de concevoir et de programmer une architecture client-serveur HTTP. Cette architecture est composée de deux

Plus en détail

AJAX et l'objet XmlHttpRequest

AJAX et l'objet XmlHttpRequest AJAX et l'objet XmlHttpRequest Sommaire I- Introduction II- Requêtes synchrones et asynchrones III- L'objet XmlHttpRequest - IV- Utilisation de l'objet V- Premier exemple - VI- Passer des paramètres au

Plus en détail

COURS 8 : REDIRECTIONS ET SESSIONS

COURS 8 : REDIRECTIONS ET SESSIONS COURS 8 : REDIRECTIONS ET SESSIONS LES REDIRECTIONS Les redirections sont des en-têtes HTTP. Or, selon le protocole HTTP, les en-têtes HTTP doivent être envoyés avant tout autre type de contenu, ce qui

Plus en détail

Ajax, jquery et PHP. 42 ateliers pour concevoir des applications Web 2.0. Jean-Marie Defrance. 3 e édition

Ajax, jquery et PHP. 42 ateliers pour concevoir des applications Web 2.0. Jean-Marie Defrance. 3 e édition Ajax, jquery et PHP 42 ateliers pour concevoir des applications Web 2.0 3 e édition Jean-Marie Defrance Groupe Eyrolles, 2008, 2010, 2011, ISBN : 978-2-212-13271-7 3 Comment fonctionne Ajax? Ajax, un amalgame

Plus en détail

PHP/MYSQL. Web Dynamique

PHP/MYSQL. Web Dynamique PHP/MYSQL Web Dynamique ENSG Juin 2008 Ces 6 jours de formation Jour 1 : présentations, attentes, principes, HTML Jour 2 : CSS, et HTML Jour 3 : PHP, formulaires, Base de données Jour 4 : Rappel PHP, Extraction

Plus en détail

Chapitre 2 : Introduction au langage JavaScript

Chapitre 2 : Introduction au langage JavaScript Chapitre 2 : Introduction au langage JavaScript I. Principe de JavaScript Le langage JavaScript est un langage de script développé par les sociétés Netscapeet Sun Microsystems vers la fin de l'année 1995.Il

Plus en détail

Table des matières. TP Ajax. Séquence 1 L'objet XMLHttpRequest...2 Séquence 2 L'API jquery...3 Séquence 3 XML...4 Séquence 4 L'auto complétion...

Table des matières. TP Ajax. Séquence 1 L'objet XMLHttpRequest...2 Séquence 2 L'API jquery...3 Séquence 3 XML...4 Séquence 4 L'auto complétion... Table des matières Séquence 1 L'objet XMLHttpRequest...2 Séquence 2 L'API jquery...3 Séquence 3 XML...4 Séquence 4 L'auto complétion...7 Bibliographie : http://fr.wikipedia.org/wiki/asynchronous_javascript_and_xml

Plus en détail

Balises de formulaire

Balises de formulaire Les formulaires XHTML permettent de recueillir les informations saisies par un utilisateur, puis de les transmettre à un programme serveur. Nous verrons : - la structure d un formulaire - les éléments

Plus en détail

Cours 4 Programmation web, orientée serveur

Cours 4 Programmation web, orientée serveur DUT MMI IUT de Marne-la-Vallée 01/03/2016 M2202 - Algorithmique Cours 4 Programmation web, orientée serveur Philippe Gambette Sources phpdebutant.net www.php.net (documentation du langage PHP) Préambule

Plus en détail

Modifié: 2016/04/29 IUT de Fontainebleau

Modifié: 2016/04/29 IUT de Fontainebleau INTRODUCTION à PHP COOKIES ET SESSIONS monnerat@u-pec.fr Modifié: 2016/04/29 IUT de Fontainebleau Sommaire 1. Cookies 2. Sessions COOKIES Introduction Les cookies permettent de stocker du coté client des

Plus en détail

Organisation d un site web

Organisation d un site web Organisation d un site web Un site web est un ensemble de pages web hébergées par un serveur et identifié par une adresse internet ( URL). Les pages web sont écrites en langage html, puis transférées sur

Plus en détail

M Algorithmique et PHP

M Algorithmique et PHP M2202 - Algorithmique et PHP David Annebicque 2016 1 TD : Accès aux base de données 1.1 Introduction Une base de données permet de stocker des données de manière durable, contrairement à une session ou

Plus en détail

Module Javascript - Présentation du langage - Exercices d application

Module Javascript - Présentation du langage - Exercices d application Module Javascript - Présentation du langage - Exercices d application February 15, 2011 Module Javascript - Présentation du langage - Exercices d application ii Contents 1 Exercice 1 1.1 Les premiers programmes

Plus en détail

Ed : les formulaires (2)(Verification Javascript)

Ed : les formulaires (2)(Verification Javascript) Ed : les formulaires (2)(Verification Javascript) exercice 1 1. ecrire un programme JS général qui parcourt le premier formulaire d un document et affiche pour chacuns de ses éléments les valeurs principales

Plus en détail