JSON, otra idea que mola…

Posted on 24/12/2005 by Ale Muñoz

Uno de los grandes inconvenientes a la hora de desarrollar aplicaciones web es el intercambio de información entre las partes de la aplicación.

Uno de los objetivos de XML es, precisamente, solucionar este problema. Pero a veces usar XML es como matar moscas a cañonazos.

Un ejemplo… tienes un Array en JavaScript y quieres usarlo en PHP…

La opción XML pasa por:

Convertir el array en un XML (tremendo coñazo)
Pasarle el XML al servidor
Parsear el XML en el servidor
Convertir los datos en un array

El sistema es un poco plasta, además de ser un coñazo cuando cambian las especificaciones de datos (¡sorpresa! ¡el cliente ahora quiere los datos en un Array multidimensional!)

Para solventar este y otros muchos inconvenientes, se crea JSON, un formato de intercambio de datos “ligero” basado en JavaScript.

Existen implementaciones de JSON en casi todos los lenguajes que merecen la pena. Aquí va un mísero ejemplo usando PHP-JSON y JSON en JavaScript. El código es muy simple: creamos un Array en PHP y se lo pasamos a JavaScript para trabajar con él…

<?php
    include("JSON.php");
    $json = new Services_JSON();
    $my_array = Array(1,2,3,4,5);
    $myjson = $json->encode($my_array);
?>
<script src="json.js" type="text/javascript" language="javascript" charset="utf-8"></script>
<script>
    var myArray = JSON.parse('<?php echo $myjson; ?>');
    alert(myArray[0]);
</script>

Fantástico… en el alert aparece ’1′… te acabas de ahorrar un dolor de cabeza…

¿Funcionará con objetos?

Veamos…

<?php
    include("JSON.php");
    $json = new Services_JSON();
    $foo->id = 'Foo';
    $foo->Class = 'Object';
    $myjson = $json->encode($foo);
?>
<script src="json.js" type="text/javascript" language="javascript" charset="utf-8"></script>
<script>
    var myObj = JSON.parse('<?php echo $myjson; ?>');
    alert(myObj.id);
</script>

Dios mio! En el alert aparece ‘Foo’! :D

Sin entrar a valorar si JSON tendrá el mismo futuro que WDDX (una tecnología parecida, igualmente práctica y que no usa nadie), la verdad es que a mí por lo menos me va a venir de coña para un par de chorradas que ando programando…

Espero que el hecho de que Yahoo haya empezado a ofrecer sus Web Services en JSON le de un empujoncillo al sistema.

Si te has quedado con ganillas de más, aquí va un tutorial de XML.com: JSON and the Dynamic Script Tag: Easy, XML-less Web Services for JavaScript

36 thoughts on “JSON, otra idea que mola…”

Agustín Jiménez on 14/01/2006 at 14:41 said:

Pero tío!! que cosa más guapa. Jejeje. Al leerlo con detenimiento he visto la luz! jejeje. Lo voy a usar con el proyecto GUITA, es justo lo que me faltaba por hacer! Thx!
ale on 14/01/2006 at 14:45 said:

Hehehe… a ver si os vais a creer que aquí se recomienda cualquier cosa :P

Efectivamente, JSON es una de esas cosas que cuando entiendes y pruebas se te queda cara de niño pequeño :)
Oscar Emilio Antolínez Collazos on 18/02/2006 at 14:51 said:

Vaya pues!… muy interesante lo voy a probar en un desarrollo que me trae loco, esto me ha de servir mucho, gracias por compartirlo tio.
Pingback: JSON en del.icio.us at Taberna del Turco
Pingback: mildiez.net » Archivo de bitácora » Usando AJAX y JSON para visualizar “clicks” en enlaces
Jorge on 27/03/2006 at 03:17 said:

Hola!

Esta idea es excelente ahora tiempo y funciona de maraviall, pero tengo un problema no se como usarla n delphi, alguien tiene ejemplos?, se los agradeceria muchisimo y para mejor ayuda publicarlos aqui…. Gracias
Carlos Mayorga on 29/03/2006 at 10:40 said:

En http://www.json.org/ puedes encontrar todas las implementaciones para la mayoria de lenguajes. ;)
Pingback: BlogOnRails.com » Blog Archive » ¿ JSON ?
Sarah on 22/05/2006 at 23:37 said:

Lo de JSON de pasar una array de php a javascript esta muy bueno, eso me quietaria varios dolores de cabeza, pero tengo una pregunta como o donde consigo los codigo que los archivos json.js y json.php que se usaron para este ejemplo, o una iedea de como hacerlos, la verdad hasta ahorita me entero de JSON y me ayudaria mucho conseguir estos archivos, ya vi las paginas de los diferentes enlaces que aparecen en esta pagina pero no he encontrado el archivo que necesiro que es json.js.

