Vous avez sans doute déjà entendu parler de jsonp.
Si ce n’est pas le cas, vous trouverez des articles en français qui vous expliquent tout ça correctement.

un article

un autre article

Vous avez donc sous la main une techno super simple pour effectuer des appels vers des webservices directement depuis votre appli web, sans avoir à repasser par votre serveur web… intéressant. Le dialogue est direct puisque je n’ai pas à :
– faire mon appel serveur
– récupérer les données distantes
– les envoyer à ma vue
– les traiter dans ma vue pour les présenter

Un objet javascript formaté en json dans le callback de mon appel, et je peux faire ce que je veux, et pourquoi pas utiliser une notation simple avec JQuery.

Ce qu’il faut conserver en tête, c’est un peu ce que masque l’appel JQuery, c’est quelques spécificités de javascript.
Nous avons pris l’habitude, avec les fonctionnalités Ajax, de manipuler le contenu de nos pages, et donc, de réaliser un listener sur le chargement du DOM.

window.addEventListener("load", bodyLoaded, false);

function bodyLoaded() {

	var meuh = "meuh inside";

}

Nous faisons ce genre de manipulation, sinon, un appel à un élément de la page ne fonctionnera pas. Nous allons donc définir toutes sortes de fonctions internes dans ce bodyLoaded par exemple. Mais dans l’exemple du jsonp, nous faisons appel à un script externe, et le résultat de notre appel, c’est la création d’un élément de script dans la page. Ce script doit ensuite sans doute utiliser quelque fonction définie préalablement, fonction qui elle-même doit manipuler / modifier le contenu de la page, fonction qui donc logiquement aurait été déclarée au sein de bodyLoaded.

Imaginons une version « bouchon » de notre appel jsonp (appel lui même encapsulé dans bodyLoaded et déclenché au clic sur un lien par exemple) :

function clickJs(event) {
	event.preventDefault();
	var script = document.createElement("script"); 
	script.type = "text/javascript"; 
	script.text  = 'getmeuh(meuh);'; 
	document.getElementsByTagName('head')[0].appendChild(script);
}

la ligne script.text remplace l’appel réel du jsonp, ce n’est pas le sujet ici.
La fonction appelée, getmeuh() :

function bodyLoaded() {
	function getmeuh() {
		var content = document.getElementById("content");
		alert(content.innerHTML);
	}
}

Notre appel jsonp veut utiliser cette fonction, mais il ne la verra pas !
Pourquoi, l’explication est simple, elle n’est pas visible ;). Voici un article de mozilla qui explique les fonctions imbriquées.

Nous devons donc sortir cette fonction du fameux bodyLoaded pour que l’appel jsonp puisse l’utiliser.

Alors bien sûr, on peut utiliser un joli framework pour masquer tout ça, mais autant savoir à quoi s’en tenir pour éviter les mélanges ! On pourra regrouper les codes par type d’utilisation pour ne pas avoir de surprise.

Alain