Inicio > HTML, JavaScript > JSON (JavaScript Object Notation || Literal JavaScript) VS XML (Extensible Markup Language)

JSON (JavaScript Object Notation || Literal JavaScript) VS XML (Extensible Markup Language)

Bueno esta es una breve comparación que he hecho sobre dos lenguajes intermedios… ¿ a que me refiero con “intermedios” ? Que son lenguajes de intercambio de datos entre aplicaciones.

01.- Definiciones

XML, siglas en inglés de Extensible Markup Language (lenguaje de marcas extensible), es un metalenguaje extensible de etiquetas desarrollado por el World Wide Web Consortium (W3C).

JSON, acrónimo de JavaScript Object Notation, es un formato ligero para el intercambio de datos. JSON es un subconjunto de la notación literal de objetos de JavaScript que no requiere el uso de XML.

02.- Estructura

Ahora dejaré el mismo código escrito en ambos lenguajes

XML

<?xml version="1.0" encoding="utf-8" ?>
<Empleados>
	<Empleado tipo="Honorario">
		<Nombre>Juan Peres</Nombre>
		<Edad>56</Edad>
		<HorasTrabajadas>5</HorasTrabajadas>
		<ValorHora>10</ValorHora>
	</Empleado>
</Empleados>

213 caracteres, 229 bytes 9 líneas

JSON

{ empleados : [
	{
		tipo: "Honorario",
		nombre: "Juan Peres",
		edad: 56,
		HorasTrabajadas: 5,
		ValorHora: 10
	}
]}

120 caracteres, 136 bytes, 9 líneas

Bien hasta aquí bien parecidos, ambos con una estructura jerárquica,aunque JSON aquí saca la primera ventaja:
JSON pesa menos que XML, ésto es gracias a que no usa tags, esto disminuye su peso.

03.- Carga en el Servidor

Bueno siguiendo con el ejemplo anterior les dejo el siguiente caso: Ahora quiero mostrar el sueldo del empleado honorario, eso se hace con la siguiente formula:

Sueldo = HorasTrabajadas * ValorHora

XML

<?xml version="1.0">
<Empleados>
	<Empleado tipo="Honorario">
		<Nombre>Juan Peres</Nombre>
		<Edad>56</Edad>
		<HorasTrabajadas>5</HorasTrabajadas>
		<ValorHora>10</HorasTrabajadas>
		<Sueldo>50</Sueldo>
	</Empleado>
</Empleado>

JSON

{ empleados : [
	{
		tipo: "Honorario",
		nombre: "Juan Peres",
		edad: 56,
		horasTrabajadas: 5,
		valorHora: 10,
		sueldo: function() { return this.horasTrabajadas * this.valorHora }
	}
]}

Aqui se ve la primera diferencia notable de JSON, en el primer caso se hizo un calculo por el lado del servidor, donde internamente se multiplico HorasTrabajadas * ValorHora.
Sin embargo en el caso de JSON sueldo se declara como una función que será procesada por el lado del cliente.En JavaScript lo que esta entre llaves { } se refieren a un Objeto y lo que esta entre corchetes [ ] a un Arreglo

entonces los datos, al estar en un objeto, vienen a ser atributos de dicho objeto, por lo que puedo llamar a esos atributos dentro de la función sueldo  que declaré

sueldo: function() { return this.horasTrabajadas * this.sueldo }

¿ Que ventajas trae ésto ? que el servidor se ahorra el procesamiento de esos cálculos y deja a los clientes que lo hagan por el

04.- Obtención de Datos

Para obtener los datos usaré JQuery Framework para hacerlo aun mas fácil .

Obtener XML

<html>
	<head>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
		<script type="text/javascript">
			$.ajax({
				type: "GET",
				url: 'empleados.xml?random='+(Math.random() * (9999-1111)),
				dataType: "xml",
				success: function(data){
					$('Empleado',data).each(function() {
						$('<p>').append(
							"[Nombre: "+$('Nombre',this).text()+"] [Sueldo: "+$('Sueldo',this).text()+"]"
						).appendTo('#empleados')
					});
				}
			});
		</script>
	</head>
	<body>
		<div id="empleados"></div>
	</body>
</html>

Ejemplo: http://estebanfuentealba.net/ejemplos/jsonVSxml/getXML.html

Obtener JSON

<html>
	<head>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
		<script type="text/javascript">
			$.ajax({
				type: "GET",
				url: 'empleados.json?random='+(Math.random() * (9999-1111)),
				dataType: "json",
				success: function(data){
					$.each(data.empleados,function(i,emp) {
						$('<p>').append(
							"[Nombre: "+emp.nombre+"] [Sueldo: "+emp.sueldo()+"]"
						).appendTo('#empleados')
					});
				}
			});
		</script>
	</head>
	<body>
		<div id="empleados"></div>
	</body>
</html>

Ejemplo: http://estebanfuentealba.net/ejemplos/jsonVSxml/getJSON.html

En el caso de XML hay que BUSCAR los datos en el archivo por tags y de ese resultado sacar el texto, En cambio en JSON , al ser un objeto, puedo acceder a sus propiedades directamente.

Tiempo de descarga (Promedio de 5 Pruebas) :

XML		378,4 ms Aprox
JSON		346,6 ms Aprox

05.- Cross Domain

Una de las desventajas de XML es que con Ajax no se puede acceder a algún archivo o WebService de un dominio diferente al que estamos. Esto solo se puede realizar creando un proxy con algún lenguaje de servidor, ocupando nuevamente recursos del servidor (no es optimo)

