Your SlideShare is downloading. ×
Ajax (Asynchronous JavaScript and XML)
Ajax (Asynchronous JavaScript and XML)
Ajax (Asynchronous JavaScript and XML)
Ajax (Asynchronous JavaScript and XML)
Ajax (Asynchronous JavaScript and XML)
Ajax (Asynchronous JavaScript and XML)
Ajax (Asynchronous JavaScript and XML)
Ajax (Asynchronous JavaScript and XML)
Ajax (Asynchronous JavaScript and XML)
Ajax (Asynchronous JavaScript and XML)
Ajax (Asynchronous JavaScript and XML)
Ajax (Asynchronous JavaScript and XML)
Ajax (Asynchronous JavaScript and XML)
Ajax (Asynchronous JavaScript and XML)
Ajax (Asynchronous JavaScript and XML)
Ajax (Asynchronous JavaScript and XML)
Ajax (Asynchronous JavaScript and XML)
Ajax (Asynchronous JavaScript and XML)
Ajax (Asynchronous JavaScript and XML)
Ajax (Asynchronous JavaScript and XML)
Ajax (Asynchronous JavaScript and XML)
Ajax (Asynchronous JavaScript and XML)
Ajax (Asynchronous JavaScript and XML)
Ajax (Asynchronous JavaScript and XML)
Ajax (Asynchronous JavaScript and XML)
Ajax (Asynchronous JavaScript and XML)
Ajax (Asynchronous JavaScript and XML)
Ajax (Asynchronous JavaScript and XML)
Ajax (Asynchronous JavaScript and XML)
Ajax (Asynchronous JavaScript and XML)
Ajax (Asynchronous JavaScript and XML)
Ajax (Asynchronous JavaScript and XML)
Ajax (Asynchronous JavaScript and XML)
Ajax (Asynchronous JavaScript and XML)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Ajax (Asynchronous JavaScript and XML)

1,312

Published on

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 …

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 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,312
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
70
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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

×