JSON (JavaScript Object Notation) est un format d'échange de données léger basé sur un sous-ensemble d'ECMAScript. Il utilise un format texte indépendant des langaegs de programmation, avec des conventions similaires à celles des lanagges de la famille C, facilitant ainsi son adoption dans divers environnements. Ce format est conçu pour être facile à lire et à écrire pour les humains, tout en étant simple à analyser et à générer par les machines, ce qui optimise les performances des transferts réseau.
En essence, JSON repose sur deux structures : les objets et les tableaux. Un objet est représenté par des accolades "{}" et contient des paires clé-valeur sous la forme {clé: valeur, ...}, où les clés sont des propriétés et les valeurs peuvent être des types tels que des nombres, des chaînes, des tableaux ou d'autres objets. Un tableau est délimité par des crochets "[]" et stocke une séquence ordonnée d'éléments, accessibles par index, avec des types de valeurs similaires à ceux des objets.
Pour implémenter ce transfert de données avec Ajax en utilisant JSON, il faut d'abord ajouter la bibliothèque json.jar au projet.
Transfert d'un objet unique
Création d'un Servlet pour envoyer un objet JSON :
package com.example.web;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.json.JSONObject;
@WebServlet("/DataServlet")
public class DataServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public DataServlet() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
Person person = new Person();
person.setNom("Alice");
person.setAge(30);
person.setRole("Développeuse");
JSONObject personObject = new JSONObject();
personObject.put("nom", person.getNom());
personObject.put("age", person.getAge());
personObject.put("role", person.getRole());
JSONObject wrapper = new JSONObject();
wrapper.put("donnees", personObject);
response.getWriter().append(wrapper.toString());
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
Intégration côté client avec jQuery et Ajax :
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Exemple Ajax JSON</title>
<script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#charger").click(function(){
$.ajax({
url: "DataServlet",
data: {},
type: "POST",
dataType: "JSON",
success: function(reponse){
var info = reponse.donnees;
$("#resultat").append("<li>Nom: " + info.nom + "</li>");
$("#resultat").append("<li>Age: " + info.age + "</li>");
$("#resultat").append("<li>Role: " + info.role + "</li>");
}
});
});
});
</script>
</head>
<body>
<button id="charger">Charger les données</button>
<ul id="resultat"></ul>
</body>
</html>
Transfert d'une collection ou d'un tableau
Servlet pour envoyer une liste d'objets sous forme de tableau JSON :
package com.example.web;
import java.io.IOException;
import java.util.List;
import java.util.ArrayList;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.json.JSONArray;
import org.json.JSONObject;
@WebServlet("/ListServlet")
public class ListServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public ListServlet() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
List<Person> liste = new ArrayList<>();
liste.add(new Person("Bob", 25, "Designer"));
liste.add(new Person("Claire", 28, "Analyste"));
liste.add(new Person("David", 35, "Manager"));
JSONArray tableau = new JSONArray();
for (Person p : liste) {
JSONObject obj = new JSONObject();
obj.put("nom", p.getNom());
obj.put("age", p.getAge());
obj.put("role", p.getRole());
tableau.put(obj);
}
response.getWriter().append(tableau.toString());
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
Page JSP pour afficher les données du tableau :
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Liste avec Ajax</title>
<script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#afficher").click(function(){
$.ajax({
url: "ListServlet",
data: {},
type: "POST",
dataType: "JSON",
success: function(donnees){
var htmlContent = "";
for (var index = 0; index < donnees.length; index++) {
var element = donnees[index];
htmlContent += "<tr><td>" + element.nom + "</td>";
htmlContent += "<td>" + element.age + "</td>";
htmlContent += "<td>" + element.role + "</td></tr>";
}
$("#tableau").append(htmlContent);
}
});
});
});
</script>
</head>
<body>
<button id="afficher">Afficher la liste</button>
<table id="tableau" border="1" width="100%">
<thead><tr><th>Nom</th><th>Age</th><th>Role</th></tr></thead>
</table>
</body>
</html>