Ajax & JQuery

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:• var usuario=['juan',26];

Ajax & jQueryLa 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({ });});

Ajax & JQuery - ParámetrosParametros 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 XMLHttpRequest y un string que indica el resultado.

Ajax & JQuery - ParametrosParámetros Explicación ValorescontentType 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."json": Evalua la respuesta JSON y devuelve un objeto Javascript

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 objeto ajax.

String: La url local del documento.

Ajax & JQuery - Ejemplos

$.ajax({ url: "mi-pagina-cool.html", success: function(datos){ alert(datos); }});

$.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); }});

Insertamos datos en una pagina de php de forma muy sencilla.

$.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 método de envìo.

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 embargo, hay técnicas (hacks) que se pueden usar para usar ajax cross-domain.

Funciones Ajax :ajaxCompleteRegistra 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>

Podemos atachar nuestro manejador de eventos (“event handler”) a cualquier elemento

$('.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');}); DEMO

Obs:Se diferencia con AjaxStop ya que este ultimo se ejecuta cuando todas las peticiones se terminan

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.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" );});

Ahora, crear un request de ajax mediante el metodo load

DEMO

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.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" );});

Ahora, crear un request de ajax mediante el método load

DEMO

FUNCIONES AJAX: AJAXSETUP()Setea los valores por defecto de las peticiones ajax futuras.

$.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'}});

$.ajaxSetup({ url: "/xmlhttp/", global: false, type: "POST" });$.ajax({ data: myData });

Ejemplo2

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

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 #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"] } );

$("#feeds").load("feeds.php", {limit: 25}, function(){ alert("Se Cargaron los 25 ultimos feed"); });

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

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("test.php", { name: "John", time: "2pm" } );$.get("test.php", function(data){alert("Data Loaded: " + data);});

Ejemplos

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

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("test.php", { name: "John", time: "2pm" } );$.post("test.php", function(data){alert("Data Loaded: " + data);});

Ejemplos

Carga datos desde el servido usando HTTP GET Request y que están codificados en formatoJSON. Es un atajo para la función:

$.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');});

{ “1": “Curso CSS", “2": “Curso JQuery", “3": “Curso HTML5"}

FUNCIONES AJAX: $. GETJSON()

Y la estructura JSON

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

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.Ejemplode utilización:

INTRODUCCIÓN A JSON

Formatos ligeros de intercambio de datos en aplicaciones web

Agenda

1. Introducción 2. Estructuras3. Formas de representación

A. ClasesB. PropiedadesC. Arrays

4. Configuración e Inicialización5. Utilización

A. evalB. Prototipe

JSON

PARTE TEÓRICA

www.JSON.org

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.

• XML es opción válida pero no la más adecuada por ser demasiada pesada.

INTRODUCCIÓN – UNA SOLUCIÓN

JSON (JavaScript Object Notation - 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

• No es necesario que se construyan parsers personalizados

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

• Su tipo MIME es -> application/json

INTRODUCCIÓN – JSON

• Lenguajes que lo soportan:– ActionScript– C / C++– .NET (C#, VB.NET…)– Delphi– Java– JavaScript– Perl– PHP– Python– Ruby– Etc…

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.

– Number.- Valor numérico sin comillas

FORMAS DE REPRESENTACION

Descripción simplificada Ejemplo

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• El nombre y el valor estan separados por dos puntos :

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

– Empieza con un corchete izquierdo [– Termina con un corchete derecho ]– Los valores se separan con una coma ,

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– Un array

FORMA DE STRING

• Colección de cero a mas caracteres Unicode encerrados entre comillas dobles

• Los caracteres de escape utilizan la barra invertida• Es parecida a una cadena de caracteres en C o Java.

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– Scientific

CODIFICACIÓN DE CARACTERES

• Estrictamente UNICODE

• Por defecto es UTF-8

• UTF-16 y UTF-32 también estan permitidos.

FORMA DE VALUE

[ { “country”: “New Zealand”, “population”: 3993817, “animals”: [“sheep”, “kiwi”] } , { “country”: “Singapore”, “population”: 4353893, “animals”: [“merlion”, “tiger”] }]

String

Number

Array

Objeto

OTRAS FORMAS

• Boolean -> true / false• null

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"

};

XML JSON

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• Se pueden usar empleando Ajax

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– Puede ser validado bajo un conjunto de reglas

• JavaScript es normalmente utilizado en el lado cliente.

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

...var myJSONObject = {"listado": [ { "nombre": "Juan", "apellidos": "Palomo", "fecha": "10/10/1980" }, { "nombre": "Juan", "apellidos": "Palomo", "fecha": "10/10/1980" } ]};...

XML JSON

YAML

• Acrónimo de Yet Another Markup LanguageArray

• 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

• Hay que tenerlo en cuenta cuando JSON no sea suficiente para nuestras necesidades.

JSON - UTILIZACIÓN

• Mediante Librerias ( Por ejemplo en JavaScript )• Transformación de cadenas de texto a objetos• Transformación de objetos a cadenas de texto• Personalización de las transformaciones

JQUERY

• Puede recuperar datos en formato JSON

• API– jQuery.parseJSON( json )– jQuery.getJSON( url, [ data ], [ callback(data, textStatus, xhr) ] )