JSONP o JSON amb padding és una tècnica de comunicació utilitzada als programes Javascript per realitzar crides asíncrones des de dominis diferents. JSONP és un mètode concebut per superar la limitació de l'AJAX entre diferents dominis, que únicament permet realitzar peticions a pàgines que es troben sota el mateix domini i port per motius de seguretat.
Sota la política del mateix origen (SOP), un codi Javascript carregat en un domini determinat no té permís per obtenir dades d'un altre domini. No obstant això, aquesta restricció no s'aplica a l'etiqueta <script> de HTML, per tant es pot especificar en el seu atribut src l'URL d'un script hostatjat en un servidor remot.
Per realitzar crides asíncrones entre diferents dominis, les dades s'obtenen carregant un script que conté l'objecte JSON. Per si mateix, això provocaria un error de sintaxi, ja que el navegador estaria tractant d'interpretar JSON cru com Javascript.
<script type="text/javascript" src="http://server.example.com/data.json"></script>
Encara que el navegador interpretés l'objecte JSON com un objecte literal de Javascript, sense estar assignat a una variable no seria accessible.
{
"api_key": "224Wrf2asfSDfcea23reSDfqW",
"status": "good",
"name": "wikipedia",
"date": "27-09-1995"
}
En la tècnica de JSONP, l'objecte JSON es retorna embolcallat en la crida d'una funció. D'aquesta forma, una funció ja definida a l'entorn de Javascript pot manipular les dades JSON.
jsonCallback ({
"api_key": "224Wrf2asfSDfcea23reSDfqW",
"status": "good",
"name": "wikipedia",
"date": "27-09-1995"
});
Per convenció, el nom de la funció de tornada s'especifica mitjançant un paràmetre de la consulta, normalment, utilitzant jsonp o callback com a nom del camp en la sol·licitud al servidor.
<script type="text/javascript" src="http://server.exemple.com/data.json?callback=parseJSON"></script>
Encara que el padding és generalment el nom de la funció que embolcalla l'objecte JSON, també és possible assignar l'objecte a una variable o realitzar qualsevol altra sentència o declaració de Javascript. La petició JSONP no és JSON cru i no és analitzada com a tal, per la qual cosa es pot retornar qualsevol expressió vàlida de Javascript, i no té perquè incloure JSON.
L'ús de JSONP només té sentit si es vol fer una trucada asíncrona a un altre domini, per això és necessari manipular el DOM per inserir un element <script> en la capçalera de la pàgina, i una vegada carregat el document, no és possible escriure-hi.
function loadScript (id, src, callback) {
// Creació element
var script = document.createElement("script");
// Atributs script
script.setAttribute("type", "text/javascript");
script.setAttribute("src", src + "?callback=" + callback);
script.setAttribute("id", id);
// Inserció script en la capçalera
document.getElementsByTagName("head")[0].appendChild(script);
}
En tot cas, el més freqüent és utilitzar una biblioteca de manipulació del DOM, com ara jQuery o Mootools per tal de fer-ho.