Communication AJAX

Requêtes à un API REST

Enfin le moment tant attendu : la communication client-serveur. Vous êtes maintenant libérés de la prison du navigateur et pourrez lancer des requêtes vers un API REST.

Étape d’un scénario idéal (sans erreur) d’un échange client-seveur :

  • Le client prépare la requête GET.
  • Le client lance la requête.
  • Le serveur reçoit et traite la demande.
  • Le serveur retourne la réponse au client.
  • Le client traite les données reçues.
  • La communication se fait grâce au protocole HTTP.

​Définitions

Ajax

L’architecture informatique Ajax (acronyme d’Asynchronous JavaScript and XML) permet de construire des applications Web et des sites web dynamiques interactifs sur le poste client en se servant de différentes technologies ajoutées aux navigateurs web entre 1995 et 2005.

Ajax combine JavaScript, les CSS, JSON, XML, le DOM et le XMLHttpRequest afin d’améliorer maniabilité et confort d’utilisation des applications internet riches. – Wikipedia

XMLHttpRequest (XHR)

XMLHttpRequest est un objet du navigateur accessible en JavaScript qui permet d’obtenir des données au format XML, JSON, mais aussi HTML, ou même un simple texte à l’aide de requêtes HTTP. – Wikipedia

​Ajax avec JavaScript

La façon traditionnelle de lancer des requêtes Ajax à un serveur comporte l’utilisation de l’objet JavaScript nommé XMLHttpRequest (XHR) et plusieurs lignes de codes.

Note

Il est à noter que cet objet peut réagir de façon différente en fonction des navigateurs. De plus, Internet Explorer 5, 5.5 et 6 n’offraient pas d’implémentation pour l’objet XMLHttpRequest, ce qui complexifie le code à produire.

Exemple de code JavaScript pour supporter IE 5-6

Maintenant, voyons l’utilisation de l’objet  XMLHttpRequest

Ajax avec jQuery

Quelques années plus tard, jQuery est venu à la rescousse et a permis de simplifier les appels Ajax.

Exemple de code avec jQuery

Ajax avec AngularJS

Avec AgularJS, plusieurs options s’offrent à nous pour communiquer avec le serveur. Les sections suivantes présentent un aperçu de 3 options. Pour débuter, il est proposé d’utiliser $http.

$http

Le service $http est un service de bas niveau fourni par AngularJS. Il facilite la communication client-serveur. Afin de créer vos tests unitaires, l’objet mock $httpBackend sera utilisé.

Exemple de code pour une requête AJAX GET

Exemple complet d’un appel AJAX GET avec paramètre

Les propriété de l’objet response

  • data – {string|Object} – Les données. Le corps de la réponse transformée par les fonctions de transformation.
  • status – {number} – Code de statut HTTP de la réponse.
  • headers – {function([headerName])} – En-tête de la requête.
  • config – {Object} – L’objet config utilisé pour générer la requête.
  • statusText – {string} – Titre du statut HTTP de la réponse.

Autres méthodes de $http

  • $http.get
  • $http.head
  • $http.post
  • $http.put
  • $http.delete
  • $http.jsonp
  • $http.patch

Référence officielle pour $http

Pour utiliser $http dans votre contrôleur

  1. Injecter la dépendance $http dans votre contrôleur.
  2. Configurer votre requête et la lancer avec $http.get();
  3. Récupérer les données fournies par le callback success. Les données sont disponibles dans response.data.
  4. Associer ces données à une variable de votre contrôleur ou peut-être à votre $scope.mesDonnées.
  5. Tester le bon fonctionnement de votre code avec $httpBackend.

Afin d’améliorer l’expérience utilisateur, il serait intéressant d’afficher une barre de progrès ou une message indiquant que la requête AJAX a été lancée. Lorsque la réponse est reçue, on cache ce message. Par contre, si une erreur survient, pensez à afficher une notification à l’utilisateur.

$resource

$resource est un objet Factory qui crée un objet ressource vous permettant d’interagir avec un API RESTful. L’objet ressource retourné aura des méthodes de haut niveau qui simplifie la communication client-serveur. Vous n’aurez pas à utiliser le service $http de bas niveau.

Note

Vous devrez inclure ngResource à votre projet et l’injecter là où nécessaire.

 

Exemple GET et POST avec $resource

Installer ngResource

Ajouter la dépendances ngResource à votre module Angular

https://docs.angularjs.org/api/ngResource/service/$resource
https://docs.angularjs.org/api/ngResource

Restangular

Restangular est un projet AngularJS (non officiellement supporté par l’équipe AngularJS) qui simplifie les appels REST.

Cross-origin resource sharing – CORS

CORS est un mécanisme de sécurité qui bloque certaines requêtes non autorisées à votre serveur Web. Si vous tentez de lancer une requête AJAX du serveur a.com vers le serveur b.com, il se pourrait qu’une erreur vous soit retournée si le serveur b.com n’a pas configuré ses paramètres CORS pour vous permettre l’accès à cette ressource.

Exemple de message d’erreur

No ‘Access-Control-Allow-Origin‘ header is present on the requested resource.
The response had HTTP status code 400.

Lisez sur les particularités de Cross-origin resource sharing – CORS.

Conclusion

Dans cet article, vous avez pu vous familiariser avec différentes options pour faciliter la communication client-serveur asynchrone grâce à AJAX. Nous avons vu que AngularJS offre de belles options ($http, $resource) qui simplifient le travail du développeur. De plus, ces options sont testables grâce à $httpBackend.
Par contre, seules les requêtes GET ont étés survolées. Afin de créer une application qui supporte le CRUD (Create Read Update Delete) il faudra étudier comment envoyer des données au serveur.

Finalement, dans le cas du Ajax, c’est toujours le client qui initie la communication. Le serveur peux aussi initier la communication, on parle alors de notification PUSH. Ce sont les WebSockets qui permettent cette communication bidirectionnelle.

Et la communication temps réelle bidirectionnelle?

Oui, ça existe depuis longtemps grâce aux hacks de plusieurs développeurs.

On pense aux solutions suivantes :

Aujourd’hui, vous pouvez compter sur les WebSockets. Cette norme du HTML5 permet au serveur d’envoyer des données au client initie la demande.

Références

Comments

comments

0 réponses

Répondre

Se joindre à la discussion ?
Vous êtes libre de contribuer !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.