{"id":295,"date":"2014-01-21T21:12:40","date_gmt":"2014-01-21T20:12:40","guid":{"rendered":"http:\/\/louis.hatier.me\/blog\/?p=295"},"modified":"2018-08-17T16:41:19","modified_gmt":"2018-08-17T15:41:19","slug":"jsonp-exemple-requete-cross-domain-php-jquery","status":"publish","type":"post","link":"https:\/\/louis.hatier.me\/blog\/jsonp-exemple-requete-cross-domain-php-jquery\/","title":{"rendered":"JSONP : exemple de requ\u00eate cross-domain avec PHP et jQuery"},"content":{"rendered":"

\"Logo<\/a>Le format JSON permet de repr\u00e9senter des donn\u00e9es, il est beaucoup utilis\u00e9 pour l’\u00e9change d’informations.\u00a0De la m\u00eame mani\u00e8re qu’avec le XML, les donn\u00e9es sont structur\u00e9es et typ\u00e9es.<\/p>\n

Il est possible tr\u00e8s facilement de renvoyer du JSON en PHP avec la fonction\u00a0json_encode<\/a>, de r\u00e9cup\u00e9rer ces donn\u00e9es en Ajax pour les manipuler en JavaScript puis les afficher en HTML \u00e0 l’utilisateur.<\/p>\n

<\/p>\n

A savoir, par d\u00e9faut une requ\u00eate cross-domain (entre 2 domaines diff\u00e9rents) \u00e9chouera pour des raisons de s\u00e9curit\u00e9<\/a>.<\/p>\n

Avec la deuxi\u00e8me version du XHR<\/a>, il est possible d’y parvenir en ajoutant un ent\u00eate\u00a0Access-Control-Allow-Origin<\/code> c\u00f4t\u00e9 serveur, qui permet de sp\u00e9cifier un ou plusieurs domaines autoris\u00e9s \u00e0 appeler la ressource.<\/p>\n

Exemple en PHP :<\/p>\n

header('Access-Control-Allow-Origin: http:\/\/site-de-confiance.com');\r\n<\/code><\/pre>\n
<\/h2>\n
<\/h2>\n
Fonctionnement avec JSONP<\/h2>\n
Il est possible de renvoyer les donn\u00e9es au format JSONP, en encapsulant celles-ci dans une fonction callback.<\/p>\n
Concr\u00e8tement, voici ce qu’on aura c\u00f4t\u00e9 client, avec une requ\u00eate Ajax effectu\u00e9e en jQuery :<\/p>\n
$.ajax({\r\n    url: 'http:\/\/serveur.com\/api\/json',\r\n    type: 'GET',\r\n    jsonpCallback: 'callback',\r\n    dataType: 'jsonp',\r\n    success: function(data) { console.log(data); },\r\n    error: function() { alert('bazinga!'); }\r\n});\r\n<\/code><\/pre>\n
Et c\u00f4t\u00e9 serveur, la page qui pr\u00e9sente les donn\u00e9es :<\/p>\n
$data = array('foo' => 'bar');\r\nif (isset($_GET['callback'])) {\r\n    header('Content-type: application\/json; charset=UTF-8');\r\n    echo $_GET['callback'] . '(' . json_encode($data) . ')';\r\n}\r\n<\/code><\/pre>\n
Voila un exemple simple et fonctionnel pour effectuer une requ\u00eate cross-domain avec le format JSONP.<\/p>\n
\"Share<\/a>