dynamichtml dhtml butlsteffenel/cours/licence/... · 2014-06-13 · arnaudrenard (urca) dhtml...
TRANSCRIPT
DHTMLINFO0406
Arnaud RENARD
Arnaud RENARD (URCA) DHTML [email protected] 1 / 80
Plan
1 Introduction
2 Javascript
3 DOMGestion d’événementsSelection d’élémentsModifications avec DOM
4 AJAXFonctionnementUne première requêteDes exemples
5 JSON
6 jQuery
Arnaud RENARD (URCA) DHTML [email protected] 2 / 80
DHTML et WEB 2.0
HTML dynamique, de l’anglais Dynamic HTML, souvent abrégéDHTML, est un nom générique donné à l’ensemble des techniquesutilisées par l’auteur d’une page web pour que celle-ci soit capable dese 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éesdynamiquement ;
Les champs de formulaire peuvent être contrôlées ;
Des informations sont échangées entre le navigateur et le serveur.
Arnaud RENARD (URCA) DHTML [email protected] 3 / 80
Objectif
Butrépartir la charge et l’utilisation des ressources
déplacer du traitement sur le clientdéplacer de la mise en forme sur le client
développer l’utilisation de pages WEB dynamiquespermettre un chargement "local" dans la pagepermettre la mise à jour d’une fraction d’un documentinter-agir entre des éléments (images, formulaires) et un serveur
Arnaud RENARD (URCA) DHTML [email protected] 4 / 80
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 [email protected] 5 / 80
Plan
1 Introduction
2 Javascript
3 DOMGestion d’événementsSelection d’élémentsModifications avec DOM
4 AJAXFonctionnementUne première requêteDes exemples
5 JSON
6 jQuery
Arnaud RENARD (URCA) DHTML [email protected] 6 / 80
JavaScript : Historique
C’est un langage orienté objets à prototype, c’est-à-dire que lesbases du langage et ses principales interfaces sont fournies par desobjets qui ne sont pas des instances de classes, mais qui sont chacunéquipés de constructeurs permettant de générer leurs propriétés, etnotamment une propriété de prototypage qui permet d’en générer desobjets héritiers personnalisés.Le langage a été créé en 1995 par Brendan Eich pour le compte deNetscape Communications Corporation. Le langage actuellement à laversion 1.7 est une implémentation du standard ECMA-262. La version1.8 est en développement et intégrera des éléments du langagePython. La version 2.0 du langage est prévue pour intégrer la 4eversion du standard ECMA.
Arnaud RENARD (URCA) DHTML [email protected] 7 / 80
JavaScript : Insertion dans un document
en ligne
<ba l i se onc l i c k = ’ . . . ’ >
interne
< s c r i p t type =" t e x t / j a v a s c r i p t " > . . . < / s c r i p t >
externe
< s c r i p t type =" t e x t / j a v a s c r i p t " s rc = " . . / s c r i p t s / monScript . j s ">
Navigateurs non JavaScript
< s c r i p t type =" t e x t / j a v a s c r i p t ">( . . . )<nosc r ip t >Achetez un nav iga teur ! < / nosc r ip t >
</ s c r i p t >
Arnaud RENARD (URCA) DHTML [email protected] 8 / 80
JavaScript : code convention
espaces, fins de ligne et tabulations ignorées ;
; en fin de ligne ;
// ou /* ... */ pour les commentaires ;
noms de variables et de fonction sensibles à la casse ;
déclaration de variable optionelle (portée globale) ;
déclaration avec var (donc de type undefined, portée bloc) ;
affectation a=b=c=5 ; , += , -= , *= , /= =(expression) ?4 :5 ; ;
opérateurs : + (addition ou concaténation), - , * , / , %, ++ , - - , !,&& , || ;
comparaison : <, <=, > , >= , == , ! = , === (type et valeur) ;
conversion explicite 1=="1" est true ;
évaluation d’expression : eval("a=3+2 ;alert(a) ;").
Arnaud RENARD (URCA) DHTML [email protected] 9 / 80
JavaScript : les types
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 [email protected] 10 / 80
JavaScript : tableaux
/ / tab leau v idevar tableau1 = new Array ( ) ;/ / tab leau de t a i l l e 4var tableau2 = new Array ( 4 ) ;/ / i n i t i a l i s a t i o n du tab leautableau2 = [ " Beurre " , " Con f i t u re " , " Pain " , " Jus de f r u i t " ] ;/ / c r éa t i on e t i n i t i a l i s a t i o nvar tableau3 = new Array ( ’ Beurre ’ , ’ Conf i tu re ’ , ’ Pain ’ ) ;/ / t a i l l e du tab leaua l e r t ( tableau3 . leng th ) ;/ / tab leau mu l t ivar tableau4 = new Array ( 4 ) ;f o r ( i =0; i < tableau4 . leng th ; i ++){
tableau4 [ i ] = newArray (2 ) ;}
Arnaud RENARD (URCA) DHTML [email protected] 11 / 80
JavaScript : test des types
var myFun = new Funct ion ( "5+2 " )var shape=" round "var s ize=1var today=new Date ( )
t ypeo f myFun == ’ func t i on ’t ypeo f shape == ’ s t r i ng ’t ypeo f s ize == ’ number ’t ypeo f today == ’ ob jec t ’t ypeo f don tEx is t == ’ undefined ’t ypeo f t r ue == ’ boolean ’t ypeo f n u l l == ’ ob jec t ’t ypeo f 62 == ’ number ’t ypeo f ’ He l lo world ’ == ’ s t r i ng ’t ypeo f pa rse In t == ’ func t i on ’t ypeo f Date == ’ func t i on ’t ypeo f Funct ion == ’ func t i on ’t ypeo f Math == ’ ob jec t ’t ypeo f Object == ’ func t i on ’t ypeo f S t r i ng == ’ func t i on ’
Arnaud RENARD (URCA) DHTML [email protected] 12 / 80
JavaScript : l’objet String
chaine =" Bonjour ! " ;/ / une p rop r i é t éa l e r t ( chaine . leng th ) ;/ / des méthodeschaine . indexOf ( ’ o ’ ) ; / / 0 ( ou −1)chaine . las t IndexOf ( ’ o ’ ) ; / / 4chaine . charAt ( 5 ) ; / / uchaine . toUppercase ; / / majusculechaine . toLowercase ;chaine . subs t r i ng ( 1 , 4 ) ; / / on jchaine . subs t r ( 1 , 4 ) ; / / onjochaine . subs t r ( 2 ) ; / / n jou r !tab=chaine . s p l i t ( ’ o ’ ) ; / / [ " B" , " n j " , " ur ! " ]chaine . rep lace ( " j ou r " , " s o i r " ) ; / / Bonsoir !
Expressions rationnelles : match et searchAutres objets : Math, Date, window ...
Arnaud RENARD (URCA) DHTML [email protected] 13 / 80
L’objet window
Méthodes utilisables directement.
/ / messagea l e r t ( chaine )
/ / con f i rma t i oni f ( conf i rm ( chaine ) )
a l e r t ( " Bravo " ) ;
/ / va leurquan t i t e=prompt ( " Entrez l a quan t i t é souhai tée : " ) ;a l e r t ( quan t i t e ) ;
Arnaud RENARD (URCA) DHTML [email protected] 14 / 80
Object à prototype
< s c r i p t type =" t e x t / j a v a s c r i p t ">f unc t i on cd ( p_chanteuse , p _ t i t r e ) {
t h i s . chanteuse=p_chanteuse ;t h i s . t i t r e = p _ t i t r e ;t h i s . desc r i p t i on= f unc t i on ( ) {
r e t u rn t h i s . t i t r e +" par "+ t h i s . chanteuse ;}t h i s . laChanteuse = af f icheChanteuse ;
}f unc t i on af f icheChanteuse ( ) {
a l e r t ( t h i s . chanteuse ) ;}t o t o = new cd ( "Madonna " , " Frozen " ) ;a l e r t ( t o t o . t i t r e ) ; / / Frozena l e r t ( t o t o . desc r i p t i on ( ) ) ; / / Frozen par Madonnat o t o . laChanteuse ( ) ; / / Madonna</ s c r i p t >
Arnaud RENARD (URCA) DHTML [email protected] 15 / 80
Tests et boucles
i f ( c==1) { . . . }i f ( c==1) { . . . } e lse { . . . }swi tch ( c ) {
case 1: . . . break ;. . .d e f au l t :. . .
}wh i le ( c<3) {
c++;. . .
}f o r ( i =0; i <3< i ++) { . . . }var tab = new Array (3 ) ;f o r ( element i n tab ) {
element =" t e s t " ;}
Arnaud RENARD (URCA) DHTML [email protected] 16 / 80
Timers
Avec setTimeout
var i =6f unc t i on t e s t ( ) {
a l e r t ( i −−);i f ( i >0)
setTimeout ( " t e s t ( ) " , 1000) ;}t e s t ( ) ;
Avec setInterval
var i =6f unc t i on affAndDec ( ) {
a l e r t ( i −−);i f ( i <0)
c learTimeout ( i d e n t i f i a n t ) ;}var i d e n t i f i a n t = s e t I n t e r v a l ( " affAndDec ( ) " , 1000) ;
Arnaud RENARD (URCA) DHTML [email protected] 17 / 80
Plan
1 Introduction
2 Javascript
3 DOMGestion d’événementsSelection d’élémentsModifications avec DOM
4 AJAXFonctionnementUne première requêteDes exemples
5 JSON
6 jQuery
Arnaud RENARD (URCA) DHTML [email protected] 18 / 80
Le DOM, À quoi cela sert-il ?
Le DOM, ou Document Object Model est un standard duW3Cdésignant l’ensemble des techniques permettant à un langage descript (comme JavaScript) d’accéder au contenu d’un document balisé(comme par exemple une page HTML).
Le HTML « standard » est statique. La page est chargée sur lenavigateur de l’internaute, et son affichage est défini une fois pourtoutes. Si l’on revient sur cette page un autre jour, elle n’aura paschangé d’aspect. On peut considérer que le DOM permet d’allerau-delà de cet aspect statique.
Mais ajouter des animations à une page est un acte gratuit etinutile si cela n’apporte rien à l’internaute. Le JavaScript permetd’augmenter le niveau d’interactivité de l’utilisateur, voire deconcevoir des applications en ligne.
Ces animations supplémentaires ne sont traitées que sur lamachine de l’internaute, ce qui allège d’autant les chargesreposant sur le serveur.
Arnaud RENARD (URCA) DHTML [email protected] 19 / 80
Techniques mises en jeu
Le DOM est la conjonction d’un ensemble de techniques, qui sontsupportées par la pluspart des navigateurs.
une vue orientée objet de la page web et de ses éléments.Chaque élément < tag id = ”id_du_tag” > blabla < /tag > estidentifié par son identifiant (l’attribut id) et accessible de manièreunivoque.
la structure entière de la page peut être représentée sous la formed’une arborescence, permettant l’accès direct (et la modification,l’insertion, la suppression) à chacun de ses éléments. C’est àproprement parler cette structure qui constitue le DOM du W3C.
l’appel systématique aux feuilles de style (les CSS) qui permettentune modification précise de l’apparence de chacun des éléments.
le recours éventuel à des langages de script pour la gestion desévénements. Nous nous limiterons au JavaScript.
Arnaud RENARD (URCA) DHTML [email protected] 20 / 80
Plan
1 Introduction
2 Javascript
3 DOMGestion d’événementsSelection d’élémentsModifications avec DOM
4 AJAXFonctionnementUne première requêteDes exemples
5 JSON
6 jQuery
Arnaud RENARD (URCA) DHTML [email protected] 21 / 80
Attributs de gestion d’événements
La gestion d’événements (clavier, souris, formulaire, image,navigateur, ...) est un processus complexe si on veut pouvoir tirer partide toutes les possibilités offertes par le DOM. Fort heureusement,lorsqu’il s’agit de coder un effet simple, les attributs HTML définis dansla recommandation du W3C sont suffisants. On trouve :
Les attributs de gestion des boutons de la souris : onclick etondblclick permettent la prise en compte d’un clic simple ou d’undouble clic, tandis que onmousedown et onmouseup détectent siun bouton de la souris a été enfoncé ou relaché.Les attributs de gestion des déplacements de la souris :onmouseover et onmouseout détectent si la souris passe sur laboîte de l’élément courant, ou bien la quitte.Les attributs de gestion du clavier : onkeypress, onkeydown etonkeyup détectent respectivement si l’utilisateur a appuyé puisrelaché, simplement appuyé, ou relaché une touche du clavier.onLoad permet de détecter le chargement de la page et onError laprésence d’erreurs
Arnaud RENARD (URCA) DHTML [email protected] 22 / 80
Les événements
Formulaire et éléments de formulaireonFocus
onBlur : perte du focus
onChange
onClick
onReset
onSelect
onSubmit
Arnaud RENARD (URCA) DHTML [email protected] 23 / 80
Modification des propriétés de style
Un événement permet de déclencher une action, par exemple demodifier localement les propriétés de style d’un élément. On fait alorsappel à l’objet courant this en JavaScript. En voici quelques exemples :
<p onmouseover=" t h i s . s t y l e . co l o r = ’ blue ’ "onmouseout=" t h i s . s t y l e . co l o r = ’ black ’ " > Ceci es t untex te dont l a cou leur va changer au passage dela sou r i s . </p>
Arnaud RENARD (URCA) DHTML [email protected] 24 / 80
Modification des propriétés de style
Dans l’exemple suivant l’utilisation de majuscules permet d’éviterl’utilisation du tiret présent dans la propriété CSS.
<ps t y l e =" pos i t i o n : absolu te ; l e f t :10px ; top :230px ;width :400px "
onmouseover=" t h i s . s t y l e . l e f t = ’100px ’ ;t h i s . s t y l e . top = ’300px ’ ; t h i s . s t y l e . width = ’600px ’ ;t h i s . s t y l e . t e x t A l i g n = ’ center ’ "
oumouseout=" t h i s . s t y l e . l e f t = ’10px ’ ;t h i s . s t y l e . top = ’230px ’ ; t h i s . s t y l e . width = ’400px ’ ;t h i s . s t y l e . t e x t A l i g n = ’ l e f t ’ " >Exemple de tex te. . . .à géométr ie va r i ab l e . </p>
Arnaud RENARD (URCA) DHTML [email protected] 25 / 80
Plan
1 Introduction
2 Javascript
3 DOMGestion d’événementsSelection d’élémentsModifications avec DOM
4 AJAXFonctionnementUne première requêteDes exemples
5 JSON
6 jQuery
Arnaud RENARD (URCA) DHTML [email protected] 26 / 80
Pour aller plus loin
Modification d’attributs quelconques : this.src=” ;
Modification de la class : this.className=” ;
Modification du contenu d’un élément : this.innerHTML=” ;
Accès direct aux éléments par leur id :elem = document.getElementById("id_du_tag")
Accès direct aux éléments par leur nom (renvoie une collection) :liens=elem.getElementsByTagName(’a’) ;
Accès direct aux éléments par leur name :liens=elem.getElementsByName(’a’) ;
Accès à l’attribut getAttribute("nom_d_attribut")
variable = document.getAttribute("nom") ;
Arnaud RENARD (URCA) DHTML [email protected] 27 / 80
getElementById
<img id = ’nomImage ’ src = ’ wa i t i ng . g i f ’ / >
<a h re f = ’ \ # ’ onc l i c k = ’document . getElementById ( " nomImage " ) . s rc =" image1 . jpg " ; ’>image1 </a>
<a h re f = ’ \ # ’ onc l i c k = ’document . getElementById ( " nomImage " ) . s rc =" image2 . jpg " ; ’>image2 </a>
Arnaud RENARD (URCA) DHTML [email protected] 28 / 80
getElementsByTagName
<o l i d =" t o t o ">< l i lang =" f r ">Bonjour </ l i >< l i lang ="be"> Bonjour r r < / l i >< l i lang ="us">Hel lo </ l i >< l i lang ="de"> Al lo </ l i >
</ o l >
< s c r i p t type =" t e x t / j a v a s c r i p t ">maOl = document . getElementById ( " t o t o " )var lesElements= maOl . getElementsByTagName ( " l i " ) ;f o r ( var i =0; i < lesElements . leng th ; i ++){
a l e r t ( lesElements . i tem ( i ) . g e t A t t r i b u t e ( " lang " ) ) ;}</ s c r i p t >
Résultat : fr, be, us, de
Arnaud RENARD (URCA) DHTML [email protected] 29 / 80
Accès par les collections
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=’valeurincohérente’ ;
accès au second élément du premier formulaire
document . forms [ 0 ] . elements [ 1 ] . value =" t o t o " ;
Arnaud RENARD (URCA) DHTML [email protected] 30 / 80
Accès aux valeurs des éléments
Valeur des éléments de formulairesvalue
chemin.vers.un.element.value = xxx
Conteneur HTMLinnerText
chemin.vers.un.element.innerText = xxx
innerHTML
chemin.vers.un.element.innerHTML = xxx
Imagesrc
chemin.vers.un.element.src = xxx
Arnaud RENARD (URCA) DHTML [email protected] 31 / 80
Accès par le nom
Nommage successif des éléments
utilisation des noms successifs depuis la racine
<form method="POST" name=" a jax " ac t i on ="" >< inpu t type =" but ton " value ="Submit " onc l i c k =" submitForm ( ) " >< inpu t type =" t e x t " name="dyn " value ="" >
</ form>
pour accéder et modifier le contenu du champ de texte :
document . a jax . dyn . value =" t o t o " ;
Arnaud RENARD (URCA) DHTML [email protected] 32 / 80
Manipulation de l’arborescence
elt est un élément identifié, par exemple, par une méthodegetElementById.
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 (nom du noeud, img, a, ...) et nodeType (type denoeud)Méthodes : hasChildNodes() et hasAttributes()
Arnaud RENARD (URCA) DHTML [email protected] 33 / 80
Plan
1 Introduction
2 Javascript
3 DOMGestion d’événementsSelection d’élémentsModifications avec DOM
4 AJAXFonctionnementUne première requêteDes exemples
5 JSON
6 jQuery
Arnaud RENARD (URCA) DHTML [email protected] 34 / 80
Modification dans le DOM
Ce qui est / n’est pas modifiable
appel à des popup
boîte alertnouvelle fenêtre : window.open(...)
possibilité de modifier des éléments conteneursdiv dont on a définit la classe ou l’idspan dont on a définit la classe ou l’id
impossibilité de rajouter des éléments au niveau du document
impossibilité de modifier la structure du documentpossibilité d’accéder et de modifier certains attributs
champs texte des formulairescontenu des listes déroulantes
Arnaud RENARD (URCA) DHTML [email protected] 35 / 80
Ajout d’un élément
div1=document . getElementById ( " parentDiv " ) ;p2=document . getElementById ( " enfantP " ) ;p1=document . createElement ( " p " ) ;d iv1 . i nse r tBe fo re ( p1 , p2 ) ;
Arnaud RENARD (URCA) DHTML [email protected] 36 / 80
Suppression d’un élément
e l t =document . getElementById ( " d iv1 " ) ;e l t _ i n c l u s =document . getElementById ( " para1 " ) ;e l t _ r e j e t e = e l t . removeChild ( e l t _ i n c l u s ) ;
parag2=parag.cloneNode(true)
elt.replaceChild(newChild, oldChild)
Arnaud RENARD (URCA) DHTML [email protected] 37 / 80
Suppression d’un attribut
e l t =document . getElementById ( " top " ) ;a t t r _ a l i g n = e l t . ge tA t t r ibu teNode ( " a l i g n " ) ;e l t . removeAttr ibuteNode ( a t t r _ a l i g n ) ;
Existe aussi : elt.removeAttribute("align")
Arnaud RENARD (URCA) DHTML [email protected] 38 / 80
Manipulation des feuilles de style
Affichage / Suppression d’une règle.
reg le=document . s ty leSheets [ 0 ] . cssRules [ 0 ] ;a l e r t ( " La première règ le est : " + reg le . cssText ) ;a l e r t ( " Et maintenant on l a supprime ! " ) ;document . s ty leSheets [ 0 ] . de le teRule ( reg le ) ;
Ajout d’une règle.
i n dex f i n =document . s ty leSheets [ 0 ] . cssRules . leng th ;new_regle ="p { fon t−f am i l y : Verdana , A r i a l } " ;a l e r t ( "On a jou te l a nouve l le règ le : " + nouve l le_ reg le ) ;document . s ty leSheets [ 0 ] . i nse r tRu le ( new_regle , i n dex f i n ) ;
Arnaud RENARD (URCA) DHTML [email protected] 39 / 80
Ecran, Fenetre et page
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
Taille de la page sous IE :
document.body.clientHeight
document.body.clientWidth
Taille de la page sous Firefox :
window.innerHeight
window.innerWidth
Arnaud RENARD (URCA) DHTML [email protected] 40 / 80
Navigateur
On peut accéder à nombre d’informations sur le navigateur à l’aide dela collection navigator de l’objet window.
window.navigator.appName retourne le nom du navigateur.
window.navigator.appVersion retourne le numéro de version dunavigateur 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 laquellefonctionne le navigateur (dans le cas de Windows, la chaîneretournée est "Win32").
window.navigator.product retourne le nom du produit (dans le casde Mozilla/FireFox, il s’agit de Gecko).
Arnaud RENARD (URCA) DHTML [email protected] 41 / 80
Navigation
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
Arnaud RENARD (URCA) DHTML [email protected] 42 / 80
Pop-up : window.open()
popup = window . open ( u r l , ’ t i t r e ’ , op t ions ) ;popup . c lose ( ) ;
Parmi les options :
top=100, left=100 , width=200 , height=100
scrollbars=yes
status=no
menubar=no
Arnaud RENARD (URCA) DHTML [email protected] 43 / 80
Plan
1 Introduction
2 Javascript
3 DOMGestion d’événementsSelection d’élémentsModifications avec DOM
4 AJAXFonctionnementUne première requêteDes exemples
5 JSON
6 jQuery
Arnaud RENARD (URCA) DHTML [email protected] 44 / 80
Généralités
AJAXAsynchronous Javascript And XML
ensemble de techniques et de langages existants
dépend de XMLHttpRequest : objet client manipulable avecJavascript
apparu avec I.E. 4
à l’origine un objet Active X microsoft
utilisable sur tous les navigateurs
Arnaud RENARD (URCA) DHTML [email protected] 45 / 80
Plan
1 Introduction
2 Javascript
3 DOMGestion d’événementsSelection d’élémentsModifications avec DOM
4 AJAXFonctionnementUne première requêteDes exemples
5 JSON
6 jQuery
Arnaud RENARD (URCA) DHTML [email protected] 46 / 80
Principe
La présentation
gestion de la mise en forme
exploitation de la structure des données
Les événementsinteractions avec les utilisateurs
génération des appels et des requêtes
Arnaud RENARD (URCA) DHTML [email protected] 47 / 80
Synchrone et asynchrone
Exécution synchrone
requête bloquante
aucun traitement sur le client tant que la réponse n’est pasobtenue
risque d’attente indéfinie
mise en place d’un délai de garde
Exécution asynchrone
requête non bloquante
exécution poursuivie sur le client (navigateur)
le client (navigateur) poursuit son code (Javascript, applet, flash...)
mise en place dun callback au retour de la requête
nécessité de connaître l’état de la requête
Arnaud RENARD (URCA) DHTML [email protected] 48 / 80
L’objet de base :XMLHttpRequest
Utilisationpermet 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éthodesdépendant des navigateurs :
sur Firefox, Mozilla ... : XMLHttpRequestsur IE : XMLHTTP
Arnaud RENARD (URCA) DHTML [email protected] 49 / 80
XMLHttpRequest : les attributs
Etats : readyState0 : non initialisé
1 : connexion établie
2 : requête reçue
3 : réponse en cours
4 : terminé
status
200 : OK
404 : erreur page non trouvée
Arnaud RENARD (URCA) DHTML [email protected] 50 / 80
XMLHttpRequest : les attributs
Les éléments retournésresponseText
responseXML
changement d’état
onreadystatechange
Arnaud RENARD (URCA) DHTML [email protected] 51 / 80
XMLHttpRequest : les méthodes
openprototype
open (mode , u r l , boolean )
mode : type de la requête (POST, GET)
url : localisation du traitement
true : asynchrone - false : synchrone
sendprototype
send ( chaine )
null pour une commande GET
Arnaud RENARD (URCA) DHTML [email protected] 52 / 80
Plan
1 Introduction
2 Javascript
3 DOMGestion d’événementsSelection d’élémentsModifications avec DOM
4 AJAXFonctionnementUne première requêteDes exemples
5 JSON
6 jQuery
Arnaud RENARD (URCA) DHTML [email protected] 53 / 80
Différentes étapes
Mise en place d’une requête1 création de l’objet XMHttpRequest2 mise en place de l’attente / de la fonction de retour3 exécution de la requête
Arnaud RENARD (URCA) DHTML [email protected] 54 / 80
Création de l’objet
Solution de création1 détection du naviagateur
création d’un XMLHttpRequestion sur Firefox ...création d’un XMLHTTP sur IE
2 test des erreurs de créationessai de création d’un XMLHttpRequestionsi erreur essai de création d’un XMLHTTP sur IE
Arnaud RENARD (URCA) DHTML [email protected] 55 / 80
Création par détection du navigateur
i f ( window . XMLHttpRequest ) {/ / F i re fox , Sa fa r i , . . .
xhr = new XMLHttpRequest ( ) ;} e lse {
i f ( window . Act iveXObject ) {/ / I n t e r n e t Exp lorer
xhr = new Act iveXObject ( " M ic roso f t .XMLHTTP " ) ;}
}
Arnaud RENARD (URCA) DHTML [email protected] 56 / 80
Création par gestion des erreur
t r y {/ / Essayer I n t e r n e t Exp lorerxhr = new Act iveXObject ( " M ic roso f t .XMLHTTP " ) ;
} catch ( e ) {/ / en cas d ’ échecxhr = new XMLHttpRequest ( ) : / / Autres nav iga teurs
}
Arnaud RENARD (URCA) DHTML [email protected] 57 / 80
Gestion de la requête
Mise en place d’une fonction de retour
xhr . onreadystatechange = func t i on ( ) {/ / i n s t r u c t i o n s de t r a i t emen t de l a réponse
} ;
Test de l’état de la requête
i f ( xhr . readyState == 4) {/ / Reçu , OK
} e lse {/ / At tendre . . .
}
Arnaud RENARD (URCA) DHTML [email protected] 58 / 80
Emission de la requête
xhr . open ( "GET" , " h t t p : / /www. monurl . com/ la ressource " , t r ue ) ;xhr . send ( n u l l ) ;
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 [email protected] 59 / 80
Exemple complet
<html ><head><sc r i p t >f unc t i on submitForm ( ) {
var xhr ;t r y { xhr = new Act iveXObject ( ’ Msxml2 .XMLHTTP ’ ) ; }catch ( e ) {
t r y { xhr = new Act iveXObject ( ’ M ic roso f t .XMLHTTP ’ ) ; }catch ( e2 ) {
t r y { xhr = new XMLHttpRequest ( ) ; }catch ( e3 ) { xhr = f a l s e ; }
}}
xhr . onreadystatechange = func t i on ( ) {i f ( xhr . readyState == 4 ) {
i f ( xhr . s ta tus == 200) document . a jax . dyn . value ="Received : " + xhr . responseXML ;e lse document . a jax . dyn . value =" Er ro r code " + xhr . s ta tus ;
}} ;
xhr . open ( "GET" , " data . xml " , t r ue ) ;xhr . send ( n u l l ) ;
}</ s c r i p t ></head><body>
<form method="POST" name=" a jax " ac t i on ="" >< inpu t type =" but ton " value ="Submit " onc l i c k =" submitForm ( ) " >< inpu t type =" t e x t " name="dyn " value ="" >
</ form></body></ html >
Arnaud RENARD (URCA) DHTML [email protected] 60 / 80
Plan
1 Introduction
2 Javascript
3 DOMGestion d’événementsSelection d’élémentsModifications avec DOM
4 AJAXFonctionnementUne première requêteDes exemples
5 JSON
6 jQuery
Arnaud RENARD (URCA) DHTML [email protected] 61 / 80
Modification d’un champ de formulaire
Principe
définition d’un formulaire (aj) composé :un champ de texte (t)un bouton (événement onClick)
définition de la fonction de traitementcréation de l’objetrécupération d’un fichier sur le serveurmodification du contenu du champ texte
Arnaud RENARD (URCA) DHTML [email protected] 62 / 80
Modification d’un champ de formulaire
<html > <head> <sc r i p t >f unc t i on execAJAX ( ){
var xhr ;t r y { xhr = new Act iveXObject ( ’ Msxml2 .XMLHTTP ’ ) ; }catch ( e ){ t r y { xhr = new Act iveXObject ( ’ M ic roso f t .XMLHTTP ’ ) ; }
catch ( e2 ){ t r y { xhr = new XMLHttpRequest ( ) ; }
catch ( e3 ) { xhr = f a l s e ; }}
}xhr . onreadystatechange = func t i on ( ){
i f ( xhr . readyState == 4){
i f ( xhr . s ta tus == 200){ document . a j . t . value = xhr . responseText ; }e lse { a l e r t ( " E r ro r code " + xhr . s ta tus ) ; }
}} ;
xhr . open ( "GET" , " h t t p : / / 192 .168 .30 .130 /~ arnaud / Info0406 / Cours3 / ex2 . t x t " , t r ue ) ;xhr . send ( n u l l ) ;
}</ s c r i p t > </head><body>
<form name=" a j ">< inpu t type =" t e x t " name=" t ">< inpu t type =" but ton " onCl ick =" j a v a s c r i p t : execAJAX ( ) " value =" c l i quez i c i "></ form>
</body></ html >
Arnaud RENARD (URCA) DHTML [email protected] 63 / 80
Modification d’un texte
Principe
définition d’un div :définition de l’attribut id
définition de la fonction de traitementcréation de l’objetrécupération de l’accès au divrécupération d’un fichier sur le serveurmodification du contenu du div
Arnaud RENARD (URCA) DHTML [email protected] 64 / 80
Modification d’un champ de formulaire
<html ><head> <sc r i p t >f unc t i on execAJAX ( ) {
var xhr ;var zone = document . getElementById ( " mon_div " ) ;t r y { xhr = new Act iveXObject ( ’ Msxml2 .XMLHTTP ’ ) ; }catch ( e ) {
t r y { xhr = new Act iveXObject ( ’ M ic roso f t .XMLHTTP ’ ) ; }catch ( e2 ) {
t r y { xhr = new XMLHttpRequest ( ) ; }catch ( e3 ) { xhr = f a l s e ; }
}}
xhr . onreadystatechange = func t i on ( ) {i f ( xhr . readyState == 4 ) {
i f ( xhr . s ta tus == 200){ zone . innerHTML = xhr . responseText ;} e lse { a l e r t ( " E r ro r code " + xhr . s ta tus ) ; }
}} ;
xhr . open ( "GET" , " h t t p : / / 192 .168 .30 .130 /~ arnaud / Info0406 / Cours3 / ex2 . t x t " , t r ue ) ;xhr . send ( n u l l ) ;
}</ s c r i p t ></head><body>
<p> <a h re f ="#" onCl ick ="execAJAX ( ) " > c l i quez i c i </a> </p><d iv i d ="mon_div "> l a va leur d ’ o r i g i n e </ div >
</body> </ html >
Arnaud RENARD (URCA) DHTML [email protected] 65 / 80
Mise en place de HTML
Principe
définition d’un div :définition de l’attribut id
définition de la fonction de traitementcréation de l’objetrécupération de l’accès au divrécupération d’un fichier HTML sur le serveurmodification du contenu du div
Arnaud RENARD (URCA) DHTML [email protected] 66 / 80
Le fichier HTML
tableau.html
< tab le border ="1" >< t r ><th > nom </ th ><th > prénom </ th ></ t r >< t r ><td > Renard </ td ><td > Arnaud </ td ></ t r >< t r ><td > S te f f ene l </ td ><td > Luiz−Angelo </ td ></ t r ></ tab le >
Arnaud RENARD (URCA) DHTML [email protected] 67 / 80
Mise en place de HTML
<html ><head><sc r i p t >f unc t i on execAJAX ( ) {
var xhr ;var zone = document . getElementById ( " mon_div " ) ;t r y { xhr = new Act iveXObject ( ’ Msxml2 .XMLHTTP ’ ) ; }catch ( e ) {
t r y { xhr = new Act iveXObject ( ’ M ic roso f t .XMLHTTP ’ ) ; }catch ( e2 ) {
t r y { xhr = new XMLHttpRequest ( ) ; }catch ( e3 ) { xhr = f a l s e ; }
}}
xhr . onreadystatechange = func t i on ( ) {i f ( xhr . readyState == 4 ) {
i f ( xhr . s ta tus == 200){ zone . innerHTML = xhr . responseText ;} e lse { a l e r t ( " E r ro r code " + xhr . s ta tus ) ; }
}} ;
xhr . open ( "GET" , " h t t p : / / 192 .168 .30 .130 /~ arnaud / Info0406 / Cours3 / tab leau . html " , t r ue ) ;xhr . send ( n u l l ) ;
}</ s c r i p t ></head><body><p> <a h re f ="#" onCl ick ="execAJAX ( ) " > c l i quez i c i </a> </p>
<d iv i d ="mon_div "> l a va leur d ’ o r i g i n e </ div ></body></ html >
Arnaud RENARD (URCA) DHTML [email protected] 68 / 80
Paramètres des requêtes et traitement serveur
Principe
utilisation d’un URL GETutilisation d’un formulaireconstruction de la requête partir des informations collectées dansle formulaire
requête vers un script PHPrécupération des paramètres de la requêtetraitement sur le serveur
affichage dans le div sur le client
Arnaud RENARD (URCA) DHTML [email protected] 69 / 80
Le script PHP
<?php$tex te = $_GET [ " t ex te " ] ;echo "<p> vous avez é c r i t : " . $ tex te . " < / p > " ;?>
Arnaud RENARD (URCA) DHTML [email protected] 70 / 80
Le code javascript
<html ><head><sc r i p t >f unc t i on execAJAX ( ) {
var xhr ;var zone = document . getElementById ( " amod i f i e r " ) ;var requete = " h t t p : / / 192 . 168 . 30 . 130 / t r a i t . php? tex te =" + document . a j . t . value ;a l e r t ( requete ) ;t r y { xhr = new Act iveXObject ( ’ Msxml2 .XMLHTTP ’ ) ; }catch ( e ) {
t r y { xhr = new Act iveXObject ( ’ M ic roso f t .XMLHTTP ’ ) ; }catch ( e2 ){
t r y { xhr = new XMLHttpRequest ( ) ; }catch ( e3 ) { xhr = f a l s e ; }
}}
xhr . onreadystatechange = func t i on ( ) {i f ( xhr . readyState == 4){
i f ( xhr . s ta tus == 200){zone . innerHTML = xhr . responseText ;
} e lse {a l e r t ( " E r ro r code " + xhr . s ta tus ) ;
}}
} ;
xhr . open ( "GET" , requete , t r ue ) ;xhr . send ( n u l l ) ;
}
Arnaud RENARD (URCA) DHTML [email protected] 71 / 80
Le fichier HTML
</ s c r i p t ></head>
<body><form name=" a j "><p> ent rez vo t re t ex te : < i npu t type =" t e x t " name=" t "> </p>< inpu t type =" but ton " onCl ick =" j a v a s c r i p t : execAJAX ( ) " value =" c l i quez i c i "></ form><d iv i d =" amod i f i e r "> l e t ex te d ’ o r i g i n e </ div >
</body></ html >
Arnaud RENARD (URCA) DHTML [email protected] 72 / 80
Plan
1 Introduction
2 Javascript
3 DOMGestion d’événementsSelection d’élémentsModifications avec DOM
4 AJAXFonctionnementUne première requêteDes exemples
5 JSON
6 jQuery
Arnaud RENARD (URCA) DHTML [email protected] 73 / 80
JavaScript Object Notation
Format de données textuel, générique, dérivé de la notation des objetsdu langage ECMAScript, afin de représenter de l’informationstructurée. Il est décrit par la RFC 4627 de l’IETF.Un document JSON ne comprend que deux éléments structurels :
des ensembles de paires nom / valeur(pas de différence entre attriuts et éléments de XML) ;
des listes ordonnées de valeurs.
Ces mêmes éléments représentent 3 types de données :
Numérique : nombres entiers ou à virgule : 18, 3.1415 ;
Booléen : true ou false ;
Chaîne de caractères : suite de caractères Unicode, encadrés pardes guillemets doubles ;
null ;
tableau et tableau associatif ( chaîne : donnée )
Arnaud RENARD (URCA) DHTML [email protected] 74 / 80
Exemple JSON
{"menu " : {
" i d " : " f i l e " ," value " : " F i l e " ," popup " : {
"menuitem " : [{ " value " : "New" , " onc l i c k " : "CreateNewDoc ( ) " } ,{ " value " : "Open" , " onc l i c k " : "OpenDoc ( ) " } ,{ " value " : " Close " , " onc l i c k " : " CloseDoc ( ) " }
]}
}}
Arnaud RENARD (URCA) DHTML [email protected] 75 / 80
JSON en PHP
Entension à installer.
json_decode : Decodes a JSON string
json_encode : Returns the JSON representation of a value
$val = ar ray ( " abc " => 12 ," foo " => " bar " ," bool0 " => fa lse ," bool1 " => t rue ," a r r " => ar ray (1 , 2 , 3 , nu l l , 5 ) ," f l o a t " => 1.2345
) ;$output = json_encode ( $va l ) ;echo $output . " \ n " ;
Résultat :
{ " abc " : 12 , " foo " : " bar " , " bool0 " : fa l se , " bool1 " : t rue ," a r r " : [ 1 , 2 , 3 , nu l l , 5 ] , " f l o a t " : 1.234500 }
Arnaud RENARD (URCA) DHTML [email protected] 76 / 80
JSON en JavaScript
A partir d’une chaine de caractère
var strPersonne = " {nom: ’ S te f fene l ’ ,prenom : ’ Luiz−Angelo ’ } " ;
var personne = eval ( ’ ( ’ + strPersonne + ’ ) ’ ) ;
Ou directement
var personne = {nom: ’ S te f fene l ’ ,prenom : ’ Luiz−Angelo ’
} ;
Manipulation comme un tableau.
Arnaud RENARD (URCA) DHTML [email protected] 77 / 80
Plan
1 Introduction
2 Javascript
3 DOMGestion d’événementsSelection d’élémentsModifications avec DOM
4 AJAXFonctionnementUne première requêteDes exemples
5 JSON
6 jQuery
Arnaud RENARD (URCA) DHTML [email protected] 78 / 80
jQuery
Query est une bibliothèque Javascript libre qui porte sur l’interactionentre JavaScript (comprenant AJAX) et HTML, et a pour but desimplifier des commandes communes de Javascript et d’assurer leurcompatibilité avec les principaux navigateurs. jQuery se présentecomme un unique fichier de 19 ko.Le framework contient notamment les fonctionnalités suivantes :
Parcours et modification du DOM (y compris le support des CSS 1à 3 et un support basique de XPath) ;
Événements ;
Effets et animations ;
Manipulations des feuilles de style en cascade (ajout/suppressiondes classes, d’attributs, ...) ;
AJAX ;
Plugins ;
Utilitaires (version du navigateur, ...).
Arnaud RENARD (URCA) DHTML [email protected] 79 / 80
jQuery
à suivre
Arnaud RENARD (URCA) DHTML [email protected] 80 / 80