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

/*
   Provide the XMLHttpRequest constructor for Internet Explorer 5.x-6.x:
   Other browsers (including Internet Explorer 7.x-9.x) do not redefine
   XMLHttpRequest if it already exists.
*/
if (typeof XMLHttpRequest === "undefined") {
  XMLHttpRequest = function () {
    try { return new ActiveXObject("Msxml2.XMLHTTP.6.0"); }
    catch (e) {}
    try { return new ActiveXObject("Msxml2.XMLHTTP.3.0"); }
    catch (e) {}
    try { return new ActiveXObject("Microsoft.XMLHTTP"); }
    catch (e) {}
    throw new Error("This browser does not support XMLHttpRequest.");
  };
}

Provide the XMLHttpRequest constructor for Internet Explorer 5.x-6.x:

Other browsers (including Internet Explorer 7.x-9.x) do not redefine

XMLHttpRequest if it already exists.

if (typeof XMLHttpRequest === "undefined") {

XMLHttpRequest = function () {

try { return new ActiveXObject("Msxml2.XMLHTTP.6.0"); }

catch (e) {}

try { return new ActiveXObject("Msxml2.XMLHTTP.3.0"); }

catch (e) {}

try { return new ActiveXObject("Microsoft.XMLHTTP"); }

catch (e) {}

throw new Error("This browser does not support XMLHttpRequest.");

};

}

Maintenant, voyons l’utilisation de l’objet XMLHttpRequest

<script>
var xmlhttp = new XMLHttpRequest();
var url = "tutorials.json";

xmlhttp.onreadystatechange = function() {
  if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
    var myArr = JSON.parse(xmlhttp.responseText);
    myFunction(myArr);
  }
};
xmlhttp.open("GET", url, true);
xmlhttp.send();

function myFunction(arr) {
   var out = "";
   var i;
   for(i = 0; i < arr.length; i++) {
     out += '<a href="' + arr[i].url + '">' +
     arr[i].display + '</a><br>';
   }
   document.getElementById("id01").innerHTML = out;
}
</script>

var xmlhttp = new XMLHttpRequest();

var url = "tutorials.json";

xmlhttp.onreadystatechange = function() {

if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

var myArr = JSON.parse(xmlhttp.responseText);

myFunction(myArr);

}

};

xmlhttp.open("GET", url, true);

xmlhttp.send();

function myFunction(arr) {

var out = "";

var i;

for(i = 0; i < arr.length; i++) {

out += '<a href="' + arr[i].url + '">' +

arr[i].display + '</a><br>';

}

document.getElementById("id01").innerHTML = out;

}

</script>

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({
      headers: { "Accept": "application/json"},
      type: 'GET',
      url: 'http://api.serveur.com',
      crossDomain: true,
      success: function(data, textStatus, request){
        console.log(data);
      }
});

$.ajax({

headers: { "Accept": "application/json"},

type: 'GET',

url: 'http://api.serveur.com',

crossDomain: true,

success: function(data, textStatus, request){

console.log(data);

}

});

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

$http.get('/votreUrl', config).then(successCallback, errorCallback);

1	$http.get('/votreUrl', config).then(successCallback, errorCallback);

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

$http.get('/votreUrl', {params : {id : '5'}}).then((
   function successCallback(response) {
     // Ce bloc sera exécuté lorsque la réponse sera reçue.
     // Asynchrone
     console.log(response);
     console.log(data);
}, function errorCallback(response) {
     // Ce bloc sera exécuté lorsqu'une erreur est détectée.
     // Asynchrone
     console.log(response);
}););

$http.get('/votreUrl', {params : {id : '5'}}).then((

function successCallback(response) {

// Ce bloc sera exécuté lorsque la réponse sera reçue.

// Asynchrone

console.log(response);

console.log(data);

}, function errorCallback(response) {

// Ce bloc sera exécuté lorsqu'une erreur est détectée.

// Asynchrone

console.log(response);

}););

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

Injecter la dépendance $http dans votre contrôleur.
Configurer votre requête et la lancer avec $http.get();
Récupérer les données fournies par le callback success. Les données sont disponibles dans response.data.
Associer ces données à une variable de votre contrôleur ou peut-être à votre $scope.mesDonnées.
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

var User = $resource('/user/:userId', {userId:'@id'});
User.get({userId:123}, function(user) {
   user.abc = true;
   // $ prefix. This allows you to easily support 
   // CRUD operations (create, read, update, delete)
   user.$save();
});

var User = $resource('/user/:userId', {userId:'@id'});

User.get({userId:123}, function(user) {

user.abc = true;

// $ prefix. This allows you to easily support

// CRUD operations (create, read, update, delete)

user.$save();

});

Installer ngResource

$ bower install angular-resource --save

1	$ bower install angular-resource --save

Ajouter la dépendances ngResource à votre module Angular

angular.module('monAppAngular', [
    'ngCookies',
    'ngResource',
    'ui.router',
])

angular.module('monAppAngular', [

'ngCookies',

'ngResource',

'ui.router',

])

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 :

Polling,
Long-polling,
Flash XMLSocket relays,
Comet …

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.

Support des WebSockets par navigateur sur Can I Use.
Lien vers une excellente librairie qui simplifie l’utilisation des WebSockets nommée Socket.IO.

Communication AJAX

Requêtes à un API REST

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

Définitions

Ajax

XMLHttpRequest (XHR)

Ajax avec JavaScript

Exemple de code JavaScript pour supporter IE 5-6

Maintenant, voyons l’utilisation de l’objet XMLHttpRequest

Ajax avec jQuery

Exemple de code avec jQuery

Ajax avec AngularJS

$http

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

Autres méthodes de $http

Pour utiliser $http dans votre contrôleur

$resource

Exemple GET et POST avec $resource

Installer ngResource

Ajouter la dépendances ngResource à votre module Angular

Restangular

Cross-origin resource sharing – CORS

Exemple de message d’erreur

Conclusion

Et la communication temps réelle bidirectionnelle?

Références

Facebook Comments

Laisser un commentaire

Laisser un commentaire Annuler la réponse

Publié dernièrement

Infolettre

Suivez-nous sur Facebook

Requêtes à un API REST

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

​Définitions

Ajax

XMLHttpRequest (XHR)

​Ajax avec JavaScript

Exemple de code JavaScript pour supporter IE 5-6

Maintenant, voyons l’utilisation de l’objet XMLHttpRequest

Ajax avec jQuery

Exemple de code avec jQuery

Ajax avec AngularJS

$http

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

Autres méthodes de $http

Pour utiliser $http dans votre contrôleur

$resource

Exemple GET et POST avec $resource

Installer ngResource

Ajouter la dépendances ngResource à votre module Angular

Restangular

Cross-origin resource sharing – CORS

Exemple de message d’erreur

Conclusion

Et la communication temps réelle bidirectionnelle?

Références

Facebook Comments

Vous aimerez peut-être aussi

Laisser un commentaire

Laisser un commentaire Annuler la réponse

Publié dernièrement

Infolettre

Suivez-nous sur Facebook

Étiquettes

Définitions

Ajax avec JavaScript