SlideShare una empresa de Scribd logo
1 de 34
Descargar para leer sin conexión
AJAX
ASYNCHRONOUS JAVASCRIPT AND XML
Abdelouahed Sabri
abdelouahed.sabri@gmail.com
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 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
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
<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
 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 format
texte (chaîne de caractères)
 responseXML: contient la réponse de la requête au format
XML
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
<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>
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
<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>
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>
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>
<script type="text/javascript">
function TestXHR() {
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="">
<input type="button" value="Envoyer" onclick="TestXHR()" />
<input type="text" value="" id="IdText" size="50"/>
<div id="IdDiv"> </div>
</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 >
<head> <title></title>
<script type="text/javascript">
function TestXHR() {
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];
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>
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 >
<head> <title></title>
<script type="text/javascript">
function TestXHR() {
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];
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>
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>
<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 ;
?>
XMLHTTPREQUEST ET PHP
 Premier exemple: Méthode « GET » avec paramètres
24
<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'] ;
?>
XMLHTTPREQUEST 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
utilisant l’événement « oninput » du TextBox
26
<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
XMLHTTPREQUEST, PHP ET MYSQL
 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
<!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>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:
<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
<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 = "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

Más contenido relacionado

La actualidad más candente

Formation Spring Avancé gratuite par Ippon 2014
Formation Spring Avancé gratuite par Ippon 2014Formation Spring Avancé gratuite par Ippon 2014
Formation Spring Avancé gratuite par Ippon 2014Ippon
 
Cours design pattern m youssfi partie 1 introduction et pattern strategy
Cours design pattern m youssfi partie 1 introduction et pattern strategyCours design pattern m youssfi partie 1 introduction et pattern strategy
Cours design pattern m youssfi partie 1 introduction et pattern strategyENSET, Université Hassan II Casablanca
 
What is Ajax technology?
What is Ajax technology?What is Ajax technology?
What is Ajax technology?JavaTpoint.Com
 
Web Applications and Deployment
Web Applications and DeploymentWeb Applications and Deployment
Web Applications and DeploymentBG Java EE Course
 
Les Streams de Java 8
Les Streams de Java 8Les Streams de Java 8
Les Streams de Java 8Antoine Rey
 
softCours design pattern m youssfi partie 9 creation des objets abstract fact...
softCours design pattern m youssfi partie 9 creation des objets abstract fact...softCours design pattern m youssfi partie 9 creation des objets abstract fact...
softCours design pattern m youssfi partie 9 creation des objets abstract fact...ENSET, Université Hassan II Casablanca
 
Introduction à React JS
Introduction à React JSIntroduction à React JS
Introduction à React JSAbdoulaye Dieng
 
Servlet.ppt
Servlet.pptServlet.ppt
Servlet.pptVMahesh5
 
Microservices avec Spring Cloud
Microservices avec Spring CloudMicroservices avec Spring Cloud
Microservices avec Spring CloudFlorian Beaufumé
 
Asynchronous JavaScript & XML (AJAX)
Asynchronous JavaScript & XML (AJAX)Asynchronous JavaScript & XML (AJAX)
Asynchronous JavaScript & XML (AJAX)Adnan Sohail
 
Fascicule de tp atelier développement web
Fascicule de tp atelier développement webFascicule de tp atelier développement web
Fascicule de tp atelier développement webHouda TOUKABRI
 
ReactJS presentation
ReactJS presentationReactJS presentation
ReactJS presentationThanh Tuong
 
JavaScript Fetch API
JavaScript Fetch APIJavaScript Fetch API
JavaScript Fetch APIXcat Liu
 

La actualidad más candente (20)

Ajax.ppt
Ajax.pptAjax.ppt
Ajax.ppt
 
Formation Spring Avancé gratuite par Ippon 2014
Formation Spring Avancé gratuite par Ippon 2014Formation Spring Avancé gratuite par Ippon 2014
Formation Spring Avancé gratuite par Ippon 2014
 
Cours design pattern m youssfi partie 1 introduction et pattern strategy
Cours design pattern m youssfi partie 1 introduction et pattern strategyCours design pattern m youssfi partie 1 introduction et pattern strategy
Cours design pattern m youssfi partie 1 introduction et pattern strategy
 
What is Ajax technology?
What is Ajax technology?What is Ajax technology?
What is Ajax technology?
 
Web Applications and Deployment
Web Applications and DeploymentWeb Applications and Deployment
Web Applications and Deployment
 
Les Streams de Java 8
Les Streams de Java 8Les Streams de Java 8
Les Streams de Java 8
 
softCours design pattern m youssfi partie 9 creation des objets abstract fact...
softCours design pattern m youssfi partie 9 creation des objets abstract fact...softCours design pattern m youssfi partie 9 creation des objets abstract fact...
softCours design pattern m youssfi partie 9 creation des objets abstract fact...
 
reactJS
reactJSreactJS
reactJS
 
Introduction à React JS
Introduction à React JSIntroduction à React JS
Introduction à React JS
 
Servlet.ppt
Servlet.pptServlet.ppt
Servlet.ppt
 
Microservices avec Spring Cloud
Microservices avec Spring CloudMicroservices avec Spring Cloud
Microservices avec Spring Cloud
 
React hooks
React hooksReact hooks
React hooks
 
jQuery
jQueryjQuery
jQuery
 
Asynchronous JavaScript & XML (AJAX)
Asynchronous JavaScript & XML (AJAX)Asynchronous JavaScript & XML (AJAX)
Asynchronous JavaScript & XML (AJAX)
 
Fascicule de tp atelier développement web
Fascicule de tp atelier développement webFascicule de tp atelier développement web
Fascicule de tp atelier développement web
 
Support de cours technologie et application m.youssfi
Support de cours technologie et application m.youssfiSupport de cours technologie et application m.youssfi
Support de cours technologie et application m.youssfi
 
ReactJS presentation
ReactJS presentationReactJS presentation
ReactJS presentation
 
JavaScript Fetch API
JavaScript Fetch APIJavaScript Fetch API
JavaScript Fetch API
 
Theses Soutenues sous Direction et Co-Direction du Pr YOUSSFI
Theses Soutenues sous Direction et Co-Direction du Pr YOUSSFITheses Soutenues sous Direction et Co-Direction du Pr YOUSSFI
Theses Soutenues sous Direction et Co-Direction du Pr YOUSSFI
 
Introduction to spring boot
Introduction to spring bootIntroduction to spring boot
Introduction to spring boot
 

Destacado

Bases de données réparties par la pratique
Bases de données réparties par la pratiqueBases de données réparties par la pratique
Bases de données réparties par la pratiqueAbdelouahed Abdou
 
Bases de données réparties
Bases de données répartiesBases de données réparties
Bases de données répartiesAbdelouahed Abdou
 
Document Object Model ( DOM)
Document Object Model ( DOM)Document Object Model ( DOM)
Document Object Model ( DOM)Abdelouahed Abdou
 
Pl/sql - interaction avec la base de données & structures de contrôle
Pl/sql  - interaction avec la base de données & structures de contrôlePl/sql  - interaction avec la base de données & structures de contrôle
Pl/sql - interaction avec la base de données & structures de contrôleAbdelouahed Abdou
 
Chapitre 3 tableaux et pointeurs en C
Chapitre 3 tableaux et pointeurs en CChapitre 3 tableaux et pointeurs en C
Chapitre 3 tableaux et pointeurs en CAbdelouahed Abdou
 
Introduction au traitement d'images
Introduction au traitement d'imagesIntroduction au traitement d'images
Introduction au traitement d'imagesAbdelouahed Abdou
 
Présentation de OpenERP/Odoo: Progiciel de Gestion Intégré Open Source
Présentation de OpenERP/Odoo: Progiciel de Gestion Intégré Open SourcePrésentation de OpenERP/Odoo: Progiciel de Gestion Intégré Open Source
Présentation de OpenERP/Odoo: Progiciel de Gestion Intégré Open SourceAfrica Performances
 
Développement de modules pour odoo (anciennement OpenERP): exemples et exerci...
Développement de modules pour odoo (anciennement OpenERP): exemples et exerci...Développement de modules pour odoo (anciennement OpenERP): exemples et exerci...
Développement de modules pour odoo (anciennement OpenERP): exemples et exerci...Abdelouahed Abdou
 

Destacado (11)

PL/SQL:les curseurs
PL/SQL:les curseursPL/SQL:les curseurs
PL/SQL:les curseurs
 
Introduction à pl/sql
Introduction à pl/sqlIntroduction à pl/sql
Introduction à pl/sql
 
Bases de données réparties par la pratique
Bases de données réparties par la pratiqueBases de données réparties par la pratique
Bases de données réparties par la pratique
 
Bases de données réparties
Bases de données répartiesBases de données réparties
Bases de données réparties
 
Introduction à ASP.NET
Introduction à ASP.NETIntroduction à ASP.NET
Introduction à ASP.NET
 
Document Object Model ( DOM)
Document Object Model ( DOM)Document Object Model ( DOM)
Document Object Model ( DOM)
 
Pl/sql - interaction avec la base de données & structures de contrôle
Pl/sql  - interaction avec la base de données & structures de contrôlePl/sql  - interaction avec la base de données & structures de contrôle
Pl/sql - interaction avec la base de données & structures de contrôle
 
Chapitre 3 tableaux et pointeurs en C
Chapitre 3 tableaux et pointeurs en CChapitre 3 tableaux et pointeurs en C
Chapitre 3 tableaux et pointeurs en C
 
Introduction au traitement d'images
Introduction au traitement d'imagesIntroduction au traitement d'images
Introduction au traitement d'images
 
Présentation de OpenERP/Odoo: Progiciel de Gestion Intégré Open Source
Présentation de OpenERP/Odoo: Progiciel de Gestion Intégré Open SourcePrésentation de OpenERP/Odoo: Progiciel de Gestion Intégré Open Source
Présentation de OpenERP/Odoo: Progiciel de Gestion Intégré Open Source
 
Développement de modules pour odoo (anciennement OpenERP): exemples et exerci...
Développement de modules pour odoo (anciennement OpenERP): exemples et exerci...Développement de modules pour odoo (anciennement OpenERP): exemples et exerci...
Développement de modules pour odoo (anciennement OpenERP): exemples et exerci...
 

Similar a Ajax (Asynchronous JavaScript and XML)

ajqxè_àànndkllllllllllllllllllllllllllllllllllllllllll
ajqxè_àànndkllllllllllllllllllllllllllllllllllllllllllajqxè_àànndkllllllllllllllllllllllllllllllllllllllllll
ajqxè_àànndkllllllllllllllllllllllllllllllllllllllllllElalami8
 
cours web developpement statique AJAX 2024
cours web developpement statique AJAX  2024cours web developpement statique AJAX  2024
cours web developpement statique AJAX 2024YounesOuladSayad1
 
0554-programmation-web-ajax programmation web ajax
0554-programmation-web-ajax programmation web ajax0554-programmation-web-ajax programmation web ajax
0554-programmation-web-ajax programmation web ajaxMarouaneMyyara2
 
Requêtes HTTP synchrones et asynchrones
Requêtes HTTPsynchrones et asynchronesRequêtes HTTPsynchrones et asynchrones
Requêtes HTTP synchrones et asynchronesAbdoulaye Dieng
 
Solution Linux 2009 JavaScript
Solution Linux 2009 JavaScriptSolution Linux 2009 JavaScript
Solution Linux 2009 JavaScriptRaphaël Semeteys
 
Javascript : fondamentaux et OOP
Javascript : fondamentaux et OOPJavascript : fondamentaux et OOP
Javascript : fondamentaux et OOPJean-Pierre Vincent
 
php2 : formulaire-session-PDO
php2 : formulaire-session-PDOphp2 : formulaire-session-PDO
php2 : formulaire-session-PDOAbdoulaye Dieng
 
REST JUG Toulouse 20100615
REST JUG Toulouse 20100615REST JUG Toulouse 20100615
REST JUG Toulouse 20100615JUG Toulouse
 
Présentation complète de l'HTML5
Présentation complète de l'HTML5Présentation complète de l'HTML5
Présentation complète de l'HTML5jverrecchia
 
OWF12/HTML 5 local storage , olivier thomas, cto at webtyss
OWF12/HTML 5 local storage , olivier thomas, cto at webtyssOWF12/HTML 5 local storage , olivier thomas, cto at webtyss
OWF12/HTML 5 local storage , olivier thomas, cto at webtyssParis Open Source Summit
 
Android Lab Test : La connectivité réseau avec HTTP (français)
Android Lab Test : La connectivité réseau avec HTTP (français)Android Lab Test : La connectivité réseau avec HTTP (français)
Android Lab Test : La connectivité réseau avec HTTP (français)Bruno Delb
 
Introduction aux RIA (Rich Internet Applications)
Introduction aux RIA (Rich Internet Applications)Introduction aux RIA (Rich Internet Applications)
Introduction aux RIA (Rich Internet Applications)Tugdual Grall
 
C5 Javascript French
C5 Javascript FrenchC5 Javascript French
C5 Javascript FrenchVlad Posea
 

Similar a Ajax (Asynchronous JavaScript and XML) (20)

ajqxè_àànndkllllllllllllllllllllllllllllllllllllllllll
ajqxè_àànndkllllllllllllllllllllllllllllllllllllllllllajqxè_àànndkllllllllllllllllllllllllllllllllllllllllll
ajqxè_àànndkllllllllllllllllllllllllllllllllllllllllll
 
cours web developpement statique AJAX 2024
cours web developpement statique AJAX  2024cours web developpement statique AJAX  2024
cours web developpement statique AJAX 2024
 
0554-programmation-web-ajax programmation web ajax
0554-programmation-web-ajax programmation web ajax0554-programmation-web-ajax programmation web ajax
0554-programmation-web-ajax programmation web ajax
 
Requêtes HTTP synchrones et asynchrones
Requêtes HTTPsynchrones et asynchronesRequêtes HTTPsynchrones et asynchrones
Requêtes HTTP synchrones et asynchrones
 
Solution Linux 2009 JavaScript
Solution Linux 2009 JavaScriptSolution Linux 2009 JavaScript
Solution Linux 2009 JavaScript
 
Services rest & jersey
Services rest & jerseyServices rest & jersey
Services rest & jersey
 
ajax.pdf
ajax.pdfajax.pdf
ajax.pdf
 
Javascript : fondamentaux et OOP
Javascript : fondamentaux et OOPJavascript : fondamentaux et OOP
Javascript : fondamentaux et OOP
 
php2 : formulaire-session-PDO
php2 : formulaire-session-PDOphp2 : formulaire-session-PDO
php2 : formulaire-session-PDO
 
Introduction au Jquery
Introduction au JqueryIntroduction au Jquery
Introduction au Jquery
 
Serveur http
Serveur httpServeur http
Serveur http
 
nodejs vs vertx
nodejs vs vertxnodejs vs vertx
nodejs vs vertx
 
Vert.x
Vert.xVert.x
Vert.x
 
REST JUG Toulouse 20100615
REST JUG Toulouse 20100615REST JUG Toulouse 20100615
REST JUG Toulouse 20100615
 
Présentation complète de l'HTML5
Présentation complète de l'HTML5Présentation complète de l'HTML5
Présentation complète de l'HTML5
 
HTML5 en projet
HTML5 en projetHTML5 en projet
HTML5 en projet
 
OWF12/HTML 5 local storage , olivier thomas, cto at webtyss
OWF12/HTML 5 local storage , olivier thomas, cto at webtyssOWF12/HTML 5 local storage , olivier thomas, cto at webtyss
OWF12/HTML 5 local storage , olivier thomas, cto at webtyss
 
Android Lab Test : La connectivité réseau avec HTTP (français)
Android Lab Test : La connectivité réseau avec HTTP (français)Android Lab Test : La connectivité réseau avec HTTP (français)
Android Lab Test : La connectivité réseau avec HTTP (français)
 
Introduction aux RIA (Rich Internet Applications)
Introduction aux RIA (Rich Internet Applications)Introduction aux RIA (Rich Internet Applications)
Introduction aux RIA (Rich Internet Applications)
 
C5 Javascript French
C5 Javascript FrenchC5 Javascript French
C5 Javascript French
 

Ajax (Asynchronous JavaScript and XML)

  • 1. AJAX ASYNCHRONOUS JAVASCRIPT AND XML Abdelouahed Sabri abdelouahed.sabri@gmail.com 2012/2013
  • 2. 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
  • 3. INTRODUCTION  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 3
  • 4. 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
  • 5. 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>
  • 6. XMLHTTPREQUEST  Codage JavaScript  Exemple: Instanciation de l’objet 6 <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>
  • 7. 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
  • 8. 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");
  • 9. 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
  • 10. 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 format texte (chaîne de caractères)  responseXML: contient la réponse de la requête au format XML 10
  • 11. XMLHTTPREQUEST  Evénement:  onreadystatechange: événement (fonction) qui se déclenche pour chaque changement de l’état de la requête (readyState)  Exemple 11 <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. 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 <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>
  • 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. 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. 15 <html > <head> <title></title> <script type="text/javascript"> function TestXHR() { 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=""> <input type="button" value="Envoyer" onclick="TestXHR()" /> <input type="text" value="" id="IdText" size="50"/> <div id="IdDiv"> </div> </form> </body> </html>
  • 16. 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. 17 <html > <head> <title></title> <script type="text/javascript"> function TestXHR() { 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]; 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>
  • 18. 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. 19 <html > <head> <title></title> <script type="text/javascript"> function TestXHR() { 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]; 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>
  • 20. 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
  • 21. 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
  • 22. 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
  • 23. 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> <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 ; ?>
  • 24. XMLHTTPREQUEST ET PHP  Premier exemple: Méthode « GET » avec paramètres 24 <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'] ; ?>
  • 25. XMLHTTPREQUEST 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 utilisant l’événement « oninput » du TextBox
  • 26. 26 <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
  • 27. XMLHTTPREQUEST, PHP ET MYSQL  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"> <head> <title></title> <script type="text/javascript"> function GetData(nom) { 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: <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. 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
  • 30. 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; ?>
  • 31. 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. 32 <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 = "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. 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
  • 34. 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