Post on 16-Feb-2015
2010 Lenguajes Visuales
Modelo HTTP Request/Response
Web Browser
ServidorWebHTTP
Request
ResponseCliente Servidor
2010 Lenguajes Visuales
Ejemplo Request/Response
http://www.google.com.ar/
GET / HTTP/1.1Host: www.google.com.arUser-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; es-ES; rv:1.9.1.2)
Gecko/20090729 Firefox/3.5.2 (.NET CLR 3.5.30729)Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8Accept-Language: en-usAccept-Encoding: gzip,deflateAccept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7Keep-Alive: 300Connection: keep-aliveCookie: PREF=ID=87ba9fd621efffdf:HTTP/1.x 200 OKDate: Thu, 13 Aug 2009 16:22:34 GMTExpires: -1Cache-Control: private, max-age=0Content-Type: text/html; charset=UTF-8Content-Encoding: gzipServer: gwsContent-Length: 3504
1. El usuario escribe una dirección en el navegador o hace clic en un link
2. El navegador genera el Request y lo envía al Server. Este es un ejemplo del Request
ServidorWeb
Servidor
2010 Lenguajes Visuales
Ejemplo Request/Response
ServidorWeb
Servidor
Web Browser
Response
HTTP/1.0 200 OK Date: Fri, 31 Dec 1999 23:59:59 GMT Content-Type: text/html Content-Length: 1354 <html> <body> <h1>Googl</h1> . . . </body> </html>
3. El servidor recibe y procesa el Request. Busca el recurso solicitado.El servidor genera el Response Correspondiente y lo envía al cliente.
4. El cliente recibe el Response y lo procesa. El browser obtiene el HTML, lo interpreta y muestra en la pantalla.
2010 Lenguajes Visuales
HTTP/HTML
• HTTP (HyperText Transfer Protocol): protocolo ampliamente utilizado para comunicación cliente servidor. Permite la comunicación del tipo Request Response simple. El cliente envía un HTTP Request y el servidor contesta con un HTTP Response.
• HTML (HyperText Markup Language): brinda información necesario para que el navegador sepa como mostrar el contenido al usuario.
2010 Lenguajes Visuales
HTTP Request
• Elementos principales que componen un HTTP Request:– Método HTTP (HTTP Method):
usualmente: GET, POST.– Recurso al que se accede (URL)– Parámetros del FORM
2010 Lenguajes Visuales
HTTP Response
• Elementos principales que componen un HTTP Response:– Código de estado (status code):
Indica si la operación fue realizada correctamente o no.
– Tipo de contenido (Content Type): Si el contenido es HTML, una imagen, un archivo PDF, etc.
– Contenido: el HTML, la imagen, etc.
2010 Lenguajes Visuales
HTTP Method
• El HTTP Method informa al servidor el tipo de Request que se está recibiendo y como está formado el resto del mensaje. El protocolo HTTP posee varios métodos (HTTP Methods), los más utilizados son:– GET: Enviado a través del clic en un link o
ingresando una dirección en el browser.– POST: Enviado a través del clic de un botón
SUBMIT de un formulario. El Request contendrá los parámetros completados en el formulario
2010 Lenguajes Visuales
Tecnologías involucradas en el cliente (Presentación)
• Se utiliza HTML para el desarrollo de páginas WEB. El HTML describe el contenido/estructura del documento.
• CSS (Cascade Style Sheet): Brinda el estilo y layout a la página.
• Javascript: Brinda la posibilidad de programación del lado del cliente. Brinda acción e interacción con el usuario de la página. (Ver filminas de JS)
2010 Lenguajes Visuales
“Thin-Client”
“Thick-Client”
“Object Web
Estructura de Aplicaciones Web
• Composición
Web Browser
ServidorWeb
Servidorde la
Aplicación
Aplic. Legacy
Almac. Datos
Aplicación
HTTP
Cliente Servidor
2010 Lenguajes Visuales
Evolución Tecnologías Web
Interactividad
Funcio-
nalidad
Servidorbasado enURLs
FormulariosCGIISAPINSAPI
HTML DinámicoScriptsCookies /SessionsASPsWeb ObjectsServlets
Applets / Java BeansControles ActiveXServidores de aplicaciónCORBA / DCOM / RMIXML, DOM, XSL
2010 Lenguajes Visuales
Modelo Hipertextual
• Modelo original de la WWW– Publicación y distribución de
documentos electrónicos
• Servidor de documentos, basado en URLs– Aplicación “2-tier”
2010 Lenguajes Visuales
Modelo de Formularios
• Protocolo CGI• Redirección de formularios HTML a
aplicaciones en el servidor
• Dificultades• Lento
– Cada ejecución produce la ejecución de un nuevo proceso
• Complejo• Protocolo “stateless” (HTTP)• No adecuado para aplicaciones grandes• No adecuado para clientes Java (orientados
a objetos)
2010 Lenguajes Visuales
CGI
Submit Submit GET / POST Colocar valores
Ejecutar
Programa
CGI
Variables de EntornoServidor WebBrowser
CLIENTE
SERVIDOR
Leer valoresInput
OutputRetornar
Docto. HTML
2010 Lenguajes Visuales
Evoluciones de HTTP / CGI
• Algunas soluciones propuestas:– Frameworks / APIs
• Netscape’s NSAPI, Microsoft’s ISAPI, Apple’s WebObjects, JavaSoft’s Servlets
– Evitar la ejecución de un nuevo proceso ante cada pedido
• Extensiones residentes en memoria– DLL’s, plug-ins en el servidor, Java Servlets, ORBs
– Scripting en el servidor• Microsoft’s ASP, JavaSoft’s Java Server Pages (JSP)
– Estas alternativas siguen requiriendo HTTP y el servidor Web
• El servidor Web media entre los objetos en el cliente y los objetos del servidor
2010 Lenguajes Visuales
Servlets
• Java Servlet API• Mecanismo comunicación aplicación-
clientes web. • Independencia de la plataforma• Modelo general:
– Clase proveyendo un servicio (“service”) dado– Servidores pequeños y especializados
• Servlet Container (Servlet Engine)• Administra detalles de :
– Conexión a la red– Parsing de los pedidos del cliente web– Respuestas correctamente formateadas– Ciclo de vida del servlet
2010 Lenguajes Visuales
JDBCapjv1.1
JVM
Servlet Container
Zones
Servlets
BrowserServidor Web
Servlets
ModJserv
SERVIDORCLIENTE
HTTP
Apache
2010 Lenguajes Visuales
Servlets
Servlet Container
Servlet
Creación container
Pedido HTTP1
Pedido HTTP2
Respuesta HTTP1
Respuesta HTTP2
Creación Servlet
init()
service()
service()
destroy()
Destrucción Servlet
Inicialización
ProcesamientoPedido1
ProcesamientoPedido2
LiberaciónRecursos
2010 Lenguajes Visuales
public class LoginServlet extends HttpServlet { Connection conn; public void init(ServletConfig config) throws ServletException {
conn = connectToDB(“uargbooks”); }
public void doGet(HttpServletRequest req,HttpServletResponse resp) {resp.SetContentType(“text/html”);PrintWriter out = resp.getWriter();String query = “SELECT * FROM users WHERE (login=\””+
req.getParameter(“login”)+”\” AND passwd=\””+req.getParameter(“contrasenia”)+”\”)”;
Statement st = conn.createStatement();ResultSet rs = st.executeQuery(query);if (rs.next()) { // consulta exitosa
out.println("<HTML> .......");out.println("<P>Bienvenido a su cuenta de UARGBooks .... ");out.println(“ ........</HTML>");
} else {out.println("<HTML> .......");out.println("<P>Lo siento, intentelo nuevamente .... ");out.println(“ ........</HTML>"); }
out.close(); } }
GeneraciónHTML
Servlets: Ejemplo
Servicio Implementado
Acceso BD
Acceso Parámetros
2010 Lenguajes Visuales
Cookies
• Una cookie es información enviada por el servidor web al navegador.
• Las Cookies representan dicha información en pares clave-valor
• Las Cookies son guardadas en los navegadores
• Los navegadores almacenan las cookies relativas a un sitio o host.
• Una vez guardadas en los navegadores, las cookies son enviadas en cada request al servidor web.
2010 Lenguajes Visuales
Cookies - ¿Para que se utilizan?
• Tacking• Autenticacion• Personalización• Administración de Sesión (Session
Management)• Administración de Estado (State
Management)
Cookie userCookie = new Cookie("user", "uid1234");
2010 Lenguajes Visuales
Cookies
• Creando una cookie:– Cookie color = new Cookie(“color", “RED");
• Agregar la Cookie al HTTP Response:– response.addCookie(color);
• Leer cookies enviades desde el cliente:– Cookie[] cookies = request.getCookies();
HTP/1.1 200 OKContent-type: text/htmlSet-Cookie : color=RED
Get index.html HTTP/1.1Host: www.colpix.com.arCookie: color=REDAccept: */*
2010 Lenguajes Visuales
HTTP Session - ¿Qué es?
• Session es el mecanismo para mantener informacion sobre el estado de una aplicación entre Requests de un cliente.
• La Session mantiene la identidad de un cliente entre Requests
• Del lado del Servidor, la Session es identificada por un único “session id”.
• Es el mecanismo por el cual se pueden asociar una serie de HTTP Request
• Mantiene estado del cliente
2010 Lenguajes Visuales
HTTP Session
• ¿Por qué es necesario?– HTTP es un protocolo “stateless” (no se
guarda información de estado entre Requests)
– Muchas aplicaciones Web requieren mantener el estado entre Request: Ejemplo: “carrito de compras”
• ¿Cómo se mantiene las HTTP Session?– Utilizando Cookies (Muy utilizado)– URL Rewriting– Otros (Sessiones basadas en SSL,etc)
2010 Lenguajes Visuales
HTTP Session API
• La especificación de Servlet provee la interface HTTPSession para mantener la información relativa a la Session.
• El Contenedor hace disponible a este objeto en tiempo de ejecución.
• Para acceder al HTTP Session:– HTTPSession session = request.getSession(boolean);
• Para la administración de estado de la aplicación:– session.setAttribute(String key, Object value);– session.getAttribute(String key);– session.removeAttribute(String key);
• Para destruir la HTTP Session:– session.invalidate();
2010 Lenguajes Visuales
HTTP Session
• HTTP Response (una vez creada la session, se envía información al cliente con el id de session)
HTTP/1.1 200 OK
Set-Cookie: JSESSIONID=0AAB6C8DE415
Content-Type: text/html
Content-Length: 397
Date: 08 Oct 2009 03:25:40 GMT
Server: Apache-Coyote/1.1
Connection: close
<html> ...</html>
2010 Lenguajes Visuales
HTTP Session
POST /registrar.do
HTTP/1.1 Host: www.colpix.com.ar
User-Agent: Mozilla/5.0
Cookie: JSESSIONID=0AAB6C8DE415
Accept: text/xml,application/xml,application/xhtml+xml,text/ html;q=0.9,text/plain;q=0.8,video/x-mng,image/png,image/ jpeg,image/gif;q=0.2,*/*;q=0.1
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
•HTTP Request (se envía información al servidor sobre la identificación de la session en forma de cookie)
2010 Lenguajes Visuales
HTTP Session - Configuración
• Es posible configurar el timeout de la session para una aplicación web en el descriptor de deploy (web.xml)<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns = http://java.sun.com/xml/ns/j2ee …
<session-config> <session-timeout>30</session-timeout> </session-config>
</web-app>
2010 Lenguajes Visuales
HTTP Session. Ejemplo
public class LoginServlet extends HttpServlet {....public void doGet(HttpServletRequest req,HttpServletResponse resp) {
// Obtener “objeto sesión”HttpSession sesion = req.getSession(true);
Boolean logeado = (Boolean) sesion.getValue(“logged”);if (!logeado || (logeado == null)){
.... // Codigo busqueda usuario en BDif (sucess) { ..... sesion.putValue(“logged”, true);
sesion.putValue(“user_logged”,req.getParameter(“login”));} else { .... }
} else {.....out.println("<P>Ya existe un usuario logeado .... ");
} out.close();
} }
Acceso HttpSession
Acceso y colocaciónde valores
2010 Lenguajes Visuales
Servlets: Contextos
• Mantenimiento de 1 estado compartido por varios usuarios– ServletContext
• Administra recursos compartidos por un grupo de servlets
• Aplicación típica: “Chat”....RoomList roomlist = createRooms();getServletContext().setAttribute(“roomList”, roomlist); ....
2010 Lenguajes Visuales
Servlets vs. JSP
• Servlets:– “Código”– Adecuados para programadores– Foco en la funcionalidad / control de la
aplicación
• JSP– “Página HTML/XML” + “scripts”– Adecuados para diseñadores de
páginas– Foco en el diseño de las presentaciones
2010 Lenguajes Visuales
Servlets vs. JSP
• De esta manera se crea una página web dinámica en un Servlet. Hay que utilizar un output stream:
• Un JSP “parece” un HTML al que se le puede ingresar código y recursos Java.
• Un JSP finalmente, se traduce en una clase Servlet
out.println(“<html> <body>” + “<h1>Hola” + nombre + “</h1></body></html>”);
Servlet
<html>
<body>
<h1>Hola <%= nombre %></h1> </body>
</html>
JSP
2010 Lenguajes Visuales
JSP: Java Server Pages
• Ventajas:• Separación de contenido estático y dinámico• Portabilidad (“Write Once Run Anywhere”)• Transparencia del concepto de Servlet
• Características del lenguaje• Scriptlets / Directivas / Declaraciones /
Expresiones (Expresion Lenguage)• Tags (JSTL)• Facilidades de sincronización, manejo
excepciones, administración de sesiones.
2010 Lenguajes Visuales
JSP: Java Server Pages
• Finalmente un JSP es un Servlet– El contenedor traduce el JSP en
archivo que contiene una clase fuente Servlet (.java), luego compila esta clase y se obtiene el archivo compilado .class de dicho Servlet
– Dicho Servlet se comporta de la misma manera que un Servlet codificado a mano: • El contenedor lo carga, lo instancia, lo
inicializa, genera un thread para cada request e invoca el método service()
2010 Lenguajes Visuales
Tipos de elementos JSP
• Scriptlet: <% %> – Código Java embebido en el JSP
• Directive: <%@ %> – Page: <%@ page import=”foo.*” session=”false” %>– Taglib: <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
– Include: <%@ include file=”header.html” %>
• Expression: <%= %> – Expresiones.
• Declaration: <%! %>– Forma de declarar un atributo a nivel de Servlet
• EL expression: ${ } – Expression Language
• Action: <jsp:include page=”footer.html” />
2010 Lenguajes Visuales
Arquitectura JSP
<%@page import=“java.text.*, java.util.*” *>
<html>
<body>
<%
Date d = new Date ();
String today = DateFormat.getDateInstance().format(d);
%>
Today is:
<em> <%=today%> </em>
</body>
</html>
Servlet
Página (archivo .JSP)
Compilación de la Página
ScriptletExpression Directive
2010 Lenguajes Visuales
Modelo 1 JSP
JDBC
Container
Browser
Beans
SERVIDORCLIENTE
JSP
2010 Lenguajes Visuales
Modelo 2 JSP
Container
Browser
Beans
SERVIDORCLIENTE
JSP
Servlet
2010 Lenguajes Visuales
Scriptless JSP
• Es difícil (costoso) el mantenimiento de aplicaciones Web utilizando JSP con código embebido
• Los diseñadores Web no se sienten a gusto con el código Java embebido en el JSP
• Es posible utilizar EL, Estándar Actions, taglibs, etc. para no tener que utilizar código embebido
• Ejemplo: las siguientes expresiones obtienen el mismo resultado:1. ${persona.mascota.nombre} 2. <%= ((foo.Persona)
request.getAttribute(“persona”)).getMascota().getNombre() %>
2010 Lenguajes Visuales
JSP Standard Tag Library (JSTL)
<%@ taglib prefi x=”c” uri=”http://java.sun.com/jsp/jstl/core” %> <html> <body>
<c:if test=“${empty param.userName}” > <jsp:forward page=”registrarse.jsp” />
</c:if>
<h1>Bienvenido! ${param.userName}</h1> </body></html>
<table><c:forEach var=”pelicula” items=”$
{peliculas}” ><tr><td>${pelicula}</td></tr>
</c:forEach></table>
2010 Lenguajes Visuales
Referencias
• “Fundamentals of Java servlets”• http://java.sun.com/developer/onlineTraining/Serv
lets/Fundamentals/
• “Java Server Pages Fundamentals”• http://java.sun.com/developer/onlineTraining/JSPIn
tro/contents.html
• “Understanding JavaServer Pages Model 2 architecture”
• http://www.javaworld.com/javaworld/jw-12-1999/jw-12-ssj-jspmvc.html
• “Servlets and JSP Pages Best Practices”• http://java.sun.com/developer/technicalArticles/ja
vaserverpages/servlets_jsp/