JSON & XML
JSON es el acrónimo de JavaScript Object Notation.
JSON es un formato alternativo de envío y recepción de datos, es
decir remplaza a XML o el envío de texto plano.
Este formato de datos es más liviano que XML, que hace el código
más sencillo ya que utiliza el código JavaScript como modelo de
datos.
Veamos como se definen los array literales y objetos literales en
JavaScript, ya que serán las estructuras para la transmisión de datos:
Ajax & jQuery
La librería en JavaScript jQuery es una de las más sencillas y útiles que se puedan necesitar a la hora de desarrollar un sitio web. Posee características potentes
(selectores de CSS, XPath, con el poder de javascript de crear variables y funciones que interactuen con el documento) y es muy fácil de usar, y es a la vez muy liviana. Además trae incorporadas funciones adicionales, como AJAX, manipulación del DOM y
detecció
¿Como usar AJAX en jQuery?
jQuery trae incorporado un "módulo" de AJAX, que hace muy fácil la utilización de este. Accedemos a la función de la siguiente manera:
$(document).ready(function(){ $.ajax({
}); });
$(document).ready(function(){ $.ajax({
Ajax & JQuery - Parámetros
Parametros Explicacion Valores
async Determina que la cargada del objeto ajax se síncrona o asíncrona. Por lo general asíncrona es más útil, ya que la forma síncroa puede trabar el navegador hasta que la carga este completa
Boolean: true por defecto
beforeSend Permite llamar una función antes de
mandar el objeto ajax. Función: El unico parametro el el objeto.
complete Es una funcion que se ejecuta cuando el llamado al ajax esta completo. Permite saber si fue existoso
Funcion: Los valores que retorna son el objeto
Ajax & JQuery - Parametros
Parámetros Explicación Valores
contentType Es una función que se ejecuta cuando el llamado al ajax esta completo. Permite saber si fue
existoso
String: "application/x-www-form-urlencoded" funciona perfectamente
data Se usa para especificar datos a mandar. Estos tienen la siguiente forma: foo=bar&foo2=bar2;. Si los datos a enviar son un vector(array) jQuery los convierte a varios valores con un mismo nombre (si foo["alt1","alt2"], foo="alt1"&foo="alt2";)
Array / String con la forma antes mencionada..
dataType Indica el tipo de datos que se van a llamar. Si no se especifica jQuery automáticamente encontrará el tipo basado en el header del archivo llamado (pero toma mas tiempo en cargar, así que especifícalo )
"xml": Devuelve un documento XML.
"html": Devuelve HTML con texto plano, y respeta las etiquetas.
"script": Evalua el JavaScript y devuelve texto plano.
Parámetros Explicación Valores
error Se ejecuta si ocurre un error al llamar el
archivo. Devuelve 3 parametros: El objeto, un string con el error, y un objeto adicional de error, si este ocurre.
String: "application/x-www-form-urlencoded" funciona perfectamente
global Permite hacer que el objeto ajax obedezca o desobedezca las reglas para objetos ajax que el usuario pone.
Boolean: Por defecto true
success Permite ejecutar código al ser exitoso un
llamado Función: Recibe los datos que fueron llamados
Timeout Permite definir un tiempo de espera antes de
ejecutar un objeto ajax. Función: Recibe los datos que fueron llamados
type Indica el método que se va a usar "GET" o "POST"
url Indica la url de la que va a cargar datos el
Ajax & JQuery - Ejemplos
$.ajax({ url: "mi-pagina-cool.html", success: function(datos){ alert(datos); } }); $.ajax({ url: "mi-pagina-cool.html", success: function(datos){ alert(datos); } }); $.ajax({ type: "GET", url: "test.js", dataType: "script" async:false; }); $.ajax({ type: "GET", url: "test.js", dataType: "script" async:false; });El código mínimo que necesitamos para hacer funcionar ajax. Sencillo y efectivo
Vamos a cargar un JavaScript, usando los parámetros type, url, dataType y async. DataType es necesario pues de otro modo el script no se ejecutaría. También es bueno usar async en "false" si el script es vital: Así el usuario no podrá interactuar hasta que se cargue.
$.ajax({
type: "POST",
url: "formulario.php",
data: "nombre=Juan&apellido=Luna", success: function(datos){
alert( "Se guardaron los datos: " + datos); } }); $.ajax({ type: "POST", url: "formulario.php", data: "nombre=Juan&apellido=Luna", success: function(datos){
alert( "Se guardaron los datos: " + datos); }
});
$.ajax({
url: "introduccion-a-jquery.htm", async:true,
beforeSend: function(objeto){ alert("Adiós, me voy a ejecutar"); },
complete: function(objeto, exito){ alert("Me acabo de completar") if(exito=="success"){
alert("Y con éxito"); }
},
contentType: "application/x-www-form-urlencoded", dataType: "html",
error: function(objeto, quepaso, otroobj){ alert("Estas viendo esto por que fallé"); alert("Pasó lo siguiente: "+quepaso); }, global: true, success: function(datos){ alert(datos); }, timeout: 3000, type: "GET" });
Función Antes de Ejecutarse
Se ejecuta siempre
Codificación
Tipo de retorno
Error
Si esta todo ok. Tiempo de espera y
Consideracion
•
Problemas
•
El problema más frecuente que ocurre con
ajax es cuando se trata de cargar por este una
pagina de otro servidor. Por cuestiones de
seguridad, algunos navegadores no permiten
la ejecución de este tipo de llamados. Sin
Funciones Ajax :ajaxComplete
Registra un handler que será llamado cuando el request Ajax esté completo. Esto es un Evento Ajax. Cada vez que completa una petición Ajax, jQuery activa el evento ajaxComplete.
Para observar este método en acción, podemos establecer una base petición Ajax de carga:
<div class="trigger">Trigger</div> <div class="result"></div> <div class="log"></div> <div class="trigger">Trigger</div> <div class="result"></div> <div class="log"></div>
Podemos atachar nuestro manejador de eventos (“event handler”) a cualquier elemento
$('.log').ajaxComplete(function() { $(this).text('Triggered ajaxComplete handler.'); }); $('.log').ajaxComplete(function() { $(this).text('Triggered ajaxComplete handler.'); });
Ahora podemos crear un request Ajax usando cualquier metodo Jquery
$('.trigger').click(function() { $('.result').load('ajax/test.html'); }); $('.trigger').click(function() { $('.result').load('ajax/test.html'); }); DEMO
Registra un handler para ser llamado una vez que el request ajax este completo y con error.Esto es un Evento Ajax. Al igual que el metodo anterior, este se ejecuta cuando se produce un error, en todos los handlers registrados.
Funciones Ajax: ajaxError()
<div class="trigger">Trigger</div> <div class="result"></div> <div class="log"></div> <div class="trigger">Trigger</div> <div class="result"></div> <div class="log"></div> $("div.log").ajaxError(function() {
$(this).text( "Triggered ajaxError handler." ); });
$("div.log").ajaxError(function() {
$(this).text( "Triggered ajaxError handler." ); });
Podemos atachar nuestro manejador de eventos (“event handler”) a cualquier elemento
$("button.trigger").click(function() {
$("div.result").load( "ajax/missing.html" ); });
$("button.trigger").click(function() {
$("div.result").load( "ajax/missing.html" ); });
Ahora, crear un request de ajax mediante el metodo load
Registra un handler para ser llamado antes de que la petición ajax se ejecute.
Funciones Ajax: ajaxSend()
<div class="trigger">Trigger</div> <div class="result"></div>
<div class="log"></div>
<div class="trigger">Trigger</div> <div class="result"></div>
<div class="log"></div>
$("div.log").ajaxSend(function() {
$(this).text( “Evento gatillado antes de la petición." ); });
$("div.log").ajaxSend(function() {
$(this).text( “Evento gatillado antes de la petición." ); });
Podemos atachar nuestro manejador de eventos (“event handler”) a cualquier elemento
$("button.trigger").click(function() { $("div.result").load( "ajax/test.html" ); });
$("button.trigger").click(function() { $("div.result").load( "ajax/test.html" ); });
Ahora, crear un request de ajax mediante el método load
FUNCIONES AJAX: AJAXSETUP()
Setea los valores por defecto de las peticiones ajax futuras.$.ajaxSetup({ url: 'ping.php' }); $.ajaxSetup({ url: 'ping.php' });
La totalidad de las llamadas Ajax utilizarán la nueva configuración, a no ser anulado por las llamadas individuales, hasta la siguiente llamada a $.ajaxSetup() .
Ejemplo, el siguiente establece un valor predeterminado para la url en los parametros de la peticion
Esto permite lo siguiente
$.ajax({
// sin seteo de url; se usa ping.php
data: {‘nombre': ‘Juan'} });
$.ajax({
// sin seteo de url; se usa ping.php
data: {‘nombre': ‘Juan'} });
$.ajaxSetup({
url: "/xmlhttp/", global: false, type: "POST" });
$.ajax({ data: myData }); $.ajaxSetup({
url: "/xmlhttp/", global: false, type: "POST" });
FUNCIONES AJAX: LOAD()
Este método es la forma más sencilla de obtener los datos desde el servidor. Es más
o menos equivalente a $.get(url, data, success), excepto que es un método en lugar de la función global y tiene una función de callback implícita. Cuando una respuesta satisfactoria se detecta (es decir, cuando textStatus es “success" o "NotModified"),
Load () establece el contenido HTML del elemento emparejado $('#result').load('ajax/test.html');
$('#result').load('ajax/test.html');
Se puede establecer un callback para ejecutar alguna función al terminar la carga: $('#result').load('ajax/test.html', function() {
alert('Load was performed.'); });
$('#result').load('ajax/test.html', function() { alert('Load was performed.');
});
$('#result').load('ajax/test.html #container'); $('#result').load('ajax/test.html #container');
Load, a diferencia de .get() , puede obtener una porción del documento solicitado
Además, y es muy útil, la posibilidad de pasar parámetro en el mismo método: ("#objectID").load("test.php", { 'choices[]': ["Jon", "Susan"] } );
("#objectID").load("test.php", { 'choices[]': ["Jon", "Susan"] } );
$("#feeds").load("feeds.php", {limit: 25},
function(){
alert("Se Cargaron los 25 ultimos feed"); });
$("#feeds").load("feeds.php", {limit: 25},
function(){
FUNCIONES AJAX: $.GET()
Carga datos desde el servido usando HTTP GET Request. Es una abreviación de la funcion Ajax equivalente a:
$.ajax({ url: url, data: data, success: success, dataType: dataType }); $.ajax({ url: url, data: data, success: success, dataType: dataType });
Cuando la función callback es existosa se pasa los datos devueltos, que pueden ser un XML, un texto String, un archivo JS o un objeto JSON dependiendo del tipo
MIME de la respuesta
$.get('ajax/test.html', function(data) { $('.result').html(data);
alert(‘La carga se realizó.'); });
$.get('ajax/test.html', function(data) { $('.result').html(data);
alert(‘La carga se realizó.'); });
$.get("test.php", { name: "John", time: "2pm" } );
$.get("test.php", function(data){alert("Data Loaded: " + data);}); $.get("test.php", { name: "John", time: "2pm" } );
FUNCIONES AJAX: $.POST()
Carga datos desde el servido usando HTTP POST Request. Es una abreviación de la función Ajax equivalente a:
$.ajax({ url: url, dataType: ‘json’, data: data, success: success, dataType: dataType }); $.ajax({ url: url, dataType: ‘json’, data: data, success: success, dataType: dataType });
Cuando la función callback es exitosa se pasa los datos devueltos, que pueden ser un XML, un texto String, un archivo JS o un objeto JSON dependiendo del tipo MIME de la respuesta
$.post('ajax/test.html', function(data) { $('.result').html(data);
alert(‘La carga mediante post se realizó.'); });
$.post('ajax/test.html', function(data) { $('.result').html(data);
alert(‘La carga mediante post se realizó.'); });
$.post("test.php", { name: "John", time: "2pm" } );
$.post("test.php", function(data){alert("Data Loaded: " + data);}); $.post("test.php", { name: "John", time: "2pm" } );
Carga datos desde el servido usando HTTP GET Request y que están codificados en formato JSON. Es un atajo para la función:
$.ajax({ url: url, dataType: ‘json’, data: data, success: callback }); $.ajax({ url: url, dataType: ‘json’, data: data, success: callback });
Una implementación más precisa sería $.getJSON('ajax/test.json', function(data) { var items = [];
$.each(data, function(key, val) {
items.push('<li id="' + key + '">' + val + '</li>'); }); $('<ul/>', { 'class': 'my-new-list', html: items.join('') }).appendTo('body'); });
$.getJSON('ajax/test.json', function(data) { var items = [];
$.each(data, function(key, val) {
items.push('<li id="' + key + '">' + val + '</li>'); }); $('<ul/>', { 'class': 'my-new-list', html: items.join('') }).appendTo('body'); }); {
“1": “Curso CSS", “2": “Curso JQuery", “3": “Curso HTML5" }
{
“1": “Curso CSS", “2": “Curso JQuery", “3": “Curso HTML5" }
FUNCIONES AJAX: $. GETJSON()
FUNCIONES AJAX: $. PARSEJSON()
Toma un string formateado tipo JSON y retorna un Objeto JavaScript. El pasar un string mal formateado genera una excepción
{test: 1} (test no tiene doble comillas).
{'test': 1} ('test' Esta usando comillas simples). {test: 1} (test no tiene doble comillas).
{'test': 1} ('test' Esta usando comillas simples).
var obj = jQuery.parseJSON('{"name":"John"}'); alert( obj.name === "John" );
var obj = jQuery.parseJSON('{"name":"John"}'); alert( obj.name === "John" );
Adicionalmente si no se pasa ningun argumento, o un string vació o un “undefined”, a función retornar “null” desde parseJSON.
INTRODUCCIÓN A JSON
Agenda
1. Introducción 2. Estructuras
3. Formas de representación A. Clases
B. Propiedades C. Arrays
4. Configuración e Inicialización 5. Utilización
A. eval
B. Prototipe
PARTE TEÓRICA
INTRODUCCIÓN – EL PROBLEMA
•
Los desarrolladores necesitan enviar y recibir datos de manera
sencilla pero utilizando un formato común para estructuras
complejas.
•
Se han desarrollado muchas soluciones ad-hoc donde se separan un
conjunto de valores separados por comas, puntos y comas u otros
separadores pero de serialización y des-serialización complicadas.
•
Hay que evitar tener que construir parsers cada vez que queremos
intercambiar mensajes con el servidor.
INTRODUCCIÓN – UNA SOLUCIÓN
JSON (
J
ava
S
cript
O
bject
N
otation - Subconjunto ECMAScript)
•
Formato ligero de intercambio de datos independiente de cualquier
lenguaje de programación
•
Tiene forma de texto plano, de simple de lectura, escritura y
generación
•
Ocupa menos espacio que el formato XML
INTRODUCCIÓN – JSON
•
JSON :
–
Independiente de un lenguaje específico
–
Basado en texto
–
De Formato ligero
–
Fácil de parsear
–
NO Define funciones
–
NO tiene espacios de nombres (Namespaces)
–
NO tiene validator
–
NO es extensible
INTRODUCCIÓN – JSON
•
Lenguajes que lo soportan:
–
ActionScript
–
C / C++
–
.NET
(C#, VB.NET…)
–
Delphi
–
Java
–
JavaScript
–
Perl
–
PHP
–
Python
–
Ruby
FORMAS DE REPRESENTACION
•
Sirve para representar objetos en el lado de cliente, normalmente en
aplicaciones RIA (Rich Internet Application) que utilizan JavaScript.
–
Object.- Conjunto desordenado de pares nombre/valor
–
Array.- Colección ordenada de valores
–
Value.- Puede ser un string, número, booleano, objeto u array
–
String.- Colección de cero o más caracteres unicode.
FORMAS DE REPRESENTACION
FORMA DE OBJECT / CLASE
•
Es un conjunto de propiedades , cada una con su valor
•
Notación
–
Empieza con una llave de apertura {
–
Terminan con una llave de cierre }
–
Sus propiedades
•
Se separan con comas
FORMA DE OBJECT / CLASE
[
{
“country”: “New Zealand”,
“population”: 3993817,
“animals”: [“sheep”, “kiwi”]
},
{
“country”: “Singapore”,
“population”: 4353893,
“animals”: [“merlion”, “tiger”]
}
FORMA DE ARRAY
•
Colección ordenada de valores u objetos
•
Notación
FORMA DE ARRAY
[
{
“country”: “New Zealand”,
“population”: 3993817,
“animals”: [“sheep”, “kiwi”]
} ,
{
“country”: “Singapore”,
“population”: 4353893,
“animals”: [“merlion”, “tiger”]
}
FORMA DE VALUE
•
Puede ser
–
Una cadena de caracteres con comillas dobles
–
Un número
–
True, false, null
–
Un objeto
FORMA DE STRING
•
Colección de cero a mas caracteres Unicode encerrados entre comillas
dobles
FORMA DE NUMBER
•
Similar a los numeros de C o Java
•
No usa formato octal o hexadecimal
•
No puede ser
NaN
o
Infinity
, en su lugar se usa
null
.
•
Puede representar
–
Integer
–
Real
CODIFICACIÓN DE CARACTERES
•
Estrictamente UNICODE
•
Por defecto es UTF-8
FORMA DE VALUE
[
{
“country”: “New Zealand”,
“population”: 3993817,
“animals”: [“sheep”, “kiwi”]
} ,
{
“country”: “Singapore”,
“population”: 4353893,
“animals”: [“merlion”, “tiger”]
}
]
String
Number
OTRAS FORMAS
JSON vs XML ( CLASE )
...
<persona>
<nombre>Juan</nombre>
<apellidos>Palomo</apellidos>
<fecha>10/10/1980</fecha>
</persona>
...
var myJSONObject =
{
"nombre": "Juan",
"apellidos": "Palomo",
"fecha": "10/10/1980"
};
JSON vs XML ( SIMILITUDES )
•
Ambos son legibles por los humanos
•
Tienen una sintaxis muy simple
•
Son jerárquicos
•
Son independientes del lenguaje de programación
JSON vs XML ( DIFERENCIAS )
•
Sintáxis dispar
•
JSON
–
Es más compacto
–
Puede ser parseado usando el método
eval()
de JavaScript
–
Puede incluir Arrays
–
Los nombres de las propiedades no pueden ser palabras reservadas de
JavaScript
•
XML
–
Los nombres son mas extensos
JSON vs XML ( ARRAYS )
...
<listado>
<persona>
<nombre>Juan</nombre>
<apellidos>Palomo</apellidos>
<fecha>10/10/1980</fecha>
</persona>
<persona>
<nombre>Juan</nombre>
<apellidos>Palomo</apellidos>
<fecha>10/10/1980</fecha>
</persona>
</listado>
...
...
YAML
•
Acrónimo de
Y
et
A
nother
M
arkup
L
anguageArray
•
Es un subconjunto de JSON, con más capacidades
–
Listas, casting, etc
–
No maneja caracteres unicode de escape
–
JSON puede ser parseado por los parsers de YAML
JSON - UTILIZACIÓN
JQUERY
•
Puede recuperar datos en formato JSON
•
API
– jQuery.parseJSON( json )
