Scribd
Importer
243 vues37 pages

Introduction à Ajax et ses principes

Ce document décrit la technologie Ajax et son fonctionnement. Ajax permet d'améliorer la réactivité des applications web en évitant le rechargement complet des pages et en permettant l'exécution asynchrone de code JavaScript. Le document explique en détail le principe d'Ajax, ses limites, son fonctionnement basé sur l'objet XMLHttpRequest ainsi qu'un exemple d'application.

Transféré par

Stachis Madiamba
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
243 vues37 pages

Introduction à Ajax et ses principes

Ce document décrit la technologie Ajax et son fonctionnement. Ajax permet d'améliorer la réactivité des applications web en évitant le rechargement complet des pages et en permettant l'exécution asynchrone de code JavaScript. Le document explique en détail le principe d'Ajax, ses limites, son fonctionnement basé sur l'objet XMLHttpRequest ainsi qu'un exemple d'application.

Transféré par

Stachis Madiamba
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

Master Telcom

Cours : Informatique2 Enseignant : Milse NZINGOU

Partie #2 Technologies avancés

La première partie de notre cours nous a permis d’apprendre les concepts et outils de base nécessaires
pour réaliser des pages Web dynamiques avec accès aux bases de données. Ces fondamentaux sont les
langages de balises, le HTML, le XML, les langages de scripts JavaScript exécuté côté client et le PHP du
côté serveur. Nous avons vu que PHP permettait l’accès aux bases de données.

Les sites et applications Web construits avec ces outils, bien que dynamiques présentent un défaut
majeur. A chaque requête, toute la page est entièrement rechargée. Cette situation soulève quelques
problèmes d’efficacité que sont :

• Lenteur de l’application.
• Excès de consommation de bande-passante.
• Blocage du côté client lors de l’attente des réponses de la part du serveur. Manque de réactivité de
l’application.

Pour résorber ces problèmes de performances des applications Web, la technologie Ajax a été mise sur
pied. Ajax (Asynchronous JavaScript And XML) est une manière de combiner JavaScript et XML de façon
à éviter quand cela est possible le rechargement complet des pages d’une part, et d’autre part, de
permettre la poursuite de l’exécution de code JavaScript en attendant le retour des réponses du
serveur. L’utilisation d’Ajax a permis de réaliser des applications Web interactives avec un niveau de
réactivité intéressante. De telles applications sont connues sous le nom de clients riches.

Toujours dans l’objectif d’améliorer la réalisation des applications Web, la bibliothèque JQuery a été créée
avec un but triple :

1. permettre l’interaction entre Ajax et HTML.


2. simplifier l’écriture des scripts.
3. Régler les problèmes de compatibilité entre les navigateurs.

Cette partie du cours concerne l’étude des deux technologies Ajax et JQuery. Au terme des deux
chapitres traitant de ces technologies, l’étudiant aura acquis toutes les connaissances nécessaires
pour réaliser des applications Web répondant aux besoins de l’heure et conformes aux normes
courantes.

1
Chapitre 6 Ajax

Dans l’introduction à cette partie du cours, nous avons déjà indiqué qu’Ajax (Asynchronous JavaScript
And XML) a pour but de permettre l’exécution asynchrone de code JavaScript, le chargement partiel
de pages, et ainsi améliorer la réactivité des applications Web. Dans ce chapitre nous allons présenter
le principe de cette approche, ses limites, son fonctionnement et enfin une application mettant en
œuvre Ajax.

6.1 Principe d’Ajax


Le principe d’Ajax consiste à utiliser le DOM pour sélectionner la partie de la page à modifier, ensuite
se servir de JavaScript pour faire des requêtes, accéder et modifier le bon nœud DOM. Le serveur à
l’aide de code (PHP, CGI, ou Servlet, …) traite la requête. Pour rendre le traitement effectué par le
serveur asynchrone, on utilise un objet XMLHttpRequest muni d’un mécanisme de callbacks.

Pour illustrer l’approche Ajax, considérons la situation suivante. Nous avons une page Web ayant un
formulaire contenant une zone de texte et un bouton (« Charger »). On souhaite que lorsque
l’internaute clique sur le bouton, le contenu d’un fichier texte ([Link]) disponible sur le serveur soit
chargé dans la zone de texte.

Le code XHTML de notre page est le suivant :

<html>
<head>
<script type="text/javascript">
function wait(delay) { var
date = new Date(); var
curDate = null;

do {
curDate = new Date();
}while(curDate-date<delay);
}

function valider() {
var req = null;
[Link]="Démarrage...";
req = new XMLHttpRequest(); [Link] =
function() { if([Link] == 4){
if([Link] == 200){

[Link]="Reçu : " + [Link];


}else {
[Link]="Erreur : code
retourné " + [Link] + " " + req.

2
statusText;
}
}
};
[Link]("GET", "[Link]", true);
wait(1000); [Link](null);

}
</script>
</head>
<body>
<form id="formulaire" method="" action="">
<p><input type="button" value="Charger"
onclick="javascript:valider()"/></p>
<p><textarea name="texte" rows="10" cols="80">...</textarea></p>
</form>
</body>
</html>
La principale chose à expliquer dans cette page est code JavaScript de la fonction valider(). Cette
fonction commence par initialiser la zone de texte avec « Démarrage … ». Puis on crée un objet
XMLHttpRequest avec lequel on initialise la variable req.

req = new XMLHttpRequest();

Ensuite le code ci-dessous permet définir une fonction anonyme qui sera appelée lorsque l’état de la requête
aura changé.

[Link] = function() {
if([Link] == 4){ if([Link]
== 200){

[Link]="Reçu : " + [Link];


}else {
[Link]="Erreur : code retourné " +
[Link] + " " + [Link];
}
}
};
Cette fonction stipule que si l’on reçoit convenable une réponse de la part du serveur, la zone de texte
sera remplie avec le texte ‘’Reçu : ‘’+reponseDuServeur. Dans le cas contraire on remplit la zone de
texte avec le message ‘’Erreur : code retourné ‘’+codeErreur.

3
Après cette fonction, les instructions suivantes permettent d’émettre une requête demandant au
serveur de nous retourner le contenu du fichier [Link], et une seconde après on envoie la requête au
serveur.
[Link]("GET", "[Link]", true);
wait(1000); [Link](null);

Les détails sur les attributs ainsi que les méthodes de l’objet XMLHttpRequest seront expliqués dans la section
suivante.

L’image ci-dessous donne l’aperçu de notre page après un clic sur le bouton « charger » et que la requête a
réussi.

6.2 Limites d’Ajax


L’utilisation d’Ajax comporte quelques inconvénients qui peuvent être résumés comme suit :

• Le client Web doit activer JavaScript. Cette contrainte conduit souvent les concepteurs Web à proposer
deux interfaces ; ce qui alourdi un peu le développement des pages.
• Le problème de comptabilité entre les navigateurs.
• La perte de repères par rapport aux fonctionnalités classiques d’un navigateur : Notamment les boutons
Précédent et Recharger, affichage de la source, sauvegarde d’une page, etc.

Certains des problèmes évoqués ci-dessus sont souvent résolus en associant JQuery à Ajax. JQuery sera
présenté dans le prochain chapitre. Pour l’instant, nous allons nous plonger dans l’étude du
fonctionnement d’Ajax.

6.3 Fonctionnement d’Ajax


Le fonctionnement d’Ajax repose essentiellement sur la classe XMLHttpRequest. C’est à travers une
instance de cette classe que l’on peut construire des requêtes, les envoyer au serveur Web, et attendre

