Curso librerias Web 2.0.

Aplicaciones Web Serv Inf UA

Noviembre 2008

J SON [1]


JSON

J SON.............................................................................................................................. 1
1) DEFINICIN............................................................................................................... 1
LITERALES DE MATRIZ......................................................................................... 1
LITERALES DE OBJ ETO........................................................................................ 2
SINTAXIS DE J SON................................................................................................ 3
2) CODIFICAR Y DECODIFICAR J SON........................................................................ 4
MOOTOOLS: J son.............................................................................................. 4
J SON.encode(objeto).............................................................................................. 4
J SON.decode(string, secure) .................................................................................. 5
Request.J SON......................................................................................................... 5
J son escrito en ASP ................................................................................................ 7
J son leido desde ASP ............................................................................................. 9
Ejercicios............................................................................................................... 10

1) DEFINICIN

Con la creciente popularidad de los servicios Web, XML se ha convertido
prcticamente de facto en el estndar para transmisin de datos. Pero se necesita
transmitir a travs de Internet muchos ms bytes de informacin para realizar una
tarea que se podra llevar a cabo con un flujo de informacin mucho ms pequeo.

As se han desarrollado nuevas formas de compresin XML e, incluso, nuevos
formatos XML completos, tales como Binary XML (XML binario). Todas estas
soluciones funcionan ampliando o aadindose a XML, conviniendo los aspectos de
compatibilidad descendente en un asunto a tener en cuenta. Douglas Crockford, un
experimentado ingeniero software, propuso un nuevo formato de datos construido
sobre J avaScript llamado JSON, JavaScript Object Notation (notacin de objetos
J avaScript).

J SON es un formato de datos muy ligero basado en un subconjunto de la
sintaxis de J avaScript: literales de matrices y objetos. Como usa la sintaxis J avaScript,
las definiciones J SON pueden incluirse dentro de archivos J avaScript y acceder a ellas
sin ningn anlisis adicional como los necesarios con lenguajes basados en XML.

LITERALES DE MATRIZ

Estos elementos se especifican utilizando corchetes ( [ y ] ) para encerrar listas
de valores delimitados por comas de J avaScript (lo que puede significar cadenas,
nmeros, valores booleanos o valores null) tales como:

var aNombr e = [ " J ai me" , " Pepe" , " Al f onso" ] ;
al er t ( aNombr e [ 0] ) ; / / muest r a " J ai me

OJ O: la primera posicin de la matriz es 0. Como las matrices en J avaScript no
tienen un tipo asignado, pueden utilizarse para almacenar cualquier nmero o
Curso librerias Web 2.0.
Aplicaciones Web Serv Inf UA

Noviembre 2008

J SON [2]
cualquier tipo de datos diferente.

Si estuviramos definiendo una matriz sin utilizar la notacin literal, tendramos
que utilizar el constructor array. Este sistema no est permitido en J SON.

var aVal ues = new Ar r ay( " cadena" , 24, t r ue, nul l ) ;




LITERALES DE OBJETO

Los literales de objeto se utilizan para almacenar informacin en parejas
nombre-valor para crear un objeto, Un literal de objeto se define mediante llaves ({y })
Dentro de estas, podemos colocar cualquier nmero de parejas nombre-valor, definida
mediante una cadena, un smbolo de dos puntos y el valor. Cada pareja nombre-valor
deben estar separadas por coma.

var oPer sona = {" nombr e" : " Rober t " , " edad" : 30, " hi j os" : t r ue };
al er t ( oPer sona. nombr e) ;

Tambin podemos utilizar la notacin de corchetes y pasar el nombre de la
propiedad:

al er t ( oPer sona[ " edad" ] ) ;


Utilizando el constructor J avaScript Object, que no est permitido en J SON:

var oPer sona = new Obj ect ( ) ;
oPer sona. nombr e = " r ed" ;



Un valor puede ser una cadena de caracteres con comillas dobles, o un nmero, o true
o false o null, o un objeto o una matriz. Estas estructuras pueden anidarse.



Curso librerias Web 2.0.
Aplicaciones Web Serv Inf UA

Noviembre 2008

J SON [3]



Ejemplo:
var oPer sona2 =
{" nombr e" : " Rober t " , " edad" : 30, " hi j os" : [ " J ai me" , " Pepe" , " Al f onso" ] };
al er t ( oPer sona2. hi j os[ 1] ) ; / / Da Pepe


