Dart - Le nouveau langage du Web
Les ressources HTTP via HttpRequest
Dart permet l'envoi de requête HTTP au serveur, tout comme JavaScript, avec XMLHTTPRequest, par la classe HttpRequest. Elle permet de charger des données venant du serveur, au format JSON par exemple, mais aussi d'envoyer des données pour l'enregistrement ou encore le traitement par le serveur.
Principe de XMLHTTPRequest
L'intérêt de ce procédé est de dialoguer avec un serveur sans avoir à recharger la page HTML affichée, comme le ferait une requête HTTP classique envoyée par le navigateur après que l'utilisateur ait cliqué sur un lien. Cela représente une économie de temps de chargement sur le navigateur, l'utilisateur attend moins longtemps, bien souvent il ne s'apperçoit pas qu'une requête a été envoyée. On appelle ce type d'échange "requête asynchrone" car le navigateur ne va pas bloquer l'utilisateur de la page en attendant la réponse, une fonction dite "callback" est invoquée dés que le serveur a répondu. Elles s'opposent aux requêtes synchrones pour lesquelles le navigateur doit avoir reçu la réponse pour que la page soit utilisable. On notera que le nom "XML" n'a pas vraiment de sens car le format de ces requêtes n'est pas obligatoirement le XML.
HttpRequest de Dart
Comme vous l'aurez compris, la classe HttpRequest permet d'envoyer des requêtes HTTP au serveur. Nous allons illustrer cela par un exemple de code Dart. Nous allons ajouter une action à un bouton, lors d'un click sur ce dernier, une requête est envoyée au serveur afin d'obtenir un fichier de données au format JSON. Une fois la réponse obtenue, nous affichons le résultat dans notre page HTML.
Commençons par la page HTML :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Appli</title>
<link rel="stylesheet" href="appli.css">
</head>
<body>
<h1>HttpRequest</h1>
<input type="button" id="bouton" value="Chargement"/>
<ul></ul>
<script type="application/dart" src="appli.dart"></script>
<script src="packages/browser/dart.js"></script>
</body>
</html>
On obtient cet aperçu :
Dans notre script Dart, nous ajoutons un événement "onClick" sur notre bouton "Chargement" en manipulant le DOM. Lors d'un click, une fonction est appelée pour lancer la requête HTTP de demande du fichier JSON. Dans le code suivant, nous utilisons la classe HttpRequest par sa méthode request qui prend en paramètre le nom du fichier voulu. Ensuite, nous précisons la fonction de callback à invoquer en cas de succès, avec then, ainsi que la fonction à utiliser en cas d'erreur avec catchError. Nous utilisons la librairie dart:json afin de formater les données que nous recevons et les afficher correctement, nous utilisons simplement la fonction "parse" qui à partir d'un JSON crée une liste.
import 'dart:html';
import 'dart:json';
void main() {
query("#bouton").onClick.listen((e) {
HttpRequest.request("data.json")
.then(processRequest)
.catchError(handleError);
});
}
processRequest(HttpRequest request) {
// Récupération de l'élément UL
var ul = query("ul");
// Traitement de la réponse
parse(request.responseText).forEach(
(person) {
// Création d'un nouveau LI
LIElement li = new LIElement();
li.appendText("${person['firstName']} ${person['name']}");
// Ajout du LI au UL
ul.append(li);
}
);
}
handleError(error) {
print('Erreur dans le chargement');
print(error.toString());
}
Après avoir appuyé sur le bouton chargement, nous obtenons le résultat suivant dans la page HTML, le contenu du fichier JSON, une liste de prénoms et noms :
Cette opération a donc été effectuée sans un rechargement complet de la page. Nous avons d'abord récupéré les données par l'utilisation d'une HttpRequest, puis nous avons afficher le résultat grâce à une manipulation du DOM. La librairie HTML est donc un outil simple à prendre en main et très puissant.