AJAX ASYNCHRONOUS JAVASCRIPT AND XML

Abdelouahed Sabri abdelouahed.sabri@gmail.com

2012/2013

INTRODUCTION

Ajax:
1. 2. 3.

Communication asynchrone avec le serveur Rcupration de donnes (texte ou XML) partir du serveur Mise jours de la prsentation Web

1 et 2 XMLHttpRequest 3 DOM

INTRODUCTION

XMLHttpRequest
XMLHttpRequest est un objet ActiveX ou JavaScript qui permet d'obtenir des donnes au format XML, JSON ou texte simple l'aide de requtes HTTP. Son rle est:

1. 2.

Deffectuer des requtes HTTP internes, invisibles et asynchrones De traiter la rponse 1998: dvelopp par Microsoft, en tant qu'objet ActiveX pour Explorer 5 IE 7 sous le nom MSXML

Historique

Internet

Plusieurs versions ont ts proposes: Microsoft.XMLHTTP, MSXML2.XMLHTTP, MSXML2.XMLHTTP.3.0, MSXML2.XMLHTTP.4.0, MSXML2.XMLHTTP.5.0, MSXML2.XMLHTTP.6.0

2002: implmentation sous Mozilla sous le nom XMLHttpRequest 2004: implmentation sous Safari 2005: implmentation sous Opra et Konqueror 3 2007: Standardisation par W3C 2008: Microsoft propose XDomainRequest depuis Internet Explorer 8

XMLHTTPREQUEST

Codage JavaScript
Pour les versions dInternet Explorer antrieur 7, le constructeur est obtenu travers un composant ActiveX Microsoft.XMLHTTP ou Msxml2.XMLHTTP Pour les versions IE 7, Mozilla, Firefox, Safari, Opra, on utilise lobjet natif XMLHttpRequest

il faut toujours faire un test sur la version de lexplorateur Web avant linstanciation

XMLHTTPREQUEST

Codage JavaScript

Exemple: Tester quelle version est supporte par le navigateur