O ms complejo:
var oPer sona3 =
[ {" nombr e" : " Rober t " , " edad" : 30, " hi j os" : [ " J ai me" , " Pepe" , " Al f onso" ] },
{" nombr e" : " Mar i a" , " edad" : 36, " hi j os" : [ " Hi j o Mar i a" , " Hi j o2 Mar i a" ] }] ;
al er t ( oPer sona3[ 1] . edad) ; / / Da 36


SINTAXIS DE JSON

La sintaxis de J SON realmente no es nada ms que la mezcla de literales de objeto y
matrices para almacenar datos. J SON representa solamente datos No incluye el
concepto de variables, asignaciones o igualdades.

Este cdigo:
var oPer sona3 =
[ {" nombr e" : " Rober t " , " edad" : 30, " hi j os" : [ " J ai me" , " Pepe" , " Al f onso" ] },
{" nombr e" : " Mar i a" , " edad" : 36, " hi j os" : [ " Hi j o Mar i a" , " Hi j o2 Mar i a" ] }] ;

Quedara
[ {" nombr e" : " Rober t " , " edad" : 30, " hi j os" : [ " J ai me" , " Pepe" , " Al f onso" ] },
{" nombr e" : " Mar i a" , " edad" : 36, " hi j os" : [ " Hi j o Mar i a" , " Hi j o2 Mar i a" ] }]

Hemos eliminado la variable oPersona3, as como el punto y coma del final. Si
transmitimos esta informacin a travs de HTTP a un navegador, ser bastante
rpido, dado el reducido nmero de caracteres.

Suponga que recupera esta informacin utilizando y la almacena en una
variable llamada sJ SON. Ahora, dispondr de una cadena de informacin, no de un
objeto. Para transformarla en un objeto, simplemente utilizaremos la funcin eval ():



Curso librerias Web 2.0.
Aplicaciones Web Serv Inf UA

Noviembre 2008

J SON [4]


var sJ SON =
' [ {" nombr e" : " Rober t " , " edad" : 30, " hi j os" : [ " J ai me" , " Pepe" , " Al f onso" ] },
{" nombr e" : " Mar i a" , " edad" : 36, " hi j os" : [ " Hi j o Mar i a" , " Hi j o2 Mar i a" ] }] ' ;

var oPer sona4 = eval( " ( " + sJ SON + " ) " ) ;

al er t ( oPer sona4[ 1] . edad) ;


Es importante incluir los parntesis adicionales alrededor de cualquier cadena
J SON antes de pasarla a eval (). Recuerda que las llaves representan tambin
sentencias en J avaScript (como en la sentencia if). La nica forma que tiene el
intrprete de saber que las llaves representan un objeto y no una sentencia es buscar
un signo igual al principio o buscar parntesis rodeando el texto (lo cual indica que el
cdigo es una expresin que se tiene que evaluar en lugar de una sentencia para
ejecutar)



2) CODIFICAR Y DECODIFICAR JSON

Como parte de los recursos de J SON, Crockford cre una utilidad que se puede
emplear para codificar y descodficar objetos J SON y J avaScript. El cdigo fuente de
esta herramienta se puede descargar en la direccin http://www.json.org/js.html. Por
supuesto nosotros no lo vamos a usar, utilizaremos el codificador / decodificador de
MOOTOOLS.

Pero, no podamos decodficar J SON utilizando la funcin eval () ?. Hay un problema
inherente en la utilizacin de eval(), que evala cualquier cdigo J avaScript que se
pasa a la funcin y esto es un gran riesgo de seguridad.

MOOTOOLS: Json

J son nos facilita la tarea de pasar de un string J son a un Objeto J avascript y viceversa.

Nota: Todo lo referente a J SON respecto a la versin anterior (1.11) ha cambiado
bastante, haciendose completamente incompatibles. Por ejemplo, antes se escriba
J son. Ahora es J SON.

JSON.encode(objeto)
Nos permite pasar un Objeto J avascript a un simple String.

var obj et o = {
nombr e: ' Moot ool s' ,
descr i pci on: ' Fr amewor k'
}

var st r = J SON. encode( obj et o) ;
/ / {" nombr e" : " Moot ool s" , " descr i pci on" : " Fr amewor k" }

Curso librerias Web 2.0.
Aplicaciones Web Serv Inf UA

Noviembre 2008

J SON [5]


JSON.decode(string, secure)
Nos permite pasar de un String J son a un Objeto J avascript.

