[PDF] Cours d'initiation aux bses d'AJAX avec exemples d'application - Cours informatique

(1)

AJAX

ASYNCHRONOUS

JAVASCRIPT AND

XML

Abdelouahed Sabri

abdelouahed.sabri@gmail.com

(2)

I

NTRODUCTION



Ajax:

1. Communication asynchrone avec le serveur

2. Récupération de données (texte ou XML) à partir du

serveur

3. Mise à jours de la présentation Web



1 et 2  XMLHttpRequest



3  DOM

(3)

I

NTRODUCTION



XMLHttpRequest



XMLHttpRequest est un objet ActiveX ou JavaScript qui permet

d'obtenir des données au format XML, JSON ou texte simple à l'aide

de requêtes HTTP.



Son rôle est:

1.

D’effectuer des requêtes HTTP internes, invisibles et asynchrones

2.

De traiter la réponse



Historique



1998: développé par Microsoft, en tant qu'objet ActiveX pour Internet

Explorer 5 à IE 7 sous le nom MSXML

 Plusieurs versions ont étés proposées: Microsoft.XMLHTTP,

MSXML2.XMLHTTP, MSXML2.XMLHTTP.3.0, MSXML2.XMLHTTP.4.0, MSXML2.XMLHTTP.5.0, MSXML2.XMLHTTP.6.0



2002: implémentation sous Mozilla sous le nom XMLHttpRequest



2004: implémentation sous Safari



2005: implémentation sous Opéra et Konqueror



2007: Standardisation par W3C



2008: Microsoft propose XDomainRequest depuis Internet Explorer 8

(4)

XMLH

TTP

R

EQUEST



Codage JavaScript



Pour les versions d’Internet Explorer antérieur à 7, le

constructeur est obtenu à travers un composant ActiveX

Microsoft.XMLHTTP ou Msxml2.XMLHTTP



Pour les versions IE 7, Mozilla, Firefox, Safari, Opéra, … on

utilise l’objet natif XMLHttpRequest

 il faut toujours faire un test sur la version de l’explorateur

Web avant l’instanciation

(5)

XMLH

TTP

R

EQUEST



Codage JavaScript



Exemple: Tester quelle version est supportée par le

navigateur

5 <script type="text/javascript">

function TestXHR() {

if (XMLHttpRequest) { // ou (window.XMLHttpRequest) alert("Il faut utiliser l’objet natif XMLHttpRequest"); }

else if (ActiveXObject) {// ou (window.ActiveXObject)

alert("Il faut utiliser le composant ActiveX Microsoft.XMLHTTP ou Msxml2.XMLHTTP"); }

else {

alert("Votre navigateur ne supporte pas XMLHTTPRequest"); }

}

(6)

XMLH

TTP

R

EQUEST



Codage JavaScript



Exemple: Instanciation de l’objet

if (window.XMLHttpRequest) {

var xhr = new XMLHttpRequest(); }

else if (window.ActiveXObject) { try {

var xhr = new ActiveXObject("Microsoft.XMLHTTP"); }

catch (e) {

var xhr = new ActiveXObject("Msxml2.XMLHTTP"); }

}

else {

alert("Votre navigateur ne supporte pas XMLHTTPRequest"); }

}

(7)

XMLH

TTP

R

EQUEST



Méthodes:



Open(méthode, URL, async[, user, password]):



Ouvre la connexion avec le serveur.



méthode: GET ou POST



async: TRUE si le dialogue sera asynchrone et FALSE dans le cas

contraire



send(data)



Dans le cas d’ouverture de connexion avec la méthode GET, data prend

null  send(null)



Dans le cas d’ouverture de connexion avec POST, data peut contenir les

données à envoyer  send("param1=val2&param2=val2")

(8)

XMLH

TTP

R

EQUEST



Méthodes (suite):



Exemples

8

xhr.open("GET","ajax.php",true);

xhr.send(null);

xhr.open("GET","ajax.php?param1=5",true);

xhr.send(null);

xhr.open("POST","ajax.php",true);

xhr.send(null);

xhr.open("POST","ajax.php",true);

xhr.send("pram=5&param2=7&param3=Fes");

(9)

XMLH

TTP

R

EQUEST



Méthodes (suite):



setRequestHeader(name, value)



Assigne un entête HTTP à la requête. Très utile lors de l’ouverture de

connexion avec la méthode POST



name: nom du header



value: la valeur du header

Exemple:

xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");



abort()



Annule la requête.

(10)

XMLH

TTP

R

EQUEST



Propriétés:



readyState: retourne l’état de la requête



0: La requête n’est pas initialisée



1: Début de transfert des données



2: Les données sont envoyées



