SlideShare une entreprise Scribd logo
2007-2008
Introduction à Ajax
CNAM le 1er
mars 2008
O. Pons S. Rosmorduc
1 / 17
Principe général de fonctionnement
I Faire des requettes http sans avoir recharger une page
entiere.
I Communication de javascript avec les serveurs
I Ajout de l'objet (la classe) XMLHttpRequest a Javascript
I Asynchonous Javascript And XML
2 / 17
creation d'un object XMLHttpRequest
I Créer un object pour chaque requete http.
I (historique) dierent selon le selon le navigateur
I Avec des if
if (window.XMLHttpRequest)
//XMLHttpRequest est un objet
//de la fenêtre courant
{
xhr = new XMLHttpRequest();
// tous sauf IE7, Firefox, Safari, ...
}
else
if (window.ActiveXObject)
// Version Active
{
xhr = new ActiveXObject(Microsoft.XMLHTTP);
// IE
}
3 / 17
creation d'un object XMLHttpRequest
I Avec des try
try {
xhr = new ActiveXObject(Microsoft.XMLHTTP);
// essayer IE
}
catch(e) // si Echec c'est pas IE
{
xhr = new XMLHttpRequest()
}
4 / 17
Utilisation d' XMLHttpRequest
Une fois l'object creer :
I la methode open permet d'ouvrir une connection
I la methode send permet d'envoyer une requete
apres la requete l'object contient (entre autre)
I le code de retour
I le document resultant de la requete
5 / 17
Example trivial
headtitle exemple/title
script type=text/javascript
function exemple1(){
var req = new XMLHttpRequest();
alert(req);
req.open('GET', 'test.php', false);//
req.send(null);
alert(req.status);
if(req.status == 200)
alert(req.responseText);
}
/script
/head
body
h1 onclick='exemple1()'clic moi pour tester/h1
h1 onclick='alert(debloque)'bloquer/h1
/body
6 / 17
Les méthodes
I open (Méthode , URL , type)
I GET, POST
I URL (un même domaine)
I true ou false : asynchrone(true) ou synchrone(false)
I send (argument)
I null
I data :
unnom=unevaleurautrenom=autrevaleuretencore=uneautre
I abort
I getResponseHeader(header)
I setRequestHeader(header, value)
si méthode POST changer le MIME :
httpRequest.setRequestHeader('Content-Type',
'application/x-www-form-urlencoded');
7 / 17
Les attributs
I status (200, 404 ...)
I statusText (OK, not found ...)
I responseText : du text
I responseXML : du xml
I readyState
I onreadystatechange
8 / 17
Asynchrone
L'exemple était synchrone, donc bloquant
I si réponse immédiate et traitement court :
?php
echo on a fini ....
?
I si traitement long cote serveur
?php
sleep(30); /attendre 30 secondes
echo on a fini ....
?
9 / 17
Asynchrone
I m'attend pas la réponse pour continuer son exécution,
I doit pouvoir connaître l' état de traitement de la requête :
readyState
I doit être prévenue des changement et décider quoi faire
onreadystatechange
10 / 17
readyState
Les états de readyState :
I 0 : non initialisé.
I 1 : connexion établie.
I 2 : requête reçue.
I 3 : réponse en cours.
I 4 : terminé. (le plus utile)
11 / 17
onreadystatechange
I onreadystatechange=functionDeTraitement
12 / 17
exemple 2
headtitle exemple /title
script type=text/javascript
function exemple2(){
var req = new XMLHttpRequest();
alert(req);
req.onreadystatechange=function(){
if(req.readyState == 4){
alert(req.status);
if(req.status == 200)
alert(req.responseText);
}}
req.open('GET', 'test.php',true);//
req.send(null);}
/script /head body
h1 onclick='exemple2()'clic moi pour tester/h1
h1 onclick='alert(pas)'pas bloquer/h1
/body
13 / 17
Javascript
I via le DOM
I via innerHTML
14 / 17
Exemple
headtitle exemple /title
script type=text/javascript
function exemple2(){
var req = new XMLHttpRequest();
alert(req);
req.onreadystatechange=function(){
if(req.readyState == 4){
alert(req.status);
if(req.status == 200)
document.getElementById(unid).innerHTML=
req.responseText;}}
req.open('GET', 'test.php',true);//
req.send(null);}
/script /head body
h1 onclick='exemple2()'clic moi pour tester/h1
div id=unid/div
/body
15 / 17
XML
?xml version=1.0 encoding=ISO-8859-1?
catalog
cd
titleEmpire burlesque/title
artistBob Dylan/artist
countryusa/country
companycolumbia/company
year1985/year
/cd
cd
titleHide your heart/title
artistBonnie Tyler/artist
countryuk/country
companycbs records/company
year1988/year
/cd
/catalog
16 / 17
XML
htmlheadtitle exemple /title
script type=text/javascript
function exemple3(){
var req = new XMLHttpRequest();
alert(req);
req.onreadystatechange=function(){
if(req.readyState == 4){
if(req.status == 200)
var xmldoc = req.responseXML;
var root_node =
xmldoc.getElementsByTagName('artist').item(0);
alert(root_node.firstChild.data);}}
req.open('GET', 'catalog.xml',true);//
req.send(null);}
/script/headbody
h1 onclick='exemple3()'clic moi pour tester/h1
/body/html
17 / 17

