68Ko

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 de modifier dynamiquement le
contenu, la structure et le style de
documents xml ou html"
2
De quoi est constitué DOM?
●
●
Le programmeur dispose d'objets, qui ont
des propriétés, des méthodes et des
évènements qui interfacent le document
XML ou HTML
En résumé:
–
un ensemble d'objets,
–
un modèle pour la façon dont ces objets
peuvent être combinés,
–
une interface pour y accéder les manipuler
3
Comment utiliser DOM?
●
●
A travers les objets et leurs attributs et
méthodes
document :
–
document est un objet DOM correspondant à
la page en cours. Toutefois certaines balises
comme <iframe>, <browser> et
<tabbrowser> peuvent introduire de
nouveaux documents.
4
Comment utiliser DOM?
●
Méthodes statiques essentielles et attributs :
–
getElementById(x) : retourne la balise dont l'ID est x
–
innerHTML : attribut pour lire ou assigner le contenu d'un ID
–
getElementsByName(x),
getElementsByTagName(x)
:
retourne la NodeList (liste de noeuds), dont les Nodes
(noeuds) sont créés à partir des balises dont la classe (ou
nom de balise pour XML) est x
–
item(n) : retourne l'élément en position n dans une NodeList
–
firstChild, lastChild : attribut désignant le premier élément
enfant dans le Node, lequel est retourné par item(n)
–
nextSibling, previousSibling :
après firstChild
–
parentNode : l'élément parent du noeud courant
–
childNodes(x) : tous les noeuds fils du noeud x
l'élément suivant. S'utilise
5
Comment utiliser DOM?
●
Méthodes dynamiques essentielles :
–
createElement(type, nom) : crée un élément et retourne
un objet Element (un type de Node)
–
createTextNode : crée un noeud de type #text
–
appendChild(Node) : ajoute un élément à l'instance, en
tant que dernier enfant
–
insertBefore(Node, Node)
–
removeChild(Node)
–
setAttribute(nom, valeur) :
l'élément
ajoute un attribut à
6
Propriétés d'un node
●
●
●
●
nodeName : indique le nom du node sélectionnée
nodeType : indique le type de node rencontré. nodeType
ne prend que 3 valeurs:
–
1 si vous avez sélectionné une balise ;
–
2 si vous avez sélectionné un attribut ;
–
3 si vous avez sélectionné du texte ;
nodeValue : permet d'obtenir et de changer la valeur d'un
node de type texte
id : permet d'obtenir la valeur de l'attribut id du node
sélectionné s'il existe et la valeur false s'il n'existe pas
7
accéder aux attributs d'une balise en DOM
●
●
●
●
attributes : tableaux des attributs d'un node
getAttribute(name) : récupère la valeur d'un attribut, null
si non présent
setAttribute : modifie la valeur d'un attribut, le crée s'il
n'existe pas
removeAttribute(name) : supprime un attribut d'un node
8
accéder aux attributs d'une balise en DOM
Exemple :
●
function example(nodeId){
var node = document.getElementById(nodeId);
if(!node.getAttribute("class")) {
node.setAttribute("class","part");
}
else if(node.getAttribute("class") == "part") {
node.setAttribute("class","toto");
}
else if(node.getAttribute("class") == "toto"){
node.removeAttribute("class");
}
}
9
AJAX
10
Qu'est ce qu'AJAX ?
●
●
Asynchronous JavaScript And XML :
–
concept qui permet de faire des appels
asynchrones au serveur depuis le client
–
le serveur retournera du XML qui sera
"récupéré" par javascript et traité
Possibilité de faire transiter du texte
uniquement et de faire des appels
synchrones
11
Processus classique
Client/Serveur
1. Vous saisissez une adresse dans votre navigateur
2. Cette "requête" finie par arriver sur le serveur web qui
héberge la page en question
3. Le serveur vous retourne du texte au format HTML ou
XHTML et éventuellement des images, feuilles de style,
fichiers JavaScript, applets java ....
4. Votre navigateur les interprète et vous affiche la page
5. Vous êtes déconnecté du serveur web
Exemple : click sur un lien d'une page HTML
12
Utilité d'AJAX
●
●
AJAX permet d'aller chercher des informations sur
le serveur pour :
–
Ajouter des éléments à la page
–
Modifier le contenu d'un "bout de la page"
–
Insérer des données dans une base
Applications nombreuses :
–
Champs qui s'auto-complètent (google suggest)
–
Listes déroulantes liées
–
Contrôle de formulaire
–
Popups accessibles
–
...
13
L'objet XmlHttpRequest
●
AJAX se base sur l'utilisation d'un
composant embarqué dans presque tous
les navigateurs récents :
–
●
Comportement différent sur certains
XmlHttpRequest (xhr) : permet de faire
des requêtes http pour échanger du XML
14
Création de l'objet
XmlHttpRequest
var xhr = null;
if(window.XMLHttpRequest) // Firefox et autres
xhr = new XMLHttpRequest();
else if(window.ActiveXObject){ // Internet Explorer
try {
xhr = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
}
else { // XMLHttpRequest non supporté par le navigateur
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
xhr = false;
}
●
Remarque : IE se démarque des autres :-(
15
Utilisation de l'objet
XmlHttpRequest
●
open("méthode","url",flag)
Ouvre la connexion avec le serveur.
méthode -> "GET" ou "POST"
url -> l'url à laquelle on va envoyer notre requête.
Si la méthode est GET, on met les paramètres dans l'url.
flag -> true si l'on veut un dialogue asynchrone, sinon, false
●
setRequestHeader("nom","valeur")
Assigne une valeur à un header HTTP qui sera envoyé lors de la requête.
Par exemple, pour un POST :
nom -> "Content-Type"
valeur -> "application/x-www-form-urlencoded"
●
abort()
Abandonne la requête.
16
Utilisation de l'objet
XmlHttpRequest
●
onreadystatechange :
une fonction qui sera exécutée à chaque "changement d'état" de
notre objet.
●
readyState
C'est cette propriété qu'on va tester dans le onreadystatechange.
Elle représente l'état de l'objet et peut prendre plusieurs valeurs :
0 -> Non initialisé
1 -> Ouverture (open() vient de s'exécuter)
2 -> Envoyé (send() vient de s'exécuter)
3 -> En cours (des données sont en train d'arriver)
4 -> Prêt (toutes les données sont chargées)
17
Utilisation de l'objet
XmlHttpRequest
●
status
Le code de la réponse du serveur.
200 -> OK.
404 -> Page non trouvée.
●
statusText
Le message associé à status.
●
responseText
La réponse retournée par le serveur, au format texte.
●
responseXML
La réponse retournée par le serveur, au format dom XML.
18
Exemple
<html>
<head>
<title>Tutoriel Ajax (XHTML + JavaScript + XML)</title>
<script type='text/JavaScript'>
function getXhr(){
var xhr = null;
if(window.XMLHttpRequest) // Firefox et autres
xhr = new XMLHttpRequest();
else if(window.ActiveXObject){ // Internet Explorer
try {
xhr = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
}
else { // XMLHttpRequest non supporté par le navigateur
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
xhr = false;
}
return xhr
}
19
Exemple
/**
* Méthode qui sera appelée sur le click du bouton
*/
function go(){
var xhr = getXhr()
// On défini ce qu'on va faire quand on aura la réponse
xhr.onreadystatechange = function(){
// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
if(xhr.readyState == 4 && xhr.status == 200){
alert(xhr.responseText);
}
}
xhr.open("GET","ajax.php",true);
xhr.send(null);
}
</script>
</head>
<body>
<input type='button' value='Dis quelque chose !' onclick='go()' />
</body>
</html>
20
Autre exemple : listes liées
CREATE TABLE `auteur` (
`id` tinyint(4) NOT NULL auto_increment,
`nom` varchar(50) NOT NULL,
PRIMARY KEY (`id`)
);
insert into `auteur` values
(1,'Clive Cussler'),
(2,'Harlan Coben'),
(3,'Franck Herbert'),
(4,'Pierre Bordages');
CREATE TABLE `livre` (
`id` tinyint(4) NOT NULL auto_increment,
`titre` varchar(50) NOT NULL,
`idAuteur` tinyint(4) default NULL,
PRIMARY KEY (`id`)
);
insert into `livre` values
(1,'Odyssee',1),
(2,'Sahara',1),
(3,'Dragon',1),
(4,'Une chance de trop',2),
(5,'Ne le dis a personne',2),
(6,'Disparu à jamais',2),
(7,'Dune',3),
(8,'La barriere de santaroga',3),
(9,'Les guerriers du silence',4),
(10,'La citadelle hyponeros',4),
(11,'Terra mater',4);
21
Autre exemple : listes liées
<html>
<head>
<title>Tutoriel Ajax (XHTML + JavaScript + XML)</title>
<script type='text/javascript'>
function getXhr(){
var xhr = null;
if(window.XMLHttpRequest) // Firefox et autres
xhr = new XMLHttpRequest();
else if(window.ActiveXObject){ // Internet Explorer
try {
xhr = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
}
else { // XMLHttpRequest non supporté par le navigateur
alert("Votre navigateur ne supporte pas les objets
XMLHTTPRequest...");
xhr = false;
}
return xhr;
}
22
Autre exemple : listes liées
/**
* Méthode qui sera appelée sur le click du bouton
*/
function go(){
var xhr = getXhr();
// On défini ce qu'on va faire quand on aura la réponse
xhr.onreadystatechange = function(){
// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
if(xhr.readyState == 4 && xhr.status == 200){
leselect = xhr.responseText;
// On se sert de innerHTML pour rajouter les options a la liste
document.getElementById('livre').innerHTML = leselect;
}
}
// Ici on va voir comment faire du post
xhr.open("POST","ajaxLivre.php",true);
// ne pas oublier ça pour le post
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// ne pas oublier de poster les arguments
// ici, l'id de l'auteur
sel = document.getElementById('auteur');
idauteur = sel.options[sel.selectedIndex].value;
xhr.send("idAuteur="+idauteur);
}
</script>
</head>
23
Autre exemple : listes liées
<body>
<form>
<fieldset style="width: 500px">
<legend>Liste liées</legend>
<label>Auteurs</label>
<select name='auteur' id='auteur' onchange='go()'>
<option value='-1'>Aucun</option>
<?
mysql_connect("localhost","root","root");
mysql_select_db("test");
$res = mysql_query("SELECT * FROM auteur ORDER BY nom");
while($row = mysql_fetch_assoc($res)){
echo "<option value='".$row["id"]."'>".$row["nom"]."</option>";
}
?>
</select>
<label>Livres</label>
<div id='livre' style='display:inline'>
<select name='livre'>
<option value='-1'>Choisir un auteur</option>
</select>
</div>
</fieldset>
</form>
</body>
</html>
24
Autre exemple : listes liées
Le fichier PHP ajaxLivre.php :
<?php
echo "<select name='livre'>";
if(isset($_POST["idAuteur"])){
mysql_connect("localhost","root","root");
mysql_select_db("test");
$res = mysql_query("SELECT id,titre FROM livre
WHERE idAuteur=".$_POST["idAuteur"]." ORDER BY titre");
while($row = mysql_fetch_assoc($res)){
echo "<option value='".$row["id"]."'>".$row["titre"]."</option>";
}
}
echo "</select>";
?>
25
Utiliser responseXML
●
●
●
Nous avons vu comment utiliser responseText :
–
l'afficher tel quel (alert('...'))
–
s'en servir avec un innerHTML
X de AJAX : XML
ResponseXML : le serveur doit retourner un document
XML
–
Le XML doit être « bien formé »
–
Le navigateur doit l'interpréter comme du XML : ajout
des entêtes classiques
26
XML : problème
<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>
<list>
<tel><nom>abcdef</nom><id>123</id></tel>
<tel><nom>xyz</nom><id>124</id></tel>
</list>
Sous IE :
Sous FireFox : :-(
|--list
|--tel
| |--nom
| | |--"abdcef"
| |--id
|
|--"123"
|--tel
|--nom
| |--"xyz"
|--id
|--"124"
|--list
|--" "
|--tel
| |--nom
| | |--"abdcef"
| |--id
|
|--"123"
|--" "
|--tel
| |--nom
| | |--"xyz"
| |--id
|
|--"124"
|--" "
27
XML : solution
// nettoyer le document XML
function go(c){
if(!c.data.replace(/\s/g,''))
c.parentNode.removeChild(c);
}
function clean(d){
var bal=d.getElementsByTagName('*');
}
for(i=0;i<bal.length;i++){
a=bal[i].previousSibling;
if(a && a.nodeType==3)
go(a);
b=bal[i].nextSibling;
if(b && b.nodeType==3)
go(b);
}
return d;
28
Utilisation du XML
●
Nettoyer le XML et parcourir le document via le DOM
<html>
<head>
<title>Tutoriel Ajax (XHTML + JavaScript + XML)</title>
<script type='text/JavaScript'>
function getXhr(){
var xhr = null;
if(window.XMLHttpRequest) // Firefox et autres
xhr = new XMLHttpRequest();
else if(window.ActiveXObject){ // Internet Explorer
try {
xhr = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
}
else { // XMLHttpRequest non supporté par le navigateur
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
xhr = false;
}
29
return xhr;
}
Utilisation du XML
// Node cleaner
function go(c){
if(!c.data.replace(/\s/g,''))
c.parentNode.removeChild(c);
}
function clean(d){
var bal=d.getElementsByTagName('*');
}
for(i=0;i<bal.length;i++){
a=bal[i].previousSibling;
if(a && a.nodeType==3)
go(a);
b=bal[i].nextSibling;
if(b && b.nodeType==3)
go(b);
}
return d;
30
Utilisation du XML
/**
* Méthode qui sera appelée sur le click du bouton
*/
function gophp(){
var xhr = getXhr();
// On défini ce qu'on va faire quand on aura la réponse
xhr.onreadystatechange = function(){
// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
if(xhr.readyState == 4 && xhr.status == 200){
reponse = clean(xhr.responseXML.documentElement);
alert(reponse.getElementsByTagName("message")[0].firstChild.nodeValue);
}
}
xhr.open("GET","ajaxxml.php",true);
xhr.send(null);
}
</script>
</head>
<body>
<input type='button' value='Dis quelque chose !' onclick='gophp()' />
</body>
</html>
31
Utilisation du XML
Le fichier ajaxxml.php :
<?php
$buffer = '<?xml version="1.0"?>';
$buffer .= "<reponse><message>Bonjour de PHP &amp;
d'XML</message></reponse>";
header('Content-Type: text/xml');
echo $buffer;
?>
32
Conclusion
●
●
XmlHttpRequest : permet d'améliorer l'interactivité
entre votre page et l'utilisateur
Possibilité de désactiver le javascript coté client :
–
proposer une solution alternative
●
Synchrone/Asynchrone
●
frameworks JavaScript intégrant AJAX
–
Rico : openrico.org
–
Prototype : prototype.conio.net
33