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
ser...
INTRODUCTION
 XMLHttpRequest
 XMLHttpRequest est un objet ActiveX ou JavaScript qui permet
d'obtenir des données au form...
XMLHTTPREQUEST
 Codage JavaScript
 Pour les versions d’Internet Explorer antérieur à 7, le
constructeur est obtenu à tra...
XMLHTTPREQUEST
 Codage JavaScript
 Exemple: Tester quelle version est supportée par le
navigateur
5
<script type="text/j...
XMLHTTPREQUEST
 Codage JavaScript
 Exemple: Instanciation de l’objet
6
<script type="text/javascript">
function TestXHR(...
XMLHTTPREQUEST
 Méthodes:
 Open(méthode, URL, async[, user, password]):
 Ouvre la connexion avec le serveur.
 méthode:...
XMLHTTPREQUEST
 Méthodes (suite):
 Exemples
8
xhr.open("GET","ajax.php",true);
xhr.send(null);
xhr.open("GET","ajax.php?...
XMLHTTPREQUEST
 Méthodes (suite):
 setRequestHeader(name, value)
 Assigne un entête HTTP à la requête. Très utile lors ...
XMLHTTPREQUEST
 Propriétés:
 readyState: retourne l’état de la requête
 0: La requête n’est pas initialisée
 1: Début ...
XMLHTTPREQUEST
 Evénement:
 onreadystatechange: événement (fonction) qui se déclenche
pour chaque changement de l’état d...
XMLHTTPREQUEST
 Exercice 1:
 Modifier le code en bas pour afficher dans une balise
DIV le changement de la propriété rea...
13
<html >
<head>
<title></title>
<script type="text/javascript">
function TestXHR() {
if (window.XMLHttpRequest)
var xhr ...
XMLHTTPREQUEST
 Exercice 2:
 Modifier le code pour afficher le statut (status) de la
requête utilisant une zone de texte...
15
<html >
<head> <title></title>
<script type="text/javascript">
function TestXHR() {
var xhrstatus = new Array();
xhrsta...
XMLHTTPREQUEST
 Exercice 3:
 Modifier le code pour afficher en popup le contenu
d’un fichier texte (db.txt)
 Utiliser l...
17
<html >
<head> <title></title>
<script type="text/javascript">
function TestXHR() {
var xhrstatus = new Array();
xhrsta...
XMLHTTPREQUEST
 Exercice 4:
 Modifier le code pour afficher en pop-up le contenu
d’un fichier XML (db.xml)
 Utiliser la...
19
<html >
<head> <title></title>
<script type="text/javascript">
function TestXHR() {
var xhrstatus = new Array();
xhrsta...
XMLHTTPREQUEST
 Autres méthodes
 getAllResponseHeaders()
 Permet de récupérer l’entête HTTP de la réponse sous la forme...
APPLICATIONS
 Fichier Texte
 Créer une page Web contenant un bouton et un élément div
 Sur le serveur, créer un fichier...
APPLICATIONS
 Fichier XML
 Créer une page Web comme
sur la figure
 Utiliser l’événement
onChange() du contrôle
SELECT p...
XMLHTTPREQUEST ET PHP
 Premier exemple: Méthode « GET » sans paramètres
23
<html xmlns="http://www.w3.org/1999/xhtml">
<h...
XMLHTTPREQUEST ET PHP
 Premier exemple: Méthode « GET » avec paramètres
24
<html xmlns="http://www.w3.org/1999/xhtml">
<h...
XMLHTTPREQUEST ET PHP
 Exercice
 Créer un formulaire Web, comme sur la figure en bas.
 Le principe est d’utiliser Ajax ...
26
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title> Calculatrice AJAX</title>
<script type="text/javascript">
fun...
XMLHTTPREQUEST, PHP ET MYSQL
 Exercice:
 Créer une table MySQL perso(ID
int(4), Nom varchar(25), Prenom
varchar(25))
 C...
28
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd...
29
<?php
//on se connecte a la BDD
$dbhost="localhost";
$dbuser="root";
$dbpass="";
$nm=$_GET['nm'];
$dblink=mysql_connect...
XMLHTTPREQUEST, PHP, XML ET MYSQL
 On peut forcer la sortie du code PHP en un fichier XML
30
<?php
$xml = "<?xml version=...
XMLHTTPREQUEST, PHP, XML ET MYSQL
 Exercice:
 Créer une table MySQL etudiants( ID int (5), Nom varchar(25),
Prenom varch...
32
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title></title>
<script type="text/javascript">
function GetData(nom)...
33
<?php
echo getXmlFromDb($_GET['nm']);
function getXmlFromDb($nm)
{
//on se connecte a la BDD
$dbhost="localhost";
$dbus...
APPLICATION
 Application Chat:
 L’idée est de réaliser une application Web pour le Chat qui
doit contenir deux pas pages...
Prochain SlideShare
Chargement dans…5
×

Ajax (Asynchronous JavaScript and XML)

1 978 vues

Publié le

Ajax (Asynchronous JavaScript and XML) est une technique permettant la communication asynchrone entre application et serveur. c'est une architecture qui permet de construire des applications Web et des sites web dynamiques interactifs sur le poste client en se servant de différentes technologies.
Ajax combine JavaScript, les CSS, XML, le DOM et le XMLHttpRequest afin d'améliorer maniabilité et confort d'utilisation des Applications Internet Riches

0 commentaire
2 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
1 978
Sur SlideShare
0
Issues des intégrations
0
Intégrations
5
Actions
Partages
0
Téléchargements
121
Commentaires
0
J’aime
2
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Ajax (Asynchronous JavaScript and XML)

  1. 1. AJAX ASYNCHRONOUS JAVASCRIPT AND XML Abdelouahed Sabri abdelouahed.sabri@gmail.com 2012/2013
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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

×