¿Ejemplo simple de jQuery, PHP y JSONP?
Me enfrento al problema de la política del mismo origen y, al investigar el tema, descubrí que la mejor manera para mi proyecto particular sería usar JSONP para realizar solicitudes de origen cruzado.
He estado leyendo este artículo de IBM sobre JSONP , sin embargo, no tengo 100% claro lo que está pasando.
Todo lo que estoy pidiendo aquí es una simple solicitud jQuery>PHP JSONP (o cualquiera que sea la terminología;)): algo como esto (obviamente es incorrecto, es solo para que puedas tener una idea de lo que estoy tratando de lograr). :) ) :
jQuery:
$.post('http://MySite.com/MyHandler.php',{firstname:'Jeff'},function(res){
alert('Your name is '+res);
});
PHP:
<?php
$fname = $_POST['firstname'];
if($fname=='Jeff')
{
echo 'Jeff Hansen';
}
?>
¿Cómo haría para convertir esto en una solicitud JSONP adecuada? Y si tuviera que almacenar HTML en el resultado que se devolverá, ¿funcionaría también?
Cuando usas $.getJSON en un dominio externo, automáticamente activa una solicitud JSONP, por ejemplo, mi control deslizante de tweet aquí
Si observa el código fuente, puede ver que estoy llamando a la API de Twitter usando .getJSON.
Entonces su ejemplo sería: ESTO ESTÁ PROBADO Y FUNCIONA (Puede ir a http://smallcoders.com/javascriptdevenvironment.html para verlo en acción)
//JAVASCRIPT
$.getJSON('http://www.write-about-property.com/jsonp.php?callback=?','firstname=Jeff',function(res){
alert('Your name is '+res.fullname);
});
//SERVER SIDE
<?php
$fname = $_GET['firstname'];
if($fname=='Jeff')
{
//header("Content-Type: application/json");
echo $_GET['callback'] . '(' . "{'fullname' : 'Jeff Hansen'}" . ')';
}
?>
Tenga en cuenta el ?callback=? y +res.nombre completo
En primer lugar, no puede realizar una solicitud POST utilizando JSONP.
Básicamente, lo que sucede es que dinámicamente se inserta una etiqueta de script para cargar sus datos. Por lo tanto, sólo son posibles las solicitudes GET.
Además, sus datos deben estar incluidos en una función de devolución de llamada que se llama una vez finalizada la solicitud para cargar los datos en una variable.
Todo este proceso está automatizado por jQuery para usted. Sin embargo, usar $.getJSON en un dominio externo no siempre funciona. Puedo decirlo por experiencia personal.
Lo mejor que puedes hacer es agregar &callback=? a tu URL.
En el lado del servidor, debe asegurarse de que sus datos estén incluidos en esta función de devolución de llamada.
es decir.
echo $_GET['callback'] . '(' . $data . ')';
EDITAR:
Todavía no tengo suficiente representante para comentar la respuesta de Liam, por lo que la solución está aquí.
Reemplazar la línea de Liam
echo "{'fullname' : 'Jeff Hansen'}";
con
echo $_GET['callback'] . '(' . "{'fullname' : 'Jeff Hansen'}" . ')';
Más sugerencias
JavaScript:
$.ajax({
url: "http://FullUrl",
dataType: 'jsonp',
success: function (data) {
//Data from the server in the in the variable "data"
//In the form of an array
}
});
Devolución de llamada PHP:
<?php
$array = array(
'0' => array('fullName' => 'Meni Samet', 'fullAdress' => 'New York, NY'),
'1' => array('fullName' => 'Test 2', 'fullAdress' => 'Paris'),
);
if(isset ($_GET['callback']))
{
header("Content-Type: application/json");
echo $_GET['callback']."(".json_encode($array).")";
}
?>