Contenu connexe

Similaire à Introduction to prograaming using ajax PHP JS

Introduction à JavaScript
Introduction à JavaScriptIntroduction à JavaScript
Introduction à JavaScript
Microsoft
 
Gatling Tool in Action at DevoxxFR 2012
Gatling Tool in Action at DevoxxFR 2012Gatling Tool in Action at DevoxxFR 2012
Gatling Tool in Action at DevoxxFR 2012
slandelle
 
Javascript ne se limite pas à jquery
Javascript ne se limite pas à jqueryJavascript ne se limite pas à jquery
Javascript ne se limite pas à jquery
neuros
 
Javascript : fondamentaux et OOP
Javascript : fondamentaux et OOPJavascript : fondamentaux et OOP
Javascript : fondamentaux et OOP
Jean-Pierre Vincent
 
Spring Batch
Spring BatchSpring Batch
Spring Batch
victor_gallet
 
Fondamentaux portée - contexte - function ms tech days
Fondamentaux   portée - contexte - function ms tech daysFondamentaux   portée - contexte - function ms tech days
Fondamentaux portée - contexte - function ms tech days
Jean-Pierre Vincent
 
BordeauxJUG : Portails & Portlets Java
BordeauxJUG : Portails & Portlets JavaBordeauxJUG : Portails & Portlets Java
BordeauxJUG : Portails & Portlets JavaCamblor Frédéric
 
Nouveautés JavaScript dans le monde Microsoft
Nouveautés JavaScript dans le monde MicrosoftNouveautés JavaScript dans le monde Microsoft
Nouveautés JavaScript dans le monde Microsoft
davrous
 
ENIB cours CAI Web - Séance 3 - JSP/Servlet - Cours
ENIB cours CAI Web - Séance 3 - JSP/Servlet - CoursENIB cours CAI Web - Séance 3 - JSP/Servlet - Cours
ENIB cours CAI Web - Séance 3 - JSP/Servlet - CoursHoracio Gonzalez
 
HTML5 en projet
HTML5 en projetHTML5 en projet
HTML5 en projet
Normandy JUG
 
Cours php bac info
Cours php bac infoCours php bac info
Cours php bac info
borhen boukthir
 
Reseau
ReseauReseau
Reseau
gijo000
 
programmation réseau en java
programmation réseau en java programmation réseau en java
programmation réseau en java
Ezéquiel Tsagué
 
2014.12.11 - TECH CONF #3 - Présentation Node.js
2014.12.11 - TECH CONF #3 - Présentation Node.js2014.12.11 - TECH CONF #3 - Présentation Node.js
2014.12.11 - TECH CONF #3 - Présentation Node.js
TelecomValley
 
Autour de Node.js - TechConf#3
Autour de Node.js - TechConf#3Autour de Node.js - TechConf#3
Autour de Node.js - TechConf#3
Luc Juggery
 
jQuery
jQueryjQuery
jQuery
Franck SIMON
 
WebServices.pdfbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
WebServices.pdfbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbWebServices.pdfbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
WebServices.pdfbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
HINDGUENDOUZ
 
