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 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 : l'élément suivant. S'utilise après firstchild parentnode : l'élément parent du noeud courant childnodes(x) : tous les noeuds fils du noeud x 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) : ajoute un attribut à l'élément 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 onreadystatechange : XmlHttpRequest 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> 23 </head>

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 : --list --tel --nom --"abdcef" --id --"123" --tel --nom --"xyz" --id --"124" Sous FireFox : :-( --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; return xhr; 29

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 & 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