Ajax & JQuery

JSON & XML

JSON es el acrnimo de JavaScript Object Notation. JSON es un formato alternativo de envo y recepcin de datos, es decir remplaza a XML o el envo de texto plano. Este formato de datos es ms liviano que XML, que hace el cdigo ms sencillo ya que utiliza el cdigo JavaScript como modelo de datos. Veamos como se definen los array literales y objetos literales en JavaScript, ya que sern las estructuras para la transmisin de datos: var usuario=['juan',26];

Ajax & jQuery

La librera en JavaScript jQuery es una de las ms sencillas y tiles que se puedan necesitar a la hora de desarrollar un sitio web. Posee caractersticas potentes (selectores de CSS, XPath, con el poder de javascript de crear variables y funciones que interactuen con el documento) y es muy fcil de usar, y es a la vez muy liviana. Adems trae incorporadas funciones adicionales, como AJAX, manipulacin del DOM y detecci Como usar AJAX en jQuery? jQuery trae incorporado un "mdulo" de AJAX, que hace muy fcil la utilizacin de este. Accedemos a la funcin de la siguiente manera: $(document).ready(function(){ $.ajax({ }); });

Ajax & JQuery - Parmetros

Parametros async Explicacion Valores Determina que la cargada del objeto ajax Boolean: true por se sncrona o asncrona. Por lo general defecto asncrona es ms til, ya que la forma sncroa puede trabar el navegador hasta que la carga este completa Permite llamar una funcin antes de mandar el objeto ajax. Es una funcion que se ejecuta cuando el llamado al ajax esta completo. Permite saber si fue existoso Funcin: El unico parametro el el objeto. Funcion: Los valores que retorna son el objeto XMLHttpRequest y un string que indica el resultado.

beforeSend complete

Ajax & JQuery - Parametros

Parmetros contentType Explicacin Es una funcin que se ejecuta cuando el llamado al ajax esta completo. Permite saber si fue existoso Valores String: "application/x-wwwform-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";)
Indica el tipo de datos que se van a llamar. Si no se especifica jQuery automticamente encontrar el tipo basado en el header del archivo llamado (pero toma mas tiempo en cargar, as que especifcalo )

Array / String con la forma antes mencionada..

dataType

"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

Parmetros error

Explicacin 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. Permite hacer que el objeto ajax obedezca o desobedezca las reglas para objetos ajax que el usuario pone. Permite ejecutar cdigo al ser exitoso un llamado Permite definir un tiempo de espera antes de ejecutar un objeto ajax. Indica el mtodo que se va a usar

Valores String: "application/x-wwwform-urlencoded" funciona perfectamente Boolean: Por defecto true

global

success Timeout type

Funcin: Recibe los datos que fueron llamados Funcin: Recibe los datos que fueron llamados "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

El cdigo mnimo que necesitamos para hacer funcionar ajax. Sencillo y efectivo $.ajax({ url: "mi-pagina-cool.html", success: function(datos){ alert(datos); } }); Vamos a cargar un JavaScript, usando los parmetros type, url, dataType y async. DataType es necesario pues de otro modo el script no se ejecutara. Tambin es bueno usar async en "false" si el script es vital: As el usuario no podr interactuar hasta que se cargue. $.ajax({ type: "GET", url: "test.js", dataType: "script" async:false; }); Insertamos datos en una pagina de php de forma muy sencilla. $.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, Funcin Antes de beforeSend: function(objeto){ Ejecutarse alert("Adis, me voy a ejecutar"); }, complete: function(objeto, exito){ Se ejecuta siempre alert("Me acabo de completar") if(exito=="success"){ alert("Y con xito"); Codificacin } }, contentType: "application/x-www-form-urlencoded", dataType: "html", Tipo de retorno error: function(objeto, quepaso, otroobj){ alert("Estas viendo esto por que fall"); alert("Pas lo siguiente: "+quepaso); }, Error global: true, success: function(datos){ alert(datos); }, Si esta todo ok. timeout: 3000, type: "GET" Tiempo de espera y });

mtodo de envo.

Consideracion
Problemas El problema ms 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 ejecucin de este tipo de llamados. Sin embargo, hay tcnicas (hacks) que se pueden usar para usar ajax cross-domain.

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 peticin Ajax, jQuery activa el evento ajaxComplete. Para observar este mtodo en accin, podemos establecer una base peticin 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

Funciones Ajax: ajaxError()

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.
<div class="trigger">Trigger</div> <div class="result"></div> <div class="log"></div> Podemos atachar nuestro manejador de eventos (event handler) a cualquier elemento $("div.log").ajaxError(function() { $(this).text( "Triggered ajaxError handler." ); }); Ahora, crear un request de ajax mediante el metodo load $("button.trigger").click(function() { $("div.result").load( "ajax/missing.html" ); }); DEMO

Funciones Ajax: ajaxSend()

