JSONP sin jQuery?

[DoHITB]

Hola,

Estoy leyendo acerca de JSONP, para evitar problemas AJAX Cross Domain, y tengo un poco de lío...

Se supone que desde mi cliente tengo que hacer:

Código:

http://baseaddress/Service/RestService?callback=functionName

teniendo previamente una variable, tal que:

Código:

var functionName;

y desde el servidor, hacer algo así como:

Código PHP:

<?php
echo($_GET['callback']."(".json_encode($json).")");
?>
 

de manera que, de vuelta en mi cliente, podría acceder a los métodos de functionName?

No sé si es correcto así... espero me podáis ayudar.

Saludos!

[zerokilled]

buenas...
ibas bien hasta el último enunciado, o quizas entendí mal la terminología que le aplicastes.

de manera que, de vuelta en mi cliente, podría acceder a los métodos de functionName?

lo que debes producir es un resultado tal que functionName(json). functionName es una simple función declarada por ti el cual manejará el json. quizas algo como esto.

Código:

function functionName(json){
var data = JSON.parse(json);
...
}

[DoHITB]

Buenas,

me refería a que podría hacer algo así como:

Código:

alert(functionName.variable1);

Creo que lo escribí mal... jeje.

Gracias por la ayuda!

Saludos

[zerokilled]

pero, ¿hacer eso dónde? puedes hacer tu función con propiedades y demás, pero desde el json no puedes pasar una función.

Código:

// esto es válido ;
function functionName(args){
console.log(functionName.property);
}

functionName.property = value;

// este json NO es válido ;
{
"functionName": function(args){ console.log(functionName.property): }, 
// un json no puede contener declaración de funciones ;
"data": functionName.property 
// json no permite identificadores (variables o propiedades), 
// solo algunos datatype: number, string, null, boolean (quizas me quede otro)
}

[DoHITB]

A ver, he conseguido que me funcione una prueba:

Cliente (miweb):

Código:

var funcionCallback
llamarAjax(url_con_callback); //http://loquesea?callback=funcionCallback
alert(funcionCallback.var1);

Servidor (loquesea):

Código PHP:

<?php
if(isset($_POST['callback'])){
    $arr = array('var1' => 'val1', 'var2' => 'val2');
    
    echo($_POST['callback']."=(".json_encode($arr).")");
}
?>
 

El alert me muestra "val1", correctamente.

El problema es que IE no me deja lanzarlo (me da error de seguridad)...

[zerokilled]

ahí te funciona functionCallback.var1 porque ahi le estás asignando el json parseado a objeto. fíjate que en realidad functionCallback no está actuando como un callback (una función), sino como una variable normal. en este caso, aparenta que llamaAjax determina que el dato es un json, lo parsea a objeto y asigna a la variable functionCallback. como antes se mencionó, se supone que en jsonp la respuesta del servidor es el json envuelto en una invocación a un callback. en tu código, estas asignando.

Código:

// notese el operador de asignacion ;
echo($_POST['callback']."=(".json_encode($arr).")");

sobre el error de seguridad, no hay detalles suficiente para determinar su causa. solo puedo sospechar que estas haciendo la prueba en local o que la URL apunta a un dominio distinto. en caso de ser un dominio distinto, debes cargar el jsonp creando un elemento SCRIPT, indicar la URL en src y agregarlo al documento mediante javascript.

[DoHITB]

Iniciado por zerokilled

ahí te funciona functionCallback.var1 porque ahi le estás asignando el json parseado a objeto. fíjate que en realidad functionCallback no está actuando como un callback (una función), sino como una variable normal. en este caso, aparenta que llamaAjax determina que el dato es un json, lo parsea a objeto y asigna a la variable functionCallback. como antes se mencionó, se supone que en jsonp la respuesta del servidor es el json envuelto en una invocación a un callback. en tu código, estas asignando.

Código:

// notese el operador de asignacion ;
echo($_POST['callback']."=(".json_encode($arr).")");

sobre el error de seguridad, no hay detalles suficiente para determinar su causa. solo puedo sospechar que estas haciendo la prueba en local o que la URL apunta a un dominio distinto. en caso de ser un dominio distinto, debes cargar el jsonp creando un elemento SCRIPT, indicar la URL en src y agregarlo al documento mediante javascript.

El error de seguridad me lo da porque accedo desde local hacia un servidor externo... me pierdo un poco en la explicación que das para arreglar el asunto.

Se supone que lo que yo devuelva con JSONP tiene que tener al principio "<script scr="otraweb.com " type..." y un "</script>" al final, y luego (supongo que desde una función previamente cargada) añadir una la etiqueta al documento?

La verdad es que parece factible, no se me habría ocurrido...

Gracias!

[zerokilled]

El error de seguridad me lo da porque accedo desde local hacia un servidor externo...

eso es por la seguiridad que implementa javascript. la política del mismo origen prohibe hacer scripting a dominios que no sea el mismo origen.

me pierdo un poco en la explicación que das para arreglar el asunto.

veamos. digamos que tienes un archivo en el servidor que genera un jsonp, jsonp.php:

Código:

<?php
if(isset($_POST['callback'])){
    $json = json_encode(array('var1' => 'val1', 'var2' => 'val2'));
    echo "{$_POST['callback']}('$json');";
}
?>

luego tienes lo siguiente en un script javascript:

• un callback (una función normal) que parsea el string devuelto por jsonp.php.
• una función que crea el elemento SCRIPT, le asigna como valor al atributo SRC la ruta de jsonp.php junto con el callback, y finalmente lo agrega al documento

Código:

// callback ;
function functionCallback(json){
var parsed = JSON.parse(json);
...
}

// json loader ;
function loadJSONP(url, callback){
var script = document.createElement("script");
script.setAttribute('src', url +"?callback="+ callback);
document.getElementsByTagName('head')[0].appendChild(script);
}

finalmente, para cargar el jsonp harías una invocación a loadJSONP indicando la URL y el nombre del callback, todos en forma de string: loadJSONP('jsonp.php', 'functionCallback');. el resultado final de la invocación anterior es un elemento como el siguiente:

Código:

<script src="jsonp.php?callback=functionCallback">
functionCallback('{"var1": "val1", "var2": "val2"}');
</script>

éste méotdo funciona porque quien hace la petición de cargar el json es a través del elemento y no directamente javascript. no obstante, debes tener cuidado que el json generado no tenga saltos de líneas porque en javascript un string no puede tener literalmente un salto de línea.

[DoHITB]

Vale, creo que lo he entendido...

Lo que ahora es una llamada AJAX a un servidor externo lo tendría que transformar (con la función que propones, por ejemplo) en un elemento del tipo <script> en el que iría embebido el JSONP que ahora estoy intentando enviar por AJAX.

Solo una duda:

Mediante este método se puede devolver algo que no sea un JSON? Por ejemplo una función tipo

Código:

myElement.innerHTML='cosas que cambian mediante JavaScript...';

O tendría que ser obligatoriamente JSON?

Gracias por la ayuda!

[zerokilled]

puedes devolver cualquier tipo de contenido: un script generado, un texto, una imagen, un pdf, etc. lo que cambia es el elemento que se encarga de procesarlo. es lo mismo como cuando cargas una imagen de otro servidor, lo único que en tu caso se trata de un código generado.

[DoHITB]

Sí, lo logré, aunque como bien decías no puedo poner saltos de línea dentro del texto devuelto, con lo que me las tengo que ingeniar para sacar los saltos de línea desde el servidor con PHP.

Muchas gracias por la ayuda, la verdad es que me he sacado un problema que llevaba arrastrando meses, jeje.

Saludos!