Introduction AJAX

552 visualizaciones

Publicado el

Publicado en: Educación
0 comentarios
1 recomendación
Estadísticas
Notas
  • Sé el primero en comentar

Sin descargas
Visualizaciones
Visualizaciones totales
552
En SlideShare
0
De insertados
0
Número de insertados
3
Acciones
Compartido
0
Descargas
6
Comentarios
0
Recomendaciones
1
Insertados 0
No insertados

No hay notas en la diapositiva.

Introduction AJAX

  1. 1. Introducción a AJAX Eduardo Ostertag Jenkins, Ph.D. OBCOM INGENIERIA S.A. (Chile) Eduardo.Ostertag@obcom.cl
  2. 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. 3. Arquitectura típica AJAX Browser AJAX Servidor Web Servicios REST Lógica Negocio (EJB, COM+) Modelo de Datos (Tablas)
  4. 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. 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. 6. Saludo AJAX: Interfaz Gráfica
  7. 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. 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. 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. 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. 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. 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. 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. 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. 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. 16. Muchas gracias

×