AJAX

 Généralités
• Définition :
 AJAX = Asynchronous JavaScript And XML
 permet de faire appels asynchrones au serveur depuis le client
 Serveur retourne du XML récupéré par JavaScript et traité

• Processus classique de consultation de page web

 Saisie d’adresse dans le navigateur
 Requête arrive sur le serveur hébergeant la page
 Serveur retourne du texte au format HTML ou XHTML
 Le navigateur interprète et affiche la page
 Le client est déconnecté du serveur web

ASSALE Adjé Louis AJAX & JQuery 1

 AJAX
 Généralités
• Principe d’AJAX c’est permettre à tout moment d’aller
chercher des informations sur le serveur pour :
 Ajouter des éléments à la page
 Modifier le contenu d’un bout de page
 Insérer des données dans une base

• Applications sont très nombreuses

 Champs qui s’auto-complètent
 Listes déroulantes liées
 Contrôle de formulaire
 Popups accessibles

ASSALE Adjé Louis AJAX & JQuery 2

 AJAX
 Généralités
• Technique AJAX utilise les éléments suivants :
 HTML pour l’interface
 CSS (Cascading Style-Sheet) pour la présentation de la page
 JavaScript pour les traitements locaux, et DOM (Document
Object Model) qui accède aux éléments de la page ou du
formulaire ou aux éléments d’un fichier XML chargé sur le
serveur
 L’objet XMLHttpRequest lit des données ou fichiers sur le
serveur de façon asynchrone
 Un langage de scripts utilisé coté serveur (PHP, ASP, …)

ASSALE Adjé Louis AJAX & JQuery 3

 AJAX
 Fonctionnement
• Principe :

ASSALE Adjé Louis AJAX & JQuery 4

 AJAX
 Fonctionnement
• L’objet XMLHttpRequest ou XHR :
 demande des informations sur le serveur via méthodes :
 open(mode, url, boolean): établit connexion;
 mode type de requête GET ou POST

 url endroit où trouver les données (fichier avec son chemin sur

disque)
 boolean true (asynchrone) / false (synchrone)

 send("chaine") : envoie de paramètre ;

 null pour commande GET

 récupère les données du serveur dans les propriétés :

 responseXML : données dans format XML, utilise méthodes DOM
 responseText : données dans chaines de caractères
ASSALE Adjé Louis AJAX & JQuery 5
 AJAX
 Fonctionnement
• L’objet XMLHttpRequest ou XHR :
 Propriétés à tester avant le traitement des données :
 status : code de la réponse du serveur
 404 si la page n’est pas trouvée

 200  ok

 readyState : code d’état de l’objet peut passer de 0 à 4 pour "prêt"

 0 non initialisé

 1 ouverture (open() vient de s’exécuter)

 2 envoyé (send() vient de s’exécuter)

 3 en cours (des données sont en train d’arriver)

 4 Prêt (toutes les données sont chargées)

 onreadystatechange : propriété activée par un événement de changement

d’état . On lui assigne une fonction
ASSALE Adjé Louis AJAX & JQuery 6
 AJAX
 Étapes de construction d’une requête
1. Création d’une instance de XHR :
 On crée une instance de l’objet XMLHttpRequest
 Prévoir pour le navigateur Internet Explorer utiliser l’objet
ActiveXObject au lieu de XMLHttpRequest
2. Attente de la réponse et son traitement
 On utilise la propriété onreadystatechange de notre objet xhr à laquelle
on assigne la fonction anonyme function()
 Dans la fonction on teste la propriété readyState et éventuellement
status en vue de traiter la réponse
3. Etablissement de la connexion et envoi de paramètre
 On utilise méthode open() pour établir la connexion
 Et méthode send() pour envoyer des paramètres

7
 AJAX
 Construction d’une requête
• Création d’une instance de XHR :
 2 options pour compatibilité avec les navigateurs:
 if (window.XMLHttpRequest) // Objet standard
{
xhr = new XMLHttpRequest(); // les autres navigateurs
}
else if (window.ActiveXObject) // Internet Explorer
{
xhr = new ActiveXObject ("Microsoft.XMLHTTP");
}
 N.B.: à partir de la version IE7 l’objet XMLHttpResquest est disponible