var st r = ' {" nombr e" : " Moot ool s" , " descr i pci on" : " Fr amewor k" }' ;
var obj et o = J SON. decode( st r ) ;
al er t ( obj et o. nombr e) ; / / Moot ool s
al er t ( obj et o. descr i pci on) ; / / Fr amewor k

Secure es un parmetro opcional que por default es false, pero si lo cambiamos a true,
se chequear la sintaxis del string J son. En caso de que el string sea incorrecto,
J son.decode devolver null.

var st r = ' {" nombr e" : " Moot ool s" , " descr i pci on" : " Fr amewor k}' ;
/ / Fal t an " par a Fr amewor k
var obj et o = J SON. decode( st r , t r ue) ;
i f ( obj et o ! = nul l )
al er t ( obj et o. nombr e) ;
el se
al er t ( ' El st r i ng J SON es i ncor r ect o. ' ) ;
/ / El st r i ng J SON es i ncor r ect o.


Request.JSON

Nos permite enviar y recibir objetos J SON mediante AJ AX de manera muy simple.

Hereda todos los mtodos y propiedades de la clase Request (para trabajo con AJ AX)
(http://mootools.net/docs/Request/Request).

Recibiendo un objeto:

var st r _j son = new Request . J SON( {
ur l : " st r _j son. asp" ,
onCompl et e: f unct i on( obj _j son) {escr i be( obj _j son[ 0] . nombr e) }
}) . get ( ) ;

El resultado ser Susana si el cdigo de str_json.asp es:
[ {" nombr e" : " Susana" , " Edad" : 36, " Peso" : nul l },
{" nombr e" : " Andr ea" , " Edad" : 25, " Peso" : 72 }]

Indicamos la url de nuestro script, en este caso str_json.asp. Recibimos el objeto que
nos devuelve str_json.asp que es el que viene como parmetro en la funcin del
evento onComplete (obj_json).

Tambin existe onSuccess, que es muy parecido a onComplete. Pero este mtodo
tambin permite recoger la cadena de json.

var st r _j son = new Request . J SON( {
ur l : " st r _j son. asp" ,
onSuccess: f unct i on( obj _j son, st r _j son) {escr i be( st r _j son) ; }
}) . get ( ) ;

El resultado ser:
Curso librerias Web 2.0.
Aplicaciones Web Serv Inf UA

Noviembre 2008

J SON [6]
[ {" nombr e" : " Susana" , " Edad" : 36, " Peso" : nul l },
{" nombr e" : " Andr ea" , " Edad" : 25, " Peso" : 72 }]

Supongamos que tenemos una base de datos de productos y queremos, mediante
ASP y AJ AX, mostrar todos esos productos. Con Request.J SON enviaramos la
peticin a ASP, ste buscara todos los productos y los devolvera en formato J SON.
Una vez que tenemos los datos en dicho formato, solo debemos mostrarlos con
javascript.

Ahora, si no queremos mostrar todos los productos o si deseamos realizar una
bsqueda debemos indicarle a ASP cual es el filtro que debe aplicar, y el mtodo get
nos permite envirselo. Este mtodo puede llevar entre parntesis los valores que le
pasamos por get. Por ejemplo:

st r _j son. get ( {nombr e: Susana})

Esto cambiar la url a: str_json.asp?nombre=Susana Ahora con el mtodo get
estamos enviando un objeto, el cual puede ser un filtro o un parmetro de bsqueda.

Existe otro mtodo equivalente post. str_json.post({nombre:Susana})

ACENTOS:
Siempre que trabajemos con AJ AX nos vamos a encontrar tarde o temprano con el
problema de la codificacin de la pgina. Nosotros trabajos en ISO-8895-1, mientras
que AJ AX toma por defecto UTF-8 (adis acentos).

Podramos pensar que poniendo estas cabeceras en el ASP / PHP al que llamamos
mediante AJ AX tenemos el problema solucionado. Pero no es as.

ASP
<%Response. AddHeader " char set " , " I SO- 8859- 1" %>

PHP
<?header ( char set : I SO- 8859- 1) ?>

En teoria Request lleva una propiedad llamada encoding. Pero tampoco funciona.

Solucin: Se debe cambiar la codificacin del
asp de ANSI a UTF-8 al guardar. Desde
WebBuilder.


O desde la barra de estado.




Curso librerias Web 2.0.
Aplicaciones Web Serv Inf UA

Noviembre 2008

J SON [7]
Json escrito en ASP
Vamos a conseguir que un ASP empaquete correctamente el J SON.

Para ello necesitamos acudir a la pgina oficial de json.org apartado de ASP
http://www.webdevbros.net/2007/04/26/generate-json-from-asp-datatypes/ y
descargarnos http://www.webdevbros.net/wp-content/uploads/2008/07/json151.zip


Con la clase que nos hemos descargado de J SON, nos permite pasar desde un ASP:
Un array
Un diccionario
Un registro de una base de datos
Un objeto

Un array:

J AVASCRIPT
/ / - - - - - - - - - - - - - - - - - - - - - - - - - 3 r equest sobr e un ar r ay pasado a j son
var st r _j son = new Request . J SON( {
ur l : " st r _j son1. asp" ,
onCompl et e: f unct i on( obj _j son) {escr i be( obj _j son. st r _j son[ 0] ) }
}) . get ( ) ;
Pinta a Felipe.

El cdigo de ASP
<! - - #i ncl ude f i l e=" j son151/ j son. asp" - - >
<%
di mvect or
vect or = ar r ay( " Fel i pe" , 23, t r ue, " " )

set mi J son = new J SON
val or es = mi J son. t oJ SON( " st r _j son" , vect or , f al se)
r esponse. wr i t e val or es
set mi J son = not hi ng


%>

Lo qu pinta este asp:
{" st r _j son" : [ " Fel i pe" , 23, t r ue, " " ] }

Si pusieramos a true
" st r _j son" : [ " Fel i pe" , 23, t r ue, " " ]


Un diccionario:

J AVASCRIPT
/ / - - - - - - - - - - - - - - - - - - - - - - - - - 4 r equest sobr e un di cci onar i o pasado a j son
var st r _j son = new Request . J SON( {
ur l : " st r _j son2. asp" ,
onCompl et e: f unct i on( obj _j son) {escr i be( obj _j son. st r _j son. Apel l i dos) }
}) . get ( ) ;
Pinta a Tango.

El cdigo de ASP

Curso librerias Web 2.0.
Aplicaciones Web Serv Inf UA

Noviembre 2008

J SON [8]


<! - - #i ncl ude f i l e=" j son151/ j son. asp" - - >
<%
set di c = ser ver . cr eat eObj ect ( " scr i pt i ng. di ct i onar y" )
di c. add " Nombr e" , " J onat an"
di c. add " Apel l i dos" , " Tango"
di c. add " Not as" , ar r ay( 2, 7, 234)

set mi J son = new J SON
val or es = mi J son. t oJ SON( " st r _j son" , di c, f al se)
r esponse. wr i t e val or es
set mi J son = not hi ng
set di c = not hi ng
%>

Lo qu pinta este asp:
{" st r _j son" : {" Nombr e" : " J onat an" , " Apel l i dos" : " Tango" , " Not as" : [ 2, 7, 234] }}


Un registro de una base de datos

J AVASCRIPT
/ / - - - - - - - - - - - - - - - - - - - - - - - - - 5 r equest sobr e una base de dat os access
var st r _j son = new Request . J SON( {
ur l : " st r _j son3. asp" ,
onCompl et e: f unct i on( obj _j son) {escr i be( obj _j son. st r _j son[ 0] . apel l i dos) }
}) . get ( ) ;
Pinta Tilla

El cdigo de ASP
<! - - #i ncl ude f i l e=" j son151/ j son. asp" - - >
<%
Set Con = Ser ver . Cr eat eObj ect ( " ADODB. Connect i on" )
Con. Open " PROVI DER=MI CROSOFT. J ET. OLEDB. 4. 0; DATA SOURCE=" &
Ser ver . Mappat h( " bd1. mdb" ) & " ; "
sql = " sel ect * f r omper sonas"
set r s = Con. execut e( sql )
set mi J son = new J SON
r esponse. wr i t e mi J son. t oJ SON( " st r _j son" , r s, f al se)
set mi J son = not hi ng
set Con = not hi ng
%>

Lo qu pinta este asp:
{" st r _j son" :
[
{" i d" : 1, " nombr e" : " Ai t or " , " apel l i dos" : " Ti l l a" , " not a" : 1},
{" i d" : 2, " nombr e" : " J uani t o" , " apel l i dos" : " Mat e" , " not a" : 10},
{" i d" : 3, " nombr e" : " Mar i ano" , " apel l i dos" : " Gi ns" , " not a" : 0}
] }


Un objeto

J AVASCRIPT

Curso librerias Web 2.0.
Aplicaciones Web Serv Inf UA

Noviembre 2008

J SON [9]


/ / - - - - - - - - - - - - - - - - - - - - - - - - - 6 r equest sobr e un obj et o
var st r _j son = new Request . J SON( {
ur l : " st r _j son4. asp" ,
onCompl et e: f unct i on( obj _j son) {escr i be( obj _j son. st r _j son. Apel l i dos) }
}) . get ( ) ;
Pinta Tango

El cdigo de ASP
<! - - #i ncl ude f i l e=" j son151/ j son. asp" - - >
<%
cl ass per sona
publ i c nombr e, apel l i dos, not as

publ i c f unct i on r ef l ect ( )
set r ef l ect = ser ver . cr eat eObj ect ( " scr i pt i ng. di ct i onar y" )
r ef l ect . add " Nombr e" , nombr e
r ef l ect . add " Apel l i dos" , apel l i dos
r ef l ect . add " Not as" , not as
end f unct i on
end cl ass

set p = new per sona
p. nombr e = " J onat an"
p. apel l i dos = " Tango"
p. not as = ar r ay( 2, 7, 234)

set mi J son = new J SON
val or es = mi J son. t oJ SON( " st r _j son" , p, f al se)
r esponse. wr i t e val or es
set mi J son = not hi ng
set p = not hi ng
%>

Podemos observar el mtodo reflect que es especial para que la clase de ASP J SON
funcione.

Lo qu pinta este asp:
{" st r _j son" : {" Nombr e" : " J onat an" , " Apel l i dos" : " Tango" , " Not as" : [ 2, 7, 234] }}


Json leido desde ASP
Descargamos el componente que nos hace falta desde:
http://www.crayoncowboy.com/downloads/asp/CCBJ SONParser.zip

Informacin detallada de este componente la tenemos en
http://blog.crayoncowboy.com/?p=7


Supongamos que nos llega esta cadena
st r _j son = " {' Susana' : {' Cor r eo' : ' pp@uno. es' }, ' J uan' : {' Cor r eo' :
' pp@uno. es' }}"

