Table des matières
JavaScript
M4103C - Programmation Web – client riche
● AJAX
2ème année - S4, cours - 3/5
2014-2015 ● JSON
● DOM
Marcel Bosc
Département informatique IUT de Villetaneuse Université Paris-13
1ère partie
Exemple : Google
page non rechargée !
Ajax suggestions
suggestions
internet
client [Link]
« javas »
navigateur
serveur web
« javascript »
« javascript array»
BDD
« javascript subs...»
Exemple : commentaires Exemple : commentaires
page non rechargée ! page non rechargée !
affichage
affichage // tri
tri commentaires
commentaires
j'aime
j'aime
internet internet
client [Link] client [Link]
j'aime com. n°1234 com. triés
navigateur navigateur
serveur web serveur web
ok. BDD <div>...</div> BDD
Ajax Exemple jQuery .get()
Asynchronous JavaScript and XML
$.get("[Link]
{ id: 5678 }, appelée
appelée àà la
la réception
réception
function(reponse) de
de la
la réponse
réponse dudu serveur
serveur
{
JavaScript Asynchrone // afficher com.
Requête non bloquante à partir du JavaScript, });
au serveur, sans recharger la page.
Chronologie client / serveur Exemple : suggestion
client [Link]
navigateur serveur web
1 [Link]
3 <html>...</html> générer page web 2
4 affichage page
<div>
6 « javas » <input id="recherche" type="text" />
5 « javas » tapé chercher « javas » 7 <button>chercher</button>
8 liste suggestions </div>
9 mise à jour <ul id="suggestions">
affichage BDD <li></li>
sans recharger </ul>
div ul
id="suggestions"
input button li li li
internet
id="recherche"
Suggestion : JS Suggestion : GET
$_GET['mot']
[Link]
JS JS
0 $('#recherche').keyup(function(e) 0 $('#recherche').keyup(function(e)
1 { 1 {
2 $.get('[Link] 2 $.get('[Link]
serveur
3 {mot: $('#recherche').val()}, 3 {mot: $('#recherche').val()},
4 function(reponse) <li>abricot</li> 4 function(reponse)
5 { <li>arbre </li> 5 {
6 $('#suggestions').html(reponse); <li>amis </li> 6 $('#suggestions').html(reponse);
7 $('#suggestions').show(); 7 $('#suggestions').show();
8 }); 8 });
9 }); 9 });
Suggestion : chronologie JS Suggestion : PHP
[Link]
A B
attente attente
0 2 réponse 6
keyup ! 3 0 $mot=$_GET['mot'];
9 reçue ! 7 1 $sql="SELECT mot FROM mots WHERE mot LIKE '?%'";
8 $suggestions=database_list($sql,$mot);
2
3 $resultat=''; BDD
serveur serveur 4 foreach($suggestions as $suggestion)
JS 5 {
6 $resultat.='<li>'.htmlentities($suggestion).'</li>';
0 $('#recherche').keyup(function(e) }
A 7
1 { echo $resultat;
$.get('[Link] 8
2
3 {mot: $('#recherche').val()},
4 function(reponse)
5 { B <li>abricot</li>
6 $('#suggestions').html(reponse); <li>arbre </li>
7 $('#suggestions').show(); <li>amis </li>
8 });
9 });
Méthode GET Méthode POST
GET: peut-être répétée sans conséquences POST: répétition potentiellement gênante
(ne modifie pas l'état sur le serveur) ( change l'état du serveur )
"Lire infos sur le serveur" "Écrire des infos sur le serveur"
[Link] [Link]
Entêtes http
Exemples: Contre-exemples: Contre-exemples: Exemples:
modifier l'affichage payer en ligne modifier l'affichage payer en ligne
faire une recherche ajouter un commentaire faire une recherche ajouter un commentaire
sur un forum sur un forum
Exemple : .post() 2ème partie
JSON
JS
0 $('.jaime').click(function(e)
1 {
2 $.post('[Link]
3 {nbCom: $(this).parent().attr('id')},
4 function(reponse)
5 {
6 ...
7 });
8 });
9
HTML / Données JSON
JavaScript Object Notation
client [Link]
navigateur
serveur web JSON
texte
Format de fichier texte, utilisant la syntaxe
<li>Jean </li> JavaScript pour représenter des données
<li>Akima </li> (objets, tableaux ...)
<li>Driss </li>
client [Link]
très utilisé !
navigateur
serveur web
texte beaucoup de langages PHP
{
nom: "Saidi",
prenom: "Driss",
id: 1234,
age: 25
}
JSON : exemples PHP: json_encode()
Objet simple Objet complexe PHP
{ { $user=[
nom: "Saidi", nom: "Collège Grange du Bois" 'nom' =>'Saidi',
prenom: "Driss", ville: 'prenom'=>'Driss',
id: 1234, { 'id' =>1234,
age: 25 nom: "Savigny-le-Temple", ];
} "nom-court": "Savigny", $user['age']=25;
code : 77176 header('Content-Type: application/json');
}, echo json_encode($user);
adresse: "2 av. Victor..."
}
Tableau simple Tableau d'objets JSON
[ {
[ nom: "Saidi",
{ nom: "Wang",
"Fraise", prenom: "Driss",
id : 4321 },
"Chocolat", id: 1234,
{ nom: "Amara",
"vanille" age: 25
id : 5612 }
] }
]
JS : réponse JSON Application vs page + JS
[Link] Pages web + JS
[Link] 2 Navigateur
P P P P
$id=$_GET['id'];
$u=db('SELECT * FROM A A
user WHERE id=?',$id);
1 echo json_encode($u);
Serveur
client JSON
JS {
nom: "Saidi", Application JS
$.get('[Link] 3 prenom: "Driss",
P Navigateur
{id: 1234}, id: 1234,
function(reponse) age: 25
{ 4 } A A A A A A A A A A A A
[Link]([Link]);
[Link]([Link]); Serveur
});
});
Application JS 3ème partie
DOM
Frameworks
jQuery vs DOM Navigateurs
Chrome 48%
jQuery DOM
Simplicité Performance chargement Internet Explorer 18%
Comptabilité navigateurs Performance exécution v.6, ... v.11
Propriétés Mozilla Firefox 17%
Text Node
Cookies
safari 5%
Env. particuliers
Mobile 35%
Statistiques: 12/2014 [Link]
Compatibilité Principaux objets DOM
[Link]
window
Un titre
un paragraphe
HTMLElement
document
MDN : [Link]
Window & Document [Link]()
window document d = un élément DOM DOM
[Link] var d=[Link]('photo');
[Link]
html
[Link]()
[Link]()
... j=« liste » d'un seul élément jQuery jQuery
head body
var j=$('#photo');
title h1 p p
document <body> body
[Link] <h1>Ceci est un titre</h1>
[Link]() <p id="p1">Un paragraphe</p>
[Link]() <p>2e paragraphe
h1 p p
[Link] <img id="photo" src="[Link]"...
id="p1"
... </p>
</body> img
id="photo"
[Link]() [Link]()
DOM
DOM
var d=[Link]('p');
var d=[Link]('p');
pas encore dans arbre DOM ! [Link](d);
jQuery jQuery
var j=$('<p></p>'); var j=$('<p></p>');
$('body').append(j);
pas encore dans arbre DOM !
body body
p
h1 p p h1 p p p
id="p1" id="p1"
img img
id="photo" id="photo"
DOM & jQuery Node / HTMLElement
j=« liste » d'un seul élément jQuery
var j=$('#photo'); Document
Text
d = un élément DOM Node CharacterData HTMLHeadElement
Comment
var d=[Link]('photo');
HTMLBodyElement
Element HTMLElement
DOM jQuery jQuery DOM HTMLParagraphElement
DOM jQuery ...
$(d) $('#photo')[0]
jQuery DOM Simplifié
Text Node & HTMLElement
<body> « Propriétés » Arbre DOM
<h1>Ceci est un titre</h1> [Link] [Link]
<p>
[Link] [Link]
Un paragraphe de texte avec un
<a href="[Link]">lien</a> vers une autre [Link] [Link]
page. Les mots suivants [Link] [Link]()
<strong>sont importants</strong>
[Link] [Link]()
</p>
</body> [Link]
body [Link]()
Chercher éléments
h1 p
[Link]()
Text Text a Text strong [Link]()
Ceci est un titre Un para... avec un vers une... suivants [Link]()
Text Text [Link]()
lien sont importants
[Link] [Link]
DOM
DOM
[Link] "intro important"
var d=[Link]('photo').parentNode;
[Link]="conclusion secondaire"
jQuery
[Link]('class')
jQuery
[Link]("intro") var j=$('#photo').parent();
[Link]("xyz")
[Link]("intro") body
<p class="intro important">Un paragraphe</p> h1 p p
id="p1"
img
id="photo"
[Link] [Link]()
DOM DOM
var liste=[Link];
for(var i=0;i<[Link];i++)
var d=[Link]('photo');
{
[Link]('click',function(){ ... });
// ... liste[i] ...
}
jQuery jQuery
var liste=$('body').children(); $('#photo').click(function(){ ... });
[Link](function()
{
// ... this ...
}); body
body h1 p p
children / childNodes click
id="p1"
img
Text h1 p p
id="photo"
Ce document est distribué librement.
Sous licence GNU FDL :
[Link]
Les originaux sont disponibles au format LibreOffice
[Link]