Registra un handler para ser llamado antes de que la peticin ajax se ejecute.
<div class="trigger">Trigger</div> <div class="result"></div> <div class="log"></div> Podemos atachar nuestro manejador de eventos (event handler) a cualquier elemento $("div.log").ajaxSend(function() { $(this).text( Evento gatillado antes de la peticin." ); }); Ahora, crear un request de ajax mediante el mtodo load

$("button.trigger").click(function() { $("div.result").load( "ajax/test.html" ); });

DEMO

FUNCIONES AJAX: AJAXSETUP()

Setea los valores por defecto de las peticiones ajax futuras. La totalidad de las llamadas Ajax utilizarn la nueva configuracin, 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

$.ajaxSetup({ url: 'ping.php' });

Esto permite lo siguiente $.ajax({ // sin seteo de url; se usa ping.php data: {nombre': Juan'} }); Ejemplo2 $.ajaxSetup({ url: "/xmlhttp/", global: false, type: "POST" }); $.ajax({ data: myData });

FUNCIONES AJAX: LOAD()

Este mtodo es la forma ms sencilla de obtener los datos desde el servidor. Es ms o menos equivalente a $.get(url, data, success), excepto que es un mtodo en lugar de la funcin global y tiene una funcin de callback implcita. 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 funcin al terminar la carga:

$('#result').load('ajax/test.html', function() { alert('Load was performed.'); }); Load, a diferencia de .get() , puede obtener una porcin del documento solicitado $('#result').load('ajax/test.html #container'); Adems, y es muy til, la posibilidad de pasar parmetro en el mismo mtodo: ("#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 abreviacin de la funcion Ajax equivalente a:

$.ajax({ url: url, data: data, success: success, dataType: dataType });
Cuando la funcin 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.'); }); Ejemplos $.get("test.php", { name: "John", time: "2pm" } ); $.get("test.php", function(data){alert("Data Loaded: " + data);});

FUNCIONES AJAX: $.POST()

Carga datos desde el servido usando HTTP POST Request. Es una abreviacin de la funcin Ajax equivalente a: $.ajax({ url: url, dataType: json, data: data, success: success, dataType: dataType }); Cuando la funcin 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.'); }); Ejemplos $.post("test.php", { name: "John", time: "2pm" } ); $.post("test.php", function(data){alert("Data Loaded: " + data);});

Carga datos desde el servido usando HTTP GET Request y que estn codificados en formato JSON. Es un atajo para la funcin:
$.ajax({ url: url, dataType: json, data: data, success: callback }); Una implementacin ms precisa sera $.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'); }); Y la estructura JSON {

FUNCIONES AJAX: $. GETJSON()

1": Curso CSS", 2": Curso JQuery", 3": Curso HTML5"

}

FUNCIONES AJAX: $. PARSEJSON()

Toma un string formateado tipo JSON y retorna un Objeto JavaScript. El pasar un string mal formateado genera una excepcin {test: 1} (test no tiene doble comillas). {'test': 1} ('test' Esta usando comillas simples). Adicionalmente si no se pasa ningun argumento, o un string vaci o un undefined, a funcin retornar null desde parseJSON. Ejemplode utilizacin: var obj = jQuery.parseJSON('{"name":"John"}'); alert( obj.name === "John" );

INTRODUCCIN A JSON

Formatos ligeros de intercambio de datos en aplicaciones web

Agenda
JSON
1. 2. 3. Introduccin Estructuras Formas de representacin A. Clases B. Propiedades C. Arrays 4. Configuracin e Inicializacin 5. Utilizacin A. eval B. Prototipe

PARTE TERICA

www.JSON.org

INTRODUCCIN EL PROBLEMA
Los desarrolladores necesitan enviar y recibir datos de manera sencilla pero utilizando un formato comn 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 serializacin y des-serializacin complicadas. Hay que evitar tener que construir parsers cada vez que queremos intercambiar mensajes con el servidor.

XML es opcin vlida pero no la ms adecuada por ser demasiada pesada.

INTRODUCCIN UNA SOLUCIN

JSON (JavaScript Object Notation - Subconjunto ECMAScript) Formato ligero de intercambio de datos independiente de cualquier lenguaje de programacin Tiene forma de texto plano, de simple de lectura, escritura y generacin Ocupa menos espacio que el formato XML No es necesario que se construyan parsers personalizados

INTRODUCCIN JSON
JSON : Independiente de un lenguaje especfico Basado en texto De Formato ligero Fcil de parsear NO Define funciones NO tiene espacios de nombres (Namespaces) NO tiene validator NO es extensible

Su tipo MIME es -> application/json

INTRODUCCIN 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.- Coleccin ordenada de valores Value.- Puede ser un string, nmero, booleano, objeto u array String.- Coleccin de cero o ms caracteres unicode. Number.- Valor numrico sin comillas

FORMAS DE REPRESENTACION
Descripcin simplificada Ejemplo

FORMA DE OBJECT / CLASE

Es un conjunto de propiedades , cada una con su valor Notacin 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
Coleccin ordenada de valores u objetos Notacin 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 nmero True, false, null Un objeto Un array

FORMA DE STRING
Coleccin 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

CODIFICACIN DE CARACTERES
Estrictamente UNICODE Por defecto es UTF-8 UTF-16 y UTF-32 tambin estan permitidos.

FORMA DE VALUE
[ { country: New Zealand, population: 3993817, animals: [sheep, kiwi] } , Objeto { country: Singapore, population: 4353893, animals: [merlion, tiger] } ]
String

Number

Array

OTRAS FORMAS
Boolean -> true / false null

JSON vs XML ( CLASE )

XML
JSON

... <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 jerrquicos Son independientes del lenguaje de programacin Se pueden usar empleando Ajax

JSON vs XML ( DIFERENCIAS )

Sintxis dispar JSON Es ms compacto Puede ser parseado usando el mtodo 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 )

XML
JSON

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

YAML
Acrnimo de Yet Another Markup LanguageArray Es un subconjunto de JSON, con ms 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 - UTILIZACIN
Mediante Librerias ( Por ejemplo en JavaScript ) Transformacin de cadenas de texto a objetos Transformacin de objetos a cadenas de texto Personalizacin de las transformaciones

JQUERY
Puede recuperar datos en formato JSON API
jQuery.parseJSON( json ) jQuery.getJSON( url, [ data ], [ callback(data, textStatus, xhr) ] )