Introducción a AJAX
Eduardo Ostertag Jenkins, Ph.D.
OBCOM INGENIERIA S.A. (Chile)
[email protected]
Temario
Introducción a AJAX
Arquitectura y tecnologías
HTML + CSS
JavaScript
DOM
XMLHttpRequest
Servicios REST
Ejemplo de RIA con AJAX
Código HTML y JavaScript
Servicio REST (VB y Java)
Arquitectura típica AJAX
Browser
AJAX
Servidor Web
Servicios REST
Lógica Negocio (EJB, COM+)
Modelo de Datos (Tablas)
¿Qué es la tecnología AJAX?
AJAX (Asynchonous JavaScript and XML)
Se programa en lenguaje JavaScript
DHTML (HTML+CSS) para la interfaz
Estructura DOM (Document Object Model)
XMLHttpRequest comunicación asíncrona
¿Qué es un servicio REST?
REST (Representation State Transfer)
Como SOAP “light” – sin WSDL, UDDI, etc.
Se utilizan comandos GET/POST de HTTP
Se utilizan los códigos de retorno de HTTP
La data normalmente es XML y DHTML
Se programan en páginas HTML, JSP, PHP
Saludo AJAX: Interfaz Gráfica
Saludo AJAX: Página HTML (1)
helloHTML.html
<html>
<head>
<title>Saludos usando AJAX</title>
<script language="JavaScript">
<!—
JavaScript en próxima dispositiva
-->
</script>
</head>
<body>
<input type="text" id="helloName" title="Ingrese su nombre"/>
<input type="submit" value="saludar" onclick="callHello(helloName.value)"/>
<p id="helloReply">No hemos enviado un saludo</p>
</body>
</html>
Saludo AJAX: Página HTML (2)
helloHTML.html
var gRequest; // Used in callHello and helloResponse
function callHello(name)
{
var url = "helloHTML.asp?name="+encodeURIComponent(name);
if (window.XMLHttpRequest) { // Native XMLHttpRequest
gRequest = new XMLHttpRequest();
gRequest.onreadystatechange = helloResponse;
gRequest.open("GET", url, true);
gRequest.send(null);
}
else if (window.ActiveXObject) { // Windows IE ActiveX
gRequest = new ActiveXObject("Microsoft.XMLHTTP");
gRequest.onreadystatechange = helloResponse;
gRequest.open("GET", url, true);
gRequest.send();
}
}
Saludo AJAX: Página HTML (3)
helloHTML.html
function helloResponse()
{
if (gRequest.readyState == 4) // Only if "complete"
{
if (gRequest.status != 200) // Check "OK" status
{
alert("Download error: "+gRequest.statusText);
return;
}
var result = gRequest.responseText;
var element = document.getElementById("helloReply");
element.innerHTML = result;
}
}
Saludo AJAX: Servicio REST
helloHTML.asp (VB)
<%@ Language="VBScript" CodePage=65001 %><%
Response.ContentType = "text/html;charset=utf-8"
Response.CodePage = 65001
Response.CacheControl = "no-cache"
%>Hola <b><%=Request.QueryString("name")%></b>. ¿Cómo estas?
helloHTML.jsp (Java)
<%@ page contentType="text/html" pageEncoding=“utf-8" %><%
request.setCharacterEncoding("utf-8");
response.addHeader("Cache-Control", "no-cache");
%>Hola <b><%=request.getParameter("name")%></b>. ¿Cómo estas?
Servicios REST y data XML
Un servicio REST puede retornar XML en vez
de retornar texto libre HTML
Esto permite que el servicio REST pueda ser
usado por otros como Flex, Java, o .NET
Todos pueden consumir data en formato XML
<?xml version="1.0" encoding="utf-8"?>
<resultado>
<saludo>¡Hola Pepe Pótamo!</saludo>
</resultado>
Saludo AJAX: Servicio REST XML
helloXML.asp (VB)
<%@ Language="VBScript" CodePage=65001 %><%
Response.ContentType = "text/xml;charset=utf-8"
Response.CodePage = 65001
Response.CacheControl = "no-cache“
nombre = Request.QueryString("name")
%><?xml version="1.0" encoding="utf-8"?>
<resultado>
<saludo>¡Hola <%=nombre%>!</saludo>
</resultado>
Saludo AJAX: Servicio REST XML
helloXML.jsp (Java)
<%@ page contentType="text/xml" pageEncoding="utf-8" %><%
request.setCharacterEncoding("utf-8");
response.addHeader("Cache-Control", "no-cache");
String nombre = request.getParameter("name");
%><?xml version="1.0" encoding="utf-8"?>
<resultado>
<saludo>¡Hola <%=nombre%>!</saludo>
</resultado>
Saludo AJAX: HTML con XML
function helloResponse()
{
if (gRequest.readyState == 4) // Only if "complete"
{
if (gRequest.status != 200) // Check "OK" status
{
alert("Download error: "+gRequest.statusText);
return;
}
var xmlDoc = gRequest.responseXML.documentElement;
var xmlNode = xmlDoc.getElementsByTagName("saludo")[0];
var element = document.getElementById("helloReply");
element.innerHTML = xmlNode.firstChild.data;
}
}
Comentarios sobre AJAX
Difícil programar y mantener los programas
Se recomienda usar un “Framework AJAX”
Framework Backbase (www.backbase.com)
Limitado por seguridad del browser (sandbox)
Por ejemplo, no se puede leer o grabar archivos
No permite crear clientes Semi-Conectados
No se puede guardar el estado del programa
Muchas gracias
Crear cuenta
Comentarios de: Introducción a AJAX (0)
No hay comentarios