ajax & jquery
Post on 27-Oct-2014
115 Views
Preview:
DESCRIPTION
TRANSCRIPT
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) ] )
top related