Ing.

Carlos Montellano
Definicin RIA
Tecnologas RIA
AJAX
Bloques Ajax
Envi de parmetros por GET
Envi de parmetros por POST
Envi de archivos mediante AJAX
Leer archivo xml mediante AJAX
Respuestas JSON
Ajax utilizando Jquery
3
Las Rich Internet Applications (RIAs) son aplicaciones web que tienen la
funcionalidad y caractersticas de las aplicaciones tradicionales de escritorio
(tambin llamadas Rich clients Fat clients).
Lo mejor de las aplicaciones de escritorio
Lo mejor de las aplicaciones Web
Escenario habitual para
aplicaciones Internet
Cliente EXTERNO
Escenario habitual para
aplicaciones Intranet
Cliente INTERNO
Accenture ve a las RIAs como una de las 10 principales tecnologas emergentes
hasta 2010, porque permite mejorar la usabilidad y productividad de las
aplicaciones de Internet:
El cliente final es ms exigente, demandante de aplicaciones con un
nivel alto de usabilidad.
Los clientes internos exigen herramientas de alta productividad.
Tendencia a que los costes de desarrollo sean similares a
los de un aplicativo ligero.
5
Incremento de la experiencia del usuario
1
DIFERENCIACIN DE LA COMPETENCIA
INCREMENTO DEL VALOR PERCIBIDO POR EL CLIENTE
INCREMENTO DE LAS VENTAS
6
Nuevas funcionalidades de los clientes Web (animaciones, usabilidad,
etc.)
2
EXPANSIN DE LAS FUNCIONALIDADES OFRECIDAS
INDEPENDENCIA CON SISTEMA OPERATIVO
RAPIDEZ EN EL DESARROLLO DE WEBS ATRACTIVAS
7
Reduccin de los gastos operacionales
3
Incremento de la productividad
4
MENOR USO DEL ANCHO DE BANDA
FACILIDAD DE DESPLIEGUE DE LOS CLIENTES
INDEPENDENCIA CON SISTEMA OPERATIVO
OPTIMIZACIN DEL FLUJO DE APLICACIN
TIEMPOS DE RESPUESTA MENORES
8
Software as a Service (SaaS)
5
FACILITADOR DE UN NUEVO MODELO DE COMERCIALIZACIN DE SOFTWARE
EN CONTRAPOSICIN A SOFTWARE AS A PRODUCT
Ejemplos de ROI de los que puede significar la aplicacin de
tecnologas RIA:
Mini USA
73% de los usuarios registrados configuraron un Mini
50% de las oportunidades fueron generadas por el sitio
Objetivos de ventas en US superados en 25%
Dai Nippon Ribbon Runner
Tiempo de bsqueda decrementado en un 24%
Retorno de productos reducido en un 28%
Yankee Candle
Incremento de los ingresos en un 25%
Decremento de un 70% de las llamadas a call center
Broadmoor Hotel and Bluegreen Vacation Rentals
Incremento del 89% en reservas
Incremento de un 66% en nmero de noches reservadas
Compatibilidad del navegador Web: Realizar RIAs compatibles con mltiples
navegadores puede ser muy costoso.
Descargas molestas, al menos la primera vez que se carga RIA, ya que puede requerir la
transferencia de un fichero pesado de Flash o el motor del cliente JavaScript
La necesidad de un runtime de cliente (ejemplo: JVM, Flash Player), aunque algunos
frameworks AJAX no necesitan ms que el JavaScript estndar.
Ubicuidad: Los JavaScript basados en RIA pueden ser soportados a en mltiples
navegadores Web. (Sin embargo si un usuario deshabilita JavaScript (por seguridad), la
RIA basada en AJAX no funcionar.)
Ejecucin: JavaScript es CPU intensivo. Si los recursos del cliente son limitados, la
aplicacin puede ser lenta.
Seleccin de Tecnologa: muchas frameworks han sido creadas (ms de 60 por AJAX);
muchas de ellas desaparecern.
No todo son aspectos positivos en las RIAs; tambin hay que hacer
frente a un conjunto de retos:
11
Rich Internet Applications
Runtime-based
Browser-based
Plug-in
WPF AIR Java Web Start
AJAX
Silverlight Flex JavaFX
JavaScript
AJAX
Frameworks
Custom AJAX
Microsoft Adobe Sun
Las RIAs no estn relegadas nicamente a la Web. Algunas de ellas
muy pronto van a ser utilizadas como aplicaciones desktop (cliente
INTERNO) gracias a la potenciacin de las siguientes capacidades:
Online/offline
File I/O
Drag and drop
Tecnologas RIA
http://desktop.ebay.com
http://www.allurent.com/page.php?id=70
Apple iPhone
Windows Mobile
Adobe Flash Lite
Google Android
JavaFX Mobile
13
La demanda de aplicaciones
mviles ms interactivas y ricas
tambin est fomentando el uso
de las RIAs para este tipo de
dispositivos.
AJAX (Asynchronous JavaScript And XML)
Suma de tcnicas de desarrollo web
Permite que las aplicaciones creadas se ejecuten en
el navegador y se comuniquen de forma asncrona
con el servidor de forma transparente al usuario.
Con esto se consigue modificar la pgina sin
necesidad de recargarla, de esta forma se aumenta la
interactividad.
Web Clsica
Web con Ajax
1
Instancia el objeto XMLHttpRequest
2
Preparar la funcin de respuesta
3
Realizar la peticin al servidor
4
Ejecutar la funcin de respuesta.
No todos los navegadores instancian del misma
manera el objeto xmlhttprequest
peticion_http = nuevoAjax();
function nuevoAjax(){
var xmlhttp=false;
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
}
Propiedad onreadystatechange del objeto
XMLHttpRequest permite indicar la funcin de respuesta.
a) Se puede incluir directamente su cdigo mediante una funcin
annima.
b) Es posible tambin indicar una referencia a una funcion
independiente
peticion_http.onreadystatechange = muestraContenido;
peticion_http.onreadystatechange = muestraContenido;
Despus de preparar la aplicacin para la respuesta
del servidor, se realiza la peticin HTTP al servidor:
peticion_http.open('GET', http://localhost/validacion', true);
peticion_http.send(null);
mtodo
function muestraContenido() {
if(peticion_http.readyState == 4) {
if(peticion_http.status == 200) { //respuesta, vlida y correcta
alert(peticion_http.responseText);
}
}
}
Propiedad Descripcin
readyState Valor numrico (entero) que almacena el estado de la peticin
READY_STATE_UNINITIALIZED=0
No inicializado (objeto creado, pero no se ha invocado el mtodo open)
READY_STATE_LOADING=1
Cargando (objeto creado, pero no se ha invocado el mtodo send)
READY_STATE_LOADED=2
Cargado (se ha invocado el mtodo send, pero el servidor an no ha respondido)
READY_STATE_INTERACTIVE=3
Interactivo (se han recibido algunos datos, aunque no se puede emplear la
propiedad responseText)
READY_STATE_COMPLETE=4
Completo (se han recibido todos los datos de la respuesta del servidor)
Propiedad Descripcin
ResponseText El contenido de la respuesta del servidor
en forma de cadena de texto
responseXML El contenido de la respuesta del servidor
en formato XML. El objeto devuelto se
puede procesar como un objeto DOM
status El cdigo de estado HTTP devuelto por el
servidor
200 para una respuesta correcta
404 para "No encontrado
500 para un error de servidor, etc.
statusText El cdigo de estado HTTP devuelto por el
servidor en forma de cadena de texto:
"OK", "Not Found", "Internal Server
Error", etc.
Mtodo Descripcin
abort() Detiene la peticin actual
getAllResponseHeaders() Devuelve una cadena de texto con todas las cabeceras
de la respuesta del servidor
getResponseHeader("cabecera") Devuelve una cadena de texto con el contenido de la
cabecera solicitada
onreadystatechange Responsable de manejar los eventos que se producen.
Se invoca cada vez que se produce un cambio en el
estado de la peticin HTTP. Normalmente es una
referencia a una funcin JavaScript
open("metodo", "url") Establece los parmetros de la peticin que se realiza al
servidor. Los parmetros necesarios son el
mtodo HTTP empleado y destino (puede indicarse de
forma absoluta o relativa)
send(contenido) Realiza la peticin HTTP al servidor
setRequestHeader("cabecera", "valor") Permite establecer cabeceras personalizadas en la
peticin HTTP. Se debe invocar el mtodo open() antes
que setRequestHeader()
Parmetros se envan como una serie de pares clave/valor
concatenados por smbolos &. Que debe construir manualmente
Se envan en la url
La peticion quedaria
GET limita a 512 bytes la cantidad de datos que se pueden enviar.
Servidor devuelve error 414 y mensaje Request-URI Too Long
http://localhost/aplicacion?parametro1=valor1&parametro2=valor2&parametro3=valor3
peticion_http.open('GET',
http://localhost/aplicacion?parametro1=valor1&parametro2=valor2&parametro3=valor3 ',
true);
peticion_http.send(null);
function cargarContenido(abrir){
var contenedor;
contenedor = document.getElementById('contenido');
ajax=nuevoAjax();
ajax.open("get", abrir,true);
ajax.onreadystatechange=function() {
if (ajax.readyState==4) {
contenedor.innerHTML = ajax.responseText
}
}
ajax.setRequestHeader("Content-Type","text/html; charset=utf-8");
ajax.send(null);
}
Parmetros se envan como una serie de pares clave/valor
concatenados por smbolos &. Que debe construir
manualmente
Se envan en el cuerpo del mensaje.
Se debe poner la cabecera correcta
La peticion quedaria
La peticion quedaria
peticion_http.send(parametro1=valor1&parametro2=valor2&parametro3=valor3)
peticion_http.open(POST', http://localhost/aplicacion', true);
peticion_http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
peticion_http.send(parametro1=valor1&parametro2=valor2&parametro3=valor);
peticion_http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
encodeURI
Codifica una cadena de texto como un identificador de recursos
universal
Math.random
Obligado a realizar la peticin directamente al servidor y no
utilizar su cache
function crea_query_string() {
var fecha = document.getElementById("fecha_nacimiento");
var cp = document.getElementById("codigo_postal");
return "fecha_nacimiento=" + encodeURIComponent(fecha.value) +
"&codigo_postal=" + encodeURIComponent(cp.value) +
+ "&nocache=" + Math.random();
function Preinscribir(){
var contenedor;
contenedor = document.getElementById('contenido');
var cadena=crea_lista_parametros();
alert(cadena);
ajax=nuevoAjax();
ajax.open("POST", "preinscribir.php",true);
ajax.onreadystatechange=function() {
if (ajax.readyState==4) {
contenedor.innerHTML = ajax.responseText
}
}
ajax.setRequestHeader("Content-Type","application/x-www-form-
urlencoded"); //clave para que funcione cuando se envia por post
ajax.send(cadena);
}
Gmail, hotmail nos permite adjuntar archivo y
mientras carga podemos seguir escriben
Lo importante es enviar las cabeceras correctamente
xhr = new XMLHttpRequest();
xhr.upload.addEventListener('load',function(e){
alert('Archivo cargado!');
}, false);
xhr.upload.addEventListener('error',function(e){
alert('Ha habido un error :/');
}, false);
xhr.open('POST','upload.php');
xhr.setRequestHeader("Cache-Control", "no-cache");
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
xhr.setRequestHeader("X-File-Name", file.name);
xhr.send(file);
index.php
Muchas veces es necesario comunicarse con archivos
xml, mediante ajax
function muestraContenido()
{
if(ajax.readyState == 4)
{
if(ajax.status == 200)
{
var documentoXml = ajax.responseXML;
//Obtenemos la raz del documento
var root = documentoXml.getElementsByTagName("Personas")[0];
var tope = root.getElementsByTagName("Persona").length;
//Recorremos todos los elementos Libro del documento
for(var i = 0; i < tope; i++)
{
Persona = root.getElementsByTagName("Persona")[i];
ID = Persona.getElementsByTagName("ID")[0].firstChild.nodeValue;
Nombres = Persona.getElementsByTagName("Nombres")[0].firstChild.nodeValue;
Direccion = Persona.getElementsByTagName("Direccion")[0].firstChild.nodeValue;
Telefono = Persona.getElementsByTagName("Telefono")[0].firstChild.nodeValue;
Email = Persona.getElementsByTagName("Email")[0].firstChild.nodeValue;
Celular = Persona.getElementsByTagName("Celular")[0].firstChild.nodeValue;
IdProfesion = Persona.getElementsByTagName("IdProfesion")[0].firstChild.nodeValue;
muestraHTML('pRespuesta',"Nombres: "+Nombres+",Direccion:"+Direccion+"<br/>");
} }
}}
llamadaxml.php
En ocasiones es necesario recibir respuestas en
formato json, al ser mas fcil de manejar
function muestraContenido()
{
if(ajax.readyState == 4)
{
if(ajax.status == 200)
{
var respuesta_json = ajax.responseText;
var personas = eval("("+respuesta_json+")");
var lista = document.getElementById("estudiantes");
var i=0;
for(var persona in personas)
{
lista.options[i] = new Option(personas[persona].Nombres, personas[persona].ID);
i++;
}
}
}}
llamadajson.php
mtodo principal para realizar peticiones AJAX es
$.ajax()
A partir de esta $.get(), $.post(), $.load()
$.ajax({
url: objetivos.php',
type: 'POST',
async: true,
data:
'parametro1=valor1&parametro2=valor2',
success: procesaRespuesta,
error: muestraError
});
Para post solo se cambia $.get por $.post
// Peticin GET simple
$.get('/ruta/hasta/pagina.php');
// Peticin GET con envo de parmetros y funcin que
// procesa la respuesta
$.get('/ruta/hasta/pagina.php',
{ articulo: '34' },
function(datos) {
alert('Respuesta = '+datos);
});
Realiza la llamada ajax a pagina.php
Funcin $.getJSON()
carga y evala respuesta JSON
Funcin $.getScript()
Ejecuta script recibido como respuesta
$('#info').load('/ruta/hasta/pagina.php');