Que la recibe por post, get o simplemente la escribimos.


Curso librerias Web 2.0.
Aplicaciones Web Serv Inf UA

Noviembre 2008

J SON [10]
<! - - #i ncl ude f i l e=" j son151/ CCB. J SONPar ser . asp" - - >
<%
set J Par = new CCBJ sonPar ser
st r _j son = " {' Susana' : {' Cor r eo' : ' pp@uno. es' }, ' J uan' : {' Cor r eo' :
' pp@uno. es' }}"
J Par . J SON = st r _j son
cor r eo = J Par . val ueFor ( " Susana. Cor r eo" )
r esponse. wr i t e " Susana. Nombr e " & cor r eo & " <hr / >"

J Par . par se
set per sonal = J Par . di ct i onar y
f or each per sonas i n per sonal . keys
Response. Wr i t e per sonas & " " & per sonal . i t em( per sonas) . i t em( " Cor r eo" ) &
" <br / >"
neXt

set per sonal = not hi ng
set J par = not hi ng

r esponse. end
%>

Hacemos referencia a la librera descargada:
<! - - #i ncl ude f i l e=" j son151/ CCB. J SONPar ser . asp" - - >

Creamos objeto:
set J Par = new CCBJ sonPar ser

Y luego o localizamos el valor de un elemento.propiedad (Susana.Correo) cuyo
resultado ser Susana.Nombre pp@uno.es.

O podemos crear un diccionario :
J Par . par se
set per sonal = J Par . di ct i onar y

Que se comporta como un diccionario ASP.

Response. wr i t e per sonal . i t em( " Susana" ) . i t em( " Cor r eo" )

Ejercicios

4.- Partiendo de la base de datos que se te entrega asignturas.mdb y con esta
estructura de datos



y con estos datos:


Curso librerias Web 2.0.
Aplicaciones Web Serv Inf UA

Noviembre 2008

J SON [11]


se pide crear una pgina html que tenga dos enlaces: bsico y todos

Al pinchar sobre bsico debe aparecer una lista de opciones de los cursos bsicos.
Al pinchar sobre todos debe aparecer una lista de opciones de todos los cursos.

Nunca se debe recargar la pgina. Adems la informacin debe de salir de esa base
de datos, de manera que si se actualiza los listados se deben actualizar tambin.

Bsico:


Todos:


Curso librerias Web 2.0.
Aplicaciones Web Serv Inf UA

Noviembre 2008

J SON [12]