ajax (asynchronous javascript and xml)

AJAX

ASYNCHRONOUS JAVASCRIPT AND XML

Abdelouahed Sabri

[email protected]

2012/2013

INTRODUCTION

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

2

INTRODUCTION

XMLHttpRequest

XMLHttpRequest est un objet ActiveX ou JavaScript qui permetd'obtenir des données au format XML, JSON ou texte simple à l'aidede 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 InternetExplorer 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

3

XMLHTTPREQUEST

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

4

XMLHTTPREQUEST

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

}

}

</script>

XMLHTTPREQUEST

Codage JavaScript

Exemple: Instanciation de l’objet

6



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

}

}

</script>

XMLHTTPREQUEST

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

7

XMLHTTPREQUEST

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

XMLHTTPREQUEST

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.

9

XMLHTTPREQUEST

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 formattexte (chaîne de caractères)

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

10

XMLHTTPREQUEST

Evénement:

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

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

Exemple

11





}

xhr.onreadystatechange = function() {

if (xhr.readyState == 4) {

alert("Fichier transmis");

}

}

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

xhr.send(null);

}

</script>

XMLHTTPREQUEST

Exercice 1:

Modifier le code en bas pour afficher dans une balise

DIV le changement de la propriété readyState de

l’objet XMLHttpRequest

12





}


if (xhr.readyState == 4) {

alert("Fichier transmis");

}

}


xhr.send(null);

}

</script>

13

<html >

<head>

<title></title>



if (window.XMLHttpRequest)


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

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


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

}


xhr.send(null);

}

</script>

</head>

<body>

<form action="">

<input type="button" value="Envoyer" onclick="TestXHR()" />

<div id="IdDiv"> </div>

</form>

</body>

</html>

XMLHTTPREQUEST

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

14

15

<html >

<head> <title></title>



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





var monTxt = document.getElementById("IdText");



monTxt.value = xhrstatus[xhr.status];

}


xhr.send(null);

}

</script>

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


<input type="text" value="" id="IdText" size="50"/>


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

XMLHTTPREQUEST

Exercice 3:

Modifier le code pour afficher en popup le contenu

d’un fichier texte (db.txt)

Utiliser la propriété responseText

16

17

<html >

















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

alert(xhr.responseText);

}

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

xhr.send(null);

}

</script>






XMLHTTPREQUEST

Exercice 4:

Modifier le code pour afficher en pop-up le contenu

d’un fichier XML (db.xml)

Utiliser la propriété responseXML

18

19

<html >


















alert(xhr.responseXML);

}


xhr.send(null);

}

</script>






XMLHTTPREQUEST

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

APPLICATIONS

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

21

APPLICATIONS

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>

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

<categorie>

<prix>César du meilleur film étranger</prix>

<nom>Clint Eastwood</nom>

<film>Million dollar baby</film>

</categorie> DB.xml

XMLHTTPREQUEST ET PHP

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

23

<html xmlns="http://www.w3.org/1999/xhtml">

<head> <title>Premier Exemple Ajax - PHP</title>


function TestXHR_PHP() {




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

<input type="button" value="Tester" onclick="TestXHR_PHP()" />


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

<?php

$resultat = rand(0,100);

echo $resultat ;

?>


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

24


<head> <title>Premier Exemple Ajax - PHP</title>


function XHR_PHP() {




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

<input type="button" value="Tester" onclick="XHR_PHP()" />



<?php

echo $_GET['val1'] *

$_GET['val2'] ;

?>


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

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

26


<head><title> Calculatrice AJAX</title>


function TestXHR_PHP(val1, val2) {


var monTxt = document.getElementById("res");


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>

<body><form action="">

<input type="text" value="" id="val1" size="10" oninput="TestXHR_PHP(val1.value, val2.value)"/> *

<input type="text" value="" id="val2" size="10" oninput="TestXHR_PHP(val1.value, val2.value)"/> =

<input type="text" value="" id="res" size="10"/>




<?php

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

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

?> ajax.php

XMLHTTPREQUEST, PHP ET MYSQL

Exercice:

Créer une table MySQL perso(IDint(4), Nom varchar(25), Prenomvarchar(25))

Créer un formulaire HTML quipermet de saisir dans une zone detexte le nom. Après clique sur un bouton « Afficher », les

prénoms possibles vont être récupérés de latable « 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

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

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">




function GetData(nom) {


monDiv.innerHTML = "<u>Prénoms:</u>" + "<br/>";





monDiv.innerHTML += xhr.responseText;

}

}

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

xhr.send(null);

}

</script></head>

<body> <form action="">

Entrer le nom:

<input type="text" value="" id="val1" size="20" oninput="GetData(val1.value)" />

<input type="button" name="button1" value="Afficher" onclick="GetData(val1.value)" />

<div id="IdDiv" style="border-width: 2px; border-style: dotted; border-color: red;">

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

</form></body>

</html>AjaxMySqlPhp.html

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

}

?> ajax.php

XMLHTTPREQUEST, PHP, XML ET MYSQL

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;

?>

XMLHTTPREQUEST, PHP, XML ET MYSQL

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:

31

32


<head><title></title>


function GetData(nom) {


monDiv.innerHTML = "Informations: <br/>";




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>

<body> <form action="">

Entrer le nom:<input type="text" value="" id="val1" size="50" oninput="GetData(val1.value)" />

<div id="IdDiv" style="border-width: 2px; border-style: dotted; border-color: red;">

Infomations:</div>

</form></body>

</html>AjaxMySqlPhp.html

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;

}

?> ajax.php

APPLICATION

Application Chat:

L’idée est de réaliser une application Web pour le Chat qui

doit contenir deux pas pages Web:

la première permettant de saisir un pseudo et un bouton de

validation. À la saisi du pseudo, un code AJAX doit vérifier

l’existence ou pas du pseudo saisi. Si oui, le bouton de

validation doit être désactivé et activé dans le cas contraire

La deuxième page, doit contenir une zone d’affichage

permettant d’afficher pour chaque utilisateur connecté un

message de connexion avec l’heure de connexion et d’afficher

aussi les messages envoyés par les autres membres.

Base de données:

Nom: ChatRoom

Tables:

Message (nom_user varchar(50), lst_mesg varchar(255))

Utilisateur: (nom varchar(50), last_refresh datetime)

34

ajax (asynchronous javascript and xml)

Documents