Webserver tomcat-jboss-jrun-jonas doc
Webserver tomcat-jboss-jrun-jonas docWebserver tomcat-jboss-jrun-jonas doc
Webserver tomcat-jboss-jrun-jonas doc
Winslo Nwan
 

Similaire à Introduction to prograaming using ajax PHP JS (20)

Tapestry
TapestryTapestry
Tapestry
 
Introduction à JavaScript
Introduction à JavaScriptIntroduction à JavaScript
Introduction à JavaScript
 
Gatling Tool in Action at DevoxxFR 2012
Gatling Tool in Action at DevoxxFR 2012Gatling Tool in Action at DevoxxFR 2012
Gatling Tool in Action at DevoxxFR 2012
 
Javascript ne se limite pas à jquery
Javascript ne se limite pas à jqueryJavascript ne se limite pas à jquery
Javascript ne se limite pas à jquery
 
Javascript : fondamentaux et OOP
Javascript : fondamentaux et OOPJavascript : fondamentaux et OOP
Javascript : fondamentaux et OOP
 
Spring Batch
Spring BatchSpring Batch
Spring Batch
 
Fondamentaux portée - contexte - function ms tech days
Fondamentaux   portée - contexte - function ms tech daysFondamentaux   portée - contexte - function ms tech days
Fondamentaux portée - contexte - function ms tech days
 
BordeauxJUG : Portails & Portlets Java
BordeauxJUG : Portails & Portlets JavaBordeauxJUG : Portails & Portlets Java
BordeauxJUG : Portails & Portlets Java
 
Nouveautés JavaScript dans le monde Microsoft
Nouveautés JavaScript dans le monde MicrosoftNouveautés JavaScript dans le monde Microsoft
Nouveautés JavaScript dans le monde Microsoft
 
ENIB cours CAI Web - Séance 3 - JSP/Servlet - Cours
ENIB cours CAI Web - Séance 3 - JSP/Servlet - CoursENIB cours CAI Web - Séance 3 - JSP/Servlet - Cours
ENIB cours CAI Web - Séance 3 - JSP/Servlet - Cours
 
HTML5 en projet
HTML5 en projetHTML5 en projet
HTML5 en projet
 
Serveur http
Serveur httpServeur http
Serveur http
 
Cours php bac info
Cours php bac infoCours php bac info
Cours php bac info
 
Reseau
ReseauReseau
Reseau
 
programmation réseau en java
programmation réseau en java programmation réseau en java
programmation réseau en java
 
2014.12.11 - TECH CONF #3 - Présentation Node.js
2014.12.11 - TECH CONF #3 - Présentation Node.js2014.12.11 - TECH CONF #3 - Présentation Node.js
2014.12.11 - TECH CONF #3 - Présentation Node.js
 
Autour de Node.js - TechConf#3
Autour de Node.js - TechConf#3Autour de Node.js - TechConf#3
Autour de Node.js - TechConf#3
 
jQuery
jQueryjQuery
jQuery
 
WebServices.pdfbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
WebServices.pdfbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbWebServices.pdfbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
WebServices.pdfbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
 
Webserver tomcat-jboss-jrun-jonas doc
Webserver tomcat-jboss-jrun-jonas docWebserver tomcat-jboss-jrun-jonas doc
Webserver tomcat-jboss-jrun-jonas doc
 

