AJAX, jQuery

Application Hypermédia 1 Simon Guimond Dufour
Julie Gagnon
AJAX-jQuery
AJAX
AJAX est l’acronyme d’Asynchronous JavaScript and XML. Le terme AJAX est apparu pour la première fois le 18
février 2005, dans un essai de James Garret intitulé "Ajax : une nouvelle approche pour les applications Web".
AJAX n’est pas un langage en soit, c’est un terme synthétique qui désigne l’utilisation conjointe de différentes
technologies dans la création de pages web. Ainsi AJAX incorpore :
 le HTML et les feuilles de style CSS ;
 le JavaScript ;
 le Document Object Model (DOM) ;
 l’objet XMLHttpRequest ;
 le XML et le XSL.
L’objet XMLHttpRequest permet de lancer des requêtes de la page web vers le serveur pour y récupérer des
fichiers. Son fonctionnement permet d’effectuer ces requêtes de façon asynchrone, soit en arrière-plan de la
page et de façon complètement transparente pour l’utilisateur.
Avantage
 La technologie AJAX se révèle bien adaptée pour les applications mobiles car elle permet de ne charger
qu’un contenu de taille réduite au lieu de devoir effectuer une requête complète pour recharger la page.
 Le temps d’attente de l’utilisateur est réduit car il n’est plus nécessaire de recharger toute la page pour
obtenir une nouvelle information.
 La fluidité de la navigation peut être amélioré

Application Hypermédia 2 Simon Guimond Dufour
Julie Gagnon
Désavantage
 Développer une application AJAX peut augmenter sensiblement le temps de conception et donc le coût.
 AJAX comporte beaucoup de JavaScript. Les utilisateurs qui ont désactivé la prise en charge du
JavaScript par leur navigateur ne pourront pas accéder aux applications AJAX.
 Le référencement des pages en AJAX ne sera pas simple à réaliser
Transmission des données
Il est possible de passer des arguments à notre requête Web soit en mode GET ou en mode POST.
La méthode GET
var value1 = encodeURIComponent(value1),
var value2 = encodeURIComponent(value2);
xhr.open('GET', 'http://mon_site_web.com/ajax.php?param1=' + value1 +
'&param2=' + value2);
xhr.send()
La méthode POST
xhr.open('POST', 'http://mon_site_web.com/ajax.php');
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send('param1=' + value1 + '&param2=' + value2);
Les données envoyées doivent être au format XML, JSON ou texte. PHP supporte bien l’envoi de ces types de
données respectivement avec les fonctions de SimpleXML et json_encode
jQuery, décrit ci-dessous, possède une fonction AJAX qui simplifie le code nécessaire.
Démo : http://webc.cegepsherbrooke.qc.ca/~tijg09/ajax.html
jQuery
Le premier objectif de JQuery est de simplifier le codage JavaScript pour des opérations qu’un développeur Web
fait à tous les jours. De plus, JQuery à pour objectif d’être intercompatible entre les divers navigateurs. Sa
principale tâche est de standardiser un code entre les navigateurs. De plus, plusieurs fonctions nous permettent
de sélectionner un ou plusieurs éléments HTML et de leur appliquer une modification tant HTML que CSS. Ces
actions peuvent être déclenché par un évènement.
Évidemment, lorsqu’on exécute une fonction JQuery, des instructions JavaScript s’exécutent derrière. Donc,
JQuery ajoute une couche de traitement ce qui peut ralentir l’exécution. Par contre, du coté du développeur, il
peut voir son travail simplifié et il s’assure d’une uniformité sur les différents navigateurs. Bien que les
navigateurs s’approchent d’une standardisation, certains bogues subsistent. C’est un choix à faire. Ce qui doit
orienter ce choix est de toujours savoir ce que fait JQuery à votre place. Pour certaines fonctions, JQuery est
moins efficace que le JavaScript. De plus, il y a de bonnes pratiques sur l’utilisation de JQuery qui doivent être
observées.