4
les réponses. Nous allons par conséquent commencer par décrire les attributs et méthodes de cette
classe.
6.3.1 La classe XMLHttpRequest
Les attributs de la classe XMLHttpRequest sont résumés dans le tableau ci-dessous.

Attribut Types de Valeurs possibles Signification


Nombre entier : 0
readyState Code d’état
– 4 => Prêt
200 => OK
301 => redirection définitive
302 => redirection temporaire
status Code http renvoyé par le serveur
400 => Requête
syntaxiquement incorrecte 404
=> page non trouvée
Réponse du verseur envoyée sous
responseText Chaine de caractères
forme de chaine de caractères
Réponse du serveur envoyée sous
responseXml Flux XML forme de document XML. Pour extraire
les informations, il faut utiliser DOM
Propriété valant vrai lorsque que se
produit un événement de changement
onreadystatechange Booléen d’état. On assigne à cet attribut une
fonction qui sera appelée lors du
changement d’état.

La classe XMLHttpRequest dispose de deux méthodes que nous décrivons ci-dessous.

1. open(mode, url, boolean) : permet de formuler une requête.


a. mode : indique le type de requête qui est soit GET, soit POST
b. url : nom du fichier incluant le chemin du fichier sur le serveur
c. boolean : true pour une requête asynchrone et false pour une requête synchrone.
d. Si le fichier requis nécessite une authentification, on peut fournir un login et mot de passe.
2. send(« chaine » ou null) :la données à envoyer, null dans le cas d’une requête de type GET.

6.3.2 Le processus d’émission, de traitement et de réception des requêtes Une


opération Ajax implique les quatre acteurs suivants :

1. La fenêtre du navigateur Web qui initie le processus suite à une action de l’internaute sur l’interface de
la page.
2. Un script JavaScript auquel la fenêtre du navigateur s’adresse.
3. Une instance de XMLHttpRequest que le script crée et aura la charge de construire la requête et l’envoyer
au serveur.
4. Le serveur Web qui traite la requête et envoie la réponse à l’objet XMLHttpRequest.

5
L’interaction entre ces quatre acteurs peut être décrite à l’aide du diagramme de séquence présentée dans
le schéma ci-dessous.

Lorsque le script reçoit le message de la fenêtre du navigateur, il crée un objet XMLHttpRequest. Une
fois cette instance crée, il appelle successivement les méthodes open et send de l’objet pour formuler
et envoyer une requête au serveur Web. Le serveur réalise son traitement et répond à l’objet
XMLHttpRequest. Le diagramme de séquence présentée ici modélise une requête dans le traitement
s’est effectué avec succès. A la réception de la réponse favorable du serveur, l’objet XMLHttpRequest
appelle la fonction callback définit dans le script. Au terme de l’exécution de la fonction callback, le
script appelle la méthode getResponseXML() ou getResponseText() de l’objet XMLHttpRequest. Ce
dernier répond à cet appel en envoyant le document XML ou la chaine de caractères qu’il a lui-même
reçu du serveur. A la réception du document XML ou de la chaine de caractères, le script JavaScript
demande à la fenêtre du navigateur Web de modifier la page HTML et ensuite mettre à jour son
historique et favoris.

6.3.3 La construction d’une requête


La construction d’une requête se fait en trois étapes :

1. Création d’une instance de XMLHttpRequest. xhr = new XMLHttpRequest();

2. Attente de la réponse.