Introduction to prograaming using ajax PHP JS

  • 1. 2007-2008 Introduction à Ajax CNAM le 1er mars 2008 O. Pons S. Rosmorduc 1 / 17
  • 2. Principe général de fonctionnement I Faire des requettes http sans avoir recharger une page entiere. I Communication de javascript avec les serveurs I Ajout de l'objet (la classe) XMLHttpRequest a Javascript I Asynchonous Javascript And XML 2 / 17
  • 3. creation d'un object XMLHttpRequest I Créer un object pour chaque requete http. I (historique) dierent selon le selon le navigateur I Avec des if if (window.XMLHttpRequest) //XMLHttpRequest est un objet //de la fenêtre courant { xhr = new XMLHttpRequest(); // tous sauf IE7, Firefox, Safari, ... } else if (window.ActiveXObject) // Version Active { xhr = new ActiveXObject(Microsoft.XMLHTTP); // IE } 3 / 17
  • 4. creation d'un object XMLHttpRequest I Avec des try try { xhr = new ActiveXObject(Microsoft.XMLHTTP); // essayer IE } catch(e) // si Echec c'est pas IE { xhr = new XMLHttpRequest() } 4 / 17
  • 5. Utilisation d' XMLHttpRequest Une fois l'object creer : I la methode open permet d'ouvrir une connection I la methode send permet d'envoyer une requete apres la requete l'object contient (entre autre) I le code de retour I le document resultant de la requete 5 / 17
  • 6. Example trivial headtitle exemple/title script type=text/javascript function exemple1(){ var req = new XMLHttpRequest(); alert(req); req.open('GET', 'test.php', false);// req.send(null); alert(req.status); if(req.status == 200) alert(req.responseText); } /script /head body h1 onclick='exemple1()'clic moi pour tester/h1 h1 onclick='alert(debloque)'bloquer/h1 /body 6 / 17
  • 7. Les méthodes I open (Méthode , URL , type) I GET, POST I URL (un même domaine) I true ou false : asynchrone(true) ou synchrone(false) I send (argument) I null I data : unnom=unevaleurautrenom=autrevaleuretencore=uneautre I abort I getResponseHeader(header) I setRequestHeader(header, value) si méthode POST changer le MIME : httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 7 / 17
  • 8. Les attributs I status (200, 404 ...) I statusText (OK, not found ...) I responseText : du text I responseXML : du xml I readyState I onreadystatechange 8 / 17
  • 9. Asynchrone L'exemple était synchrone, donc bloquant I si réponse immédiate et traitement court : ?php echo on a fini .... ? I si traitement long cote serveur ?php sleep(30); /attendre 30 secondes echo on a fini .... ? 9 / 17
  • 10. Asynchrone I m'attend pas la réponse pour continuer son exécution, I doit pouvoir connaître l' état de traitement de la requête : readyState I doit être prévenue des changement et décider quoi faire onreadystatechange 10 / 17
  • 11. readyState Les états de readyState : I 0 : non initialisé. I 1 : connexion établie. I 2 : requête reçue. I 3 : réponse en cours. I 4 : terminé. (le plus utile) 11 / 17
  • 13. exemple 2 headtitle exemple /title script type=text/javascript function exemple2(){ var req = new XMLHttpRequest(); alert(req); req.onreadystatechange=function(){ if(req.readyState == 4){ alert(req.status); if(req.status == 200) alert(req.responseText); }} req.open('GET', 'test.php',true);// req.send(null);} /script /head body h1 onclick='exemple2()'clic moi pour tester/h1 h1 onclick='alert(pas)'pas bloquer/h1 /body 13 / 17
  • 14. Javascript I via le DOM I via innerHTML 14 / 17
  • 15. Exemple headtitle exemple /title script type=text/javascript function exemple2(){ var req = new XMLHttpRequest(); alert(req); req.onreadystatechange=function(){ if(req.readyState == 4){ alert(req.status); if(req.status == 200) document.getElementById(unid).innerHTML= req.responseText;}} req.open('GET', 'test.php',true);// req.send(null);} /script /head body h1 onclick='exemple2()'clic moi pour tester/h1 div id=unid/div /body 15 / 17
  • 16. XML ?xml version=1.0 encoding=ISO-8859-1? catalog cd titleEmpire burlesque/title artistBob Dylan/artist countryusa/country companycolumbia/company year1985/year /cd cd titleHide your heart/title artistBonnie Tyler/artist countryuk/country companycbs records/company year1988/year /cd /catalog 16 / 17
  • 17. XML htmlheadtitle exemple /title script type=text/javascript function exemple3(){ var req = new XMLHttpRequest(); alert(req); req.onreadystatechange=function(){ if(req.readyState == 4){ if(req.status == 200) var xmldoc = req.responseXML; var root_node = xmldoc.getElementsByTagName('artist').item(0); alert(root_node.firstChild.data);}} req.open('GET', 'catalog.xml',true);// req.send(null);} /script/headbody h1 onclick='exemple3()'clic moi pour tester/h1 /body/html 17 / 17