Application Hypermédia 3 Simon Guimond Dufour
Julie Gagnon
De nos jours, de plus en plus de bibliothèques JavaScript voient le jour, mais selon des statistiques JQuery
demeurent de loin la plus populaire. (https://w3techs.com/technologies/overview/javascript_library/all )
Installation
Pour utiliser JQuery, il faut ajouter la bibliothèque à notre page Web. Nous utiliserons la balise <script> qui
appelle un fichier externe et nous nous servirons de notre ami Google qui héberge les principales bibliothèques
sur ses serveurs. Il est possible de consulter la liste des bibliothèques disponibles et les inclusions de scripts à
faire pour les ajouter à nos pages Web à l’adresse suivante : https://developers.google.com/speed/libraries/
Ce genre de dépôt se nomme CDN et est très pratique, car cela libère la bande passante de notre serveur
d’hébergement.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
Premier exemple
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Titre</title>
</head>
<body>
<p>
Un paragraphe
</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>$('body p').html('JQuery Fonctionne!');</script>
</body>
</html>
Sans JQuery, cette page vous affichera le texte « Un paragraphe » alors que si votre JQuery est bien installé, il
affichera « JQuery fonctionne! »
Utilisation
Décortiquons l’exemple ci-dessus. L’utilisation de jQuery commence par la fonction $() ou jQuery(). Ces 2
fonctions font le même travail, mais jQuery est plus sécuritaire si nous utilisons plusieurs bibliothèques.
La syntaxe standard d’une commande jQuery va comme suit :
jQuery('sélecteur CSS').fonction_jQuery('paramètres');
sélecteur CSS : Tous les sélecteurs CSS que nous avons vus (ex : p, html, body, a, ul, li, etc.)
fonction_jQuery : Action qui sera faite sur les éléments sélectionnés. Nous les détaillerons au prochain
point.
paramètres : paramètres qui sont passées à la fonction jQuery.
Comment s’assurer que le code jQuery s’exécute après le chargement complet de la page ?
Inclusion de la librairie
JQuery
Utilisation de la librairie
JQuery

Application Hypermédia 4 Simon Guimond Dufour
Julie Gagnon
Le jQuery(document).ready() va attendre que la page (HTML + CSS + JS) soit chargée pour exécuter le
code qui est dans la fonction. Ce qui nous permet d’être certains que lorsque les instructions jQuery
manipuleront les éléments de la page Web ils auront eu le temps de se charger.
<script>
jQuery(document).ready(function($){
// Là on peut utiliser $() en ayant la certitude que c'est jQuery, sans conflit possible
});
</script>
Ou encore …
<script>
jQuery(function($){
// $() est ici disponible comme alias de jQuery()
});
</script>
Principales fonctions jQuery
Action
Avant d’appliquer une animation ou d’ajouter un contenu sur nos pages Web, il faut souvent attendre une
action de l’utilisateur, comme un clic de souris ou le fait d’appuyer sur une touche du clavier. Par exemple,
lorsque l’on clique sur un <div> une alerte se produit.
<script>
$("#target").click(function() {
alert( "Vous avez cliqué sur le div" );
});
</script>
<div id="target">
Cliquez ici
</div>
Plusieurs autres événements existent, mais voici les principaux, pour les autres rendez-vous sur le site officiel de
JQuery : http://api.jquery.com/category/events/
Fonction
Utilisation
click()
Permet de capter le clic de souris sur un élément
dbclick()
Permet de capter le double clic de souris sur un élément
focus()
Permet de capter le focus sur élément. Le focus se produit sur un élément ayant le
curseur de la souris dessus. Comme dans un champ texte de formulaire

Application Hypermédia 5 Simon Guimond Dufour
Julie Gagnon
Apparition, disparition
Il peut être intéressant de vouloir cacher un élément si l’on clique sur un bouton ou si un élément est déjà
caché, de l’afficher. Plusieurs options s’offrent à vous et vous proposent de petites animations.
http://api.jquery.com/category/effects/
Fonction
Utilisation
show()
Permettent d’afficher un élément HTML
hide()
Permettent de cacher un élément HTML
toggle()
Permettent d’afficher ou de masquer un élément HTML dépendamment de son état
actuel
fadein(),
fadeout()
Permettent de faire progressivement apparaître (ou disparaître) un élément en jouant
sur sa transparence
slideup(),
slidedown()
permettent de faire apparaître (respectivement disparaître) un élément à la manière
d'un store se déroulant ou s'enroulant
Toutes ces fonctions prennent un paramètre qui est la vitesse d’exécution en milliseconde
Ajouter, modifier ou supprimer des éléments dans une page
Fonction
Utilisation
html
Sans argument elle renvoie le code HTML d’un élément. Si un argument est utilisé,
cet argument remplacera le contenu de l’élément HTML
text
Même principe que la fonction html, mais elle ne prend que le texte pas le codage
HTML
append, prepend
Ajoutent le paramètre à l'élément sélectionné, respectivement à sa fin et à son
début
appendTo,
prependTo
Le paramètre est un sélecteur. Ces fonctions ajoutent l'élément sélectionné à la fin
(respectivement au début) de l'élément spécifié par le sélecteur.
$("<span>(Fin de paragraphe)</span>").appendTo($("p"));
after, before
Ajoute le paramètre qui sera du code HTML respectivement après et avant
l’élément sélectionné
$(h1).after(<p>Test</p>);
insertAfter,
insertBefore
Le paramètre est un sélecteur. Ces fonctions ajoutent l’élément sélectionné après
(respectivement avant) l'élément spécifié par le sélecteur
$("<p>(Fin de section)</p>").insertBefore($("h1"));
wrap
Permet d’englober le sélecteur d’un élément. Le paramètre sera du code HTML
$("p").wrap($("<div></div>"));
replaceAll
Le paramètre est un sélecteur. Le but de la fonction est de remplacer l’élément
indiqué par le paramètre par la sélection.
$("<p>Paragraphe</p>").replaceAll("h3");
replaceWith
Le paramètre est du contenu HTML. Même principe que replaceAll, mais on
inverse les rôles du paramètre et du sélecteur.
$("em").replaceWith("<strong>"+$(this).text()+"</strong>");
empty
Vide l’élément sélectionné, mais l’élément sélectionné existe encore seul ses
enfants sont détruits
$("#p1").empty()
remove
Même principe que empty, mais élimine aussi la balise sélectionné
$("#p1").remove()