<script type="text/javascript"> function TestXHR() { if (XMLHttpRequest) { // ou (window.XMLHttpRequest) alert("Il faut utiliser lobjet 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"); } } 5 </script>

XMLHTTPREQUEST

Codage JavaScript

Exemple: Instanciation de lobjet <script type="text/javascript"> function TestXHR() { 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

Mthodes:

Open(mthode, URL, async[, user, password]):

Ouvre la connexion avec le serveur. mthode: GET ou POST async: TRUE si le dialogue sera asynchrone et FALSE dans le cas contraire

send(data)
Dans le cas douverture de connexion avec la mthode GET, data prend null send(null) Dans le cas douverture de connexion avec POST, data peut contenir les donnes envoyer send("param1=val2&param2=val2")

XMLHTTPREQUEST

Mthodes (suite):

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

XMLHTTPREQUEST

Mthodes (suite):

setRequestHeader(name, value)
Assigne un entte HTTP la requte. Trs utile lors de louverture de connexion avec la mthode POST name: nom du header value: la valeur du header

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

abort()

Annule la requte.

XMLHTTPREQUEST

Proprits:

readyState: retourne ltat de la requte

0: La requte nest pas initialise 1: Dbut de transfert des donnes 2: Les donnes sont envoyes 3: Les donnes sont en cours de rception (partiellement accessibles) 4: Les donnes sont compltement reus (accessibles)

status: renvoie le code de la rponse du serveur

200: la requte est excute avec succs 403: accs interdit (refus) 404: fichier non trouv 500: erreur interne au serveur

responseText: contient la rponse de la requte au format texte (chane de caractres) 10 responseXML: contient la rponse de la requte au format XML

XMLHTTPREQUEST

Evnement:

onreadystatechange: vnement (fonction) qui se dclenche pour chaque changement de ltat de la requte (readyState)

Exemple

<script type="text/javascript"> function TestXHR() { if (window.XMLHttpRequest) { var xhr = new XMLHttpRequest(); } xhr.onreadystatechange = function() { if (xhr.readyState == 4) { alert("Fichier transmis"); } } xhr.open("GET", "db.xml", true); xhr.send(null); } </script>

11

XMLHTTPREQUEST

Exercice 1:

Modifier le code en bas pour afficher dans une balise DIV le changement de la proprit readyState de lobjet XMLHttpRequest

<script type="text/javascript"> function TestXHR() { if (window.XMLHttpRequest) { var xhr = new XMLHttpRequest(); } xhr.onreadystatechange = function() { if (xhr.readyState == 4) { alert("Fichier transmis"); } } xhr.open("GET", "db.xml", true); xhr.send(null); } </script>

12

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

13

XMLHTTPREQUEST

Exercice 2:
Modifier le code pour afficher le statut (status) de la requte utilisant une zone de texte. Tester avec un fichier non existant Utiliser un tableau (Array) pour afficher un message comme suit:

200: la requte est excute avec succs 403: accs interdit (refus) 404: fichier non trouv 500: erreur interne au serveur

14

<html > <head> <title></title> <script type="text/javascript"> function TestXHR() { var xhrstatus = new Array(); xhrstatus["200"]="la requte est excute avec succs"; xhrstatus["403"]="accs 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=""> <input type="button" value="Envoyer" onclick="TestXHR()" /> <input type="text" value="" id="IdText" size="50"/> <div id="IdDiv"> </div> </form> </body> </html>

15

XMLHTTPREQUEST

Exercice 3:

Modifier le code pour afficher en popup le contenu dun fichier texte (db.txt)

Utiliser la proprit responseText

16

<html > <head> <title></title> <script type="text/javascript"> function TestXHR() { var xhrstatus = new Array(); xhrstatus["200"]="la requte est excute avec succs"; xhrstatus["403"]="accs 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]; if (xhr.readyState == 4 && xhr.status == 200) { alert(xhr.responseText); } xhr.open("GET", "db.txt", true); xhr.send(null); } </script> </head> <body ><form action=""> <input type="button" value="Envoyer" onclick="TestXHR()" /> <input type="text" value="" id="IdText" size="50"/> <div id="IdDiv"> </div>

17

XMLHTTPREQUEST

Exercice 4:

Modifier le code pour afficher en pop-up le contenu dun fichier XML (db.xml)

Utiliser la proprit responseXML

18

<html > <head> <title></title> <script type="text/javascript"> function TestXHR() { var xhrstatus = new Array(); xhrstatus["200"]="la requte est excute avec succs"; xhrstatus["403"]="accs 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]; if (xhr.readyState == 4 && xhr.status == 200) { alert(xhr.responseXML); } xhr.open("GET", "db.xml", true); xhr.send(null); } </script> </head> <body ><form action=""> <input type="button" value="Envoyer" onclick="TestXHR()" /> <input type="text" value="" id="IdText" size="50"/> <div id="IdDiv"> </div>

19

XMLHTTPREQUEST

Autres mthodes

getAllResponseHeaders()
Permet de rcuprer lentte HTTP de la rponse sous la forme dune chane de caractres On y trouve: Nom du serveur Taille du contenu Le type du contenu

getResponseHeader("nom du paramtre dentte HTTP")

Permet de rcuprer une valeur dun paramtre dentte HTTP prcis sxhr.getResponseHeader("Content-type")
20

APPLICATIONS

Fichier Texte
Crer une page Web contenant un bouton et un lment div Sur le serveur, crer un fichier texte. Le fichier texte contient la phrase: Si jarrive afficher ceci dans la zone DIV du fichier HTML, je peux dire que jai compris le principe dAJAX Aprs clique sur le bouton, le contenu du fichier texte doit tre affich dans llment DIV

21

APPLICATIONS

Fichier XML

Crer une page Web comme sur la figure Utiliser lvnement

onChange() du contrle SELECT pour afficher les informations partir du fichier DB.xml Pour accder un nud XML, utiliser la mthode xmldocument.getElementsByTag Name("tagName")

<?xml version="1.0" encoding="ISO-8859-1"?> <categorie> <prix>Csar du meilleur acteur</prix> <nom>Michel Bouquet</nom> <film>Le promeneur du Champ de Mars</film> </categorie> <categorie> <prix>Csar du meilleur film franais</prix> <nom>Jacques Audiard</nom> <film>De battre mon coeur sest arrt</film> </categorie> <categorie> 22 <prix>Csar du meilleur film tranger</prix> <nom>Clint Eastwood</nom> <film>Million dollar baby</film> </categorie> DB.xml

XMLHTTPREQUEST ET PHP

Premier exemple: Mthode GET sans paramtres

<html xmlns="http://www.w3.org/1999/xhtml"> <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=""> <input type="button" value="Tester" onclick="TestXHR_PHP()" /> <div id="IdDiv"> </div> </form></body></html>

<?php $resultat = rand(0,100); echo $resultat ; ?>

23

XMLHTTPREQUEST ET PHP

Premier exemple: Mthode GET avec paramtres

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Premier Exemple Ajax - PHP</title> <script type="text/javascript"> function XHR_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 ?val1=5&val2=10", true); xhr.send(null); } </script></head> <body"> <form action=""> <input type="button" value="Tester" onclick="XHR_PHP()" /> <div id="IdDiv"> </div> </form></body></html>

<?php echo $_GET['val1'] * $_GET['val2'] ; ?>

24

XMLHTTPREQUEST ET PHP

Exercice
Crer un formulaire Web, comme sur la figure en bas. Le principe est dutiliser Ajax pour calculer le produit de deux nombres saisis.

Le calcul est effectu utilisant le PHP sur le serveur Les nombres sont envoys utilisant la mthode GET

Modifier le code pour utiliser la mthode POST

Modifier le code en supprimant le bouton Calculer et utilisant lvnement oninput du TextBox

25

<html xmlns="http://www.w3.org/1999/xhtml"> <head><title> Calculatrice AJAX</title> <script type="text/javascript"> 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> <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"/> <!--<input type="button" name="btn" value="Cal" onclick="TestXHR_PHP(val1.value, val2.value)" />--> </form></body></html>

<?php //echo $_GET['val1'] * $_GET['val2'] ; echo $_POST['val1'] * $_POST['val2'] ; ?>

ajax.php
26

XMLHTTPREQUEST, PHP ET MYSQL

Exercice: Crer une table MySQL perso(ID int(4), Nom varchar(25), Prenom varchar(25)) Crer un formulaire HTML qui permet de saisir dans une zone de texte le nom.

Aprs clique sur un bouton Afficher , les prnoms possibles vont tre rcuprs de la table perso et affichs dans une zone div

Modifier le code en supprimant le bouton Afficher et utilisant lvnement oninput du TextBox

27

<!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"> <head> <title></title> <script type="text/javascript"> function GetData(nom) { var monDiv = document.getElementById("IdDiv"); monDiv.innerHTML = "<u>Prnoms:</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: <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;"> 28 <u>Prnoms:</u></div> </form></body> </html>

AjaxMySqlPhp.html

<?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 requte $query = "SELECT Prenom FROM perso where Nom like '%$nm%'"; $result = mysql_query($query,$dblink) or die (mysql_error($dblink));

//On boucle et affiche le rsultat while($ligne = mysql_fetch_array($result)) { echo $ligne[0]."<br/>"; } ?>

29

ajax.php

XMLHTTPREQUEST, PHP, XML ET MYSQL

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

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

30

XMLHTTPREQUEST, PHP, XML ET MYSQL

Exercice:
Crer une table MySQL etudiants( ID int (5), Nom varchar(25), Prenom varchar(25), Date_Naissance date, Niveau int(2), Filiere varchar(30)) Crer un formulaire comme sur les figures:

31

<html xmlns="http://www.w3.org/1999/xhtml"> <head><title></title> <script type="text/javascript"> function GetData(nom) { 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) { var monDiv = document.getElementById("IdDiv"); 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 = "Prnom: " + 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 = "Filire: " + 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)" /> 32 <div id="IdDiv" style="border-width: 2px; border-style: dotted; border-color: red;"> Infomations:</div> </form></body> </html>

AjaxMySqlPhp.html

<?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 requte $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 lment CDATA pour viter les problmes des entits XML $xml .= "<![CDATA[$value]]>"; //Fermer llment $xml .= "</$key>"; } $xml.="</etudiants>" ; } $xml .= "</$root_element>"; //envoyer l'entte xml au navigateur header ("Content-Type:text/xml"); return $xml; } ?>

33

ajax.php

APPLICATION

Application Chat:

Lide est de raliser une application Web pour le Chat qui doit contenir deux pas pages Web:

la premire permettant de saisir un pseudo et un bouton de validation. la saisi du pseudo, un code AJAX doit vrifier lexistence ou pas du pseudo saisi. Si oui, le bouton de validation doit tre dsactiv et activ dans le cas contraire La deuxime page, doit contenir une zone daffichage permettant dafficher pour chaque utilisateur connect un message de connexion avec lheure de connexion et dafficher aussi les messages envoys par les autres membres. Nom: ChatRoom Tables: Message (nom_user varchar(50), lst_mesg varchar(255)) Utilisateur: (nom varchar(50), last_refresh datetime)

Base de donnes:

34