2012-03-01 10 views
12

¿Qué necesito en el lado del servidor para permitir que alguien obtenga datos de ese servidor usando JSONP? ¿Y qué debo hacer también por parte del usuario? Quiero usar JSONP como alternativa a XMLHttpRequest.¿Cómo configuro JSONP?

No funcionará en mi extensión de Firefox, debido a la política del mismo origen. Por lo tanto, la gente recomienda JSON, pero estoy bastante perdido después de buscar tutoriales y guías en Internet.

¡Gracias por la ayuda!

Respuesta

12

Asumiendo que su servidor se está ejecutando PHP, sólo tiene que añadir 'devolución de llamada' petición GET.

<?php header('content-type: application/json; charset=utf-8'); 
$data = array ('a'=>1,'b'=>2,'c'=>3,'d'=>4,'e'=>5); 
echo $_GET['callback'] . '('.json_encode($data).')'; 

Y en el lado del cliente (usando jQuery):

$.ajax({url: 'http://site.com/data.php', dataType:'jsonp'}); 

El código PHP anterior es sólo para demostración, no se olvide de sanitise $ _GET [ 'callback']

Eso dicho, si su problema es solo la misma política de origen, probablemente solo necesite allow cross-origin desde el lado del servidor, y todo debería funcionar.

+0

¡Muchas gracias! La solución CORS me solucionó. –

+0

Just downvoted bc esta respuesta asume php, y por lo tanto prefiero T.J. La respuesta de Crowder a continuación. – Steven2163712

+0

@ Steven2163712 si lee más allá del título, el problema OP es en realidad CORS, independientemente del idioma. Si bien la respuesta de TJ es más genérica (IMO php es lo suficientemente genérico), no resuelve el problema de los OP. – soemarko

7

En el lado del servidor, todo lo que tiene que configurar es un recurso web (por ejemplo, la página) que acepta una solicitud GET y devuelve los datos utilizando la convención JSON-P, que es:

callback({"data": "here"}); 

... donde el nombre de la función ("devolución de llamada" en ese ejemplo) generalmente se toma de uno de los parámetros de cadena de consulta (por convención, el parámetro "devolución de llamada"), y el dato es JSON (aunque técnicamente podría ser cualquier cosa válido literalmente en un objeto JavaScript, la convención con JSON-P es restringirse a lo que es válido en JSON). Así, por ejemplo, digamos que la solicitud era la siguiente:

http://example.com/foo.php?callback=bar

que llama a la página foo.php (no tiene que ser PHP, puede ser cualquier sistema de servidor dinámico), diciéndole que la La función que queremos que llame es "barra". Nuestra respuesta sería:

bar({"data": "here"}); 

En el lado del cliente, hay que añadir un elemento script a la página de forma dinámica, y también añadir la función de devolución de llamada que conseguirá desencadenada por la respuesta JSON-P. Por lo general, desea asignar un nombre aleatorio a esa función y eliminarla cuando haya terminado.

Here's a complete example como respuesta a otra pregunta aquí en Stack Overflow. Puede que tenga que adaptarlo ligeramente para usarlo en un complemento de Firefox, pero los conceptos son los mismos.

1

jsonp está json con un contenedor, por lo que puede falsificar solicitudes ajax a otro servidor insertando dinámicamente nuevas etiquetas <script>, con src apuntando al otro servidor. El envoltorio básicamente hace que el material de retorno de jsonp sea una llamada de función javascript válida que se puede ejecutar para extraer los datos JSON estándar dentro de.

En general, en una insegura 'sólo para Demo' versión, tendría algo como esto:

function unwrap_jsonp(data) { 
    eval(data); 
} 

El servidor remoto podría devolver el siguiente texto literal:

unwrap_json("{'this':'is','sparta':'!'}"); 

Tenga en cuenta que este es el código de texto claro literal de JavaScript, que se ejecuta y "desenvuelve" la cadena JSON incrustada en una estructura de datos javascript nativa.

La mayoría de los servicios JSONP permiten especificar un parámetro adicional a través de la cadena de consulta para nombrar la función del controlador en la que desea envolver la respuesta, p.

http://example.com/getjsonp.php?callback=unwrap_json