{"id":274,"date":"2015-02-04T15:38:27","date_gmt":"2015-02-04T14:38:27","guid":{"rendered":"http:\/\/lalloue.fr\/blog\/?p=274"},"modified":"2015-03-02T18:05:00","modified_gmt":"2015-03-02T17:05:00","slug":"afficher-un-loader-pendant-une-requete-ajax","status":"publish","type":"post","link":"http:\/\/lalloue.fr\/blog\/afficher-un-loader-pendant-une-requete-ajax\/","title":{"rendered":"Afficher un loader pendant une requ\u00eate Ajax"},"content":{"rendered":"

\"AngularJS-large\"<\/a><\/p>\n

Le probl\u00e8me avec les requ\u00eates Ajax c’est qu’on ne sait jamais vraiment quand on va recevoir la r\u00e9ponse.
\nEn principe c’est rapide mais pour le si peu que la connexion est lente, que le serveur rame un peu \u00e0 ce moment l\u00e0, ou pire qu’il est en maintenance, le temps de r\u00e9ponse peut passer de 1 secondes \u00e0 un temps ind\u00e9fini.<\/p>\n

Et pendant ce temps l’utilisateur ne sait pas ce qui se passe : d’o\u00f9 l\u2019int\u00e9r\u00eat d’int\u00e9grer un loader (ou mire de chargement) \u00e0 votre page pendant l\u2019ex\u00e9cution de votre requ\u00eate.
\nVoici un petit exemple pour le mettre en place :<\/p>\n

<\/p>\n

 <\/p>\n

Introduction :<\/h3>\n

Tout commence par l’envoi d’une requ\u00eate. Cela se fait via la m\u00e9thode $http<\/span><\/strong> d’AngularJs comme l’exemple ci-dessous :<\/p>\n

\r\napp.controller('MonController', ['$scope', '$http',\r\n               function($scope, $http) {\r\n\r\n\tvar url = 'MON_URL';\r\n\r\n\t$http.get(url).then(function success(response) {\r\n\t\t\/\/ Return result\r\n\t\treturn response.data.result;\r\n\t}, function error(reason) {\r\n\t\treturn false;\r\n\t});\r\n\r\n]);\r\n<\/pre>\n
Si la r\u00e9ponse est correcte on passe donc dans la m\u00e9thode “success”, <\/em>sinon, dans la m\u00e9thode “error”<\/em>.<\/p>\n
On veut donc maintenant lancer le loader avant que la requ\u00eate soit envoy\u00e9e, et cacher le loader une fois la r\u00e9ponse r\u00e9cup\u00e9r\u00e9e.<\/p>\n
 <\/p>\n
D\u00e9j\u00e0, comment on affiche le loader ?<\/h3>\n
Pour \u00e7a je vous conseille la petite librairie ‘spinner’ qui fonctionne tr\u00e8s bien (spinner.js<\/a>).
\nIl existe d’autres solutions mais celle-ci \u00e0 l’avantage d’\u00eatre l\u00e9g\u00e8re et de n’avoir pas n\u00e9cessairement besoin d’inclure JQuery pour l’utiliser.<\/p>\n
Pour l’utiliser vous avez une documentation au lien que je vous ai donn\u00e9 ci-dessus, mais vu que je suis d’humeur sympathique je vais vous faire un petit r\u00e9sum\u00e9 en fran\u00e7ais ici :<\/p>\n
Installation :<\/h5>\n
Il vous suffit de r\u00e9cup\u00e9rer le fichier “spin.js” et de l’ajouter \u00e0\u00a0votre projet.
\nPuis ensuite il sera n\u00e9cessaire de l’inclure dans votre page html tel que ci-dessous :<\/p>\n
\r\n<!doctype html>\r\n<html>\r\n<head>\r\n<script type="text\/javascript" src="spin.js"><\/script>\r\n\r\n<\/head>\r\n...\r\n<\/pre>\n
Si vous utilisez bower<\/em>, une petite ligne de commande et le tour sera jou\u00e9 :<\/p>\n
$ bower install spin.js --save<\/pre>\n
Utilisation :<\/h5>\n
Sur ma balise ‘body’ de index.html j’apelle une m\u00e9thode ‘onLoad()’<\/p>\n
\r\n<!doctype html>\r\n<html>\r\n\t<head>\r\n\t<\/head>\r\n\t<body onload="onLoad()">\r\n\t\t<!-- CONTENT -->\r\n\t\t<div ng-view><\/div>\r\n\r\n\t\t<!-- LOADING SPINNER -->\r\n\t\t<div id="loading-ws-bar"><\/div>\r\n\t\t<div id="loading-ws-background-page"><\/div>\r\n\t<\/body>\r\n...\r\n<\/pre>\n
que je d\u00e9finie dans mon ‘main.js<\/span>‘ :<\/p>\n
\r\nfunction onLoad() {\r\n\tloaderUtils.generateLoading('loading-ws-bar', ['#157199','#1B91C4']);\r\n}\r\n<\/pre>\n
Et il ne vous manque plus que la fameuse classe ‘loaderUtils<\/span>‘ pour finir d’int\u00e9grer votre magnifique spinner.
\nJe vous donne la classe enti\u00e8re parce que vous verrez qu’on va r\u00e9utiliser les m\u00e9thodes dans la suite :<\/p>\n
\r\n'use strict';\r\n\r\nfunction LoaderUtils() {\r\n}\r\n\r\n\/**\r\n * Generate the spin loader\r\n *\/\r\nLoaderUtils.prototype.generateLoading = function(domElementId, spinnerColor) {\r\n\r\n\tvar opts = {\r\n\t\tlines : 12, \/\/ The number of lines to draw\r\n\t\tlength : 15, \/\/ The length of each line\r\n\t\twidth : 15, \/\/ The line thickness\r\n\t\tradius : 30, \/\/ The radius of the inner circle\r\n\t\tcorners : 1, \/\/ Corner roundness (0..1)\r\n\t\trotate : 0, \/\/ The rotation offset\r\n\t\tdirection : 1, \/\/ 1: clockwise, -1: counterclockwise\r\n\t\tcolor : spinnerColor, \/\/ #rgb or #rrggbb or array of colors\r\n\t\tspeed : 1, \/\/ Rounds per second\r\n\t\ttrail : 90, \/\/ Afterglow percentage\r\n\t\tshadow : true, \/\/ Whether to render a shadow\r\n\t\thwaccel : true, \/\/ Whether to use hardware acceleration\r\n\t\tclassName : 'spinner', \/\/ The CSS class to assign to the spinner\r\n\t\tzIndex : 2e9, \/\/ The z-index (defaults to 2000000000)\r\n\t\ttop : '50%', \/\/ Top position relative to parent in px\r\n\t\tleft : '50%' \/\/ Left position relative to parent in px\r\n\t};\r\n\r\n\tnew Spinner(opts).spin(document.getElementById(domElementId));\r\n};\r\n\r\n\/**\r\n * show the loader\r\n *\/\r\nLoaderUtils.prototype.showLoader = function() {\r\n\t$('#loading-ws-bar, #loading-ws-background-page').show();\r\n};\r\n\r\n\/**\r\n * hide the loader\r\n *\/\r\nLoaderUtils.prototype.hideLoader = function() {\r\n\t$('#loading-ws-bar, #loading-ws-background-page').hide();\r\n};\r\n\r\nvar loaderUtils = new LoaderUtils();\r\n<\/pre>\n
Bien-sur toutes les propri\u00e9t\u00e9s du spinner sont personnalisables. Pour plus d’infos regardez les commentaires en bout de ligne de l’objet ‘opts<\/span>‘.<\/p>\n
Et pour finir, voici un petit css \u00e0 int\u00e9grer pour un meilleur affichage, mais l\u00e0 pareil, tout le monde peut personnaliser comme il l’entend :<\/p>\n
\r\n\/* \tSpinner css stylesheet\r\n\tSee 'loaderUtils.js' to know how to use it\r\n*\/\r\n\r\n\/* Transparent background color to disable action on page *\/\r\n#loading-ws-background-page {\r\n    background-color: rgba(0, 0, 0, 0.5);\r\n    bottom: 0;\r\n    display:none;\r\n    left: 0;\r\n    position: fixed;\r\n    right: 0;\r\n    top: 0;\r\n    z-index: 10000;\r\n}\r\n#loading-ws-bar {\r\n    border-radius: 2px;\r\n\tdisplay:none;\r\n    height: 100px;\r\n    left: 50%;\r\n    margin-left: -75px;\r\n    margin-top: -50px;\r\n    position: fixed;\r\n    top: 50%;\r\n    width: 150px;\r\n    z-index: 10001;\r\n}\r\n<\/pre>\n
Mais comme vous avez mis par d\u00e9faut un ‘display:none<\/span>‘ dans votre css le spinner ne s’affichera jamais. C’est normal !
\nOn va l’afficher seulement quand on enverra une requ\u00eate, donc on va le faire c\u00f4t\u00e9 javascript.<\/p>\n
 <\/p>\n
Afficher le loader \u00e0 chaque requ\u00eate Ajax :<\/h3>\n
Maintenant qu’on a int\u00e9gr\u00e9 ‘spin.js<\/span>‘ et qu’on l’a param\u00e9tr\u00e9, rien de plus simple pour l’afficher vous allez voir.
\nOn reprend donc notre exemple d’appel Ajax du d\u00e9but et on y ajoute 3 petits bouts de code :<\/p>\n
\r\napp.controller('MonController', ['$scope', '$http',\r\n               function($scope, $http) {\r\n\r\n\tvar url = 'MON_URL';\r\n\r\n\t\/\/ Display loader\r\n\tloaderUtils.showLoader();\r\n\r\n\t$http.get(url).then(function success(response) {\r\n\t\t\/\/ Display loader\r\n\t\tloaderUtils.hideLoader();\r\n\t\t\/\/ Return result\r\n\t\treturn response.data.result;\r\n\t}, function error(reason) {\r\n\t\t\/\/ Display loader\r\n\t\tloaderUtils.hideLoader();\r\n\t\treturn false;\r\n\t});\r\n\r\n]);\r\n<\/pre>\n
Vous voyez donc qu’on \u00e0 ajout\u00e9 un appel \u00e0 la classe ‘loaderUtils<\/span>‘ pour afficher et cacher le spinner en fonction de l’\u00e9tat de la requ\u00eate.
\nEt c’est tout !
\nIl vous suffira maintenant d’appeler les m\u00e9thodes ‘showLoader<\/span>‘ et ‘hideLoader<\/span>‘ \u00e0 chaque requ\u00eate Ajax pour afficher votre loader.<\/p>\n
 <\/p>\n
Utilisation un peu plus pouss\u00e9e :<\/h3>\n
Mais j’entend d\u00e9j\u00e0 quelques uns dire : “C’est sympas ton truc, mais faut le faire \u00e0 chaque requ\u00eate du coup !”<\/em>.<\/p>\n
Et bien OUI, la m\u00e9thode expliqu\u00e9e ci-dessus oblige \u00e0 int\u00e9grer les m\u00e9thodes d’affichage et pour cacher le loader avant et apr\u00e8s CHAQUE requ\u00eate. Et c’est p\u00e9nible.
\nAlors est-ce qu’il existe une mani\u00e8re de le faire de fa\u00e7on transparente \u00e0 chaque requ\u00eate syst\u00e9matiquement?<\/p>\n
OUI !<\/p>\n
Cette technique est un peu plus pouss\u00e9e, mais je vais vous expliquer comment faire :<\/p>\n
Pour cela on va intercepter les requ\u00eates<\/strong><\/span> avec un ‘interceptor’.
\nUn interceptor est une factory que l\u2019on va attacher au $httpProvider. De cette mani\u00e8re on va pouvoir intercepter les requ\u00eates faites via le service $http.
\nSi vous voulez un peu plus de documentation vous pouvez lire la doc officielle du service $http ici<\/a>.<\/p>\n
Mise en place :<\/h5>\n
On va d’abord indiquer au ‘$httpProvider<\/span>‘ qu’on lui assigne un intercepteur. Pour cela j’ajoute les lignes suivantes dans mon ‘app.js<\/span>‘ :<\/p>\n
\r\napp.config(['$httpProvider', function($httpProvider) {\r\n    $httpProvider.interceptors.push('httpInterceptor');\r\n}]);\r\n<\/pre>\n
Ainsi toutes les requ\u00eates http faites par le service ‘$http<\/span>‘ seront intercept\u00e9es par notre service ‘httpInterceptor<\/span>‘.
\nEt ensuite on va cr\u00e9er le fameux httpInterceptor.<\/p>\n
\r\napp.factory('HttpInterceptor', ['$q', function($q) {\r\n\treturn {\r\n                \/\/ M\u00e9thode appel\u00e9e avant une requ\u00eate http\r\n\t\trequest : function(config) {\r\n\t\t\treturn config || $q.when(config);\r\n\t\t},\r\n                \/\/ M\u00e9thode appel\u00e9e lors d'une r\u00e9ponse avec succ\u00e8s de la requ\u00eate\r\n\t\tresponse : function(response) {\r\n\t\t\treturn response || $q.when(response);\r\n\t\t},\r\n                \/\/ M\u00e9thode appel\u00e9e lors d'une r\u00e9ponse en erreur de la requ\u00eate\r\n\t\tresponseError : function(reason) {\r\n\t\t\treturn $q.reject(reason);\r\n\t\t},\r\n\t};\r\n}]);\r\n<\/pre>\n
Et le loader dans tout \u00e7a ?<\/h5>\n
Qu’est-ce qu’on fait exactement ici?<\/p>\n
On reprend les m\u00e9thodes du ‘$httpProvider<\/span>‘ appel\u00e9es et on les intercepte pour les r\u00e9\u00e9crire. On a donc ici 3 m\u00e9thodes :<\/p>\n