Diseño Web AsdfPok!

Hola!

Mientras programaba unas cuantas páginas web (en diferentes dominios) me era necesario enviar datos desde el navegador a ambos dominios, pero me era imposible debido a que JavaScript solo funciona en el dominio de la página; es decir, si tienes abierta la página “dominio000.com” y quieres enviar datos a la página “dominio123.com” pues te resultará imposible!

¿Cuál es la solución?

Hacer un envio JSON y enviando nuestras variables/parámetros mediante GET, sería fantástico lograr el envio por POST y creánme que si se puede pero el cliente (nuestro navegador) jamás llega a ejecutar la respuesta JSON (el objeto que deberíamos recibir), pero el servidor si ejecuta las operaciones (ejemplo, enviar un mail, o realizar alguna tarea)

jQuery es mi framework favorito, tenemos diferentes funciones para realizar envío y recepcion de datos, entre ellas las siguientes:

• $.post(destino,datos,callback); con esta funcion enviamos datos DENTRO DE NUESTRO DOMINIO y finalizado el envio interpretamos la respuesta (que normalmente es un “echo” si es que enviamos a PHP) en la función callback;
• $.get(destino,datos,callback); al igual que la función anterior, éste método realiza el envio de datos a la dirección destino mediante GET, la respuesta se interpreta en la funcion callback;
• $.ajax(parametros); esta es la función que usaremos para enviar datos a través de jSONp

¿Cómo realizo el envio con jSONp?

Pues muy sencillo, como mencioné anteriormente debemos de hacer uso de la función $.ajax(); y los parámetros que configuraremos serán los sigueintes:

• type: aquí colocaremos el método de datos es “get” o “post”; en esta ocasión usaremos ‘get’;
• dataType: aquí colocaremos el tipo de datos que retornará el servidor, en este caso usaremos “jsonp”;
• data: en éste parametro enviaremos nuestros datos asociadios entre llaves {var00: valor, var01: valor}, donde “var00″ y “var01″ son las variables GET que obtendrá nuestro servidor!;
• url: en este parámetro introduciremos la URL destino, esta tiene que tener un parámetro get que indicará el nombre de la función a llamar luego de la recepción de datos;
• success: aquí pondremos el nombre de la función a llamar luego de recibir los datos, o simplemente escribiremos el contenido de la función;

Para que podamos hacer el envio y recepcion de datos cross-domain o entre diferentes dominios debemos agregar una variable GET a nuestra URL, esta variable depende mucho de la respuesta del servidor, pero si estamos programando nosotros entonces dependerá de nosotros, este es un ejemplo con php

Código PHP

<?php
$minombre = $_GET['nombrecito'];
$llamarFuncion = $_GET['funcionJS'];
$futuroObjetoJson = array("nombre" => "$minombre");
echo $llamarFuncion . '(' . json_encode($futuroObjetoJson) . ');';
?>

Código JavaScript + jQuery

$.ajax({
type: 'get',
dataType: 'jsonp',
data: {nombrecito: 'gerber'},
url: 'http://sitioremotofuerademidominio.com/?funcionJS=funcionParaLlamar',
success: funcionParaLlamar
});

Explicación … $minombre es la variable GET que recibiremos desde el navegador, entre los parámetros de la función $.ajax(), exactamente en “data”, la variabla “nombrecito” tomará el valor de “gerber”, es así como será enviada al servidor y éste leera el contenido de la variable “nombrecito” (cuyo valor es “gerber”) y lo asignará a la variable $minombre; de la misma manera tomaremos la variable $llamarFuncion que leerá el contenido de “funcionJS” enviada en la URL de destino (como un dato GET adicional).

Repasemos las variables:

$minombre = "gerber";
$llamarFuncion = "funcionParaLlamar";

Hasta aquí ya hemos enviado datos al servidor, ahora debemos esperar la respuesta JSON (objeto java script) para tratarla en el navegador; recordemos que hemos llamado a una funcion, es por ello que PHP deberá imprimirnos (echo) el contenido JSON dentro del nombre de la función, es decir, si la respuesta debería tomar la siguiente notación:

funcionParaLlamar({"nombre":"gerber"});

Si conseguimos esa notación pues prácticamente el Servidor ha retornado JSON de manera correcta, ahora veamos como funciona en el lado del cliente…

Una vez que el cliente ha hecho el envio y el servidor ha retornado, dentro de $.ajax(); teníamos el parametro success, el cual llamaba a una función para ejecutarse! Resulta que PHP nos ha impreso esa línea de código, el nombre de la función mas el contenido, por ello javascript llamará a la funcion “funcionParaLlamar” y le enviará el objeto jSON…

Por cierto sigo en mi búsqueda de encontrar alguna manera de enviar datos entre diferentes dominios a través de AJAX y usando POST y claro obteniendo una respuesta JSON , si alguien sabe la forma por favor compártalo!