AJAX - SOP - JSONP

JSONP, la solution

SOP une solution ?

Le seul moyen d'éviter la restriction SOP est d'utiliser la balise <script>.
En effet, cette balise n'a pas de restriction sur l'origine, elle n'est donc pas limitée au domaine.

1er problème : appel non réactif

En effet, la balise <script> est lancée au chargement de la page . Il faut donc la créer dynamiquement, au sein même d'une fonction :
		function getRemoteData(url) {
			var script = document.createElement("script"); 
			script.type = "text/javascript"; 
			script.src  = url; 
			$("head")[0].appendChild(script);
		}
		
Ainsi, la balise est créée à n'importe quel moment désiré (onclick, ...)

2ème problème : traitement du retour impossible

Le script est bien exécuté au moment désiré, mais la balise <script> ne permet pas de traiter / analyser le retour de la requête. C'est alors qu'arrive JSONP

JSONP, la solution

JSONP, JSON with Padding (avec formatage), est une extension de JSON de manière à formater le JSON délivré par le serveur de webservice afin qu'il puisse être interprété et utilisé par le client. Il permet donc de gérer la fonction de retour, aussi appelée "callback".

La fonction getRemoteData() devient alors :

		function getRemoteData(url) {
			var script = document.createElement("script"); 
			script.type = "text/javascript"; 
			script.src  = url + "&callback=myFunction"; //ajout de la fonction de retour
			$("head")[0].appendChild(script);
		}

		function myFunction(data) {
			// traitement des données récupérées
		}
		

Le serveur prend en compte le paramètre callback et encapsule les données de type JSON :
		echo $_GET['callback']. '(' .$json. ');' ;
		// ==> myFunction( {''name'' : ''Jean'' , ''value'' : 10} );
		

La mise en place est donc beaucoup plus simple que celle d'un WebService de type SOAP ou REST (définition du fichier WSDL, ...).