AJAX : Asynchronous JavaScript and XML

Achref El Mouelhi

Docteur de l’université d’Aix-Marseille

Chercheur en Programmation par contrainte (IA)
Ingénieur en Génie logiciel

elmouelhi.achref@gmail.com

Juillet 2018, Aix-en-Provence 1 / 35

 Plan

1 Introduction

2 AJAX avec JavaScript

Solution sans les promesses
Solution avec les promesses

3 AJAX et jQuery

Juillet 2018, Aix-en-Provence 2 / 35

 Introduction

Asynchronous JavaScript and XML

Définition et caractéristiques

a été inventé par Jesse James Garrett en 2005

n’est pas un langage de programmation, mais plutôt une
technologie
utilise l’objet non standard XMLHttpRequest pour échanger avec
des scripts situés coté serveur
permet d’échanger des informations sous format :
Textuel
XML
HTML
JSON

Juillet 2018, Aix-en-Provence 3 / 35

 Introduction

Asynchronous JavaScript and XML

Avantages

faire des requêtes vers le serveur d’une façon discrète : effectue

la requête de façon asynchrone (en arrière plan de la page) :
sans perturber le flux normal de celle-ci
sans avoir à recharger la page

analyser et travailler avec des documents de plusieurs formats

XML, JSON...

Juillet 2018, Aix-en-Provence 4 / 35

 Introduction

Asynchronous JavaScript and XML

Avantages

faire des requêtes vers le serveur d’une façon discrète : effectue

la requête de façon asynchrone (en arrière plan de la page) :
sans perturber le flux normal de celle-ci
sans avoir à recharger la page

analyser et travailler avec des documents de plusieurs formats

XML, JSON...

Initialement, XML du XMLHttpRequest ou X d’AJAX désignent le

format d’échange mais de nos jours on s’oriente plutôt vers le format
JavaScript Object Notation (JSON).

Juillet 2018, Aix-en-Provence 4 / 35

 Introduction

AJAX et jQuery

jQuery

a simplifié l’écriture d’AJAX

plus besoin de XMLHttpRequest et ses problèmes

d’incompatibilité (entre navigateurs) ou de sa complexité
en utilisant $.ajax() ou load()

Juillet 2018, Aix-en-Provence 5 / 35

 AJAX avec JavaScript Solution sans les promesses

Comment ça marche

Étape à suivre

Créer une requête

Préciser ce qu’on fait à la réception d’une réponse
Lancer la requête
ouvrir
envoyer

Juillet 2018, Aix-en-Provence 6 / 35

 AJAX avec JavaScript Solution sans les promesses

Création d’une requête HTTP

Un peu d’histoire
Les navigateurs Internet Explorer dont la version est < 7 utilisent
ActiveX, développé par Microsoft, pour échanger avec le
serveur
première version : var xhr = new
ActiveXObject("Microsoft.XMLHTTP");
deuxième version : var xhr = new
ActiveXObject("Msxml2.XMLHTTP");

Les autres navigateurs (Safari, Firefox, Chrome...) utilisent :

var xhr = new XMLHttpRequest();

Juillet 2018, Aix-en-Provence 7 / 35

 AJAX avec JavaScript Solution sans les promesses

Création d’une requête HTTP

