[PDF] Formation avancé pour apprendre à utiliser Ajax | Formation informatique

(1)

1

(2)

2

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"

(3)

3

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,

(4)

4

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.

(5)

5

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

(6)

6

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 à

(7)

7

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

(8)

8

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

(9)

9

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");

} }

(10)

10

AJAX

(11)

11

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

(12)

12

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

(13)

13

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

(14)

14

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

(15)

15

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;

}

(16)

16

Utilisation de l'objet

XmlHttpRequest

●

open("méthode","url",flag)

●

setRequestHeader("nom","valeur")

●

abort()

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

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"

(17)

17

Utilisation de l'objet

XmlHttpRequest

●

onreadystatechange :

●

readyState

une fonction qui sera exécutée à chaque "changement d'état" de notre objet.

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)

(18)

18

Utilisation de l'objet

XmlHttpRequest

●

status

●

statusText

●

responseText

●

responseXML

Le code de la réponse du serveur. 200 -> OK.

404 -> Page non trouvée.

Le message associé à status.

La réponse retournée par le serveur, au format texte.

(19)

19

Exemple

<html>

<head>

<title>Tutoriel Ajax (XHTML + JavaScript + XML)</title> <script type='text/JavaScript'>

function getXhr(){ var xhr = null;

}

return xhr }

(20)

20

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>

(21)

21

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);

(22)

22

Autre exemple : listes liées

<html>

<head>

<title>Tutoriel Ajax (XHTML + JavaScript + XML)</title> <script type='text/javascript'>

else { // XMLHttpRequest non supporté par le navigateur alert("Votre navigateur ne supporte pas les objets

XMLHTTPRequest...");

xhr = false; }

return xhr; }

(23)

23

Autre exemple : listes liées

/**

function go(){

var xhr = getXhr();

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>

(24)

24

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>

<option value='-1'>Choisir un auteur</option> </select> </div> </fieldset> </form> </body> </html>

(25)

25

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>"; ?>

(26)

26

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

(27)

27

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

(28)

28

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; }

(29)

29

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

}

return xhr; }

(30)

30

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; }

(31)

31

Utilisation du XML

/**

function gophp(){

var xhr = getXhr();

reponse = clean(xhr.responseXML.documentElement); alert(reponse.getElementsByTagName("message")[0].firstChild.nodeValue); } } xhr.open("GET","ajaxxml.php",true); xhr.send(null); } </script> </head> <body>

(32)

32

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;

(33)

33

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

●