3: Les données sont en cours de réception (partiellement accessibles)



4: Les données sont complètement reçus (accessibles)



status: renvoie le code de la réponse du serveur



200: la requête est exécutée avec succès



403: accès interdit (refusé)



404: fichier non trouvé



500: erreur interne au serveur



responseText: contient la réponse de la requête au format

texte (chaîne de caractères)



responseXML: contient la réponse de la requête au format

XML

(11)

XMLH

TTP

R

EQUEST



Evénement:



onreadystatechange: événement (fonction) qui se déclenche

pour chaque changement de l’état de la requête (readyState)



Exemple

xhr.onreadystatechange = function() { if (xhr.readyState == 4) {

alert("Fichier transmis"); } } xhr.open("GET", "db.xml", true); xhr.send(null); } </script>

(12)

XMLH

TTP

R

EQUEST



Exercice 1:



Modifier le code en bas pour afficher dans une balise

DIV le changement de la propriété readyState de

l’objet XMLHttpRequest

xhr.onreadystatechange = function() { if (xhr.readyState == 4) {

alert("Fichier transmis"); } } xhr.open("GET", "db.xml", true); xhr.send(null); } </script>

(13)

13

<

html

>

<

head

>

<

title

></

title

>

<

script

type

="text/javascript">

function TestXHR() {

if (window.XMLHttpRequest)

var xhr = new XMLHttpRequest();

else alert(

"Votre navigateur ne supporte pas XMLHTTPRequest");

var monDiv = document.getElementById(

"IdDiv");

xhr.onreadystatechange =

function() {

monDiv.innerHTML += xhr.readyState +

"<br/>";

}

xhr.open(

"GET", "db.xml",

true);

xhr.send(null);

}

</

script

>

</

head

>

<

body

>

<

form

action

="">

<

input

type

="button"

value

="Envoyer"

onclick

="TestXHR()" />

<

div

id

="IdDiv"> </

div

>

</

form

>

</

body

>

</

html

>

(14)

XMLH

TTP

R

EQUEST



Exercice 2:



Modifier le code pour afficher le statut (status) de la

requête utilisant une zone de texte. Tester avec un

fichier non existant



Utiliser un tableau (Array) pour afficher un message

comme suit:



200: la requête est exécutée avec succès



403: accès interdit (refusé)



404: fichier non trouvé



500: erreur interne au serveur

(15)

15 <html >

var xhrstatus = new Array();

xhrstatus["200"]="la requête est exécutée avec succès"; xhrstatus["403"]="accès interdit (refusé)";

xhrstatus["404"]="fichier non trouvé";

xhrstatus["500"] = "erreur interne au serveur";

if (window.XMLHttpRequest)

var xhr = new XMLHttpRequest();

else alert("Votre navigateur ne supporte pas XMLHTTPRequest");

var monDiv = document.getElementById("IdDiv");

var monTxt = document.getElementById("IdText"); xhr.onreadystatechange = function() {

monDiv.innerHTML += xhr.readyState +"<br/>";

monTxt.value = xhrstatus[xhr.status];

}

xhr.open("GET", "db.xml", true); xhr.send(null);

}

</script>

</head> <body« ><form action="">

(16)

XMLH

TTP

R

EQUEST



Exercice 3:



Modifier le code pour afficher en popup le contenu

d’un fichier texte (db.txt)



Utiliser la propriété responseText

(17)

17 <html >

if (xhr.readyState == 4 && xhr.status == 200) { alert(xhr.responseText);

}

xhr.open("GET", "db.txt", true); xhr.send(null);

}

</script>

(18)

XMLH

TTP

R

EQUEST



Exercice 4:



Modifier le code pour afficher en pop-up le contenu

d’un fichier XML (db.xml)



Utiliser la propriété responseXML

(19)

19 <html >

if (xhr.readyState == 4 && xhr.status == 200) { alert(xhr.responseXML);

}

xhr.open("GET", "db.xml", true); xhr.send(null);

}

</script>

(20)

XMLH

TTP

R

EQUEST



Autres méthodes



getAllResponseHeaders()



Permet de récupérer l’entête HTTP de la réponse sous la forme

d’une chaîne de caractères



On y trouve:



Nom du serveur



Taille du contenu



Le type du contenu



…



getResponseHeader("nom du paramètre d’entête HTTP")



Permet de récupérer une valeur d’un paramètre d’entête HTTP

précis

sxhr.getResponseHeader("Content-type")

(21)

A

PPLICATIONS



Fichier Texte



Créer une page Web contenant un bouton et un élément div



Sur le serveur, créer un fichier texte. Le fichier texte contient

la phrase:



Si j’arrive à afficher ceci dans la zone DIV du fichier HTML,

je peux dire que j’ai compris le principe d’AJAX



Après clique sur le bouton, le contenu du fichier texte doit être

affiché dans l’élément DIV

(22)

A

PPLICATIONS



Fichier XML



Créer une page Web comme

sur la figure



Utiliser

l’événement

onChange()

du

contrôle

SELECT pour afficher les

informations à partir du

fichier DB.xml



Pour accéder à un nœud

XML, utiliser la méthode

xmldocument.getElementsByTag

Name("tagName")

22 <?xml version="1.0" encoding="ISO-8859-1"?> <categorie>

<prix>César du meilleur acteur</prix> <nom>Michel Bouquet</nom>

<film>Le promeneur du Champ de Mars</film> </categorie>

<prix>César du meilleur film français</prix> <nom>Jacques Audiard</nom>

<film>De battre mon coeur s’est arrêté</film> </categorie>

<prix>César du meilleur film étranger</prix> <nom>Clint Eastwood</nom>

<film>Million dollar baby</film>

(23)

XMLH

TTP

R

EQUEST ET

PHP



Premier exemple: Méthode « GET » sans paramètres

23

<head> <title>Premier Exemple Ajax - PHP</title> <script type="text/javascript">

function TestXHR_PHP() { var xhr = new XMLHttpRequest();

var monDiv = document.getElementById("IdDiv"); xhr.onreadystatechange = function() {

if(xhr.readyState == 4 && xhr.status == 200) { monDiv.innerHTML=xhr.responseText; }

}

xhr.open("GET", "ajax.php", true); xhr.send(null);

}

</script></head> <body"> <form action="">

</form></body></html>

<?php

$resultat = rand(0,100); echo $resultat ;

(24)

XMLH

TTP

R

EQUEST ET

PHP



Premier exemple: Méthode « GET » avec paramètres

24

<head> <title>Premier Exemple Ajax - PHP</title> <script type="text/javascript">

function XHR_PHP() {

var monDiv = document.getElementById("IdDiv"); xhr.onreadystatechange = function() {

if(xhr.readyState == 4 && xhr.status == 200) { monDiv.innerHTML=xhr.responseText; }

}

xhr.open("GET", "ajax.php ?val1=5&val2=10", true); xhr.send(null);

}

</script></head> <body"> <form action="">

</form></body></html>

<?php

echo $_GET['val1'] * $_GET['val2'] ;

(25)

XMLH

TTP

R

EQUEST ET

PHP



Exercice



Créer un formulaire Web, comme sur la figure en bas.



Le principe est d’utiliser Ajax pour calculer le produit

de deux nombres saisis.



Le calcul est effectué utilisant le PHP sur le serveur



Les nombres sont envoyés utilisant la méthode GET



Modifier le code pour utiliser la méthode POST

25



Modifier le code en supprimant le bouton « Calculer » et

(26)

26

<html xmlns="http://www.w3.org/1999/xhtml"> <head><title> Calculatrice AJAX</title>

function TestXHR_PHP(val1, val2) { var xhr = new XMLHttpRequest();

var monTxt = document.getElementById("res"); xhr.onreadystatechange = function() {

if(xhr.readyState == 4 && xhr.status == 200) { monTxt.value=xhr.responseText;} }

//xhr.open("GET", "ajax.php?val1="+ val1 +"&val2="+ val2, true); xhr.open("POST", "ajax.php", true);

xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xhr.send("val1="+ val1 +"&val2="+ val2);

}</script> </head>

</form></body></html>

<?php

//echo $_GET['val1'] * $_GET['val2'] ;

echo $_POST['val1'] * $_POST['val2'] ;

(27)

XMLH

TTP

R

EQUEST

, PHP

ET

M

Y

SQL



Exercice:



Créer une table MySQL perso(ID

int(4), Nom varchar(25), Prenom

varchar(25))



Créer un formulaire HTML qui

permet de saisir dans une zone de

texte le nom.

 Après clique sur un bouton « Afficher », les

prénoms possibles vont être récupérés de la table « perso » et affichés dans une zone « div »

27



Modifier le code en supprimant le bouton « Afficher» et

utilisant l’événement « oninput » du TextBox

(28)

28 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

var monDiv = document.getElementById("IdDiv"); monDiv.innerHTML = "<u>Prénoms:</u>" + "<br/>";

var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() {

if (xhr.readyState == 4 && xhr.status == 200) {

var monDiv = document.getElementById("IdDiv"); monDiv.innerHTML += xhr.responseText;

} }

xhr.open("GET", "ajax.php?nm=" + nom, true); xhr.send(null);

}

</script></head>