on peut utiliser Msxml2.XMLHTTP à la place de
Micrososft.XMLHTTP

ASSALE Adjé Louis AJAX & JQuery 8

 AJAX
 Construction d’une requête
• Création d’une instance de XHR :
 En définitive on peut écrire :
 if (window.XMLHttpRequest) // Objet standard
xhr = new XMLHttpRequest(); // les autres navigateurs
else if (window.ActiveXObject) { // Internet Explorer
try {
xhr = new ActiveXObject ("Microsoft.XMLHTTP");
} catch (e) {
xhr = new ActiveXObject ("Msxml2.XMLHTTP");
}
}
else { alert("votre navigateur ne supporte pas XMLHttpRequest …");
xhr = false;
}
ASSALE Adjé Louis AJAX & JQuery 9
 AJAX
 Construction d’une requête
• Attente de réponse et son traitement :
 sont inclus dans fonction anonyme function() dont la valeur de
retour assignée à la propriété onreadystatechange – si valeur de
readyState vaut 4 alors on définit traitement de la réponse
 xhr.onreadystatechange = function()
{
// instructions de traitement de la réponse si readyState vaut 4 et
// status à 200 sinon autres traitements (i.e traitement d’erreur)
if (xhr.readyState == 4 && xhr.status==200)
{ // reçu, ok … traitement à faire }
else { //attendre … traitement à faire }
}

ASSALE Adjé Louis AJAX & JQuery 10

 AJAX
 Construction d’une requête
• Attente de réponse et son traitement :
 Traitement de la réponse s’effectue selon 2 cas
 Réponse du serveur sous forme de fichier texte
 On récupère les données par une variable à laquelle on affecte

xhr.ResponseText
 Réponse du serveur sous forme de fichier XML
 On récupère les données par variable à laquelle on affecte

xhr.ResponseXML
 S’assurer que le XML retourné est "bien formé"

 Et que le navigateur l’interprète comme du XML

 Le traiter alors et rajouter les headers adéquats – des solutions

existent pour le faire

ASSALE Adjé Louis AJAX & JQuery 11

 AJAX
 Construction d’une requête
• Etablissement de connexion et envoi de paramètres
 Méthode open(mode, url, boolean) de l’objet xhr
 mode est GET ou POST
 url : url ou nom du fichier contenant la requête
 boolean : true pour asynchrone et false pour synchrone
 Si le mode est POST, appeler méthode
 setRequestHeader ("Content-Type", "application/x-www-form-
urlencoded") avant méthode send()
 Méthode send("chaine") de l’objet XMLHttpRequest
 "chaine" vaut null pour un GET (pas de paramètres)
 Exemple :

xhr.open("GET", "data.xml", true);

xhr.send(null);
12
 AJAX
 Construction d’une requête
• Etablissement de connexion et envoi de paramètres
 Méthode send("chaine") de l’objet XMLHttpRequest
 mode POST
 Envoi de données via une variable au format des paramètres de

POST (S’il y a en plusieurs on concatène en les séparant par (&))

 Exemple 1 :
xhr.send(data);
…
var data = "file=" + url + "&content=" + content;
 Exemple 2 :
 send(document.getElementById("TEXTE").value);

les données envoyées sont prise dans le champ dont l’id est
"TEXTE" et qui est rempli par l’utilisateur grâce au formulaire
ASSALE Adjé Louis AJAX & JQuery 13
 AJAX
 Exemples de programmes
• Exemple 1 :
 Listes liées : Auteurs et Livres
 La liste Auteurs affiche les auteurs au choix d’un auteur
 La liste Livres affiche les livres de cet auteur

 On créera 2 fichiers :
 1 fichier auteurs.php qui contiendra le code d’affichage du formulaire

et le code d’envoi de la requête au serveur

 1 fichier ajaxLivre.php qui servira à établir la connexion via un

POST et contiendra le code renvoyant la liste des livres d’1 auteur

dont l’id est passé en paramètre du POST
ASSALE Adjé Louis AJAX & JQuery 14
 AJAX
 Exemples de programmes
• Exemple 1 :
 Listes liées : Auteurs et Livres
 Codes du fichier auteurs.php en 3 parties :
1. Dans le Head : code JavaScript de création de l’objet
XMLHttpRequest
<html>
<head>
<title>Tutoriel Ajax (XHTML + JavaScript + XML)</title>
<script type='text/javascript’>
function getXhr(){
var xhr = null;
if(window.XMLHttpRequest) // Firefox et autres
xhr = new XMLHttpRequest();
else if(window.ActiveXObject){ // Internet Explorer
ASSALE Adjé Louis AJAX & JQuery 15
 AJAX
 Exemples de programmes
• Exemple 1 :
1. Dans le Head : code JavaScript de création de l’objet
XMLHttpRequest
try {
xhr = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
}
else { // XMLHttpRequest non supporté par le navigateur
alert(" le navigateur ne supporte pas les objets XMLHTTPRequest...");
xhr = false;
}
return xhr;
}
ASSALE Adjé Louis AJAX & JQuery 16
 AJAX
 Exemples de programmes
• Exemple 1 :
2. Dans le Head : code Ajax (JavaScript) d’envoi de la requête et de
/** traitement de la réponse
* Méthode qui sera appelée sur le click du bouton
*/
function go(){
var xhr = getXhr();
// On défini ce qu'on va faire quand on aura la réponse
xhr.onreadystatechange = function(){
// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
if(xhr.readyState == 4 && xhr.status == 200){
leselect = xhr.responseText;
// On se sert de innerHTML pour rajouter les options a la liste
document.getElementById('livre').innerHTML = leselect;
}
17
}
 AJAX
 Exemples de programmes
• Exemple 1 :
2. Dans le Head : code Ajax (JavaScript) d’envoi de la requête et de
traitement de la réponse
// Ici on va voir comment faire du post
xhr.open("POST","ajaxLivre.php",true);
// ne pas oublier ça pour le post
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded’);
// ne pas oublier de poster les arguments
// ici, l'id de l'auteur
sel = document.getElementById('auteur’);
idauteur = sel.options[sel.selectedIndex].value;
xhr.send("idAuteur="+idauteur);
}
</script>
</head>
ASSALE Adjé Louis AJAX & JQuery 18
 AJAX
 Exemples de programmes
• Exemple 1 :
<body> 3. Dans le Body : code du formulaire et code PHP de remplissage
<form> de la liste auteur
<fieldset style="width: 500px">
<legend>Liste liées</legend>
<label>Auteurs</label>
<select name='auteur' id='auteur' onchange='go()’>
<option value='-1'>Aucun</option>
<?php
$connexion = new
PDO("mysql:host=localhost;dbname=biblio","assale","Raissa-92");
$res = $connexion->query("SELECT * FROM auteur ORDER BY nom");
while($row = $res->fetch(PDO::FETCH_OBJ)){
echo "<option value='",$row->id,"'>",$row->nom,"</option>";
}
19
?>
 AJAX
 Exemples de programmes
• Exemple 1 :
3. Dans le Body : code du formulaire et code PHP de remplissage
de la liste auteur
</select>
<label>Livres</label>
<div id='livre' style='display:inline’>
<select name='livre’>
<option value='-1'>Choisir un auteur</option>
</select>
</div>
</fieldset>
</form>
</body>
</html>
ASSALE Adjé Louis AJAX & JQuery 20
 AJAX
 Exemples de programmes
• Exemple 1 :
 Listes liées : Auteurs et Livres
 Codes du fichier ajaxLivre.php : affichage des livres dans la liste livre
<?php
echo "<select name='livre'>";
if(isset($_POST["idAuteur"])){
$connexion = new
PDO("mysql:host=localhost;dbname=biblio","assale","Raissa-92");
$res = $connexion->query("SELECT id,titre FROM livre
WHERE idAuteur=".$_POST["idAuteur"]." ORDER BY titre");
while($row = $res->fetch(PDO::FETCH_OBJ)){
echo '<option value="',$row->id,'">',$row->titre,'</option>’;
}
}
echo "</select>"; 21
 AJAX
 Exemples de programmes
• Exemple 2 :
 Affichage du contenu d’un fichier dans la page HTML
 Fichier de code Ajax
<html>
<head>
<script>
function submitForm()
{
var xhr;
try { xhr = new ActiveXObject('Msxml2.XMLHTTP'); }
catch (e)
{
try { xhr = new ActiveXObject('Microsoft.XMLHTTP'); }
catch (e2)
{
try { xhr = new XMLHttpRequest(); } 22
 AJAX
 Exemples de programmes
• Exemple 2 :
 fichier de code ajax suite
catch (e3) { xhr = false; }
}
}
xhr.onreadystatechange = function()
{
if(xhr.readyState == 4)
{
if(xhr.status == 200)
document.getElementById("zone").innerHTML = "Received:"+
xhr.responseText;
else
document.ajax.dyn="Error code " + xhr.status;
}
23
 AJAX
 Exemples de programmes
• Exemple 2 :
};
 fichier du code ajax fin
xhr.open("GET", "data.xml", true); //fichier à afficher : data.xml
xhr.send(null);
}
</script>
</head>
<body>
<FORM method="GET" name="ajax" action="">
<INPUT type="BUTTON" value="Submit" ONCLICK="submitForm()">
<div id="zone">
<span class="Style1">... un texte à remplacer ...</span>
</div>
</FORM>
</body>
ASSALE Adjé Louis AJAX & JQuery 24
</html>
 JQUERY
 Présentation
• Origines :
 Création en 2006 par John RESIG
 Objectif : simplifier le développement des pages Web avec Javascript
 Bibliothèque en code libre
 Développement et documentation assurés par une équipe
• Principales caractéristiques
 Écriture en Javascript de manière non intrusive
 Séparation nette des scripts d’avec le code XHTML
 Orientation vers la manipulation d’éléments d’une page Web
 Extension du mécanisme de sélection existant dans CSS
 Simplification de l’utilisation de DOM
 Mécanismes puissants avec une notation minimaliste
25
 JQUERY
 Présentation
• Principales caractéristiques
 Intégration de techniques pour les applications Internet (RIA)
 Effets d’animation, interfaçage avec Ajax, etc.
 Bibliothèque extensible
 Nombreuses extensions disponibles (formulaires, menus, etc.)
 Gestion poussée de la compatibilité avec les navigateurs
 Prise en charge de particularités hors norme de navigateurs
 Mais fonctionne avec des versions relativement récentes :
 Firefox ≥2, Internet explorer ≥ 6, Safari ≥ 3, Opera ≥ 9, Chrome

ASSALE Adjé Louis AJAX & JQuery 26

 JQUERY
 Installation en 3 étapes
• Télécharger la librairie JQuery
 À l’adresse http://jquery.com/ pour la version la plus récente
 C’est un fichier texte écrit en Javascript (d’où l’extension .js)
• Importer dans le document
 Dans tout document html/php où utiliser Jquery ajout dans le
header la balise
 <script language=javascript src=lib/jquery-1.7.1.min.js></script>
 lib/jquery-1.7.1.min.js version de 2012
 Si importation de +sieurs fichiers javascript dans document
 Commencer par JQuery au cas où un des fichiers en aurait besoin

ASSALE Adjé Louis AJAX & JQuery 27

 JQUERY
 Installation en 3 étapes
• Mettre en place "l’enveloppe d’exécution"
 Toute la page doit être chargée avant l’exécution de JQuery
 Donc on crée le bloc du code des instructions JQuery dans une fonction
spéciale dans le header. La syntaxe est la suivante :
<script language=javascript>
$(document).ready(function(){
//code JQuery de la page à écrire ici
});
</script>
 On peut utiliser un fichier séparé
 N.B. : $(document).ready( function() { code} ); 
$( function (){ code} );

ASSALE Adjé Louis AJAX & JQuery 28

 JQUERY
 Les sélecteurs JQuery
• Hérités des sélecteurs CSS (jusqu’à la version CSS4)
• Fonctionnement
 Fonctionne très bien quelque soit le navigateur (≤10 ans)
 La syntaxe est ciblée
 1 instruction commence en désignant l’élément HTML sur lequel agir
 Comme en CSS on peut sélectionner 1 ou +sieurs éléments du <body>, et de
+sieurs manières
 Notation : jQuery(sélection) ou $(sélection)
 sélection exprimée à priori comme en CSS dans chaine

 Exemple : jQuery("div#contenu") ou $("div#contenu")

 Manipulation de la sélection par application d’une méthode

 Par exemple définition de style via .css(propriété, valeur)

$("div#contenu").css("color", "red");
29
 JQUERY
 Les sélecteurs JQuery
• Exemples

ASSALE Adjé Louis AJAX & JQuery 30

 JQUERY
 Les sélecteurs JQuery
• Exemples
 On peut cumuler 3 syntaxes pour écrire chemins plus
complexes vers cible mieux délimitée

 Quelques sélecteurs spéciaux hérités du CSS :

ASSALE Adjé Louis AJAX & JQuery 31

 JQUERY
 Les sélecteurs JQuery
 Quelques sélecteurs spécifiques de JQuery

ASSALE Adjé Louis AJAX & JQuery 32

 JQUERY
 Les sélecteurs JQuery
 Quelques sélecteurs spécifiques de JQuery

Plus d’infos voir

http://api.jquery.com/
category/selectors/

ASSALE Adjé Louis AJAX & JQuery 33

 JQUERY
 La syntaxe de JQuery
• Une fois cible sélectionnée
 Application des fonctions proposées comme suit :
 $("#truc").hide();
 Un point sépare la cible et la fonction

 Cumul de +sieurs fonctions sur une seule cible : $

("#truc").hide().fadeln("slow")
 // on cache #truc, et on le fait réapparaitre aussi sec en fondu

 Cas des fonctions non instantanées (animations, chargement de

contenu externe, etc.)
 Possibilité d’indiquer ce que faire après l’agissement de la fonction
 Possibilité de créer des séquences de codes successifs facilement en
indiquant une fonction dans la fonction
ASSALE Adjé Louis AJAX & JQuery 34
 JQUERY
 La syntaxe de JQuery
• Une fois cible sélectionnée
 Cas des fonctions non instantanées
 Exemple :
$('#truc').fadeOut('slow', function(){ // disparition du bloc, puis...
$('#truc').load('actu,html', function(){ // chargement d'une actu externe, puis...
$('#truc').show('slow', function(){ // réapparition du bloc mis à jour, puis...
alert('la séquence est finie !'); // affichage d'une boite de dialogue
});
});
});
 On peut mettre un temps pour exécuter une instruction
 $('#truc').delay(2000).hide();
 // attendre 2000 millisecondes avant de cacher le bloc

ASSALE Adjé Louis AJAX & JQuery 35

 JQUERY
 La syntaxe de JQuery
• Une fois cible sélectionnée
 On peut faire une boucle et attribuer une action ≠ te à chaque
élément
 Exemple :
$('.box').each(function(index){ // on va répéter la suite pour chaque élément, 1 par 1
// $(this) c'est l'élément actuellement sélectionné, avant de passer au suivant
$(this).show();
// index c'est le numéro de cet élément dans la liste : 0 pour le 1er, 1 pour le
2ème...
$(this).html("Ceci est la div de la classe box numéro "+index);
});

ASSALE Adjé Louis AJAX & JQuery 36

 JQUERY
 Quelques fonctions et familles
usuelles
• Plus de fonctions dans http://docs.jquery.com/Main_Page
 Afficher/masquer un bloc

ASSALE Adjé Louis AJAX & JQuery 37

 JQUERY
 Quelques fonctions et familles
usuelles
 Afficher/masquer un bloc

ASSALE Adjé Louis AJAX & JQuery 38

 JQUERY
 Quelques fonctions et familles
usuelles
 Styles et attributs d’un bloc


ASSALE Adjé Louis AJAX & JQuery 39

 JQUERY
 Quelques fonctions et familles
usuelles
 Gestion des contenus textes

ASSALE Adjé Louis AJAX & JQuery 40

 JQUERY
 Quelques fonctions et familles
usuelles
 Chargement de HTML et de Javascript externes

ASSALE Adjé Louis AJAX & JQuery 41

 JQUERY
 Quelques fonctions et familles
usuelles
 Gestion des formulaires

ASSALE Adjé Louis AJAX & JQuery 42

 JQUERY
 Quelques fonctions et familles
usuelles
 Interactivité à la souris

ASSALE Adjé Louis AJAX & JQuery 43

 JQUERY
 Quelques fonctions et familles
usuelles
 Interactivité au clavier

ASSALE Adjé Louis AJAX & JQuery 44

 JQUERY
 Quelques fonctions et familles
usuelles
 Événements de la page

ASSALE Adjé Louis AJAX & JQuery 45

 JQUERY
 Quelques librairies
• Forces de JQuery
 Dispose de fonctions très puissantes
 Communauté de développeurs
 Publication d’extensions pour certaines fonctionnalités compliquées
 Fonctionnalité fichier .js, parfois accompagné d’image, css, ou page php
 Recherche d’extension
 Peut se faire sur google , on tape : jquery suivi de ce qu’on désire
 Exemple : "jquery diaporama", "jquery scroll animé", etc…

• Sites de quelques librairies

 Gestion précise et animée du scroll
 http://demo.flesler.com/jquery/scrollTo/
ASSALE Adjé Louis AJAX & JQuery 46
 JQUERY
 Quelques librairies
• Sites de quelques librairies
 Personnalisation des barres de scroll
 http://jscrollpane.kelvinluck.com/index.html#examples
 Diaporamas
 http://www.serie3.info/s3slider/demonstration.html
 Diaporamas pleine-page
 http://buildinternet.com/project/supersized/slideshow/3.2/demo.html
 Afficher images en grand format
 http://fancyapps.com/fancybox/#examples
 Grille qui s’adapte à la taille de à fenêtre
 http://masonry.desandro.com/

ASSALE Adjé Louis AJAX & JQuery 47

 JQUERY
 Quelques librairies
• Sites de quelques librairies
 Sites scrollables et animés dans tous les sens
 http://johnpolacek.github.com/scrollarama/
 http://johnpolacek.github.com/scrolldeck.js/decks/reponsive/
 Typo en Javascript
 http://typeface.neocracy.org/
 Injection d’animation Flash
 http://jquery.lukelutman.com/plugins/flash/index.html
 Grille adaptative, avec options de tri multiples
 http://isotope.metafizzy.co/index.html
 Pixelliser des images en Javascript
 http://desandro.com/resources/close-pixelate/
ASSALE Adjé Louis AJAX & JQuery 48
 JQUERY
 Quelques librairies
• Sites de quelques librairies
 formulaire d’upload de fichiers via module JQuery
 http://www.uploadify.com/demos
 Responsive WebDesign
 site qui s’adapte quelque soit la résolution d’écran
 http://www.webresourcesdepot.com/28-high-quality-jquery-plugins-for-
building-responsive-websites/
 http://cssgrid.net/
 Librairie permettant de faire de l’HTML5
 http://processingjs.org/
 http://www.gildasp.fr/playingwithpixels/
 http://processing-js.github.com/processing-mobile/examples/processing-and-
js/
49
 JQUERY
 Exemples
• Exemple 1 :
 Coloriage d’un texte avec code de couleur saisi dans une zone

 Le code en 2 fichiers : jq-colorier.js fichiers des méthodes

$(function() {
$('input#bouton').click(function (event){
//application, après le clic sur le bouton,
//de la couleur définie dans zone dont id=#zcouleur
//au texte de la division identifiée par #contenu
$("div#contenu").css("color",$("input#zcouleur").val());
});
}); 50
 JQUERY
 Exemples
• Exemple 1 :
 Le code en 2 fichiers : colorier.html fichier html du programme

<html>
<head>
<meta http-equiv="content-Type" content="text/html; charset=iso-8859-1" />
<title>Exemple avec JQuery : coloriage</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="jq-colorier.js"></script>
</head>
<body>
<h1>Exemple avec jQuery : coloriage</h1>
<hr/>
<div id="contenu">Ce texte doit s'afficher en couleur !</div>
<hr/>
ASSALE Adjé Louis AJAX & JQuery 51
 JQUERY
 Exemples
• Exemple 1 :
 Le code en 2 fichiers : colorier.html fichier html du programme

<form action="">
code de couleur : <input type="text" name="zcouleur"
id="zcouleur" value"#FF0000" size="7" />
<input type="button" value="colorier" id="bouton" />
</form>
</body>
</html>

ASSALE Adjé Louis AJAX & JQuery 52

 JQUERY
 Exemples
• Exemple 2 : Ajax avec JQuery
 Manipulation de XMLHttpRequest en JQuery
 Opérations simplifiées : $.get(), $.post() et .load()
 Opération avec contrôle complet : $.ajax()
 Instructions $.get() et $.post()
 Récupération du contenu à une adresse via HTTP
 Avec envoi de données

 Et indication d’un gérant de la fin de l’échange (si aucune erreur)

 Appels :
 $.get(adresse, données, gérant), $.post(adresse, données, gérant)

 adresse : url du contenu – données : données dans un tableau

associatif, sinon null – gérant : fonction avec en paramètres le texte

du contenu reçu et libellé du résultat de l’échange en HTTP
53
 JQUERY
 Exemples
• Exemple 2 : Ajax avec JQuery
 Fichier 1 : charge.js du code Jquery
$(function () {
$('#f').submit( function() {
return false;
} );
$('#boutonfichier').click( function () {
charger( $('#zfichier').val() );
} );
$('#boutonurl').click( function () {
charger( $('#zurl').val() );
} );
$('#zurl').val(window.location);
});
ASSALE Adjé Louis AJAX & JQuery 54
 JQUERY
 Exemples
• Exemple 2 : Ajax avec JQuery
 Fichier 1 : charge.js du code Jquery

function resultatAjax(texte, etat) {

// traitement de la fin de l'echange via Ajax
// avec un message dans l'element #resultat
$('#resultat').append('<p>R&eacute;sultat : ' + etat + '</p>’);
try {
$('#contenu').text(texte);
} catch(erreur) { // cas de Internet explorer
$('#contenu').html(texte);
}
}

ASSALE Adjé Louis AJAX & JQuery 55

 JQUERY
 Exemples
• Exemple 2 : Ajax avec JQuery
 Fichier 1 : charge.js du code Jquery

function charger(adresse) {
// chargement du texte issu de adresse dans l'element #contenu
// avec des messages dans l'element #resultat
$('#resultat').html('<p>Chargement de <strong>' + adresse
+ '</strong></p>’);
$.get(adresse, null, resultatAjax);
}

ASSALE Adjé Louis AJAX & JQuery 56

 JQUERY
 Exemples
• Exemple 2 : Ajax avec JQuery
 Fichier 2 : ajax-jquery.html du code HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Essai avec Ajax et jQuery</title>
<style type="text/css"><!-- #contenu, #resultat { border: gray solid thin; padding:
0.5em; margin: 0.5em 0; }--></style>
</head>
<body>
<h1>Essai avec Ajax et jQuery</h1><hr />
<form action="" id="f">
<p>Fichier
<input type="file" name="zfichier" id="zfichier" size="80" />
<input type="button" value="Charger" id="boutonfichier" /></p>
<p>URL 57
 JQUERY
 Exemples
• Exemple 2 : Ajax avec JQuery
 Fichier 2 : ajax-jquery.html du code HTML

<input type="text" name="zurl" id="zurl" size="90" value="" />

<input type="button" value="Charger" id="boutonurl" /></p>
</form>
<div id="resultat"></div>
<div><pre id="contenu"></pre></div>
<hr />
<address>Exemple adapté 2018</address>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="charge.js"></script>
</body>
</html>

ASSALE Adjé Louis AJAX & JQuery 58