[Link] = function(){

// instructions de traitement de la réponse

if ([Link] == 4) { // Reçu, OK

}else { // Attendre...

6
};

3. Envoi de la requête

[Link]("GET"/"POST", "requête", true); [Link](null/data);


6.3.4 Le problème de compatibilité des navigateurs
Nous avons déjà signalé dans la section 6.2 qu’un des inconvénients de l’approche Ajax était la
compatibilité des navigateurs. En réalité, la création de l’instance XMLHttpRequest n’est effectuée de
la même par tous les navigateurs. La syntaxe que nous avons utilisée jusqu’ici est celle utilisée par les
navigateurs comme Firefox, Safari et autres. Internet Explorer réalise cette opération différemment.
Et même les nouvelles versions d’Internet Explorer ont une syntaxe différente de ses anciennes
versions. La solution à ce problème consiste à fournir deux ou trois versions pour prendre en compte
les différences d’implémentation des navigateurs. Nous proposons ci-dessous deux solutions.

Première solution
Cette solution consiste à utiliser la structure if … else … pour tester le type de navigateur afin de fournir
le code approprié.

if ([Link]){ // Objet de la fenêtre courant xhr


= new XMLHttpRequest(); // Firefox, Safari, ...

} else

if ([Link]) { // Version ActiveX

xhr = new ActiveXObject(’[Link]’); // Internet Explorer


//ou xhr = new ActiveXObject("[Link]"); // anciennes versions
}
Deuxième solution
La seconde solution recours au mécanisme des exceptions, comme le présente le code.

try{
xhr = new ActiveXObject(’[Link]’);//Nouvelles versions IE
} catch (e) {
try{

xhr = new ActiveXObject(’[Link]’); //anciennes versions IE


} catch (e2){
xhr = new XMLHttpRequest();//Firefox, Safari, …
}
}
6.3.5 La lecture des fichiers
Ajax permet de traiter à la fois des fichiers texte et les fichiers XML. Pour un fichier texte, l’attribut
responseText de l’objet XMLHttpRequest contient la chaine de caractères correspondant au contenu
du fichier.

[Link] ;

7
Dans le cas d’un fichier XML, il faut stocker la réponse dans une variable, et ensuite se servir de DOM pour
récupérer les données. Ci-dessous nous présentons un exemple.

var doc = [Link]; element =


[Link](’root’).item(i);//extraction d’un elt.

8
[Link]; // Lecture de la données du 1er fils de l’élément

6.3.6 La modification d’un élément d’une page


On peut utiliser l’attribut id d’un élément pour accéder à cet élément à l’aide de la fonction DOM
getElementById(…). Ensuite l’attribut innerHTML permet d’avoir accès au texte de l’élément. Exemple
:

<div id="texte">
texte à remplacer...

</div>
….

[Link]("texte").innerHTML = "nouveau texte";

6.4 Application : Recherche d’animaux dans les forêts classées du monde


On se propose de concevoir une page Web permettant de recherche la présence d’une espèce animale
dans les forêts classées à travers le monde. La page Web à concevoir devra avoir l’aperçu suivant :

Lorsque l’internaute saisie une espèce, sélectionne un pays et clique sur le bouton « Go », la liste du
milieu doit être renseignée avec la liste des forêts classées (sites) qui hébergent l’espèce et qui sont
situées dans le pays sélectionné. Si aucun résultat n’est trouvé, la liste doit être vide. Lorsque l’on

9
clique sur un site parmi les sites trouvés, la zone de texte du bas devra donner les informations
suivantes sur le site : Superficie du site, la population évaluée de l’espèce sur le site, le type de climat
du site, indication si le site est gardé ou pas.

La modification de la liste ainsi que de la zone de texte devront être effectuées avec Ajax. Les
informations sur les sites et les espèces qu’ils hébergent sont contenues dans une base de données
MySQL sur le serveur Web. La liste des pays est aussi fournie par la même base de données. Le langage
PHP devra être utilisé du côté serveur pour interroger la base de données et produire les fichiers XML
ou textes à renvoyer au client.

6.4.1 La base de données MySQL de notre application


Nous nommons notre base données wfaune. Elle contient trois tables que sont :

1. La table site qui contient les sites répertoriés à travers le monde.


2. La table pays qui contient la liste des pays ayant des forêts classées.
3. La table presence qui contient les présences d’espèces dans les sites. Etant donné que les
espèces n’ont pas d’autres informations que leur nom, nous avons opté de ne pas créer une
table pour les espèces.

Les ordres SQL permettant de créer le schéma de base sont présentés ci-dessous.

-- phpMyAdmin SQL Dump


-- version [Link]
-- [Link]
--
-- Serveur: localhost
-- Généré le : Sam 30 Novembre 2013 à 02:04
-- Version du serveur: 5.1.36
-- Version de PHP: 5.3.0

SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";

--
-- Base de données: `wfaune`
--

-- --------------------------------------------------------

--

1
0
-- Structure de la table `pays`
--

DROP TABLE IF EXISTS `pays`;


CREATE TABLE IF NOT EXISTS `pays` (
`codePays` varchar(2) NOT NULL COMMENT 'code Iso du Pays',
`nomPays` varchar(255) NOT NULL COMMENT 'Nom du Pays',
PRIMARY KEY (`codePays`),
KEY `nomPays` (`nomPays`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

-- --------------------------------------------------------

--
-- Structure de la table `presence`
--

DROP TABLE IF EXISTS `presence`;


CREATE TABLE IF NOT EXISTS `presence` (
`site` bigint(20) NOT NULL COMMENT 'Id du site',
`espece` varchar(80) NOT NULL COMMENT 'Nom de l''espece',
`population` bigint(20) NOT NULL COMMENT 'Effectif de l''espece',
PRIMARY KEY (`site`,`espece`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

-- --------------------------------------------------------

--
-- Structure de la table `site`
--

DROP TABLE IF EXISTS `site`;


CREATE TABLE IF NOT EXISTS `site` (
`idSite` bigint(20) NOT NULL AUTO_INCREMENT COMMENT 'Id du site',
`nomSite` varchar(255) NOT NULL,
`superficie` double NOT NULL,

1
1
`climat` varchar(255) NOT NULL,
`garde` tinyint(1) NOT NULL,

`pays` varchar(2) DEFAULT NULL,


PRIMARY KEY (`idSite`),
KEY `nomSite` (`nomSite`,`garde`),
KEY `pays` (`pays`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

--
-- Contraintes pour les tables exportées
--

1
2
--
-- Contraintes pour la table `presence`
--
ALTER TABLE `presence`
ADD CONSTRAINT `presence_ibfk_1` FOREIGN KEY (`site`) REFERENCES `site`
(`idSite`) ON DELETE CASCADE ON UPDATE CASCADE;

--
-- Contraintes pour la table `site`
--
ALTER TABLE `site`
ADD CONSTRAINT `site_ibfk_1` FOREIGN KEY (`pays`) REFERENCES `pays`
(`codePays`) ON DELETE SET NULL ON UPDATE SET NULL;

6.4.2 Le chargement de liste des pays


Nous utilisons Ajax pour charger la liste des pays enregistrés dans la base de données. Un script nommé
« [Link] » stocké dans le sous répertoire « scripts » se connecte à la base de données et construit
la liste. Dans la page html, nous avons crée un élément <span id=’’lstpays’’> </span> qui devra recevoir
cette liste. Au retour de la requête Ajax, nous utilisons l’attribut innerHTML de cet élément pour insérer
la liste.

<span id="lstPays">
<!-- emplacement de la liste des pays -->
</span>

Le code du script « [Link] » est présenté ci-dessous

<?php
$connexion = mysql_connect("localhost", "root", "");
if ($connexion) $ok = mysql_select_db("wfaune",
$connexion); else

echo "Echec de connexion à la base de données"; if($ok)

$resultat = mysql_query("select codePays, nomPays from pays order by


codePays", $connexion);
echo ('<select name="pays" size="1">');
$count = 1;

1
3
while ($row = mysql_fetch_assoc($resultat)){
if ($count == 1) {

echo ('<option selected="selected"


value="'.$row["codePays"].'">'.$row["nomPays"].'</option>');
} else {
echo ('<option
value="'.$row["codePays"].'">'.$row["nomPays"].'</option>');
}
$count++;
}
echo ('</select>');
mysql_close($connexion);

?>
Nous utilisons la fonction JavaScript « loadPays() » que nous associons à l’événement onload de la
balise body pour réaliser le chargement. Cette fonction se présente comme suit :

function loadPays() { var req = null;


req = new XMLHttpRequest();
[Link] = function() {
if([Link] == 4){
if([Link] == 200){

[Link]("lstPays").innerHTML=[Link];
}else {
[Link]("lstPays").innerHTML="";
}
}
};
[Link]("GET", "scripts/[Link]", true);
wait(50); [Link](null);

}
6.4.3 Le chargement de liste des sites
Lorsque l’internaute clique sur le bouton « Go », l’application doit rechercher tous les sites du pays
sélectionné et qui abrite l’espèce animal saisie dans le champ texte. Utilisant le même mécanisme que
précédemment, nous associons à l’attribut onclick du boutton « Go », l’appel d’une fonction JavaScript
« loadSites() » qui traitera la transaction Ajax. Un script PHP « [Link] » se charge de traiter la
requête Ajax. Les codes des deux scripts sont présentés ci-après.

1
4
Code de la fonction JavaScript « loadSites() »
function loadSites() { var req =
null; req = new XMLHttpRequest();
[Link] = function() {
if([Link] == 4){
if([Link] == 200){

[Link]("lstSites").innerHTML=[Link];
}else {
[Link]("lstSites").innerHTML="Echec de l'opération
Ajax";
}
}
};
[Link]("POST", "scripts/[Link]", true);
[Link]("Content-Type", "application/x-www-
formurlencoded"); var val1 =
[Link]; var val2 =
[Link]; var data = "pays=" + val1
+ "&espece=" + val2+"\n"; [Link](data);
}

Code du script « [Link] »


<?php
$posted = &$_POST;
$esp = trim($posted["espece"]);
$pa = trim($posted["pays"]);
$connexion = mysql_connect("localhost", "root", ""); if
($connexion)

$ok = mysql_select_db("wfaune", $connexion); else


echo "Echec de connexion à la base de données";
if($ok)

$resultat = mysql_query("select idSite, nomSite from site s


where pays ='".$pa."' and idSite in ( select site from
presence where espece = '".$esp."') order by nomSite",
$connexion);

if (!$resultat) { // Aucun résultat


trouvé echo 'Aucun site';

} else { // des sites ont été trouvés echo ('<select name="sites"


size="8" onclick="loadInfoSite();">');

$count = 1;

1
5
while ($row = mysql_fetch_assoc($resultat)){
if ($count == 1) {

echo ('<option selected="selected"


value="'.$row["idSite"].'">'.$row["nomSite"].'</option>');
} else {
echo ('<option
value="'.$row["idSite"].'">'.$row["nomSite"].'</option>');
}

1
6
$count++;
}
echo ('</select>');
} mysql_close($connexion);

?>

6.4.4 L’affichage des informations du site sélectionné


Pour finir notre application, il nous reste à renseigner la zone de texte avec les informations sur le site
qui a été sélectionné dans la liste. Nous adoptons toujours la même démarche que dans les deux cas
précédents, à la seule différence que cette fois-ci nous allons plutôt générer un flux XML pour être
complet dans l’application de l’approche Ajax.

Nous concevons un script PHP « [Link] » et écrivons une fonction JavaScript


« loadInfoSite() ». Lorsque l’internaute clique sur un site dans la liste, la fonction JavaScript sera
appelée pour construire et envoyer une requête Ajax au script PHP. Ce dernier récupère les
informations du site dans la base de données, et génère un flux XML qui sera envoyé au client. La
fonction ainsi que le script PHP sont listés dans les tableaux ci-dessous.

Code de la fonction JavaScript «loadInfoSite() »


function loadInfoSite() { var req = null; req = new
XMLHttpRequest(); [Link] = function() {
if([Link] == 4){ if([Link] == 200){
var doc = [Link];
element = [Link]('id').item(0);
var id = [Link]; element =
[Link]('nom').item(0); var nom
= [Link];

element =
[Link]('superficie').item(0);
var superfice = [Link];
element =
[Link]('climat').item(0);
var climat = [Link];
element =
[Link]('garde').item(0);
var garde = [Link];
element =
[Link]('pays').item(0);
var pays = [Link];
element =
[Link]('population').item(0);
var population = [Link];
var info = "ID site: "+id+"\n";

1
7
info = info+ "Nom du site: "+nom+"\n";
info = info+ "Superficie: "+superfice+"\n";
info = info+ "Climat: "+climat+"\n"; info =
info+ "Garde: "+garde+"\n"; info = info+ "Pays:
"+pays+"\n"; info = info+ "Population:
"+population+"\n";
[Link]("info").innerHTML=info;

}else {
[Link]("info").innerHTML="Echec Ajax";
}
}
};
[Link]("POST", "scripts/[Link]", true);
[Link]("Content-Type", "application/x-www-
formurlencoded"); var val1 =
[Link]; var val2 =
[Link]; var val3 =
[Link]; var data =
"pays="+val1+"&espece="+val2+"&site="+val3+"\n";
[Link](data);

Le script PHP traitant la requête Ajax «[Link]»


<?php header('Content-Type:
application/xml');

$posted = &$_POST;
$connexion = mysql_connect("localhost", "root", ""); if
($connexion)

$ok = mysql_select_db("wfaune", $connexion); else


echo "Echec de connexion à la base de données";
if($ok)

$resultat = mysql_query("select idSite, nomSite, superficie,


climat, garde, nomPays, population from site s, pays p, presence pr
where [Link] =".$posted["site"]." and [Link]='".$posted["pays"]."'
and [Link] = [Link] and [Link] = '".$posted["espece"]."' and
[Link] = [Link]", $connexion);
$xml ='<?xml version="1.0" encoding="iso-8859-1"?>'; if
( !$resultat) { // Aucun résultat trouvé

$xml .= '<site> </site>';


} else { // des sites ont été trouvés
$xml .= '<site>';

1
8
$count = 1;
$row = mysql_fetch_assoc($resultat);
$xml .= '<id>'.$row["idSite"].'</id>';
$xml .= '<nom>'.$row["nomSite"].'</nom>';
$xml .= '<superficie>'.$row["superficie"].'</superficie>';
$xml .= '<climat>'.$row["climat"].'</climat>';
$xml .= '<garde>'.$row["garde"].'</garde>';
$xml .= '<pays>'.$row["nomPays"].'</pays>';
$xml .= '<population>'.$row["population"].'</population>';
$xml .= '</site>';
}
mysql_close($connexion);
echo $xml;

?>

L’instruction en première ligne de ce script :

header('Content-Type: application/xml');

permet de dire à PHP que le flux à écrire devra être traité comme un flux XML, car par défaut en PHP
il est considéré comme du texte. Ainsi la dernière instruction du script

echo $xml;

enverra au script Ajax, un flux XML et non une chaine de caractère.

6.4.5 Le résultat final


L’image ci-dessous est une capture d’écran de l’aperçu de notre application. Tous les fichiers sources
de l’application peuvent être téléchargés sur la plate-forme de la FAD.

1
9
Conclusion
Dans ce chapitre, nous avons présenté le principe d’Ajax qui consiste à combiner JavaScript et XML afin
d’émettre des requêtes asynchrones au serveur Web et d’utiliser les réponses du serveur pour modifier
des parties de pages Web. Ce mécanisme à l’avantage d’éviter le rechargement complet des pages
entières, ce qui d’une part évite la génération de trafic important de données entre le client et le
serveur Web, et d’autre part permet d’obtenir des pages Web plus fluides et donc plus réactives aux
commandes de l’internaute. La classe XMLHttpRequest qui au cœur de l’approche a été présentée. Ses
attributs et méthodes les plus importantes ont été décrits.

Les limites d’Ajax ont été aussi énumérées, à savoir le problème de la compatibilité des navigateurs, la
modification des fonctions habituelles des boutons des navigateurs, la contrainte d’activation de
JavaScript chez le client. Deux solutions ont été proposées pour le problème de la compatibilité des
navigateurs. La première solution consiste à tester le type de navigateur et en fonction du résultat
écrire le code approprié. La seconde solution quant à elle repose sur l’utilisation des exceptions.
Certains des autres problèmes restant seront résorbés à avec l’utilisation JQuery qui sera présenté
dans le prochain chapitre.

Nous nous sommes ensuite attaquer au fonctionnement d’Ajax. De l’émission d’une requête jusqu’à
l’obtention du résultat, nous avons détaillé les différentes phases de ce processus. Un diagramme de
séquence modélisant un scénario d’émission, envoi, traitement et réception de la réponse a été
présenté et expliqué. Les trois étapes de la construction d’une requête : création de l’instance de
XMLHttpRequest, l’attente de la réponse, et l’envoi de la requête ont été présentées avec les
instructions JavaScript correspondantes. Le traitement côté client des flux (texte ou XML) renvoyés par
le serveur afin d’extraire les informations a été détaillée. Nous avons vu que pour ce qui concerne les

2
0
fichiers XML, il fallait se servir du DOM pour extraire les données nécessaires à la mise à jour de la
page.

Enfin le chapitre s’est terminé par l’implémentation d’une page Web mettant en œuvre Ajax. Cette
application bien que très simpliste constitue un modèle permettant au lecteur de voir comment les
différentes pièces du puzzle peuvent être montées pour réaliser une application concrète.

Chapitre 7 jQuery

jQuery est un framework développé en JavaScript qui permet notamment de manipuler aisément le
DOM et AJAX, de créer des animations. La vocation première de ce Framework est de gagner du temps
dans le développement des applications: "write less, do more"(source :
[Link] ). L’ensemble de la libraire implémentant ce framework est
réalisé dans un fichier JavaScript nommé « [Link] » et peut être téléchargé à l’adresse :
[Link].

Le contenu du cours présenté dans ce chapitre est essentiellement tiré de OPENCLASSROOMS


([Link] ).

7.1 Bases de jQuery


Il existe deux façons d’intégrer jQuery dans vos développements Web. Cela dépend de
l’implémentation choisie.

• JQuery est téléchargeable sur le site officiel [Link]. Le framework est livré sous-forme
d’un fichier JavaScript nommé [Link]. En utilisant cette version, il faut insérer dans la page
concernée la ligne :

<script type="text/javascript" src="[Link]"> </script>

• Google apis fournissent également une implémentation de JQuery que l’on peut exploiter dans
une page Web en insérant la ligne :

<script
src="//[Link]/ajax/libs/jquery/1.10.2/[Link]">
</script>

Avec cette deuxième approche, vous ne télécharger rien sur votre serveur, vous utiliser le cache google
pour accéder à la librairie.

7.1.1 La fonction jQuery() ou $()


L’utlisation de JQuery repose sur une fonction jQuery() ou encore nommée $(). C’est cette fonction qui
fait toute la force de jQuery. Cette fonction agit différemment selon les paramètres que l’on lui passe.
Ces paramètres peuvent être : une fonction, un élément ou un tableau d’éléments DOM, une chaîne

2
1
de caractères, des sélecteurs CSS, XPath, des sélecteurs jQuery. Nous allons présenter le
comportement de la fonction $() pour chacun de ces types de paramètres.

Une fonction
Si la $() est appelée avec une fonction en paramètre, cette fonction sera chargée par jQuery lorsque
la page sera chargée dans le navigateur. Supposons que notre fonction en paramètre se nomme f().
Sans utiliser jQuery, on peut exécuter la fonction quand la page est chargée, en utilisant l’instruction
JavaScript :

[Link] = f(){}
Cependant, il faut noter qu’en faisant ainsi, la fonction f() ne sera exécutée qu’un dernier, lorsque tous
les éléments de la page seront déjà chargés. En utilisant l’approche jQuery, on peut faire exécuter la
fonction f() dès que possible, c’est-à-dire que son code sera téléchargé. L’appel de $() avec une fonction
f() en paramètre est réalisé selon l’une des deux syntaxes. La première stocke la fonction dans une
variable, et ensuite passe la variable en paramètre à $(). La seconde, plus directe, utilise une fonction
anonyme. Les deux syntaxes sont présentées ci-dessous :

var ma_fonction = f(){


// Tout ce qui est ici sera exécuté au chargement du DOM.
};
$(ma_fonction);

$(function(){
// Tout ce qui est ici sera exécuté au chargement du DOM.
});

Un élément ou un tableau d’éléments DOM


Un élément ou tableau d’éléments DOM peut être passé en paramètre à $(). Dans ce cas, la fonction
va nous renvoyer un objet jQuery qui va contenir les éléments qui lui ont été passés, et sur lesquels on
va pouvoir effectuer des opérations jQuery. Ce passage de paramètres est illustré par le code cidessous
:

var mon_element = [Link]("id_de_mon_element");


var mon_objet_jquery = $(mon_element);

Par exemple le code ci-dessous affecte le style fond noire à la balise body de la page. Le fond du
document deviendra noir.

$([Link]).css("background-color:black");

Une chaine de caractères

2
2
La chaine de caractères passée en paramètre à la fonction $() est constituée de code HTML. En retour,
la fonction renvoie un objet jQuery rempli des éléments décrits dans le code HTML constituant la
chaîne. Par exemple le code suivant permet d’ajouter le paragraphe « Hello » au corps de la page.

$("<div><p>Hello</p></div>").appendTo("body")
On voit bien ici la puissance de jQuery pour sélectionner et accéder aux éléments d’une page sans
même avoir recours au DOM, d’où la partie Query du nom donné à la bibliothèque. Par ailleurs les
sélecteurs CSS, XPath et JQuery sont d’autres moyens utilisés par JQuery pour sélectionner les
éléments d’une page, et qui renforce le côté Query de la bibliothèque.

Les sélecteurs CSS


Pour comprendre les sélecteurs CSS, prenons l’exemple de la Page HTML suivante (source :
[Link]
<div id="fixe">
<h2>Je suis un titre, j'ai de l'importance.</h2>
<p class="ique">Ca va les chevilles là-haut ?</p>
<p>Lorem ipsum sont des mots qui vont très bien ensemble, très bien
ensemble.</p>
</div>
Supposons que dans cette page, on veuille sélectionner le premier élément <p>. jQuery offre plusieurs
solutions décrites dans le code ci-dessous.

// Sélection des éléments ayant pour classe "ique", dans l'élément ayant //
pour id "fixe"
var mon_objet_jquery = $("#fixe .ique");

// Sélection du premier élément <p> de l'élément <div>.


var mon_objet_jquery = $("div p:first-child");

// Sélection des éléments <p>, enfants directs d'un élement <div> et ayant
// pour classe "ique".
var mon_objet_jquery = $("div > [Link]");

Sans utiliser JQuery, il fallait recourir au DOM, avec la méthode getElementsByTagName(‘’P’’)


pour obtenir un tableau, qu’il faut ensuite manipuler pour accéder à l’élément voulu. Nous voyons
donc combien jQuery permet de simplifier l’écriture de code JavaScript, comme cela a été dit en
introduction de ce chapitre.

Les sélecteurs CSS sont :

• #monID : pour sélectionner un élément selon son attribut ID,

2
3
• .maClass : pour sélectionner des éléments selon leur classe,
• baliseHTML : pour éléments des éléments selon leur balise,
• et les combinaisons comme par exemple avoir un élément de balise B dont la classe est C (B.C).
(revoir section 3.4.1 du chapitre 3).

La sélection avec XPath


jQuery contient une implémentation minimale de XPath. La documentation de XPath de jQuery est
disponible à l’URL : [Link] Par exemple
pour sélectionner les éléments a enfant de body, lui-même enfant de html, on écrit le code suivant :

$("/html/body//p");

Les sélecteurs jQuery


Ces sélecteurs sont propres à jQuery et n’ont équivalents CSS ni XPath. Ils permettent par exemple de
faire les sélections suivantes :

• les éléments d’ordre impair dans le document,


$("div p:odd");

• les éléments de rang inférieur à 4,

$("div p:lt(4)");

• les éléments d’un formulaire (input, select, textarea, button, …),

$("div p:input");

• …

7.1.2 Parcours des éléments DOM


Le parcours du DOM permet de se déplacer aisément sur la page, afin de récupérer certains éléments
HTML. Un peu comme pour les sélecteurs, il faudra bien comprendre le principe de la descendance,
car c'est un concept très puissant et très utilisé dans les langages orienté objet comme JavaScript.

Les éléments HTML sont emboités les uns dans les autres. Les éléments intérieurs d’un autre sont
appelés fils. Tandis que l’élément qui les contient lui est appelé parent. Le parcours DOM se base donc
sur cette structure en arbre des pages HTML. Ceci étant dit, jQuery dispose d’un ensemble de fonctions
permettant de parcours le DOM. Les plus importantes sont :

• parent() : permettre d'accéder au bloc parent de l'élément actuellement ciblé.


• children() : permet de cibler l'élément enfant descendant directement de l'élément
sélectionné. La recherche peut être précisée en fournissant un argument.
• prev() : permet de sélectionner l'élément frère précédant directement l'objet ciblé.

2
4
• next() : permet de sélectionner l'élément frère suivant directement l'objet ciblé.
• prevAll() : permet de sélectionner tous les éléments frères précédant l'objet ciblé.

• nextAll() : permet de sélectionner tous les éléments frères suivant l'objet ciblé. Find()
: permet de recherche un élément.

Par exemple le code ci-dessous permet de sélectionner tous les paragraphes enfants du bloc div.

$('div').children('p'); // cible les paragraphes enfants du bloc div


Les fonctions ci-dessus présentées permettent d’accéder aux parents, fils ou frères d’un élément.
jQuery fournit d’autres fonctions permettant de filtrer les éléments ou de boucler sur les éléments.

Filtrage des éléments


Le filtrage des éléments consiste à retenir certains éléments parmi un ensemble. Ces éléments retenus
ne sont pas nécessairement liés par une relation de père-fils ou ancêtre-descendant. Les principales
fonctions permettant de faire du filtrage d’éléments sont : filter() et not(). La première permet de
spécifier les éléments à retenir, alors que la seconde spécifie les éléments à exclure de la sélection.

Filtre par sélecteur


La recherche par la fonction filter() est très efficace dans la mesure où elle supporte l’application de
plusieurs critères. Lorsqu’il y a plusieurs critères, ils sont séparés par des virgules. Les instructions
suivantes illustrent l’utilisation de cette fonction. La première permet de sélectionner tous les
paragraphes ayant la classe .texte (pour la première). La seconde permet de sélectionner tous les
paragraphes ayant la classe .texte et identifiant (id) #description.
Filtre par index
On peut aussi filtrer les éléments par un index, dans ce cas, on utilise la fonction eq(). Cette fonction
de parcourir l’ensemble et de sélectionner l’élément ayant l’index passé en paramètre. Son utilisation
est illustrée par l’exemple ci-dessous.

$('p').eq(2); // cible le 3ème paragraphe trouvé (l'index commence à 0)

Il existe une autre fonction tout aussi intéressante, la fonction slice() qui permet de sélectionner une
portion d’un tableau. La portion est spécifiée au moyen de deux indexes. L’index de départ, et l’index
de fin. Ces deux indexes sont passés en paramètres à la fonction. Par exemple le code ci-dessous
permet de sélectionner les paragraphes d’index 1 et 2.

$('div').slice(1, 3); // garde seulement les blocs div ayant l'index 1 ou 2

Vérifier le type d’un élément


jQuery dispose de la méthode is() permettant de tester si l’argument passé correspond au type de
l’objet analysé.

var vrai = $('div').is('div'); var


faux = $('div').is('p');

2
5
Boucler sur les éléments
jQuery d’une forme de boucle spéciale permettant d’itérer sur les éléments d’une collection, avec la
possibilité d’appliquer un traitement à chaque élément. Cette fonctionnalité de jQuery est possible
grâce à la fonction each() illustrée ci-dessous.

$('p').each( function(){
alert( $(this).text() ); // $(this) représente l'objet courant
} );

L’ensemble des fonctions de parcours du DOM, les filtres, ainsi que le bouclage des éléments confère
à jQuery toute sa puissance et simplicité pour écrire du code JavaScript.

7.1.3 La gestion des attributs


jQuery permet d’accéder et même de modifier les attributs des éléments. Nous verrons comme
récupérer la valeur d’un attribut, et comment modifier cette valeur. Tout cela à l’aide d’une seule
fonction attr().

Récupération de la valeur d’un attribut


Pour récupérer la valeur d’un attribut d’une balise, il suffit de passer le nom de l’attribut en argument
à la fonction attr(). L’instruction suivante permet de récupérer le nom du fichier correspondant à la
balise img.

var fichier = $('img').attr('src');

Définir ou redéfinir un attribut


La fonction attr() peut prendre un second argument. Ce dernier permet alors de spécifier la valeur de
l’attribut spécifié par le premier argument. Dans le cas où l’attribut n’existait pas, il est crée. Mais
attention l’attribut type sur les éléments de formulaire ne peut pas être changé. L’utilisation de la
fonction attr() avec deux arguments est illustrée ci-après.

$('img').attr('src', 'nouveauChemin/[Link]');
$('img').attr('title', 'Nouvelle photo');

Ce code fait deux appels à la fonction $() pour modifier deux attribut d’un même élément. S’il ya
plusieurs attributs à modifier, jQuery propose une solution plus efficace qui consiste à fournir à la
fonction attr() un objet contenant le nom de chaque attribut et sa nouvelle valeur comme le montre
le code ci-après.

$('img').attr({
src : 'nouveauChemin/[Link]',
alt : 'Nouvelle photo', title :
'Nouvelle photo'

});

2
6
Suppression d’un attribut
On peut supprimer un attribut d’un élément en utilisant la méthode removeAttr(). L’attribut est alors
définitivement supprimé du DOM.

$('img').removeAttr('title'); // supprime l'attribut title des images

7.1.4 La gestion des classes


jQuery permet de ajouter une classe, supprimer une classe, basculer de classe et même de tester la
présence d’une classe pour un élément.

Ajouter une classe


La méthode addClass() permet d’ajouter une ou plusieurs classes à un élément. On passe en argument
la classe ou liste de classe à ajouter. Dans le cas d’une liste, les classes sont séparées par des espaces.
Le code ci-après permet d’illustrer les différentes syntaxes de cette fonction.

$('.vert').attr('class', 'rouge'); // cet élément aura la classe .rouge


$('.vert').addClass('rouge'); // les classes .vert et .rouge
$('.vert').addClass('rouge bleu jaune'); //les classes .vert, .rouge, .bleu
// et .jaune

Supprimer une classe


La suppression de classe se fait à l’aide de la fonction removeClass(), dont les syntaxes sont illustrées
ci-dessous.

$('p').removeClass('vert'); // supprime la classe .vert de l'élément


$('p').removeClass('vert rouge bleu'); // supprimer les classes .vert, .
//rouge et .bleu

Tester la présence d’une classe


La fonction hasClass() permet de tester si un élément possède bien d’une classe donnée. Cette fonction
retourne une valeur booléenne ; elle est donc souvent utilisée dans les conditions d’une boucle ou
d’un test. Son utilisation est illustrée ci-dessous.

if( $('p').hasClass('vert') ){ // si l'élément possède la classe .vert


alert('Ce paragraphe est vert !'); // on affiche une alerte

Basculer de classe

2
7
La fonction toggleClass() permet d’ajouter ou de supprimer une classe donnée. Elle a deux arguments.
Le premier permet de spécifier la classe à ajouter ou supprimer. Le second (true ou false) permet
d’ajouter (si true) ou de supprimer (si false). Les exemples fournis ci-dessous permettent de
comprendre l’utilisation de cette fonction.

$('p').toggleClass('vert'); // ajoute la classe .vert si elle n'existe pas,


// sinon, la supprime

// ces deux codes sont équivalents :


$('p').addClass('vert');
$('p').toggleClass('vert', true);

// ces deux codes sont équivalents :


$('p').removeClass('vert');
$('p').toggleClass('vert', false);

On s’aperçoit qu’avec la gestion des classes que nous venons de décrire, que jQuery permet de rendre
la définition des classes dynamique.

7.1.5 L’animation
L’animation et la création de diaporama font parti des fonctionnalités qui font la puissance de jQuery.
La méthode native animate() de jQuery permet d’animer les éléments. Le principe de l’animation
consiste à appliquer une propriété CSS pendant un intervalle de temps donné en millisecondes.

$('p').animate({
width : '150px',
fontSize : '35px',
marginTop : '50px'

});
Cette animation permet d'élargir le paragraphe, le déplacera par rapport à la hauteur du document, et
fixer sa taille de police à 35px.

En plus de passer en argument un objet contenant les propriétés CSS à animer, la fonction peut
admettre plusieurs autres arguments facultatifs dont les plus importantes sont :
• duration : le temps de déroulement de l'animation, toujours en millisecondes. La valeur de
cet argument en soit un nombre entier (nombre de millisecondes), soit une chaine de
caractères. Dans ce cas la chaine doit être exclusivement l’une des trois suivantes :

o slow, qui équivaut à une durée de 600 millisecondes ; o normal, la valeur par
défaut, qui est égale à 400 millisecondes ; o et fast, qui représente une durée de
200 millisecondes seulement.

2
8
• easing : la façon d'accélérer l'animation, c'est-à-dire comment elle va évoluer au cours du
temps. Actuellement, jQuery ne propose malheureusement que deux façons de dérouler
l'animation :
o swing, qui est la valeur par défaut, fait aller l'animation de plus en plus vite au cours
du temps, et ralentit à la fin ;
o linear, qui force l'animation à se dérouler à la même vitesse durant toute l'opération.
• complete : et enfin une fonction de callback, qui est l'action appelée lorsque l'animation est
terminée.

$('p').animate({
width : '150px'

}, 'fast'); // premier exemple avec la valeur fast (200ms)


$('p').animate({
width : '150px'

}, 1000); // second exemple avec 1000ms (= 1s)


$('p').animate({
width : '150px'

}, 'linear'); // l'animation se déroulera de façon linéaire

$('p').animate({
width : '150px' },
function(){

alert('Animation terminée !');


});
On peut grâce aux fonctions hide(), show() et toggle(), cacher, rendre visible ou changer l’état
(visible/invisible) des éléments comme l’illustrent les instructions ci-après.

$('p').hide('slow'); // cache le paragraphe en 600ms


$('p').show('fast', function(){
alert('Paragraphe affiché !');

}); // affiche le paragraphe en 200ms, et lance une alerte à la fin de


//l'animation
$('p').toggle(true); // aura le même rôle que show()
$('p').toggle(false); // aura le même rôle que hide()
jQuery permet aussi de dérouler et enrouler des éléments. Ces actions sont réalisées avec les fonctions
:
o slideDown() déroule l'élément pour l'afficher ; o slideUp() enroule
l'élément pour le cacher ; o slideToggle() enroule ou déroule selon
l'état courant de l'élément.

2
9
Ces méthodes ont les mêmes paramètres que hide(), show() et toggle().

Enfin il existe trois fonctions permettant de faire apparaître ou disparaître des éléments en jouant sur
l’opacité des éléments influencés. Ce sont :

o fadeIn() affiche l'élément progressivement ; o fadeOut() cache


l'élément, en ajustant l'opacité également.
o fadeToggle() affiche ou cache l'élément, grâce à l'opacité.

Pour définir l’opacité, on utilise la fonction fadeTo().

$('p').fadeTo('normal', 0.5); // ajuste l'opacité et la fixe à 0.5

7.2 Manipulation de code HTML avec jQuery


Dans cette section nous allons apprendre à manipuler le contenu HTML et modifier dynamiquement la
structure de document HTML.

7.2.1 L’insertion de contenu HTML


Dans cette rubrique nous traitons de la création de code HTML à la volée. Le contenu HTML peut être
classé en trois groupes :

1. le contenu textuel, ce qui correspond à du texte, tout simplement, sans fioritures telles que
des balises ;
2. le contenu HTML, qui représente le contenu textuel avec les balises structurelles en plus ;
3. et le contenu des éléments de formulaire, qui est la valeur des différents champs de texte, de
mot de passe, de textarea, ...

Ces trois sortes de contenu ne se manipulent pas de la même manière. Aussi allons-nous considérer
les trois cas séparement.

Le contenu textuel
Le contenu textuel est le simple et aussi le plus facile à manipuler. jQuery dispose de la fonction text()
permettant sa manipulation. Cette méthode permet soit de récupérer le contenu textuel d'un élément
s'il existe, soit de le modifier en donnant la nouvelle version en argument. Notons que le texte ne doit
pas contenir les chevrons (< et >) ; auquel cas il sera remplacés par HTML entities &lt et &gt. La
récupération et le changement du contenu d’un élément sont illustrés par le code ci-dessous :

$('p').text(); // renvoie le texte contenu à l'intérieur du paragraphe

$('p').text('Nouveau contenu !'); // remplace le contenu actuel du


//paragraphe par "Nouveau contenu !"
Le contenu HTML
Le contenu HTML est le contenu textuel plus les balises structurelles. jQuery dispose de la fonction
html() pour traiter ce type de contenu. Cette fonctionne opère comme la propriété innerHTML de

3
0
JavaScript. Le défaut de cette fonction est qu’elle écrase l’ancien contenu. Elle n’est donc pas judicieuse
pour effectuer une insertion. Pour l’insertion proprement dite, il faut recourir à d’autres fonctions.
L’utilisation de html() est illustrée ainsi qu’il suit :

$('div').html(); // renvoie le code HTML contenu dans ce bloc div


$('div').html('<p>Nouveau <strong>code</strong> !</p>'); // remplace le
//code HTML actuel par '<p>Nouveau <strong>code</strong> !</p>'

Le tableau ci-dessous résume comment insérer du contenu HTML tout en conservant l’existant. La
première colonne décrit le type d’insertion, la seconde présente la fonction jQuery utilisée, et la
dernière colonne donne un exemple de code jQuery.

Type d’insertion Fonction jQuery Exemple


Ajouter du contenu prepend() $('p').prepend('<strong>Texte inséré HTML avant le
contenu avant le contenu actuel.</strong> '); actuel
Ajouter du contenu append() $('p').append(' <strong>Texte inséré HTML après le contenu
après le contenu actuel.</strong>');
actuel $('p').append( $('h1') );
Création de contenu à before(), after() $('p').before('<p>Paragraphe l'extérieur de
l'élément précédent</p>');
$('p').after('<p>Paragraphe
suivant</p>');

Le contenu des éléments de formulaires


La fonction val() permet de récupérer ou modifier le contenu des éléments de formulaires. Tout
comme la fonction text(), cette méthode n’admet pas les chevrons de balises. Elle est équivalente à la
propriété value du JavaScript.

$('input').val(); // retourne le contenu de l'élément input


$('input').val('Nouvelle valeur !'); // modifie le contenu actuel de
//l'élément (écrase puis écrit)

7.2.2 La manipulation des éléments


Après avoir vu comment manipuler le contenu, nous allons maintenant nous attaquer à la manipulation
des éléments eux-mêmes. On peut cloner, vider/supprimer, remplacer des éléments.

Cloner un élément
La fonction jQuery clone() permet de cloner un élément. Seulement le clone crée n’est pas
systématiquement ajouté au document. Il faut donc cloner et ensuite ajouter le clone au document
comme le montrent les exemples ci-dessous.

var $clone = $('.objet').clone(); // on clone notre élément

3
1
$('body').append($clone); // puis on l'ajoute à la fin de notre document !
// on peut également tout écrire sur une seule ligne grâce au chaînage de
//méthode :
$('.objet').clone().appendTo('body');

Vider et/ou supprimer un élément


Vider un élément consiste à supprimer le contenu de celui-ci. Cette opération est effectuée à l’aide de
la fonction empty(). Tandis que supprimer un élément c’est faire disparaître l’élément avec son
contenu. La suppression se fait avec la fonction remove().

$('p').empty(); // vide l'élément, seules subsisteront les balises <p></p>


//et leurs attributs
$('p').remove(); // supprime l'élément, avec son contenu, rien n'en restera
$('div').remove('.suppression'); // supprime les éléments portant la classe
//.suppression parmi les blocs div trouvés

Remplacer un élément
Les fonctions replaceWith() et replaceAll() sont utilisées pour le remplacement des éléments.

$('.pomme').replaceWith('<p>Cet élément a été remplacé !</p>');


// on remplace l'élément .pomme par un nouvel élément créé pour l'occasion
$('.pomme').replaceWith( $('.poire') );

// ici, l'élément .pomme est remplacé par l'élément .poire, ce dernier va


//se déplacer
$('.poire').replaceAll('.pomme');
// inversement, on ordonne aux éléments .poire de remplacer tous les
// éléments .pomme trouvés

7.2.3 La création des éléments à la volée


Il s’agit de créer des éléments HTML sans passer par le DOM. La fonction principale jQuery ($()) permet
de réaliser de telles création. Seulement, les éléments crées ne font pas partie du DOM, il va valoir les
y ajoutant en recourant aux fonctions de placement étudiées précédemment.

$('<div />').appendTo('body'); // créé un nouveau bloc div, et le place à


// la fin du corps du document
var $lien=$('<a href="[Link] Site du Zéro !</a>');
// la variable contiendra l'élément lui-même, ainsi que son contenu
// n'oubliez pas de placer l'élément ensuite

3
2
Lors de la création d’un élément, on peut également fournir les attributs de cet élément. Mais cette
façon de faire tend à rendre le code touffu et difficilement lisible. La bonne façon consiste donc à
passer en deuxième paramètre, un objet contenu tous les attributs de l’objet à créer ; comme le
montre l’exemple ci-dessous.

$('<div />', {
id : "bloc", // identifiant de l'élément
css : { // style css de l'élément
color : "red", fontSize :
"30px"

}
// etc...
});

7.3 Ajax et jQuery


Programmer Ajax n’est une chose simple. L’une des missions de jQuery est de simplifier l’écriture de
code Ajax comme nous l’avons annoncé en introduction à ce chapitre.

7.3.1 Instancier XmlHttpRequest avec jQuery


Instancier un objet XmlHttpRequest devient extrêmement simple, cela est possible grâce à la fonction
[Link]() ou $.ajax(). Dans notre présentation, tout utiliserons $.ajax().

$.(document).ready(function(){
/*
* Utilisons $.ajax pour créer une instance de XmlHttpRequest
*/

$.ajax();
});
Remarquez qu’ici, pas besoin de gérer dans notre code de problème de compatibilité des navigateurs
comme c’était le cas avec JavaScript.

On peut conditionner l’instanciation de l’objet XmlHttpRequest à l’occurrence d’un événement comme


le montre l’exemple.

$(document).ready(function(){
/*
* Ecoutons l'évènement click()
*/
$("#more_com").click(function(){
$.ajax();

3
3
});
});

7.3.2 Le fonctionnement de $.ajax()


Les paramètres principaux de $ .ajax() sont :

Le fichier ciblé
Lorsque vous envoyez une requête HTTP, vous demandez quelque chose au serveur. Pour spécifier
quelle est la ressource ciblée (un script PHP par exemple), nous allons devoir utiliser le paramètre url
de $.ajax().
$("#more_com").click(function(){

$.ajax({

url : 'more_com.php' // La ressource ciblée


});

});

Le type de la requête : POST ou GET ?


Devons-nous envoyer une requête de type POST ou GET ? Le type POST est à utiliser lorsqu’il faut
envoyer des informations au serveur. Le type de la requête est précisé à l’aide du paramètre type.

$("#more_com").click(function(){
$.ajax({
url : 'more_com.php', // La ressource ciblée
type : 'GET' // Le type de la requête HTTP.

});
});
L’envoi d’informations en GET
Si votre requête est de type GET, rien ne vous empêche de faire passer des paramètres avec GET pour
les utiliser côté serveur dans le tableau $_GET. Pour cela, vous pouvez utiliser le paramètre data.

$("#more_com").click(function(){
$.ajax({
url : 'more_com.php', // La ressource ciblée
type : 'GET' // Le type de la requête HTTP.

data : 'utilisateur=' + nom_user;


});

3
4
});
Dans ce exemple, du côté serveur, $_GET['utilisateur'] contiendra la valeur de la variable nom_user.

Le type de données à recevoir


Nous devons spécifier maintenant le type de données que nous allons recevoir de PHP. Rappelez-vous,
nous pouvons recevoir tout et n'importe quoi : du XML, du HTML, du texte, du JSON... peu importe !
Dans notre exemple, nous allons utiliser ici du HTML.

$("#more_come").click(function(){
$.ajax({
url : 'more_com.php', // La ressource ciblée
type : 'GET', // Le type de la requête HTTP

/**
* Le paramètre data n'est plus renseigné, nous ne faisons plus
passer de variable

*/ dataType : 'html' // Le type de données à recevoir,


ici, du HTML.

});
});
L’envoi de requête de type POST est similaire au cas du type GET. La différence réside dans le
paramètre type qui aura la valeur POST.

Les paramètres complete, success, et error


Ces paramètres sont utiles pour le traitement de la réponse envoyée par le serveur. Le paramètre
success indique la requête a abouti. Ce paramètre est associé à une fonction qui sera exécutée. La
fonction en question sera utilisée pour mettre la page à jour.

$("#more_com").click(function(){

$.ajax({

url : 'more_com.php',
type : 'GET',

dataType : 'html', // On désire recevoir du HTML


success : function(code_html, statut){ // code_html contient le HTML
//renvoyé
}
});

});

3
5
Le paramètre error indique que la requête Ajax a échoué. Il est aussi associé à une fonction qui est
appelée pour réaliser un traitement.

$("#more_com").click(function(){

$.ajax({

url : 'more_com.php',
type : 'GET', dataType
: 'html',

success : function(code_html, statut){ // success est toujours en //


place, bien sûr !

},
error : function(resultat, statut, erreur){
}
});

});
Enfin, le paramètre complete, est lui aussi associé à une fonction qui sera exécutée une fois que l’appel
Ajax est terminé. La structure générale d’un traitement Ajax est donc la suivante :

$("#more_com").click(function(){

$.ajax({

url : 'more_com.php',
type : 'GET', dataType
: 'html',

success : function(code_html, statut){

},

error : function(resultat, statut, erreur){


},
complete : function(resultat, statut){
}
});

});

3
6
7.3.3 Les événements Ajax
Les événements dont il est question ici concernent Ajax. Ils sont activés dès qu’il un changement d’état
sur une requête Ajax : Lancement d’une requête Ajax, succès d’une requête Ajax, échec d’une requête.
Des fonctions dédiées : ajaxStart(), ajaxSuccess() et ajaxError() permettent de réaliser des traitement
aux déclenchements de ces événements. Le code ci-après l’illustre leur utilisation.

$("p").ajaxStart(function(){
[Link]("L'appel AJAX est lancé !");
});
$("p").ajaxSuccess(function(){ [Link]("L'appel AJAX a réussi !");

});
$("p").ajaxError(function(){ [Link]("L'appel AJAX a échoué.");

});

La fonction [Link]() utilisée dans ce code permet d’inscrire un texte dans la console.

Conclusion

Dans ce chapitre, nous avons présenté les bases du framework jQuery. Les deux méthodes d’insertion
de code jQuery dans une page ont été présentées : intégration du script [Link] ou l’utilisation des
apis google. La fonction principale de jquery : $() a été présentée. Nous avons vu que cette unique
fonction intervenait dans la réalisation de toutes les fonctionnalités de jQuery. La manipulation du
DOM, la manipulation du HTML, la réalisation des animations ont été étudiées dans ce chapitre.

Ce chapitre, a également montré comment jQuery permet de simplifier l’écriture de code Ajax. En
particulier, nous avons pu constater que le problème de compatibilité des navigateurs n’avait plus à
être géré par le développeur. Nous avons vu également comment la fonction $.ajax() en elle seule
permettait de faire de gérer de façon simplifiée une requête Ajax.

Au terme de chapitre concluant la deuxième partie de notre cours, nous sommes maintenant équipés
pour réaliser des sites et applications Web efficaces, très réactives, et capables de gérer des
animations.

La dernière partie du cours complétera notre formation en technologies Web, en proposant quelques
conseils sur la conception de sites Web, et en présentant quelques plateformes de développement
Web basées sur Java et les technologies Microsoft pour le Web.

3
7

Vous aimerez peut-être aussi