DHTML INFO0406 Arnaud RENARD arnaud.renard@univ-reims.fr Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 1/ 75 Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 2/ 75 DHTMLetWEB2.0 Objectif HTML dynamique, de l anglais Dynamic HTML, souvent abrégé DHTML, est un nom générique donné à l ensemble des techniques utilisées par l auteur d une page web pour que celle-ci soit capable de se modifier elle-même en cours d affichage: Les éléments constituant la page peuvent ainsi être modifiés, déplacés, créés ou effacés; Une succession rapide de modification peut créer une animation; Les style et les contenu des éléments peuvent être modifiées dynamiquement; Les champs de formulaire peuvent être contrôlées; Des informations sont échangées entre le navigateur et le serveur. But répartir la charge et l utilisation des ressources déplacer du traitement sur le client déplacerdelamiseenformesurleclient développer l utilisation de pages WEB dynamiques permettre un chargement"local" dans la page permettre la mise à jour d une fraction d un document inter-agir entre des éléments(images, formulaires) et un serveur Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 3/ 75 Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 4/ 75 Les technologies mises en oeuvre HTML pour la structuration CSS pour la présentation JavaScript pour traitement sur le client DOM comme méthode pour manipuler une structure XML AJAX pour les communications avec le serveur JSON pour JavaScript Object Notation JQUERY comme framework Javascript PHP pour la programmation sur le serveur Cours de référence en Creative Commons: http://www.gchagnon.fr/cours/dhtml Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 5/ 75 Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 6/ 75
JavaScript: Historique JavaScript: Insertion dans un document langage orienté objets à prototype inspiré de java; créé en 1995 par Brendan Eich pour Netscape Communications Corporation. actuellement à la version 1.7, implémentation du standard ECMA-262(3e version). intégréauseindepagesweb,exécutésurleclientparle navigateur contrôler les données saisies dans des formulaires HTML interagir avec le document HTML via l interface Document Object Model interagir avec l utilisateur et les événements en ligne <balise onclick=... > interne <script type="text/javascript">... externe <script type="text/javascript" src="../scripts/monscript.js"> Navigateurs non JavaScript <script type="text/javascript"> (...) <noscript >Achetez un navigateur! </ noscript > Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 7/ 75 Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 8/ 75 JavaScript: code convention JavaScript: les types espaces, fins de ligne et tabulations ignorées; ;enfindeligne; //ou/*...*/pourlescommentaires; nomsdevariablesetdefonctionsensiblesàlacasse; déclaration de variable optionelle(portée globale); déclaration avec var(donc de type undefined, portée bloc); affectationa=b=c=5;,+=,-=,*=,/==(expression)?4:5;; opérateurs:+(additionouconcaténation),-,*,/,%,++,--,!, &&, ; comparaison:<, <=, >,>=,==,!=,===(typeetvaleur); conversion explicite 1=="1" est true; évaluation d expression: eval("a=3+2;alert(a);"). chaines de caractères: "... \ \t \n \\ " nombres(entiers ou flottant); boolean; object(orienté prototype); undefined; null. Conversions: parseint() et parsefloat(): chaine vers nombre Number(): objet vers nombre string(): objet vers chaine Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 9/ 75 Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 10/ 75 JavaScript: tableaux // tableau vide var tableau1 = new Array(); // tableau de taille 4 var tableau2 = new Array(4); // initialisation du tableau avec des valeurs vides tableau2 = ["Beurre", "Confiture",,, "Pain", "Jus de fruit " // création et initialisation var tableau3 = new Array( Beurre, Confiture, Pain ) ; // taille du tableau alert(tableau3.length); // tableau multi var tableau4 = new Array(4); for(i=0;i<tableau4.length;i++) tableau4[i] = newarray(2) ; // déclaration littérale ou mixte chien = {"couleur":"brun", "taille ":"grand"; chats = [{"couleur":"gris", "taille ":"grand", {"couleur":"noir", "taille ":" petit "]; JavaScript: test des types var myfun = new Function("5+2") var shape=" round" var size=1 var today=new Date() typeof myfun == function typeof shape == string typeof size == number typeof today == object typeof dontexist == undefined typeof true == boolean typeof null == object typeof 62 == number typeof Hello world == string typeof parseint == function typeof Date == function typeof Function == function typeof Math == object typeof Object == function typeof String == function Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 11/ 75 Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 12/ 75
JavaScript: l objet String L objet window chaine="bonjour!"; // une propriété alert(chaine.length); // des méthodes chaine.indexof( o ); // 0 (ou 1) chaine.lastindexof( o ); // 4 chaine.charat(5); // u chaine.touppercase; // majuscule chaine. tolowercase; chaine.substring(1,4); // onj chaine.substr(1,4); // onjo chaine.substr(2); // njour! tab=chaine.split( o ); // ["B", "nj", "ur!"] chaine.replace("jour", "soir"); // Bonsoir! Méthodes utilisables directement. // message window.alert(chaine) alert(chaine) // confirmation if(confirm(chaine)) alert("bravo"); // valeur quantite=prompt("entrez la quantité souhaitée :"); alert(quantite); Expressions rationnelles: match et search Autres objets: Math, Date, window... Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 13/ 75 Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 14/ 75 Fonctions anonymes Fermetures <script type="text/javascript"> var mafonction = function(message) { alert(message); ; // affiche: ceci est un test mafonction( ceci est un test ); <html > <body onload="settimeout( function() { alert( chargement de la page terminé ), 1500 );"> </ body> </html> <script type="text/javascript"> function ajouteur(nombre) { function ajoute(valeur) { return valeur + nombre; return ajoute; var ajoute10 = ajouteur(10); ajoute10(1); // retourne 11 la fonction interne ajoute10 a toujours accès au paramètre effectif nombre malgré le fait que l appel à la fonction ajouteur soit terminé. Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 15/ 75 Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 16/ 75 fonctions/ Object à prototype <script type="text/javascript"> function cd(p_chanteuse,p_titre){ this.chanteuse=p_chanteuse; this. titre=p_titre; this.description=function (){ return this. titre+" par "+this.chanteuse; this.lachanteuse = affichechanteuse; function affichechanteuse(){ alert(this.chanteuse); mycd = new cd("madonna","frozen"); alert(mycd. titre ); // Frozen alert(mycd.description()); // Frozen par Madonna mycd.lachanteuse(); // Madonna Tests et boucles if (c==1) {... if (c==1) {... else {... switch (c) { case 1:... break ;... default :... while (c<3) { c++;... for (i=0;i<3<i++) {... var tab = new Array(3) ; for (element in tab) { element="test" ; Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 17/ 75 Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 18/ 75
Timers Avec settimeout var i=6 function test(){ alert(i ); if(i>0) settimeout("test()", 1000) ; test(); Avec setinterval var i=6 function affanddec(){ alert(i ); if(i<0) cleartimeout(identifiant ); var identifiant=setinterval("affanddec()", 1000) ; Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 19/ 75 Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 20/ 75 LeDOM,Àquoicelasert-il? Le DOM, ou Document Object Model(standard du W3C) désigne l ensemble des techniques permettant à un langage (comme JavaScript) d accéder au contenu d un document balisé (comme par exemple une page HTML). Une page HTML est statique une fois chargée sur le navigateur de l internaute. DOM permet d en manipuler la structure, le contenu ou le style (modifier, supprimer, ajouter). DOM définit aussi la gestion des événements page, fenêtre, souris, clavier et formulaire. Les traitements et animations sont exécutés sur le client http://www.w3schools.com/dom Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 21/ 75 Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 22/ 75 Les événements window Les événements <script type="text/javascript"> window.onresize=function(){ alert("fenetre redim."); mafonctiononload=function(){ alert("fenetre loaded"); <body onload=mafonctiononload() >... </ body> et aussi onabort, onerror, onbeforeunload, onunload. Formulaire et éléments de formulaire onfocus: lorsque l élément prend le focus(ou devient actif) onblur:àlapertedufocus onchange:àlapertedufocussilavaleurachangé onreset:lorsdelaremiseàzéroduformulaire onselect: quand du texte est sélectionné onsubmit: quand le formulaire est validé Évènements clavier onkeydown: lorsqu une touche est enfoncée onkeypress: lorsqu une touche est pressée et relâchée onkeyup: lorsqu une touche est relâchée Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 23/ 75 Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 24/ 75
Exemple d evenement Modification des propriétés de style Les événements Un événement permet de déclencher une action, par exemple afficher lecontenud uninput.onfaitalorsappelàl objetcourantthisen JavaScript: <input onchange= alert(this.value) /> Les événements souris onclick:surunsimpleclic ondblclick: sur un double clic onmousedown: lorsque que le bouton de la souris est enfoncé, sans forcément le relâcher onmousemove: lorsque la souris est déplacée onmouseout: lorsque la souris sort de l élément onmouseover: lorsque la souris est sur l élément onmouseup :lorsqueleboutondelasourisestrelâché Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 25/ 75 Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 26/ 75 Modification des propriétés de style Modification des propriétés de style Un événement permet de déclencher une action, par exemple de modifier localement les propriétés de style d un élément. On fait alors appel à l objet courant this en JavaScript: <p onmouseover="this.style.color= blue " onmouseout="this.style.color= black "> Ceci est un texte dont la couleur va changer au passage de la souris. </p> Dans l exemple suivant, l utilisation de majuscules permet d éviter l utilisation du tiret présent dans la propriété CSS. <p style="position:absolute; left:10px; top:230px; width:400px" onmouseover="this.style.left= 100px ; this.style.top= 300px ; this.style.width= 600px ; this.style.textalign= center " oumouseout="this.style.left= 10px ; this.style.top= 230px ; this.style.width= 400px ; this.style.textalign= left ">Exemple de texte... à géométrie variable. </p> Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 27/ 75 Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 28/ 75 Pour aller plus loin Accèsdirectauxélémentsparleurid:elem= document.getelementbyid("id_du_tag") Recherchelesadanstoutledocument: liens=window.document.getelementsbytagname( a ); Recherchelesadanselem: liens=elem.getelementsbytagname( a ); Recherchedesélémentsdelaclassetest: document.getelementsbyclassname( test ) Recherche des éléments des classe test et rouge: document.getelementsbyclassname( rouge test ) Recherchedesélémentsdelaclassetestdans#main: document.getelementbyid( main ).getelementsbyclassname( test ) Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 29/ 75 Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 30/ 75
getelementbyid <img id= nomimage src= waiting.gif /> <a href= \# onclick= document.getelementbyid("nomimage").src="image1.jpg"; >image1 </ a> <a href= \# onclick= document.getelementbyid("nomimage").src="image2.jpg"; >image2 </ a> Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 31/ 75 getelementsbytagname <ol id="toto"> <li lang="fr">bonjour</li > <li lang="us">hello</li > <li lang="de" >Allo</li > </ol> <div id= log ></div> <input type= text value= name= id= log ></div> <script type="text/javascript"> mylog = document.getelementbyid("log"); myname = document.getelementbyid("name"); maol = document.getelementbyid("toto"); var leselements= maol.getelementsbytagname(" li "); for(var i=0; i< leselements.length; i++){ alert(leselements.item(i ).getattribute("lang")); Résultat:fr,us,de Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 32/ 75 Accès aux valeurs des éléments Exercice Valeur des éléments de formulaires value myname.value = "xxx"; alert(myname.value); Conteneur HTML innertext mylog.innertext = "bonjour"; innerhtml mylog.innerhtml += "bonjour à <i>toi</i>"; Ecrire la fonction logit permettant d afficher des messages de debug. Image src chemin.vers.un.element.src = xxx Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 33/ 75 Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 34/ 75 Accès par les collections Accèsparlenom Quatre collections(=tableaux) sont définies. window.frames document.forms document.images document.links Particulièrement utile pour les formulaires: window.document.forms["form1"].checkbox window.document.forms[0].nom_du_champ.value= valeur incohérente ; accès au second élément du premier formulaire document.forms[0].elements[1].value="toto"; Nommage successif des éléments utilisation des noms successifs depuis la racine <form method="post" name=" ajax" action ="" > <input type=" button" value="submit" onclick ="submitform()" > <input type=" text" name="dyn" value="" > </form> pouraccéderetmodifierlecontenuduchampdetexte: document.ajax.dyn.value="toto"; Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 35/ 75 Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 36/ 75
Manipulation de l arborescence elt est un élément identifié, par exemple, par une méthode getelementbyid. elt.childnodes liste des enfants(tableau). elt.firstchild premier fils elt.lastchild dernier fils elt.previoussibling frêre précédent elt.nextsibling frêre suivant elt.parentnode le pêre Attributs:nodeName(nomdunoeud,img,a,...)etnodeType(typede noeud) Méthodes: haschildnodes() et hasattributes() Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 37/ 75 Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 38/ 75 Modification dans le DOM Ajout/ suppression d un élément Cequiest/n estpasmodifiable appelàdespopup boîte alert nouvelle fenêtre: window.open(...) possibilité de modifier des éléments conteneurs divdontonadéfinitlaclasseoul id spandontonadéfinitlaclasseoul id impossibilité de rajouter des éléments au niveau du document impossibilité de modifier la structure du document possibilité d accéder et de modifier certains attributs champs texte des formulaires contenu des listes déroulantes div1=document. getelementbyid(" parentdiv"); p1=document.createelement("p"); div1.appendchild(p1); p2=document.createelement("p") ; div1.insertbefore(p2,p1) ; elt=document.getelementbyid("div1") ; elt_inclus=document.getelementbyid("para1") ; elt_rejete=elt.removechild(elt_inclus) ; parag2=parag.clonenode(true) elt.replacechild(newchild, oldchild) Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 39/ 75 Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 40/ 75 Accès aux attributs Manipulation des feuilles de style Modification d attributs quelconques: this.src= ; Modification de la class: this.classname= ; Modification du contenu d un élément: this.innerhtml= ; ou this.nodevalue= ; Accès à l attribut getattribute(nom) variable = elt.getattribute("target"); Modifier/ créer un attribut setattribute(nom,valeur) d.setattribute("align","center"); Supprimer un attribut: elt=document.getelementbyid("top") ; attr_align=elt.getattributenode("align") ; elt.removeattributenode(attr_align) ; Affichage/ Suppression d une règle. regle=document.stylesheets[0].cssrules[0]; alert("la première règle est :"+regle.csstext); alert("et maintenant on la supprime!"); document.stylesheets[0].deleterule(regle); Ajout d une règle. indexfin=document.stylesheets[0].cssrules.length; new_regle="p {font family:verdana,arial"; alert("on ajoute la nouvelle règle :"+nouvelle_regle); document.stylesheets[0].insertrule(new_regle, indexfin); Equivalent: elt.removeattribute("align") Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 41/ 75 Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 42/ 75
Ecran, Fenetre et page Navigateur resizeto(width, height): redimensionner moveto(x, y): déplacer window.screen.width: largeur de l écran window.screen.height: hauteur de l écran window.screen.availwidth: largeur de la fenetre window.screen.availheight: hauteur de la fenetre TailledelapagesousIE: document.body.clientheight document.body.clientwidth TailledelapagesousFirefox: window.innerheight window.innerwidth On peut accéder à nombre d informations sur le navigateur à l aide de la collection navigator de l objet window. window.navigator.appname retourne le nom du navigateur. window.navigator.appversion retourne le numéro de version du navigateur ainsi que diverses informations sur le système. window.navigator.language retourne la langue du navigateur. Cette propriété n est pas supportée par Internet Explorer. window.navigator.platform retourne la plateforme sur laquelle fonctionne le navigateur(dans le cas de Windows, la chaîne retournée est"win32"). window.navigator.product retourne le nom du produit(dans le cas de Mozilla/FireFox, il s agit de Gecko). Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 43/ 75 Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 44/ 75 Navigation Pop-up: window.open() document.lastmodified: date et heure de modification window.history.back(): précédent window.history.forward(): suivant window.history.go(index): déplacement dans l historique window.history.length: taille de l historique document.referrer: URL de la page précédente window.location: URL du document popup = window.open( url, titre, options ); popup.close(); Parmi les options: top=100, left=100, width=200, height=100 scrollbars=yes status=no menubar=no Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 45/ 75 Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 46/ 75 Généralités AJAX Asynchronous Javascript And XML ensemble de techniques et de langages existants dépend de XMLHttpRequest: objet client manipulable avec Javascript apparuaveci.e.4 à l origine un objet Active X microsoft utilisable sur tous les navigateurs Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 47/ 75 Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 48/ 75
Principe La présentation gestiondelamiseenforme exploitation de la structure des données Les événements interactions avec les utilisateurs génération des appels et des requêtes Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 49/ 75 Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 50/ 75 Synchrone et asynchrone Exécution synchrone requête bloquante aucuntraitementsurleclienttantquelaréponsen estpas obtenue risque d attente indéfinie miseenplaced undélaidegarde Exécution asynchrone requête non bloquante exécution poursuivie sur le client(navigateur) le client(navigateur) poursuit son code(javascript, applet, flash...) miseenplaceduncallback auretourdelarequête nécessité de connaître l état de la requête L objet de base:xmlhttprequest Utilisation permet l émission de requêtes vers le serveur gestion asynchrone des requêtes polling sur le résultat de la requête basé sur l utilisation d attributs ou de méthodes dépendant des navigateurs: sur Firefox, Mozilla...: XMLHttpRequest surie:xmlhttp Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 51/ 75 Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 52/ 75 XMLHttpRequest: les attributs XMLHttpRequest: les attributs Etats: readystate 0:noninitialisé 1: connexion établie 2:requêtereçue 3:réponseencours 4:terminé status 200:OK 404:erreurpagenontrouvée Les éléments retournés responsetext responsexml changement d état onreadystatechange Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 53/ 75 Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 54/ 75
XMLHttpRequest: les méthodes open prototype open(mode, url,boolean) mode:typedelarequête(post,get) url: localisation du traitement true: asynchrone- false: synchrone send prototype send(chaine) null pour une commande GET Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 55/ 75 Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 56/ 75 Différentes étapes Création de l objet Mise en place d une requête 1 création de l objet XMHttpRequest 2 miseenplacedel attente/delafonctionderetour 3 exécution de la requête Solution de création 1 détection du naviagateur création d un XMLHttpRequestion sur Firefox... création d un XMLHTTP sur IE 2 test des erreurs de création essai de création d un XMLHttpRequestion sierreuressaidecréationd unxmlhttpsurie Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 57/ 75 Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 58/ 75 Création par détection du navigateur Création par gestion des erreur if (window.xmlhttprequest){ //Firefox, Safari,... xhr = new XMLHttpRequest(); else{ if (window.activexobject){ // Internet Explorer xhr = new ActiveXObject("Microsoft.XMLHTTP"); try { // Essayer Internet Explorer xhr = new ActiveXObject("Microsoft.XMLHTTP"); catch(e){ // en cas d échec xhr = new XMLHttpRequest(): // Autres navigateurs Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 59/ 75 Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 60/ 75
Gestion de la requête Emission de la requête Mise en place d une fonction de retour xhr.onreadystatechange = function(){ // instructions de traitement de la réponse ; Testdel étatdelarequête if (xhr.readystate == 4) { // Reçu, OK else { // Attendre... xhr.open("get","http ://www.monurl.com/laressource", true); xhr.send(null); Type de la ressource fichier HTML fichier texte élément issu d une exécution sur le serveur(php, ASP, JSP, CGI...) fichier XML Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 61/ 75 Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 62/ 75 Exemple complet <html> <head><script > function submitform(){ var xhr; try { xhr = new ActiveXObject( Msxml2.XMLHTTP ); catch (e){ try { xhr = new ActiveXObject( Microsoft.XMLHTTP ); catch (e2){ try { xhr = new XMLHttpRequest(); catch (e3) { xhr = false; xhr. onreadystatechange = function(){ if(xhr.readystate == 4){ if(xhr.status == 200) document.ajax.dyn.value="received:" + xhr.responsexml; else document.ajax.dyn.value="error code " + xhr.status; ; xhr.open("get", "data.xml", true); xhr.send(null); </ script ></head> <body> <form method="post" name=" ajax" action ="" > <input type=" button" value="submit" onclick ="submitform()" > <input type=" text" name="dyn" value="" > </form> </body> </html> Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 63/ 75 Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 64/ 75 Modification d un champ de formulaire Principe définition d un formulaire(aj) composé: unchampdetexte(t) un bouton(événement onclick) définition de la fonction de traitement création de l objet récupération d un fichier sur le serveur modification du contenu du champ texte Modification d un champ de formulaire <html> <head> <script > function execajax() { var xhr; try { xhr = new ActiveXObject( Msxml2.XMLHTTP ); catch (e) { try { xhr = new ActiveXObject( Microsoft.XMLHTTP ); catch (e2) { try { xhr = new XMLHttpRequest(); catch (e3) { xhr = false; xhr. onreadystatechange = function() { if(xhr.readystate == 4) { if(xhr.status == 200){ document.aj.t.value = xhr.responsetext; else{alert("error code " + xhr.status); ; xhr.open("get", "http://192.168.30.130/~arnaud/info0406/cours3/ex2.txt", true); xhr.send(null); </ script > </head> <body> <form name="aj"> <input type="text" name="t"> <input type="button" onclick="javascript:execajax()" value="cliquez ici"> </form> </body> </html> Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 65/ 75 Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 66/ 75
Modification d un texte Modification d un champ de formulaire Principe définition d un div: définition de l attribut id définition de la fonction de traitement création de l objet récupération de l accès au div récupération d un fichier sur le serveur modification du contenu du div <html> <head> <script > function execajax(){ var xhr; var zone = document.getelementbyid("mon_div"); try { xhr = new ActiveXObject( Msxml2.XMLHTTP ); catch (e) { try { xhr = new ActiveXObject( Microsoft.XMLHTTP ); catch (e2) { try { xhr = new XMLHttpRequest(); catch (e3) { xhr = false; xhr. onreadystatechange = function(){ if(xhr.readystate == 4){ if(xhr.status == 200){ zone.innerhtml = xhr.responsetext; else{ alert("error code " + xhr.status); ; xhr.open("get", "http://192.168.30.130/~arnaud/info0406/cours3/ex2.txt", true); xhr.send(null); </ script ></head> <body> <p> <a href ="#" onclick="execajax()" > cliquez i c i </a> </p> <div id="mon_div"> la valeur d origine </div> </body> </html> Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 67/ 75 Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 68/ 75 MiseenplacedeHTML Le fichier HTML Principe définition d un div: définition de l attribut id définition de la fonction de traitement création de l objet récupération de l accès au div récupération d un fichier HTML sur le serveur modification du contenu du div tableau.html <table border="1"> <tr> <th> nom </ th> <th> prénom </th> </tr> <tr> <td> Renard </td> <td> Arnaud </td> </tr> <tr> <td> Steffenel </ td> <td> Luiz Angelo </ td> </tr> </table> Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 69/ 75 Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 70/ 75 MiseenplacedeHTML Paramètres des requêtes et traitement serveur <html> <head> <script > function execajax(){ var xhr; var zone = document.getelementbyid("mon_div"); try { xhr = new ActiveXObject( Msxml2.XMLHTTP ); catch (e){ try { xhr = new ActiveXObject( Microsoft.XMLHTTP ); catch (e2) { try { xhr = new XMLHttpRequest(); catch (e3) { xhr = false; xhr. onreadystatechange = function(){ if(xhr.readystate == 4){ if(xhr.status == 200){ zone.innerhtml = xhr.responsetext; else{ alert("error code " + xhr.status); ; xhr.open("get", "http://192.168.30.130/~arnaud/info0406/cours3/tableau.html", true); xhr.send(null); </head> <body> <p> <a href ="#" onclick="execajax()" > cliquez i c i </a> </p> <div id="mon_div"> la valeur d origine </div> </body> </html> Principe utilisation d un URL GET utilisation d un formulaire construction de la requête partir des informations collectées dans le formulaire requête vers un script PHP récupération des paramètres de la requête traitement sur le serveur affichagedansledivsurleclient Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 71/ 75 Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 72/ 75
Le script PHP Le code javascript <?php $texte = $_GET["texte"]; echo "<p> vous avez écrit : ". $texte."</p>";?> <html> <head> <script > function execajax() { var xhr; var zone = document.getelementbyid("amodifier"); var requete = "http://192.168.30.130/trait.php?texte=" + document.aj.t.value ; alert(requete); try { xhr = new ActiveXObject( Msxml2.XMLHTTP ); catch (e) { try { xhr = new ActiveXObject( Microsoft.XMLHTTP ); catch (e2) { try { xhr = new XMLHttpRequest(); catch (e3) { xhr = false; xhr. onreadystatechange = function() { if(xhr.readystate == 4) { if(xhr.status == 200){ zone.innerhtml = xhr.responsetext; else{ alert("error code " + xhr.status); ; xhr.open("get", requete, true); xhr.send(null); Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 73/ 75 Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 74/ 75 Le fichier HTML </head> <body> <form name="aj"> <p> entrez votre texte : <input type="text" name="t"> </p> <input type="button" onclick="javascript:execajax()" value="cliquez ici"> </form> <div id="amodifier"> le texte d origine </div> </body> </html> Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 75/ 75