Définir un objet compatible avec (tous) les navigateurs
function getXMLHttpRequest() {
var xhr = null;
if (window.XMLHttpRequest || window.ActiveXObject) {
if (window.ActiveXObject) {
try {
xhr = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e) {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
}
else {
xhr = new XMLHttpRequest();
}
}
else {
alert("Navigateur incompatible avec XMLHTTPRequest");
return null;
}
return xhr;
}

Juillet 2018, Aix-en-Provence 8 / 35

 AJAX avec JavaScript Solution sans les promesses

Traitement de la réponse de serveur

Préciser au serveur le nom de fonction à exécuter à la réception
d’une réponse
// Create a request
xhr = getXMLHttpRequest();
// Specify the JavaScript function without () nor
parameters
xhr.onreadystatechange = nomFonction;
ou bien aussi
// Create a request
xhr = getXMLHttpRequest();
// Specify the JavaScript function without () nor
parameters
xhr.onreadystatechange = function() {
// instructions of anonymous function
};
Juillet 2018, Aix-en-Provence 9 / 35
 AJAX avec JavaScript Solution sans les promesses

Lancement d’une requête HTTP : deux étapes

Première étape : ouverture

xhr.open(’method’, ’URL’, bool);

Étapes à suivre
method : nom de la méthode : GET, POST...
URL : URL de la page demandée
page statique : XML, txt...
page dynamique : PHP, JSP, ASP...
bool : TRUE pour dire que c’est asynchrone (l’exécution de la
fonction JavaScript se poursuivra en attendant l’arrivée de la
réponse du serveur)

Juillet 2018, Aix-en-Provence 10 / 35

 AJAX avec JavaScript Solution sans les promesses

Lancement d’une requête HTTP : deux étapes

Exemple :
xhr.open("GET", "page.php", true);

ou en utilisant l’url d’une servlet java

xhr.open("GET", "SearchPersonne", true);

Juillet 2018, Aix-en-Provence 11 / 35

 AJAX avec JavaScript Solution sans les promesses

Lancement d’une requête HTTP : deux étapes

Cas particulier de la méthode POST : il faut changer l’entête de la

requête avant d’envoyer des données issues d’un formulaire
xhr.open("POST", "page.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded
");
xhr.send();

Juillet 2018, Aix-en-Provence 12 / 35

 AJAX avec JavaScript Solution sans les promesses

Lancement d’une requête HTTP : deux étapes

Deuxième étape : envoi

xhr.send();

Juillet 2018, Aix-en-Provence 13 / 35

 AJAX avec JavaScript Solution sans les promesses

L’envoi des paramètres

Avec POST :
xhr.open("POST", "page.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded
");
xhr.send("nomVar1=val1&...&nomVarN=valN");

Avec GET :
xhr.open("GET", "page.php?nomVar1=val1&...&nomVarN=valN", true);
xhr.send();

Protéger les caractères spéciaux avant envoi :

var var1 = encodeURIComponent("variable contenant espaces");
xhr.open("GET", "page.php?var1=" + var1, true);
xhr.send();

Juillet 2018, Aix-en-Provence 14 / 35

 AJAX avec JavaScript Solution sans les promesses

Gestion de la réponse du serveur

À la réception d’une réponse, on appelle une fonction pour la
traiter
hrx.onreadystatechange = nomFonction;

Dans la fonction JavaScript, Il faut vérifier l’état de la requête :

if (httpRequest.readyState == value){...}

Valeur de readyState
0 : requête non initialisée
1 : requête initialisée mais pas encore envoyée
2 : requête reçue
3 : requête encours de traitement
4 : traitement de requête terminé et réponse prête
Juillet 2018, Aix-en-Provence 15 / 35
 AJAX avec JavaScript Solution sans les promesses

Gestion de la réponse du serveur

Il faut aussi vérifier le code d’état de la réponse HTTP du serveur :

if (httpRequest.status == value){...}

Plusieurs valeurs possibles de status

200 : OK
400 : Bad Request
401 : Unauthorized
404 : not found
500 : Internal Server Error
la liste complète :
https://www.w3.org/Protocols/rfc2616/rfc2616-sec10.

Juillet 2018, Aix-en-Provence 16 / 35

 AJAX avec JavaScript Solution sans les promesses

Récupération de la réponse du serveur

Les méthodes
responseText : pour récupérer les données d’une réponse sous
forme de chaı̂ne de caractères
responseXML : pour récupérer les données d’une réponse sous
forme d’un objet XML que nous pouvons parcourir à l’aide des
fonctions DOM de JavaScript (getElementById()...)

Juillet 2018, Aix-en-Provence 17 / 35

 AJAX avec JavaScript Solution sans les promesses

Exemple
Considérons la servlet PersonneServlet
public class PersonneServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public PersonneServlet() {
super();
}

protected void doGet(HttpServletRequest request,

HttpServletResponse response) throws ServletException, IOException
{
this.getServletContext().getRequestDispatcher("/WEB-INF/Vue.jsp
").forward(request, response);
}

protected void doPost(HttpServletRequest request,

HttpServletResponse response) throws ServletException, IOException
{
doGet(request, response);
}
}

Juillet 2018, Aix-en-Provence 18 / 35

 AJAX avec JavaScript Solution sans les promesses

Contenu du formulaire de la page Vue.jsp

<form action="AddPersonne" method="post">
<div>
<label for="nom">Nom</label>
<input type ="text" id="nom" name="nom" onkeyup= "valider()"/>
<span id="validationMessage"></span>
</div>
<div>
<label for="prenom">Prenom</label>
<input type ="text" id="prenom" name="prenom"/>
</div>
<button type="submit" >Ajouter</button>
</form>

Juillet 2018, Aix-en-Provence 19 / 35

 AJAX avec JavaScript Solution sans les promesses

Contenu du formulaire de la page Vue.jsp

<form action="AddPersonne" method="post">
<div>
<label for="nom">Nom</label>
<input type ="text" id="nom" name="nom" onkeyup= "valider()"/>
<span id="validationMessage"></span>
</div>
<div>
<label for="prenom">Prenom</label>
<input type ="text" id="prenom" name="prenom"/>
</div>
<button type="submit" >Ajouter</button>
</form>

La fonction valider()
requete =""; // variable globale
function valider() {
var nom = document.getElementById("nom");
var url = "SearchPersonne?nom=" + escape(nom.value);
requete = getXMLHttpRequest();
requete.open("GET", url, true);
requete.onreadystatechange = displayMessage;
requete.send();
}

Juillet 2018, Aix-en-Provence 19 / 35

 AJAX avec JavaScript Solution sans les promesses

Exemple
La fonction displayMessage()

function displayMessage() {
var message = "";
if ((requete.readyState == 4) && (requete.status == 200)) {
var messageTag = requete.responseXML.getElementsByTagName("message"
)[0];
message = messageTag.childNodes[0].nodeValue;
mdiv = document.getElementById("validationMessage");
mdiv.innerHTML = message;
}
}

Juillet 2018, Aix-en-Provence 20 / 35

 AJAX avec JavaScript Solution sans les promesses

Exemple
La fonction displayMessage()

function displayMessage() {
var message = "";
if ((requete.readyState == 4) && (requete.status == 200)) {
var messageTag = requete.responseXML.getElementsByTagName("message"
)[0];
message = messageTag.childNodes[0].nodeValue;
mdiv = document.getElementById("validationMessage");
mdiv.innerHTML = message;
}
}

Il faut

créer un nouveau dossier js dans WebContent (ou webapp pour les projets maven)
créer un fichier script.js dans js
faire référence à ce fichier dans la page JSP avec la balise
<script src=js/script.js></script>
placer les 3 fonctions JavaScript (valider, displayMessage et getXMLHttpRequest)
dans script.js

Juillet 2018, Aix-en-Provence 20 / 35

 AJAX avec JavaScript Solution sans les promesses

Exemple
La méthode doGet() de la servlet SearchPersonneServlet avec l’url
/SearchPersonne
protected void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException,
IOException {
String resultat = "valide";
String nom = request.getParameter("nom");
PersonneDaoImpl daoImpl = new PersonneDaoImpl();
boolean result = daoImpl.findByNom(nom);
response.setContentType("text/xml");
if (result) {
resultat = "invalide";
}
response.getWriter().write("<message>"+resultat+"</
message>");
}

Juillet 2018, Aix-en-Provence 21 / 35

 AJAX avec JavaScript Solution sans les promesses

Exemple
La méthode findByNom() du DAO
public boolean findByNom(String nom) {
Connection c = MyConnection.getConnection();
if (c !=null) {
try {
PreparedStatement ps = c.prepareStatement("select * from
personne where nom = ? ;");
ps.setString(1, nom);
ResultSet r =ps.executeQuery();
if (r.next())
return true;
else return false;
} catch (SQLException e) {
e.printStackTrace();
return false;
}
}
return false;
}

Juillet 2018, Aix-en-Provence 22 / 35

 AJAX avec JavaScript Solution avec les promesses

Exemple
La fonction valider()

function valider(){
var nom = document.getElementById("nom");
var url = "SearchPersonne?nom=" + escape(nom.value);
ajax(url)
.then((res) => displayMessage(res))
.catch((err) => console.log("error"))
}

La fonction ajax()

function ajax(url) {
return new Promise(function(resolve, reject) {
let xhr = getXMLHttpRequest();
xhr.open("GET", url, false);
xhr.send();
if ((xhr.readyState == 4) && (xhr.status == 200))
resolve(xhr);
else
reject(xhr);
});
}

Juillet 2018, Aix-en-Provence 23 / 35

 AJAX avec JavaScript Solution avec les promesses

Exemple

La fonction displayMessage()
function displayMessage(res) {
var message = "";
var messageTag = res.responseXML.
getElementsByTagName("message")[0];
message = messageTag.childNodes[0].nodeValue;
mdiv = document.getElementById("validationMessage"
);
mdiv.innerHTML = message;
}

Juillet 2018, Aix-en-Provence 24 / 35

 AJAX et jQuery

On écrit moins et c’est plus facile

Deux manières différentes

la fonction $.ajax()
la méthode load()

Juillet 2018, Aix-en-Provence 25 / 35

 AJAX et jQuery

La fonction $.ajax()
Syntaxe :

$.ajax({param1:value1,...,paramN:valueN})

Les paramètres
async : Par défaut true pour dire asynchrone, sinon false
type : Par défaut GET, sinon POST
url : Par défaut : la page en cours, sinon la page ciblée
complete : Exécute une fonction lorsque la requête est terminée
error : Fonction à exécuter en cas d’erreur
beforeSend : Fonction à exécuter avant l’envoi de la requête
success : Fonction à exécuter en cas de réussite de la requête
contentType : Par défaut : application/x-www-form-urlencoded;
charset=UTF-8
username, password, data (les paramètres), dataType (html,
xml), timeout, ...

Juillet 2018, Aix-en-Provence 26 / 35

 AJAX et jQuery

La fonction $.ajax()

L’exemple précédent avec jQuery (une réponse de type html)

$(’#nom’).keyup(function(e){
$.ajax({
type: "GET",
url: "SearchPersonne",
data : {’nom’ : $("#nom").val()},
dataType: "html",
success: function(response) {
$("#validationMessage").html(response);
}
});
});

Juillet 2018, Aix-en-Provence 27 / 35

 AJAX et jQuery

La fonction $.ajax()
N’oublions pas de mettre à jour Vue.js
...
<script src="https://code.jquery.com/jquery
-3.3.1.js"></script>
<script src="js/script.js"></script>
</body>

Il faut aussi modifier le type de réponse de la servlet

response.setContentType("text/html");

et aussi supprimer l’évènement onkeyup de la zone texte nom

<input type ="text" id="nom" name="nom"/>

Juillet 2018, Aix-en-Provence 28 / 35

 AJAX et jQuery

Simplifier $.ajax() ? !

Deux méthodes raccourcies de $.ajax()

$.get()
$.post()
Elles font appel à $.ajax() mais de façon simplifiée

Juillet 2018, Aix-en-Provence 29 / 35

 AJAX et jQuery

Simplifier $.ajax() ? !

Syntaxe :
// Attention a l’ordre des parametres
$.get(
{
param1 : value1, // data
...
paramN : valueN
},
nomFonction, // Fonction de retour
’text’ // Format des donnees de retour
);
function nomFonction(texteRetour){
// Traiter le retour de l’appel AJAX.
}

Juillet 2018, Aix-en-Provence 30 / 35

 AJAX et jQuery

Simplifier $.ajax() ? !

Exemple :
$(’#nom’).keyup(function(){
$.get(
’SearchPersonne’,
{’nom’ : $("#nom").val()},
displayMessage,
’html’
);
function displayMessage (res) {
$("#validationMessage").html(res);
}
});

Juillet 2018, Aix-en-Provence 31 / 35

 AJAX et jQuery

Les événements AJAX

Surveiller les requêtes AJAX
ajaxStart() : précise la fonction à exécuter lorsqu’une
première requête AJAX commence
ajaxStop() : précise la fonction à exécuter lorsque toutes les
requêtes AJAX sont terminées
ajaxComplete() : précise la fonction à exécuter lorsqu’une
requête AJAX est terminée
ajaxSuccess() : précise la fonction à exécuter lorsqu’une
requête AJAX s’est terminée avec succès
ajaxSend() : précise la fonction à exécuter avant qu’une
requête AJAX soit envoyée
ajaxError() : précise la fonction à exécuter lorsqu’une requête
AJAX s’est terminée avec erreur
...
Juillet 2018, Aix-en-Provence 32 / 35
 AJAX et jQuery

Les événements AJAX

Exemple :
// afficher une image de chargement initialement
cachee
$(document).ajaxStart(function() {
$( "#loading" ).show();
});

Juillet 2018, Aix-en-Provence 33 / 35

 AJAX et jQuery

La méthode .load()
Syntaxe :
$(selecteur).load(url,data,function(reponse,status,
xhr));

Les paramètres

url : La page ciblée (obligatoire)

data : Les paramètres à envoyer
function(response,status,xhr) : Fonction à exécuter
quand la méthode est terminée
response : contient les données résultant de la demande
status : contient l’état de la demande (’success’, ’error’...)
xhr : contient l’objet XMLHttpRequest

Juillet 2018, Aix-en-Provence 34 / 35

 AJAX et jQuery

La méthode .load()
Exemple 1 :
$(’#nom’).keyup(function(){
var param = $("#nom").val();
$(’#validationMessage’).load(’SearchPersonne’, {
nom:param});
});

Exemple 2 :
// charger la page.jsp en entier dans mon #container
$("#container").load("page.jsp");

Exemple 3 :
// charger l’element avec id partie1 de la page.jsp
dans mon #container
$("#container").load("page.jsp #partie1");

Juillet 2018, Aix-en-Provence 35 / 35