¿Qué es JSONP?
El XMLHttpRequest(XHR) se puede utilizar para obtener los datos del servidor. Una vez que se reciben los datos en el navegador, puede usar el método JSON.parse() para convertir la string JSON recibida en un objeto JavaScript. Pero, XHR viene con el mismo problema de seguridad de origen. Esto significa, solicitar una página de algún dominio, digamos ADomain.com y luego esa página hace un XMLHttpRequest para obtener algunos datos de BDomain.com, el navegador niega esta solicitud. Esto se debe a que la solicitud se realizó a un dominio diferente al dominio desde el que se sirvió la página. Solo si XMLHttpRequest se realiza en ADomain.com, recibirá los datos de vuelta, ya que XHR funciona solo si la solicitud se realiza en el mismo dominio.
JSONP (JSON con relleno): es una forma de recuperar datos evitando el problema de dominio cruzado. La etiqueta de secuencia de comandos se utiliza para hacerlo.
Diferencia entre JSON y JSONP:
- JSON: JavaScript utiliza JSON (Notación de objetos de JavaScript) para intercambiar datos a través de la red. Mira de cerca los datos JSON, simplemente es un objeto JavaScript en un formato de string.
Ejemplo:{"name":"GFG", "id":1, "articlesWritten":5} - JSONP: JSONP es JSON con relleno. Aquí, relleno significa envolver una función alrededor del JSON antes de que regrese en la solicitud.
Ejemplo:GeeksFunction({"name":"GFG", "id":1, "articlesWritten":5});
Método para usar JSONP:
- En el código HTML, incluya la etiqueta del script. La fuente de esta etiqueta de secuencia de comandos será la URL desde donde se recuperarán los datos. Los servicios web permiten especificar una función de devolución de llamada. En la URL incluya el parámetro de devolución de llamada al final.
- Cuando el navegador encuentra el elemento de secuencia de comandos, envía una solicitud HTTP a la URL de origen.
- El servidor devuelve la respuesta con JSON envuelto en una llamada de función.
- El navegador analiza la respuesta JSON, que tiene la forma de una string, y la convierte en un objeto JavaScript. Se llama a la función de devolución de llamada y se le pasa el objeto generado.
Ejemplo 1:
<!DOCTYPE html>
<html>
<body>
<p id="paragraphElement"></p>
<!-- The server returns a call to the callback function
(processData) that will handle the JSON data -->
<script>
function processData(myObj) {
console.log(myObj);
var para= document.getElementById("paragraphElement");
for(var i=0; i<myObj.resultCount; i++){
para.innerHTML= para.innerHTML + myObj.results[i].trackName
+ "<br>" ;
}
}
</script>
<!-- Calling the iTunes API to search for Jack Johnson's songs and return
the first five items -->
<script src="https://itunes.apple.com/search?term=jack+johnson&limit=5
&callback=processData"></script>
</body>
</html>
Producción:
Better Together Banana Pancakes Sitting, Waiting, Wishing Upside Down Good People
Ejemplo 2: agregue un elemento de secuencia de comandos dinámicamente usando JavaScript
<!DOCTYPE html>
<html>
<body>
<p id="paragraphElement"></p>
<script>
window.onload = createScriptDynamically();
function createScriptDynamically() {
// Set the url to the web service API from where
// the data to be retrieve
var url =
"https://itunes.apple.com/search?term=taylor+swift&limit=5&callback=processData";
// Create the script element dynamically through JavaScript
var scriptElement = document.createElement("script");
// Set the src and id attributes of the script element
scriptElement.setAttribute("src", url);
scriptElement.setAttribute("id", "jsonp");
var oldScriptElement= document.getElementById("jsonp");
// Get the head element
var head = document.getElementsByTagName("head")[0];
if(oldScriptElement == null) {
/* If there is no script element then append
a new element to the head. */
head.appendChild(scriptElement);
}
else {
/* If there is already a element in the head,
then replace it with the new script element. */
head.replaceChild(scriptElement, oldScriptElement);
}
}
function processData(myObj) {
console.log(myObj);
/* Function to display the track name and the
genre name from the received data. */
var para = document.getElementById("paragraphElement");
for(var i = 0; i < myObj.resultCount; i++){
para.innerHTML = para.innerHTML + myObj.results[i].trackName
+ "[" + myObj.results[i].primaryGenreName + "]" + "<br>" ;
}
}
</script>
</body>
</html>
Producción:
Delicate [Pop] Look What You Made Me Do [Pop] Shake It Off [Pop] You Belong With Me [Country] Blank Space [Pop]