Sofa Naranja ahora, con un 125% más de naranja

Publicado
24 December 2005 @ 9pm

Categorías
Código, JavaScript, PHP

JSON, otra idea que mola…

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 Comentarios

Agustín Jiménez
14 January 2006 @ 2pm

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
14 January 2006 @ 2pm

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
18 February 2006 @ 2pm

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.

[...] zaran los datos. Y volviendo al tema, yo, personalmente, no sabía nada hasta que leí en Sofá Naranja, y aun así, fue lo típico que lees y dices “joder, que guay& [...]

[...] ne buen soporte para codificar en JSONas que usar JSON para Javascript (gracias Ale, por ese post sobre JSON) var enlaces = $A($(’lista’).getElementsByT [...]

Jorge
27 March 2006 @ 3am

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
29 March 2006 @ 10am

En http://www.json.org/ puedes encontrar todas las implementaciones para la mayoria de lenguajes. ;)

[...] no ocasione conflictos con ningún otro script que sea llamado en la misma página.   JSON, otra idea que mola… JSON para todos. Listas enlazadas [...]

Sarah
22 May 2006 @ 11pm

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
23 May 2006 @ 6am

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

json.js

json.php

(¿de verdad no los has visto?)

Sarah
23 May 2006 @ 4pm

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
23 May 2006 @ 4pm

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
23 May 2006 @ 4pm

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
23 May 2006 @ 5pm

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
23 May 2006 @ 5pm

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
2 June 2006 @ 4pm

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
6 June 2006 @ 9pm

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
12 June 2006 @ 11pm

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
19 June 2006 @ 3pm

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
4 July 2006 @ 4pm

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
14 July 2006 @ 9pm

Tal ves te ayude este ejemplo: arreglojs=new Array();”; for($i=0;$iarreglojs[".$i."]=”.$temporal.”";
} ?>

for(i=0;i");    

}

Sarah
14 July 2006 @ 9pm

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
17 August 2006 @ 10pm

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
6 September 2006 @ 3pm

¿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
6 September 2006 @ 5pm

Pablim… es algo como esto:

GetValue("cabecera");

Sarah
25 September 2006 @ 11pm

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……

[...] tags: apache htaccess) PHP Script Tips - Working with Directoris and Files (tags: php) JSON, otra idea que mola… (tags: php json) All CSS Properties Listed Alphabeticall [...]

Guillermo
10 October 2006 @ 9pm

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
10 October 2006 @ 9pm

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:

<?xml version="1.0" encoding="UTF-8" ?>

René Paz
21 November 2006 @ 3pm

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
14 December 2006 @ 6pm

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 ;)

[...] Por otro lado JSON está pegando fuerte en la programación web debido a las ventajas que ofrece sobre el XML. [...]

gustavo
19 January 2007 @ 2pm

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
3 April 2007 @ 6am

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
27 April 2007 @ 5pm

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 ???

Studio Creative Weblog
19 October 2007 @ 8am

[...] si no quieres utilizar el framework puedes instalar JSON como modulo de PHP. En la pagina del Sofa Naranja encontraras una breve explicación de como utilizar JSON en [...]