<body> <form action=""> Entrer le nom:

<u>Prénoms:</u></div> </form></body>

(29)

29

<?

php

//on se connecte a la BDD

$dbhost="localhost";

$dbuser="root";

$dbpass="";

$nm=$_GET['nm'];

$dblink=mysql_connect($dbhost,$dbuser,$dbpass);

mysql_select_db("ajax",$dblink);

//on lance la requête

$query = "SELECT Prenom FROM perso where Nom like '%$nm%'";

$result = mysql_query($query,$dblink) or die (mysql_error($dblink));

//On boucle et affiche le résultat

while($ligne = mysql_fetch_array($result))

{

echo $ligne[0]."<br/>";

}

(30)

XMLH

TTP

R

EQUEST

, PHP, XML

ET

M

Y

SQL



On peut forcer la sortie du code PHP en un fichier XML

30 <?php $xml = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>"; $xml .= "<Ajax>"; $xml .= "<Etudiants>"; $xml .= "<ID> 1 </ID>";

$xml .= "<Nom> Hafid </Nom>";

$xml .= "<Prenom> Said </Prenom>"; $xml .= "</Etudiants>";

$xml .= "<Etudiants>"; $xml .= "<ID> 2 </ID>";

$xml .= "<Nom> Ilias </Nom>";

$xml .= "<Prenom> Mohamed </Prenom>"; $xml .= "</Etudiants>";

$xml .= "</Ajax>";

header ("Content-Type:text/xml"); echo $xml;

(31)

XMLH

TTP

R

EQUEST

, PHP, XML

ET

M

Y

SQL



Exercice:

 Créer une table MySQL etudiants( ID int (5), Nom varchar(25),

Prenom varchar(25), Date_Naissance date, Niveau int(2), Filiere varchar(30))

 Créer un formulaire comme sur les figures:

(32)

32

var monDiv = document.getElementById("IdDiv"); monDiv.innerHTML = "Informations: <br/>"; var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function() {

if (xhr.readyState == 4 && xhr.status == 200) { treatData(xhr.responseXML);

} }

xhr.open("GET", "ajax.php?nm=" + nom, true); xhr.send(null);

}

function treatData(xmldocument) {

for (var i = 0; i < xmldocument.getElementsByTagName("ID").length; i++) {

var ID = "ID: " + xmldocument.getElementsByTagName("ID")[i].firstChild.nodeValue + "<br />";

var Nom = "Nom: " + xmldocument.getElementsByTagName("Nom")[i].firstChild.nodeValue + "<br />";

var Prenom = "Prénom: " + xmldocument.getElementsByTagName("Prenom")[i].firstChild.nodeValue + "<br />"; var Date_Naissance = "Date de naissance: " +

xmldocument.getElementsByTagName("Date_Naissance")[i].firstChild.nodeValue + "<br />";

var Niveau = "Niveau: " + xmldocument.getElementsByTagName("Niveau")[i].firstChild.nodeValue + "<br />"; var Filiere = "Filiére: " + xmldocument.getElementsByTagName("Filiere")[i].firstChild.nodeValue + "<br />";

monDiv.innerHTML += ID + Nom + Prenom + Date_Naissance + Niveau + Filiere + "<hr style=\"border-color: red;\">"; }

} </script> </head>

Entrer le nom:<input type="text" value="" id="val1" size="50" oninput="GetData(val1.value)" /> <divid="IdDiv" style="border-width: 2px; border-style: dotted; border-color: red;">

Infomations:</div> </form></body> </html>

(33)

33 <?php echo getXmlFromDb($_GET['nm']); function getXmlFromDb($nm) { //on se connecte a la BDD $dbhost="localhost"; $dbuser="root"; $dbpass=""; $dblink=mysql_connect($dbhost,$dbuser,$dbpass); mysql_select_db("ensat",$dblink);

//on lance la requête

$query = "SELECT * FROM etudiants where Nom like '%$nm%'"; $result = mysql_query($query,$dblink) or die (mysql_error($dblink)); $xml = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>";

$root_element = "Ajax";

$xml .= "<$root_element>"; //On boucle sur le resultat

while ($result_array = mysql_fetch_assoc($result)) {

$xml .= "<etudiants>";

foreach($result_array as $key => $value) {

//$key contient les noms de colonnes de la tables $xml .= "<$key>« ;

//utiliser un élément CDATA pour éviter les problèmes des entités XML $xml .= "<![CDATA[$value]]>"; //Fermer l’élément $xml .= "</$key>"; } $xml.="</etudiants>" ; } $xml .= "</$root_element>";

//envoyer l'entéte xml au navigateur header ("Content-Type:text/xml"); return $xml;