AJAX AJAX - Latece

Transcription

AJAX AJAX - Latece

AJAX
A. Obaid © - Programmation du web (INF2005)
Ajax . 1
AJAX
• Asynchronous JavaScript And XML.
• Technologie pour créer des pages web interactives
• Basées sur XML, HTML et JavaScript
• Utilise:
•
•
•
•
HTML pour le marquage
XHTML pour stocker le résultat
CSS pour la présentation
JavaScript (et DOM) pour récupérer les données et
leur afficher dynamiquement
Ajax . 2
1
1
Rôle de JavaScript
•
•
•
•
•
•
•
•
•
•
Définit une objet pour envoyer des requêtes HTTP
Initie la requête
Obtient l'objet Requête
Désigne une fonction (callBack) pour traiter la réponse.
Définit des événements d'arrivée de la réponses
Initie des requêtes GET ou POST
Manipule la réponse
Attend que la réponse soit arrivée
Extrait le texte résultat
Traite le résultat
Ajax . 3
Rôle de HTML
• Charge JavaScript
• Désigne contrôles qui initient la requête
• Donne les identificateurs (id) pour saisir les éléments
qui seront lus par le script
Ajax . 4
2
2
Modèle Ajax
Navigateur
Interface usager
Navigateur
Interface usager
Appel JavaScript
HTML + CSS
Machine JavaScript
Requête HTTP
HTML + CSS
Serveur web
Documents
Web
Programme
Requête HTTP
XML
Serveur web/XML
Documents
Web
Programme
Ajax . 5
Interactions avec AJAX
• Lorsqu'on soumet un formulaire, JavaScript
envoie une requête à un serveur, obtient le
résultat et rafraichit l'écran avec les nouvelles
données
• Sans l'intervention explicite de l'usager
• XML est utilisé comme format des données
échangées
• Les interactions sont asynchrones:
• L'usager peut continuer à utiliser l'application web
pendant que le navigateur cherche de l'information
du serveur.
• Les applications sont "pilotées" par les données
Ajax . 6
3
3
Exemples d'utilisation
• Google Maps
• L'usager peut faire bouger la carte qui se met à
jour sans utiliser de bouton.
• Google Suggest
• Au fur et à mesure qu'on tape un texte, Google fait
des suggestions.
• Gmail
• La boite de réception est rafraichie sans
intervention de l'usager.
Ajax . 7
Transaction Ajax
• Un transaction consiste en
• L'envoi de la requête d'ouverture avec open()
• On y spécifie la méthode (GET, POST ou HEAD):
• La réception de la réponse du serveur
• L'envoi de données avec send()
xmlhttp.open("HEAD","Demo.jsp",true);
Server: Microsoft-IIS/5.1
Date: Fri, 03 Mar 2006 17:47:47 GMT
Content -Type: text/xml
Accept -Ranges: bytes
Last-Modified: Fri, 03 Mar 2006 14:07:51 GMT
Content -Length: 21
xmlhttp.send(null);
Ajax . 8
4
4
Transactions Ajax
xmlhttp.open("HEAD","Demo.jsp",true);
Date: Fri, 17 Nov 2010 17:47:47 GMT
Last-Modified: Fri, 17 Nov 2010 14:07:51 GMT
Content -Length: 21
xmlhttp.send(null);
xmlhttp.open("GET","Demo.jsp?Prenom=Abdel&Nom=Obaid",true);
Date: Fri, 17 Nov 2010 17:47:47 GMT
Content -Length: 200
… Donnees de la response …
xmlhttp.send(null);
Ajax . 9
Transactions Ajax
xmlhttp.open("POST","Demo.jsp",true);
Date: Fri, 17 Nov 2010 17:47:47 GMT
Content -Length: 200
… Donnees de la response …
xmlhttp.setRequestHeader("Content -Type","application/x-www-form-urlencoded;");
xmlhttp.send("FPrenom=Abdel&Nom=Obaid");
Ajax . 10
5
5
Envoi de la requête
function envoyerRequete() {
requete = obtenirObjetRequete();
requete.onreadystatechange = traiterReponse ;
requete.open("GET", "URL", true);
requete.send(null);
}
Ajax . 11
Traitement de la réponse
function traiterReponse () {
if (requete.readyState == 4) {
alert("Reponserecue : "+ requete.responseText);
}
}
</script>
Ajax . 12
6
6
L'objet Request
• Contient la requête du client Ajax
• Les méthodes utilisées pour créer un objet
Request dépendent du navigateur
• Internet Explorer:
• new ActiveXObject("Microsoft.XMLHTTP");
• FireFox, Safari, …:
• new XMLHttpRequest();
Ajax . 13
Objet XMLHttpRequest
• Permet de communique avec l'application
sur le serveur
• Permet d' échanger des informations XML,
HTML ou texte
• Effectue l'interaction asynchrone avec le
serveur
Ajax . 14
7
7
Création de XMLHttpRequest
<script type="text/javascript">
var requete;
function obtenirObjetRequete() {
if (window.ActiveXObject) {
return(new ActiveXObject("Microsoft.XMLHTTP"));
} else if (window.XMLHttpRequest) {
return(new XMLHttpRequest());
} else {
return(null);
}
}
Ajax . 15
Exemple
<html>
<body>
<script type="text/javascript">
function ajaxFunction() {
var xmlHttp; try {
xmlHttp=new XMLHttpRequest();
// Firefox, Opera, Safari
} catch (e) {
try {
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // IE
} catch (e) {
try { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert("Votre navigateur ne supporte pas AJAX!");
return false;
<form name="mf">
}
Name: <input type="text" name="username" />
}
Time: <input type="text" name="time" />
}
</form>
}
</body>
</script>
</html>
Ajax . 16
8
8
Requête HTTP
• Les requêtes se font grâce à des l'objet de
requête dans un script JavaScript.
• Deux versions de l'objet de requête:
• XMLHTTP : objet ActiveX de MicroSoft , pour IE.
• XMLHttpRequest : Objet ayant les mêmes méthodes et
propriétés que XMLHTTP (pour Mozilla, …).
• On doit vérifier quel navigateur on utilise.
if (window.XMLHttpRequest) { // Mozilla,...
httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
Ajax . 17
Lancement de la requête
• On utilise les méthodes open() et send().
• open() a 3 paramètres:
• Méthode HTTP (GET, POST, ...)
• URL de la page demandée : doit être du même
domaine que la page demandante.
• Flag de synchronisme (true/false).
• send() a un paramètre: données envoyées au
serveur si la méthode POST ou null si la
méthode set GET..
httpRequest.open('GET', 'http://www.info.uqam.ca/document.type', true);
httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
httpRequest.send("prenom=Abdel&nom=Obaid&tel=514-1234567" );
Ajax . 18
9
9
Réponses asynchrones
• Le synchrone impose que le client attende la
réponse du serveur
• En asynchrone on n'attend pas. On ne sait pas
quand la réponse va arriver.
• On doit donc écrire un code pour attende la
réponse.
• On utilise une fonction Callback qui attend
l'arrivée d'un événement "Changement dans
l'état de la réponse"
• L'événement est capturé par la propriété
onreadystatechange de l'objet xmlhttp
Ajax . 19
• La réponse doit avoir un type MIME text/XML.
• Après avoir reçu la réponse du serveur, on doit
spécifier (avec onreadystatechange ) à
XMLHttpRequest, le nom de la fonction
(callback) JavaScript qui traitera la réponse.
httpRequest = new XMLHttpRequest();
httpRequest.overrideMimeType('text/xml');
httpRequest.onreadystatechange = fonctionDeTraitement;
Ajax . 20
10
10
• L’état de la réponse est désigné par une
valeur de 0 à 4.
• Une valeur de 4, signifie que la réponse du
serveur a été reçue entièrement et qu’elle est
prête pour le traitement.
httpRequest.onreadystatechange = fonctionDeTraitement;
Valeurs de la réponse:
–0 (non initialisée)
–1 (en cours de chargement)
–2 (chargée)
–3 (en cours d'interaction)
–4 (terminée)
if (httpRequest.readyState == 4) { …// Réponse reçue }
else { …// pas encore prête }
Ajax . 21
Réponse du serveur
• Les propriétés responseText et responseXML de
XMLHttpRequest contiennent la réponse du
serveur.
• responseText. Contient la réponse en tant que
chaine de caractères.
• On peut la mettre sous forme HTML
• responseXML : contient la réponse sous forme
de document XML.
• On peut la manipuler avec les API DOM appropriées.
Ajax . 22
11
11
Propriétés de
XMLHttpRequest
• onreadystatechange
• On y met le nom d ’une fonction qui recevra les
données du serveur.
• Cette fonction sera appelée automatiquement
pour traiter la réponse du serveur.
• readyState
• Contient l’état de la réponse du serveur. A chaque
fois que cette propriété change, la fonction
onreadystatechange sera exécutée.
Ajax . 23
Propriétés de
XMLHttpRequest
• responseText
• Stocke les données en format texte envoyées par le
serveur
• responseXML
• Stocke les données en tant qu'objet XML envoyées
par le serveur
Ajax . 24
12
12
Méthodes de
XMLHttpRequest
• abort() : annule le requête XMLHttp.
• getAllResponseHeaders() : retourne les
valeurs de tous les en-têtes HTTP
• getResponseHeader(header) : retourne la
valeur de l' entête HTTP spécifiée.
Ajax . 25
Méthodes de
XMLHttpRequest
• open(Methode,URL,Async) : initialise l'objet
XMLHttpRequest.
• send(Données) : envoie la requête HTTP au
serveur dont l'URL est spécifiée dans send():
• Si la méthode dans open() est GET, l'argument
DonneesPost est null.
• setRequestHeader(entete,valeur) : assigne
une valeur à une entête HTTP spécifique.
Ajax . 26
13
13
Exemple
function debut() {
…
var contenu = document.getElementById("contenu");
if (typeof xmlhttp == "undefined") {
ContentDiv.innerHTML = "<h1> XMLHttp non cree!</h1>"; }
else { xmlhttp.open("HEAD", "http://www.uqam.ca", true);
xmlhttp.onreadystatechange=
function() {
ContentDiv.innerHTML +=
"<h2> État pret: " + xmlhttp.readyState + "</h2>";
}
xmlhttp.send(null);
}
}
…
Ajax . 27
Exemple
xmlhttp.open("GET", "Demo.jsp?Prenom=Abdel&Nom=Obaid", true);
xmlhttp.onreadystatechange=
function() {
if (xmlhttp.readyState==4 && xmlhttp.status ==200) {
contenu.innerHTML=xmlhttp.responseText; }
}
xmlhttp.send(null);
…
<body>
<a href="javascript:debut()">Commencer </a>
<div id="contenu"></div>
</body>
Ajax . 28
14
14
Exemple Complet
<script type="text/javascript ">
function Requete (url ) {
var requeteHTTP= false;
if (window.XMLHttpRequest) {
requeteHTTP = new XMLHttpRequest();
if (requeteHTTP.overrideMimeType) {
requeteHTTP.overrideMimeType('text/xml');
}
} else if (window.ActiveXObject) {
try { requeteHTTP = new ActiveXObject("Msxml2.XMLHTTP"); }
catch (e) {
try { requeteHTTP = new ActiveXObject(" Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!requeteHTTP) {
alert('Abandon : Impossible de créer une instance XMLHTTP');
return false; }
requeteHTTP.onreadystatechange = function() {changerContenu(requeteHTTP); };
requeteHTTP.open('GET',url, true);
requeteHTTP.send(null);
}
Ajax . 29
Exemple
function changerContenu(requeteHTTP) {
if (requeteHTTP.readyState == 4) {
if (requeteHTTP.status == 200) {
document.formulaire1.heure.value =requeteHTTP.responseText; }
else { alert('Un problème est survenu avec la requête.'); }
}
}
</script>
</head>
<body>
<h2> Ceci est un exemple de Ajax </h2>
<form name="formulaire1">
Nom: <input type="text" onkeyup= Requete('ex2.jsp') name="nom" />
Heure: <input type="text" name="heure" />
</form>
</body>
<% java.util.Calendar cal = java.util.Calendar.getInstance(); %>
</html>
<% out.print (cal.getTime().toString()); %>
Fichier ex2.jsp
Ajax . 30
15
15
Traitement de la requête
• Plusieurs technologies:
• Servlets et JSP: objets Java sur un container web
• Langages de programmation classique (C, C++)
• Langages de scriptage dédiés:
• PHP, Python, Perl, Ruby,...
Ajax . 31
Servlet - Exemple
public void doGet
(HttpServletRequest requete,
HttpServletResponsereponse)
throws IOException, ServletException {
String leNom= request.getParameter("nom");
PrintWriter sortie = reponse.getWriter();
reponse.setContentType("text/xml");
reponse.setHeader("Cache-Control", "no-cache");
reponse.write("<html>….");
}
Ajax . 32
16
16
PHP - Exemple
…
function envoyerRequete(param) {
alert('1!');
requete = obtenirObjectRequete();
requete.onreadystatechange = traiterReponse;
requete.open("GET", "chercher.php?nomProf="+param, true);
requete.send(null);
}
<?php…
$profs = array (
"Obaid"=>array( "PK-4740", "3206","Teleinformatique" ),
"Tremblay"=>array ("PK-4435","8213","Genie logiciel"),
…
);
$leProf=$_GET["nomProf"]; // nomProf dans le formulaire
echo "Prof: " . $leProf ."<br />";
echo "Bureau: " . $profs[$leProf ][0]."<br />";
echo "Telephone: " . $profs[$leProf][1]."<br />";
echo "Domaine: " . $profs[$leProf][2]."<br />";
?>
ajax4_1.html
chercher.php
Ajax . 33
La méthode GET
• On spécifie la méthode HTTP et l'URL dans la
méthode open().
• Les informations (contenu des formulaires) sont
ajoutées à l'URL
• Avantages:
• Plus légère.
• On peut les mettre dans un signet
• Inconvénients:
• Ces informations sont visibles dans la fenêtre d'adresses du
navigateur
• Ne pas y transférer des mots de passe !
• La quantité d'informations est limitées (2000 octets)
requeteHTTP.open('GET',traitement.php?prenom=abdel&nom=Obaid, true);
requeteHTTP.send(null);
Ajaxa4_.html (/serveur)
Ajax . 34
17
17
La méthode POST
• On spécifie la méthode HTTP et l'URL dans la
méthode open().
• Les informations (contenu des formulaires) sont
envoyées séparément avec la méthode send() ).
• Avantages
• Les informations ne sont pas visibles
• On peut transmettre une grande quantité d'informations
• Inconvénients:
• Il y a une limite (ex. 8 Mo).
• Moins rapide que la méthode GET.
ajax4_2.html (serveur)
requete.open("POST","traitement.php",true);
requete.setRequestHeader("Content-type","application/x -www-form-urlencoded");
requete.send("prenom=Abdel&nom=Obaid");
Ajax . 35
POST - Exemple
ajax4_2.html
function envoyerRequete(param) {
requete = obtenirObjectRequete();
requete.onreadystatechange = traiterReponse;
requete.open("POST", "chercher2.php", true);
requete.setRequestHeader("Content-type","application/x-www-form-urlencoded");
requete.send("nomProf="+param);
}
<?php
$profs = array ( "Obaid"=>array( "PK-4740", "3206","Teleinformatique" ),
"Tremblay"=>array ("PK-4435","8213","Genie logiciel"),
…
);
$leProf=$_POST["nomProf"]; // nomProf dans le formulaire
echo "Prof: " . $leProf ."<br />";
echo "Bureau: " . $profs[$leProf ][0]."<br />";
echo "Telephone: " . $profs[$leProf][1]."<br />";
echo "Domaine: " . $profs[$leProf][2]."<br />";
?>
chercher2.php
Ajax . 36
18
18
Réponses en XML
• On identifie les éléments DOM recherchés:
lesProfs=reponse.getElementsByTagName("prof");
• On parcourt l'arbre à partir de ces éléments:
for (i=0;i<lesProfs.length;i++) {
texteHTML=texteHTML+
"<srtong>"+ lesProfs[i].childNodes[0].nodeValue+"</strong> : "
+ lesProfs[i].childNodes[1].nodeValue+"<br />"
}
• On place le résultat dans la page HTML:
ajax_xml.html
document.getElementById("contenu").innerHTML=texteHTML
Ajax . 37
Exemple- Données XML
<profs>
<prof >
<nom>Obaid</nom>
<bureau>PK- 4740</bureau>
<poste>3206</ poste>
<specialites >
<specialite> Teleinformatique</specialite>
<specialite> Reseaux sans fil</specialite>
</specialites >
</prof >
…
<prof >
<nom>Laforest</nom>
<bureau>PK- 4740</bureau>
<poste>3206</ poste>
<specialites >
<specialite>Algorithmique</specialite>
<specialite>Combinatoire</specialite>
</specialites >
</prof >
</profs>
Ajax . 38
19
19
Reponses XML
• On utilise la propriété responseXML
• La méthode getElementsByTagName() permet de
retrouver les éléments particuliers de l’arbre DOM.
• L'API DOM de JavaScript permet de parcourir cet
arbre.
…
listeElements=reponseEnXML.getElementsByTagName("prof");
for (i=0;i<listeElements.length;i++) {
var children =listeElements[i].childNodes;
for (var j = 0; j < children.length; j++)
x1 = children[j].nodeName + ":" + children[j].nodeValue;
sortieXML=sortieXML + x1+ "<br />" ;
};
ajax_xml.html
}
…
Ajax . 39
20
20

AJAX AJAX - Latece

Transcription

Documents pareils

Vikram Bhagdev

Fiche Technique Mediq

Formation Webmaster Avancé : JavaScript, XML, Ajax et jQuery à

Une formation courte au métier de développeur Web et mobile qui

Présentation AJAX

pdf PDF

Télécharger la plaquette, les dates

CV – Développeur PHP / WebDesign CSS Aurélie CABON

programmeur javascript / ajax

Historique - LabUnix