Tutorial JS

JS INICIO JS Introducción JS Dónde Salida JS Declaraciones JS Sintaxis JS Comentarios JS Variables JS JS Vamos Constante JS Operadores JS Aritmética JS Tarea JS Tipos de datos JS Funciones JS Objetos JS Eventos JS Cadenas JS Métodos de cadena JS Búsqueda de cadenas JS Plantillas de cadena JS Números JS Métodos numéricos JS Matrices JS Métodos de matriz JS Clasificación de matriz JS Iteración de matriz JS Constante de matriz JS Fechas JS Formatos de fecha JS Métodos de obtención de fecha JS Métodos de configuración de fechas JS Matemáticas JS JS al azar Booleanos JS Comparaciones JS Condiciones JS Interruptor JS Bucle JS para Bucle JS para entrada Bucle JS para de Bucle JS mientras descanso JS Iterables JS Conjuntos JS Mapas JS JS Tipo de Conversión de tipo JS JS bit a bit JS expresión regular Errores JS Alcance JS JS Elevación Modo estricto JS JS esta palabra clave Función de flecha JS Clases JS JSJSON Depuración JS Guía de estilo JS Prácticas recomendadas de JS Errores JS Rendimiento JS Palabras reservadas de JS

Versiones JS

Versiones JS JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE / Borde Historia de JS

Objetos JS

Definiciones de objetos Propiedades del objeto Métodos de objetos Visualización de objetos Accesores de objetos Constructores de objetos Prototipos de objetos Objeto iterables Conjuntos de objetos Mapas de objetos Referencia de objeto

Funciones JS

Definiciones de funciones Parámetros de función Invocación de funciones Llamada de función Función Aplicar Cierres de funciones

Clases JS

Introducción a la clase Herencia de clase Clase estática

JS asíncrono

Devoluciones de llamada JS JS asíncrono Promesas JS JS asíncrono/espera

JS HTML DOM

Introducción al DOM Métodos DOM Documento DOM Elementos DOM DOM HTML Formularios DOM DOM CSS Animaciones DOM Eventos DOM Oyente de eventos DOM Navegación DOM Nodos DOM Colecciones DOM Listas de nodos DOM

Lista de materiales del navegador JS

Ventana JS Pantalla JS Ubicación de JS Historia de JS Navegador JS Alerta emergente JS Tiempo JS Galletas JS

API web de JS

Introducción a la API web API de formularios web API de historial web API de almacenamiento web API de trabajo web API de búsqueda web API de geolocalización web

JS AJAX

Introducción a AJAX AJAX XMLHttp Solicitud AJAX Respuesta AJAX Archivo XML AJAX AJAXPHP Ajax ASP Base de datos AJAX Aplicaciones AJAX Ejemplos de AJAX

JSJSON

Introducción JSON Sintaxis JSON JSON frente a XML Tipos de datos JSON Análisis JSON Cadena JSON Objetos JSON Matrices JSON Servidor JSON JSONPHP JSONHTML JSON JSONP

JS frente a jQuery

Selectores jQuery HTML de jQuery CSS de jQuery DOM de jQuery

Gráficos JS

Gráficos JS Lienzo JS JS Trazado Gráfico JS.js Gráfico de Google JS JS D3.js

Ejemplos de JS

Ejemplos de JS JS HTML DOM Entrada HTML JS Objetos JS HTML Eventos JS HTML Navegador JS Editor JS Ejercicios JS Prueba JS Certificado JS

Referencias JS

Objetos JavaScript Objetos HTML DOM


JSONP


JSONP es un método para enviar datos JSON sin preocuparse por problemas entre dominios.

JSONP no utiliza el XMLHttpRequestobjeto.

JSONP usa la <script>etiqueta en su lugar.


Introducción a JSONP

JSONP significa JSON con relleno.

Solicitar un archivo de otro dominio puede causar problemas debido a la política entre dominios.

Solicitar un script externo de otro dominio no tiene este problema.

JSONP usa esta ventaja y solicita archivos usando la etiqueta de secuencia de comandos en lugar del XMLHttpRequestobjeto.

<script src="demo_jsonp.php">

El archivo del servidor

El archivo en el servidor envuelve el resultado dentro de una llamada de función:

Ejemplo

<?php
$myJSON = '{ "name":"John", "age":30, "city":"New York" }';

echo "myFunc(".$myJSON.");";
?>

El resultado devuelve una llamada a una función denominada "myFunc" con los datos JSON como parámetro.

Asegúrese de que la función exista en el cliente.

La función JavaScript

La función llamada "myFunc" se encuentra en el cliente y está lista para manejar datos JSON:

Ejemplo

function myFunc(myObj) {
  document.getElementById("demo").innerHTML = myObj.name;
}


Creación de una etiqueta de secuencia de comandos dinámica

El ejemplo anterior ejecutará la función "myFunc" cuando la página se esté cargando, en función de dónde coloque la etiqueta del script, lo que no es muy satisfactorio.

La etiqueta del script solo debe crearse cuando sea necesario:

Ejemplo

Cree e inserte la etiqueta <script> cuando se haga clic en un botón:

function clickButton() {
  let s = document.createElement("script");
  s.src = "demo_jsonp.php";
  document.body.appendChild(s);
}

Resultado JSONP dinámico

Los ejemplos anteriores siguen siendo muy estáticos.

Haga que el ejemplo sea dinámico enviando JSON al archivo php y deje que el archivo php devuelva un objeto JSON en función de la información que obtenga.

archivo PHP

<?php
header("Content-Type: application/json; charset=UTF-8");
$obj = json_decode($_GET["x"], false);

$conn = new mysqli("myServer", "myUser", "myPassword", "Northwind");
$result = $conn->query("SELECT name FROM ".$obj->$table." LIMIT ".$obj->$limit);
$outp = array();
$outp = $result->fetch_all(MYSQLI_ASSOC);

echo "myFunc(".json_encode($outp).")";
?>

Archivo PHP explicado:

  • Convierta la solicitud en un objeto, usando la función de PHP json_decode() .
  • Acceda a la base de datos y complete una matriz con los datos solicitados.
  • Agregue la matriz a un objeto.
  • Convierta la matriz en JSON usando la función json_encode() .
  • Envuelve "myFunc()" alrededor del objeto devuelto.

Ejemplo de JavaScript

La función "myFunc" se llamará desde el archivo php:

const obj = { table: "products", limit: 10 };
let s = document.createElement("script");
s.src = "jsonp_demo_db.php?x=" + JSON.stringify(obj);
document.body.appendChild(s);

function myFunc(myObj) {
  let txt = "";
  for (let x in myObj) {
    txt += myObj[x].name + "<br>";
  }
  document.getElementById("demo").innerHTML = txt;
}

Función de devolución de llamada

Cuando no tiene control sobre el archivo del servidor, ¿cómo hace que el archivo del servidor llame a la función correcta?

A veces, el archivo del servidor ofrece una función de devolución de llamada como parámetro:

Ejemplo

El archivo php llamará a la función que pase como parámetro de devolución de llamada:

let s = document.createElement("script");
s.src = "jsonp_demo_db.php?callback=myDisplayFunction";
document.body.appendChild(s);