Muchas gracias por su ayuda………..
ale on 23/05/2006 at 06:24 said:

Puesssssssssss… siguiendo los enlaces del post, te encuentras con:

json.js

json.php

(¿de verdad no los has visto?)
Sarah on 23/05/2006 at 16:33 said:
Hola nuevamente, Primeramente gracias por el archivo de json.php. Estoy probando el ejercicio del ejemplo: Con la parte de: encode($my_array); printf ($myjson); ?> Todo funciona bien y me da la siguiente salida salida: ["Sarah","Matha","Ana Yancy","Maria Jose","Coralia Lopez"]

Pero cuando le agrego a ese codigo las lineas de javascript para pasarlo a un array de javascript:
```
var myArray = JSON.parse('');

alert(myArray[0]);

alert(myArray.length);
```
Me envia un error que dice: ‘JSON’ no esta definido.

Supongo que lo que esta mal es mi archivo json.js, y lo que contiene ese archivo es lo siguiente:

(function () { var m = { ‘\b’: ‘\b’, ‘\t’: ‘\t’, ‘\n’: ‘\n’, ‘\f’: ‘\f’, ‘\r’: ‘\r’, ‘”‘ : ‘\”‘, ‘\’: ‘\\’ }, s = { array: function (x) { var a = ['['], b, f, i, l = x.length, v; for (i = 0; i
Sarah on 23/05/2006 at 16:45 said:

Disculpa por el comentario anterior, parece que escribi demaciado y se trunco parte del codigo: La parte del archivo php es: encode($my_array); printf ($myjson); ?>
Sarah on 23/05/2006 at 16:49 said:

Bueno algo pasa que no se ve todo en codigo es el comentario, pero lo que no me funciona es el json.js que copie de http://www.json.og/json.js

Podrian ayudarme…

De antemeno muchas gracias por su ayuda….
Sarah on 23/05/2006 at 17:15 said:

Hola nuevamente, acabo de encontrar un archivo de json.js en un documento que habla de Ajax, yo solo use el archivo que me interesaba y me funcion perfectamente, pero el archivo de json.js que encontre es completamente diferente al de http://www.json.org/jsoin.js
ale on 23/05/2006 at 17:56 said:

Vaya, parece que han cambiado completamente el json.js de json.org (que se supone que es la versión “oficial”)

Ahora hay que hacer

var myArray = String.parseJSON();

Es decir, deja de existir el objeto JSON y su funcionalidad se integra en tres métodos de los objetos Array, Object y String: Array.toJSONString(), Object.toJSONString() y String.parseJSON();
Willy on 02/06/2006 at 16:48 said:

Hola

leyendo tu articulo supe comprender mas cosas q me hacian un dolor de cabeza muchas gracias… yo estoy viendo ajax en symfony me hace mas facil pero necesitaba algunas cositas… y con esto es suficiente aunque no uso JSON pero la idea era pasar un array en javascrip quien lo iba a suponer……….

bye
Luis Bustamante on 06/06/2006 at 21:03 said:

Gracias por la referencia, JSON es una de las tecnologias que no me animaba a usar porque no sabia exactamente como funcionaba, ni para que servia, hasta que me vi en un apuro, y ps encontré tu artículo, de verdad gracias.
Jesus on 12/06/2006 at 23:34 said:

Probe el JSON y me da la siguiente salida salida: [”Sarah”,”Matha”,”Ana Yancy”,”Maria Jose”,”Coralia Lopez”] pero cuando cambio los datos por nombre con tildes no me visualiza correctamente.
Pedro Maicas on 19/06/2006 at 15:24 said:

Creo que estaba usando Ajax, sin darme cuenta de ello :-)

Pero el descubrimiento, gracias a esta y otras páginas, de JSON es algo nuevo para mi. Me parece una idea extraordinaria el poder mover datos desde el servidor hacia el navegador directamente en formato javascript, .. gracias !
Eva on 04/07/2006 at 16:26 said:

Hola, tengo un problemilla tengo que pasar un array de javascript a php, he estado mirando el ejemplo, de php a javascript, pero me lio, y no soy capaz de hacerlo funcionar en sentido contrario. Si alguien pudiera ponerme un ejemplo, se lo agradecería muchísimo, es para mi proyecto de fin de carrera.
Sarah on 14/07/2006 at 21:42 said:
Tal ves te ayude este ejemplo: arreglojs=new Array();”; for($i=0;$iarreglojs[".$i."]=”.$temporal.”"; } ?>
```
for(i=0;i");
```
}
Sarah on 14/07/2006 at 21:46 said:

Lo siento trate de el ponerte un ejemplo pero no aparece todo el codigo; buieno trata en una misma pagina que sea php poner lo siguiente: entre codigo de php echo “arreglojs=new Array();”; // declaras el arraglo for($i=0;$iarreglojs[".$i."] =”.$temporal.”"; //llenas el arreglo de js de lo que php te da en este caso el valor de i } y en el de javascript escribe los sigueinte: for(i=0;i”); debera paparecerte en la pantalla: 0 1 2 3 4
pepito on 17/08/2006 at 22:13 said:

Yo me he encontrado un problema con la codificación cuando hay cadenas de texto con tildes… Parece que usa UTF-8 y salen caracteres ‘raros’ al hacer el $json->encode( $var );

¿Alguna solucion o alternativa?
Pablim on 06/09/2006 at 15:08 said:

¿alguien sabe como es el formato de las cadenas para funciones? Lo que pretendo hacer es pasar la definicion de una funcion js Ej:
function GetValue(oId){ alert(document.getElemetById(oId).value); }
ale on 06/09/2006 at 17:00 said:

Pablim… es algo como esto:

GetValue("cabecera");
Sarah on 25/09/2006 at 23:02 said:

Hola, tengo un problemita con Ajax Estoy Ajax con XMLHttp y con capas, pero cuando no puedo ejecutar codigos de javascript en las pagina que llamo, alguien sabe como puedo hacer para que ejecutar el codigo en la misma pagina que llamo.

De antemano muchas gracias por su ayuda……
Pingback: Algo que hacer - Weblog dedicado a la tecnología, Internet, libros, e-sociedad, hackers, marketing, curiosidades...
Guillermo on 10/10/2006 at 21:04 said:

Tengo problemas con la ñ y las tildes simplemente no me muestra esos caracteres ..que puede estar pasando todo lo trabajo con UTF-8 y mi BD en Mysql funciona Ok con esos caracteres ..el problema es cuando lo muestro en un caja de texto luego de usar JSON . Que creen que pueda psar ..

Saludos
ale on 10/10/2006 at 21:25 said:
Guillermo » Asegúrate de que tu servidor también está sirviendo en UTF-8 el resultado de una consulta. Por defecto los JS no se sirven como UTF-8 a menos que configures el servidor.

Otra opción que se usa de vez en cuando es poner antes del contenido de la respuesta una línea como esta:
```
&lt;?xml version="1.0" encoding="UTF-8" ?&gt;
```
René Paz on 21/11/2006 at 15:56 said:

Que tal nniños…

Revisando sus comentarios le verdad es que JSON es LA NETA… pero me gustaría saber cómo implemento un WEB SERVICES que regrese JSON en lugar de XML o que tengo que hacer para generar JSON automáticamente como se genera XML desde un WEB SERVICES…

Ojalá alguien pueda ayudarme mi correo es: renebpr@hotmail.com

Gracias y muchos salu2!!!
GurX on 14/12/2006 at 18:36 said:

Pues muy fàcil, acabo de hacer un servlet que obtiene unos datos de una BD. Luego desde una web llamo al servlet utilizando AJAX, este servlet me devuelve un objecto JSONArray creado en java. Una vez la informació esta en la parte cliente, con javascript haces un eval (resposta_servlet) i ya tienes el objeto JSON en una variable. Piensa en importar las librerias correspondientes…

La verdad és que me ha ido de cojones el JSON ;)
Pingback: JSON vs XML: Empieza el debate - aNieto2K
gustavo on 19/01/2007 at 14:38 said:

bueno he estado investigando sobre esto y encontre un ejemplo bueno sobre consulta a BD, pero no lo puedo hacer correr me tira un error, el ejemplo esta en http://ejemplosajax.googlecode.com/svn/trunk/ y tienen k bajar el prototype.js, quizas la version que baje del prototype este con el error pk me arroja un error de Error: ‘IndexOf’ is undefined. si alguien logra solucionar esto le estare muy agradecido, porque yo trate y no pude
rafael on 03/04/2007 at 06:51 said:

Tengo el mismo problema de muchos que la libreria de json no me funciona con tildes y caracteres especiales, alguien le encontro una solucion?
Rodrigo on 27/04/2007 at 17:58 said:

Donde puedo encontrar buena info en castellano de Ajax junto con JSON (orientado al javascript) y Java que tenga ejemplos de envio de informacion de la jsp a java y viceversa, la devolucion hacias una estructura JSON ???
Pingback: Studio Creative Weblog

Sofá Naranja

el blog de Ale Muñoz, donde hay menos naranja de lo que uno podría esperar con un nombre como este

JSON, otra idea que mola…

36 thoughts on “JSON, otra idea que mola…”