Para éste ejemplo Tengo un “WebService” en el dominio mp3spider.com.ar

Link del WebService: http://mp3spider.com.ar/WebService.php

Parametro Valor Descripción
datatype string xml o json.
callback string Nombre del metodo a llamar, solo si datatype=json .

Ahora dejaré Las pruebas:

AJAX (Asynchronous JavaScript And XML) Cross Domain

<html>
	<head>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
		<script type="text/javascript">
			$.ajax({
				type: "GET",
				url: 'http://mp3spider.com.ar/WebService.php?datatype=xml',
				dataType: "xml",
				success: function(data){
					$('<p>').append(
						"[Host: "+$('host',data).text()+"]"
					).appendTo('#crossdomain');
				},
				error: function (XMLHttpRequest, textStatus, errorThrown) {
					alert(textStatus);
				}
			});
		</script>
	</head>
	<body>
		<div id="crossdomain"></div>
	</body>
</html>

Ejemplo: http://estebanfuentealba.net/ejemplos/jsonVSxml/crossdomain/crossdomainXML.html

Para poder acceder al WebService Tengo que hacer un proxy en el servidor donde llamo al servicio, en Yahoo explican como hacer uno


AJAJSON (Asynchronous JavaScript And JavaScript Object Notation) Cross Domain

<html>
	<head>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
		<script type="text/javascript">
			$.ajax({
				type: "GET",
				url: 'http://mp3spider.com.ar/WebService.php?datatype=json&callback=?',
				dataType: "json",
				success: function(data){
					$('<p>').append(
						"[Host: "+data.host+"]"
					).appendTo('#crossdomain');
				},
				error: function (XMLHttpRequest, textStatus, errorThrown) {
					alert(textStatus);
				}
			});
		</script>
	</head>
	<body>
		<div id="crossdomain"></div>
	</body>
</html>

Ejemplo: http://estebanfuentealba.net/ejemplos/jsonVSxml/crossdomain/crossdomainJSON.html

Ésta es la mejor ventaja de JSON porque podemos traer datos desde otros dominios sin recurso del servidor, lo que con XML no se puede lograr si no se tiene un proxy. Este crossdomain es gracias a JSONP (JSON with Padding) que es una técnica descubierta el 2005 por gente de YAHOO , consiste en agregar el script a la pagina … supongamos que queremos traer este documento remoto json:

http://mp3spider.com.ar/WebService.php?datatype=json&callback=hola
nos devuelve:

hola({ host: "mp3spider.com.ar" })

Eso quiere decir que se llama a una funcion llamada hola y se le pasa por parametro un objeto que tiene un atributo llamado host. Entonces, para que funcione, deberiamos tener en la pagina de donde llamamos a ese documento json dicho metodo hola

function hola(datos) {
alert(datos.host);
}

quedando algo similar a esto

<html>
	<head>
		<script type="text/javascript">
			/* Defino la funcion que recibirá los datos de la pagina remota */
			function hola(datos) {
				alert(datos.host);
			}
		</script>
		<!-- Agrego el Script Remoto , el callback es el nombre del metodo que lo recibirá en este página -->
		<script src="http://mp3spider.com.ar/WebService.php?datatype=json&callback=hola"></script>
	</head>
	<body>
	</body>
</html>

Ejemplo: http://estebanfuentealba.net/ejemplos/jsonVSxml/crossdomain/JSONPEjemplo.html

En fin JQuery hace eso por debajo sin darnos cuenta.

Con tanta api dando vuelta por el mundo de la web 2.0 JSON es una herramienta que se agradece y bien util. Como pudieron ver en estas comparaciones en el ámbito web agiliza y optimiza el intercambio de datos, por lo que sin ninguna duda me quedo con JSON.

Espero que les sirva ,

Saludos

  1. enero 11, 2010 a las 6:12 pm

    Buen apunte, te agrego algo más. En android no es posible usar un wsdl y por ende web service, ya que es imposible serializar los objetos que te llegan al telefono, por lo tanto la mejor opción para trabajar con “servicios” es utilizar JSON que además forma parte del SDK de android y que es nativo a java asi que funciona mucho mejor y mas rápido

  2. Jisela Contreras
    junio 20, 2012 a las 3:14 pm

    Hola, quisiera saber si tienes algun ejemplo, de conexion usando ajax y json, pero sin utilizar Jquery, es que voy a implementar web workers y no son compatibles con Jquery

  3. estebanfuentealba
    junio 20, 2012 a las 9:53 pm

    aquí tienes un ejemplo de obtener json sin jquery

    ###################
    ARCHIVO data.json
    ###################
    {
    “status”: “ok”,
    “items”:[
    {“name”:”Item 1″},
    {“name”: “Item 2”}
    ]
    }

    ###################
    ARCHIVO DE PRUEBA index.html
    ###################

    function getJSON(url,callback){
    try {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(){
    if (xhr.readyState == 4 && xhr.status == 200) { callback( eval(“(“+xhr.responseText+”)”) ); }
    };
    xhr.open(‘GET’, url, true);
    xhr.send(null);
    } catch (e) { callback(eval({“status”:”error”}));}
    };
    getJSON(‘http://localhost/testerJSON/data.json’,function(json) {
    console.log(json)
    });

    Saludos!

  1. marzo 4, 2012 a las 3:26 pm

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: