Introduction AJAX
1 recomendación735 vistas
Este documento presenta una introducción a la tecnología AJAX, incluyendo su arquitectura, tecnologías subyacentes como HTML, CSS, JavaScript y XMLHttpRequest, y el uso de servicios REST. Proporciona un ejemplo de una aplicación AJAX simple para saludar a un usuario, con código HTML, JavaScript en el cliente y servicios REST en VB y Java en el servidor. Finalmente, discute algunos comentarios sobre AJAX, como su complejidad de programación y limitaciones de seguridad del navegador.
![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;
}
}](https://image.slidesharecdn.com/charlaajax-140117215254-phpapp02/85/Introduction-AJAX-14-320.jpg)
Introduction AJAX
- 1. Introducción a AJAX Eduardo Ostertag Jenkins, Ph.D. OBCOM INGENIERIA S.A. (Chile) Eduardo.Ostertag@obcom.cl
- 2. 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)
- 3. Arquitectura típica AJAX Browser AJAX Servidor Web Servicios REST Lógica Negocio (EJB, COM+) Modelo de Datos (Tablas)
- 4. ¿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
- 5. ¿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
- 6. Saludo AJAX: Interfaz Gráfica
- 7. 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>
- 8. 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(); } }
- 9. 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; } }
- 10. 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?
- 11. 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>
- 12. 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>
- 13. 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>
- 14. 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; } }
- 15. Comentarios sobre AJAX Difícil programar y mantener los programas Se recomienda usar un “Framework AJAX” Limitado por seguridad del browser (sandbox) Framework Backbase (www.backbase.com) Por ejemplo, no se puede leer o grabar archivos No permite crear clientes Semi-Conectados No se puede guardar el estado del programa
- 16. Muchas gracias