PDF de programación - Introducción a AJAX

Imágen de pdf Introducción a AJAX

Introducción a AJAXgráfica de visualizaciones

Publicado el 17 de Julio del 2021
106 visualizaciones desde el 17 de Julio del 2021
812,6 KB
16 paginas
Creado hace 10a (22/12/2010)
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
  • Links de descarga
http://lwp-l.com/pdf19398

Comentarios de: Introducción a AJAX (0)


No hay comentarios
 

Comentar...

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios...
CerrarCerrar
CerrarCerrar
Cerrar

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad