2. Fundamentos de la programación web

El objetivo principal de este capítulo es dar a conocer los principios fundamentales de la programación web, que son independientes de la tecnología específica utilizada para implementarlos. Presenta numerosos ejemplos que se recomienda probar para «familiarizarse» poco a poco con la filosofía del desarrollo web. El lector que ya cuente con estos conocimientos puede pasar directamente al capítulo 3.

Los componentes de una aplicación web son los siguientes:

Número	Función	Ejemplos comunes
1	OS Servidor	Unix, Linux, Windows
2	Servidor web	Apache (Unix, Linux, Windows) IIS (Windows + plataforma .NET) Node.js (Unix, Linux, Windows)
3	Códigos ejecutados del lado del servidor. Pueden ser ejecutados por módulos del servidor o por programas externos al servidor (CGI).	JAVASCRIPT (Node.js) PHP (Apache, IIS) JAVA (Tomcat, WebSphere, JBoss, WebLogic, ...) C#, VB.NET (IIS)
4	Base de datos: puede estar en la misma máquina que el programa que la utiliza o en otra a través de Internet.	Oracle (Linux, Windows) MySQL (Linux, Windows) Postgres (Linux, Windows) SQL Server (Windows)
5	OS Cliente	Unix, Linux, Windows
6	Navegador web	Chrome, Internet Explorer, Firefox, Opera, Safari, ...
7	Scripts ejecutados del lado del cliente dentro del navegador. Estos scripts no tienen acceso a los discos de la computadora del cliente.	JavaScript (cualquier navegador)

2.1. Intercambio de datos en una aplicación web con formulario

Número	Función
1	El navegador solicita un URL por primera vez: (http://machine/url). No se pasa ningún parámetro.
2	El servidor web le envía la página web de este URL. Esta puede ser estática o generada dinámicamente por un script de servidor (SA) que pudo haber utilizado el contenido de bases de datos (SB, SC). En este caso, el script detectará que se ha solicitado el archivo URL sin pasar parámetros y generará la página web inicial. El navegador recibe la página y la muestra (CA). Es posible que los scripts del lado del navegador (CB) hayan modificado la página inicial enviada por el servidor. Posteriormente, mediante interacciones entre el usuario (CD) y los scripts (CB), la página web se modificará. En particular, se completarán los formularios.
3	El usuario valida los datos del formulario, los cuales deben enviarse al servidor web. El navegador vuelve a solicitar la página inicial URL u otra, según el caso, y al mismo tiempo transmite al servidor los valores del formulario. Para ello, puede utilizar dos métodos llamados GET y POST. Al recibir la solicitud del cliente, el servidor activa el script (SA) asociado a la URL solicitada, script que detectará los parámetros y los procesará.
4	El servidor entrega la página web generada por el programa (SA, SB, SC). Este paso es idéntico al paso 2 anterior. A partir de ahora, los intercambios se realizan según los pasos 2 y 3.

2.2. Páginas web estáticas, páginas web dinámicas

Una página estática está representada por un archivo HTML. Una página dinámica es una página HTML generada «sobre la marcha» por el servidor web.

2.2.1. Página estática HTML (lenguaje de marcado HyperText)

Creemos un primer proyecto Spring MVC [1-2]:

En [1-2], creamos un nuevo proyecto basado en Spring Boot [http://projects.spring.io/spring-boot/];

la información de [3-7] es para la configuración de Maven del proyecto;
en [3], el nombre del proyecto Maven;
en [4], el grupo de Maven en el que se colocará el resultado de la compilación del proyecto;
en [5], el nombre que se le da al producto de la compilación;
en [6], una descripción del proyecto;
en [7], el paquete en el que se colocará la clase ejecutable del proyecto;
en [8], la naturaleza del proyecto. Se trata de un proyecto web con vistas Thymeleaf. Aquí se pueden ver todas las dependencias de Maven listas para usar que ofrece el proyecto Spring Boot;
en [9], se indica que el producto resultante de la compilación de Maven se empaquetará en un archivo jar y no en un war. El proyecto utilizará entonces un servidor Tomcat integrado que se encontrará entre sus dependencias;
en [10], continuamos con el asistente;

en [11], se indica la carpeta del proyecto;
en [12], finalizamos el asistente;
en [13], el proyecto generado.

Analicemos el archivo [pom.xml] generado:


<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>istia.st.springmvc</groupId>
    <artifactId>intro</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <packaging>jar</packaging>

    <name>springmvc-intro</name>
    <description>Les bases de la programmation web</description>

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>1.1.9.RELEASE</version>
        <relativePath /> <!-- búsqueda del padre en el repositorio -->
    </parent>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
    </dependencies>

    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <start-class>istia.st.springmvc.Application</start-class>
        <java.version>1.7</java.version>
    </properties>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

Incluye toda la información proporcionada en el asistente. En las líneas 26 a 30, encontramos una dependencia que no conocíamos. Esta permite la integración de las pruebas unitarias JUnit con Spring.

Comencemos por crear una página estática HTML en este proyecto. Por defecto, debe colocarse en la carpeta [src / main / resources / static]:

en [1-4], creamos un archivo HTML en la carpeta [static];

en [6], asigne un nombre a la página;
en [7], la página se ha agregado.

El contenido de la página creada es el siguiente:


<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>

</body>
</html>

líneas 2-10: el código está delimitado por la etiqueta raíz <html>;
líneas 3-6: la etiqueta <head> delimita lo que se conoce como el encabezado de la página;
líneas 7-9: la etiqueta <body> delimita lo que se conoce como el cuerpo de la página.

Modifiquemos este código de la siguiente manera:


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>essai 1 : une page statique</title>
</head>
<body>
  <h1>Une page statique...</h1>
</body>
</html>

línea 5: define el título de la página; se mostrará como título de la ventana del navegador que muestra la página;
línea 8: un texto en letra grande (<h1>).

Ejecutemos la aplicación [1-3]:

luego, con un navegador, solicitemos el URL [http://localhost:8080/exemple-01.html]:

en [1], el URL de la página visualizada;
en [2], el título de la ventana —proporcionado por la etiqueta <title> de la página—;
en [3], el cuerpo de la página —proporcionado por la etiqueta <h1>.

Veamos [4-5], el código HTML recibido por el navegador:

en [5], el navegador recibió la página HTML que habíamos creado. La interpretó y la convirtió en una visualización gráfica.

2.2.2. Una página dinámica de Thymeleaf

Ahora creemos una página de Thymeleaf. Se trata de una página HTML clásica con etiquetas enriquecidas con atributos [Thymeleaf] y [http://www.thymeleaf.org/]. Seguimos un procedimiento similar al de la creación de la página HTML, pero esta vez debemos colocar la nueva página HTML en la carpeta [templates]:

La página [exemple-02.html] quedará así:


<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>spring mvc intro</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
    <p th:text="'Il est ' + ${heure}">Voici l'heure</p>
</body>
</html>

línea 8: la etiqueta <p> es una etiqueta HTML que introduce un párrafo en la página que se muestra. [th:text] es un atributo [Thymeleaf] que tiene dos funciones diferentes dependiendo de si [Thymeleaf] está activo o no:
- si [Thymeleaf] no interpreta la página HTML, el atributo [th:text] será ignorado porque es desconocido en HTML. El texto que se mostrará será entonces [Voici l'heure],
- si [Thymeleaf] interpreta la página HTML, se evaluará el atributo [th:text] y su valor reemplazará el texto [Voici l'heure]. Su valor será algo así como [Il est 17:11:06];

Veamos cómo funciona esto. Duplicamos la página [templates / exemple-02.html] en la carpeta [static]. Las páginas HTML ubicadas en esta carpeta no son interpretadas por [Thymeleaf]:

Ejecutamos la aplicación como ya lo hemos hecho varias veces, y luego solicitamos con un navegador los archivos URL y [http://localhost:8080/exemple-02.html]:

En [1] vemos que el atributo [th:text] no se interpretó y tampoco generó ningún error. El código fuente de la página recibida en [2] muestra que el navegador recibió correctamente la página completa.

Volvamos a la página [exemple-02.html] de la carpeta [templates]:

Las páginas HTML ubicadas en la carpeta [templates] son interpretadas por [Thymeleaf]. Volvamos al código de la página:


<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>spring mvc intro</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
    <p th:text="'Il est ' + ${heure}">Voici l'heure</p>
</body>
</html>

línea 7: [Thymeleaf] interpretará el atributo [th:text] y reemplazará [Voici l'heure] por el valor de la expresión:

"'Il est ' + ${heure}"

Esta expresión utiliza la variable [${heure}], donde [heure] pertenece al modelo de la vista [exemple-02.html]. Por lo tanto, debemos crear este modelo. Para ello, seguiremos el ejemplo analizado en el párrafo 1.6. Modificamos el proyecto de la siguiente manera:

En [1], agregamos el controlador siguiente:


package istia.st.springmvc;

import java.text.SimpleDateFormat;
import java.util.Date;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class MyController {

    @RequestMapping("/")
    public String heure(Model model) {
        // formato de la hora
        SimpleDateFormat formater = new SimpleDateFormat("HH:MM:ss");
        // la hora actual
        String heure = formater.format(new Date());
        // se inserta la hora en la plantilla de la vista
        model.addAttribute("heure", heure);
        // se muestra la vista [exemple-02.html]
        return "exemple-02";
    }
}

líneas 13-14: el método [heure] procesa URL y [/];
línea 14: [Model model] es una plantilla vacía. La acción [heure] debe insertar en ella los atributos que desea que aparezcan en la plantilla. Sabemos que la vista [exemple-02.html] espera un atributo llamado [heure];
líneas 19-22: llevan a cabo lo que acabamos de explicar. La vista [exemple-02.html] se mostrará (línea 22) con un atributo llamado [heure] en su modelo (línea 20);
línea 16: se crea un formador de fecha. El formato [HH:MM:ss] utilizado es un formato [heures:minutes:secondes] en el que las horas se encuentran en el intervalo [0-24];
línea 18: con este formador, se formatea la fecha del día;
línea 20: la hora obtenida se asocia a un atributo llamado [heure];

Iniciamos la aplicación y solicitamos el URL [/]:

en [1] la página obtenida y en [2] su contenido HTML. Se puede observar que el texto inicial [Voici l'heure] ha desaparecido por completo;

Si ahora actualizamos la página [1] (F5), obtenemos una visualización diferente (nueva hora), mientras que URL no cambia. Este es el aspecto dinámico de la página: su contenido puede cambiar con el tiempo.

De lo anterior, cabe destacar la naturaleza fundamentalmente diferente de las páginas dinámicas y estáticas.

2.2.3. Configuración de la aplicación Spring Boot

Volvamos a la arquitectura del proyecto Eclipse:

El archivo [application.properties] permite configurar la aplicación Spring Boot. Por el momento, este archivo está vacío. Se puede utilizar para configurar la aplicación de múltiples maneras, tal como se describe en los archivos URL y [http://docs.spring.io/spring-boot/docs/current/reference/html/common-application-properties.html]. Vamos a utilizar el archivo [application.properties] de la siguiente manera:

línea 1: establece el puerto de servicio de la aplicación web;
línea 2: establece el contexto de la aplicación web;

Con esta configuración, se obtendrá la página estática [exemple-01.html] con URL y [http://localhost:9000/intro/exemple-01.html]:

2.3. Scripts del lado del navegador

Una página HTML puede contener scripts que serán ejecutados por el navegador. El principal lenguaje de script del lado del navegador es actualmente (enero de 2015) JavaScript. Se han creado cientos de bibliotecas con este lenguaje para facilitar el trabajo del desarrollador.

Creemos una nueva página [exemple-03.html] en la carpeta [static] del proyecto existente:

Editaremos el archivo [exemple-03.html] con el siguiente contenido:


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>exemple Javascript</title>
  <script type="text/javascript">
    function réagir() {
      alert("Vous avez cliqué sur le bouton !");
    }
  </script>
</head>
<body>
  <input type="button" value="Cliquez-moi" onclick="réagir()" />
</body>
</html>

línea 13: define un botón (atributo type) con el texto «Haz clic aquí» (atributo value). Al hacer clic en él, se ejecuta la función de JavaScript [réagir] (atributo onclick);
líneas 6-10: un script de JavaScript;
líneas 7-9: la función [réagir];
línea 8: muestra un cuadro de diálogo con el mensaje [Vous avez cliqué sur le bouton].

Veamos la página en un navegador:

en [1], la página que se muestra;
en [2], el cuadro de diálogo que aparece al hacer clic en el botón.

Al hacer clic en el botón, no hay intercambio de datos con el servidor. El navegador ejecuta el código JavaScript.

Con la gran cantidad de bibliotecas de JavaScript disponibles, ahora es posible integrar aplicaciones completas en el navegador. Por lo tanto, se tiende a utilizar las siguientes arquitecturas:

1-2: el servidor HTML es un servidor de páginas estáticas HTML5 / CSS / JavaScript;
3-4: Las páginas HTML5 / CSS / Javascript generadas interactúan directamente con el servidor de datos. Este solo proporciona datos sin formato HTML. Es el JavaScript el que las inserta en las páginas HTML que ya se encuentran en el navegador.

En esta arquitectura, el código JavaScript puede volverse pesado. Por lo tanto, se busca estructurarlo en capas, tal como se hace con el código del lado del servidor:

la capa [UI] es la que interactúa con el usuario;
la capa [DAO] interactúa con el servidor de datos;
la capa [métier] reúne los procedimientos de negocio que no interactúan ni con el usuario ni con el servidor de datos. Es posible que esta capa no exista.

2.4. Los intercambios entre cliente y servidor

Volvamos a nuestro esquema inicial que ilustraba los componentes de una aplicación web:

Aquí nos enfocamos en las comunicaciones entre la máquina cliente y la máquina servidor. Estas se realizan a través de una red y conviene recordar la estructura general de las comunicaciones entre dos máquinas remotas.

2.4.1. El modelo OSI

El modelo de red abierta denominado OSI (Modelo de Referencia de Interconexión de Sistemas Abiertos), definido por la ISO (Organización Internacional de Normalización), describe una red ideal en la que la comunicación entre máquinas puede representarse mediante un modelo de siete capas:

Cada capa recibe servicios de la capa inferior y ofrece los suyos a la capa superior. Supongamos que dos aplicaciones ubicadas en máquinas diferentes, A y B, desean comunicarse: lo hacen a nivel de la capa Application. No necesitan conocer todos los detalles del funcionamiento de la red: cada aplicación entrega la información que desea transmitir a la capa inferior: la capa Présentation. Por lo tanto, la aplicación solo tiene que conocer las reglas de interfaz con la capa Présentation. Una vez que la información se encuentra en la capa Présentation, se transfiere, siguiendo otras reglas, a la capa Session y así sucesivamente, hasta que la información llega al soporte físico y se transmite físicamente a la máquina de destino. Allí, se someterá al proceso inverso al que se le aplicó en la máquina de origen.

En cada capa, el proceso emisor encargado de enviar la información la envía a un proceso receptor en la otra máquina que pertenece a la misma capa que él. Lo hace siguiendo ciertas reglas que se denominan el protocolo de la capa. Por lo tanto, tenemos el siguiente esquema de comunicación final:

La función de las diferentes capas es la siguiente:

Física	Asegura la transmisión de bits a través de un medio físico. En esta capa se encuentran equipos terminales de procesamiento de datos (E.T.T.D), tales como terminales u computadoras, así como equipos de terminación de circuitos de datos (E.T.C.D), tales como moduladores/demoduladores, multiplexores y concentradores. Los puntos de interés en este nivel son: la elección de la codificación de la información (analógica o digital) la elección del modo de transmisión (sincrónico o asincrónico).
Enlace de datos	Oculta las características físicas de la capa física. Detecta y corrige los errores de transmisión.
Red	Administra la ruta que debe seguir la información enviada por la red. A esto se le llama routage: determinar la ruta que debe seguir la información para que llegue a su destinatario.
Transporte	Permite la comunicación entre dos aplicaciones, mientras que las capas anteriores solo permitían la comunicación entre máquinas. Un servicio que brinda esta capa puede ser el multiplexado: la capa de transporte puede utilizar una misma conexión de red (de máquina a máquina) para transmitir información perteneciente a varias aplicaciones.
Sesión	En esta capa se encuentran los servicios que permiten a una aplicación abrir y mantener una sesión de trabajo en una máquina remota.
Presentación	Su objetivo es uniformar la representación de los datos en las diferentes máquinas. Así, los datos procedentes de una máquina A serán «formateados» por la capa Présentation de la máquina A, según un formato estándar, antes de ser enviados a la red. Al llegar a la capa Présentation de la máquina destinataria B, que los reconocerá gracias a su formato estándar, se les dará otro formato para que la aplicación de la máquina B los reconozca.
Aplicación	En este nivel se encuentran las aplicaciones que suelen estar más cerca del usuario, como el correo electrónico o la transferencia de archivos.

2.4.2. El modelo TCP/IP

El modelo OSI es un modelo ideal. El conjunto de protocolos TCP/IP se aproxima a él de la siguiente manera:

la interfaz de red (la tarjeta de red de la computadora) cumple con las funciones de las capas 1 y 2 del modelo OSI
la capa IP (Protocolo de Internet) cumple con las funciones de la capa 3 (red)
La capa TCP (Protocolo de control de transferencia) o UDP (Protocolo de datagramas de usuario) cumple con las funciones de la capa 4 (transporte). El protocolo TCP se asegura de que los paquetes de datos intercambiados entre las máquinas lleguen correctamente a su destino. Si no es así, reenvía los paquetes que se han extraviado. El protocolo UDP no realiza esta tarea, por lo que le corresponde al desarrollador de aplicaciones hacerlo. Por eso, en Internet, que no es una red 100 % confiable, el protocolo TCP es el más utilizado. En este caso, se habla de una red TCP-IP.
La capa de aplicación abarca las funciones de los niveles 5 a 7 del modelo OSI.

Las aplicaciones web se encuentran en la capa Application y, por lo tanto, se basan en los protocolos TCP-IP. Las capas Application de las máquinas cliente y servidor intercambian mensajes que se confían a las capas 1 a 4 del modelo para que sean enrutados a su destino. Para entenderse, las capas de aplicación de ambas máquinas deben «hablar» un mismo lenguaje o protocolo. El de las aplicaciones web se llama HTTP (Protocolo de transferencia HyperText). Es un protocolo de tipo texto, c.a.d, mediante el cual las máquinas intercambian líneas de texto en la red para entenderse. Estos intercambios están estandarizados, es decir, el cliente cuenta con una serie de mensajes para indicar exactamente lo que quiere al servidor y este último también cuenta con una serie de mensajes para dar su respuesta al cliente. Este intercambio de mensajes tiene la siguiente forma:

Cliente --> Servidor

Cuando el cliente realiza su solicitud al servidor web, envía

líneas de texto en formato HTTP para indicar lo que quiere;
una línea en blanco;
opcionalmente, un documento.

Servidor --> Cliente

Cuando el servidor responde al cliente, envía

líneas de texto en formato HTTP para indicar lo que está enviando;
una línea en blanco;
opcionalmente, un documento.

Por lo tanto, los intercambios tienen la misma estructura en ambos sentidos. En ambos casos, puede enviarse un documento, aunque es poco común que un cliente envíe un documento al servidor. Pero el protocolo HTTP lo prevé. Esto es lo que permite, por ejemplo, que los suscriptores de un proveedor de acceso descarguen diversos documentos en su sitio personal alojado en ese proveedor de acceso. Los documentos intercambiados pueden ser de cualquier tipo. Tomemos como ejemplo un navegador que solicita una página web que contiene imágenes:

el navegador se conecta al servidor web y solicita la página que desea. Los recursos solicitados se identifican de manera única mediante URL (Uniform Resource Locator). El navegador solo envía encabezados HTTP y ningún documento.
El servidor le responde. En primer lugar, envía encabezados HTTP que indican qué tipo de respuesta está enviando. Puede tratarse de un error si la página solicitada no existe. Si la página existe, el servidor indicará en los encabezados HTTP de su respuesta que, después de estos, enviará un documento HTML (HyperText Markup Language). Este documento es una secuencia de líneas de texto en formato HTML. Un texto HTML contiene etiquetas (marcadores) que le dan al navegador instrucciones sobre cómo mostrar el texto.
El cliente sabe, a partir de los encabezados HTTP del servidor, que va a recibir un documento HTML. Lo analizará y tal vez se dé cuenta de que contiene referencias a imágenes. Estas no se encuentran en el documento HTML. Por lo tanto, realiza una nueva solicitud al mismo servidor web para pedir la primera imagen que necesita. Esta solicitud es idéntica a la realizada en el paso 1, salvo que el recurso solicitado es diferente. El servidor procesará esta solicitud enviando al cliente la imagen solicitada. Esta vez, en su respuesta, los encabezados HTTP indicarán que el documento enviado es una imagen y no un documento HTML.
El cliente recupera la imagen enviada. Los pasos 3 y 4 se repetirán hasta que el cliente (por lo general, un navegador) tenga todos los documentos que le permitan mostrar la página completa.

2.4.3. El protocolo HTTP

Veamos el protocolo HTTP con algunos ejemplos. ¿Qué se intercambian un navegador y un servidor web?

El servicio web o servicio HTTP es un servicio TCP-IP que suele funcionar en el puerto 80. Podría funcionar en otro puerto. En ese caso, el navegador cliente tendría que especificar ese puerto en la solicitud URL que envía. Una solicitud tiene la siguiente forma general:

protocolo://servidor[:port]/ruta/información

donde

protocolo	http para el servicio web. Un navegador también puede actuar como cliente de servicios ftp, news, telnet, etc.
máquina	nombre de la máquina donde se ejecuta el servicio web
puerto	puerto del servicio web. Si es el 80, se puede omitir el número de puerto. Este es el caso más común
ruta	ruta que designa el recurso solicitado
información	información adicional proporcionada al servidor para precisar la solicitud del cliente

¿Qué hace un navegador cuando un usuario solicita cargar un URL?

abre una comunicación TCP-IP con la máquina y el puerto indicados en la sección máquina[:port] del URL. Establecer una comunicación TCP-IP significa crear un «canal» de comunicación entre dos máquinas. Una vez creado este canal, toda la información intercambiada entre las dos máquinas pasará por él. La creación de este canal TCP-IP aún no implica el protocolo web HTTP.
Una vez creado el canal TCP-IP, el cliente enviará su solicitud al servidor web mediante el envío de líneas de texto (comandos) en formato HTTP. Enviará al servidor la parte de ruta/información del URL
el servidor le responderá de la misma manera y por el mismo canal
uno de los dos participantes tomará la decisión de cerrar el canal. Esto depende del protocolo HTTP utilizado. Con el protocolo HTTP 1.0, el servidor cierra la conexión después de cada una de sus respuestas. Esto obliga a un cliente que debe realizar varias solicitudes para obtener los distintos documentos que conforman una página web a abrir una nueva conexión con cada solicitud, lo cual tiene un costo. Con el protocolo HTTP/1.1, el cliente puede indicarle al servidor que mantenga la conexión abierta hasta que él le indique que la cierre. De este modo, puede recuperar todos los documentos de una página web con una sola conexión y cerrarla él mismo una vez obtenido el último documento. El servidor detectará este cierre y también cerrará la conexión.

Para conocer los intercambios entre un cliente y un servidor web, utilizaremos la extensión [Advanced Rest Client] del navegador Chrome que instalamos en el párrafo 9.6. Nos encontraremos en la siguiente situación:

El servidor web puede ser cualquiera. Lo que buscamos aquí es descubrir los intercambios que se producirán entre el navegador y el servidor web. Anteriormente, creamos la siguiente página estática HTML:


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>essai 1 : une page statique</title>
</head>
<body>
  <h1>Une page statique...</h1>
</body>
</html>

que visualizamos en un navegador:

Se observa que la página URL solicitada es: [http://localhost:9000/intro/exemple-01.html]. Por lo tanto, la máquina del servicio web es localhost (=máquina local) y el puerto 9000. Usemos la aplicación [Advanced Rest Client] para solicitar el mismo URL:

en [1], iniciamos la aplicación (en la pestaña [Applications] de una nueva pestaña de Chrome);
en [2], selecciona la opción [Request];
en [3], se especifica el servidor al que se consulta: http://localhost:9000;
en [4], se especifica la URL solicitada: /intro/exemple-01.html;
en [5], se agregan los parámetros que sean necesarios a la URL URL. Aquí no hay ninguno;
en [6], se especifica el comando HTTP utilizado para la consulta, en este caso GET.

Esto da como resultado la siguiente consulta:

La consulta así preparada, [7], se envía al servidor mediante [8]. La respuesta obtenida es entonces la siguiente:

Anteriormente mencionamos que los intercambios entre el cliente y el servidor tenían la siguiente forma:

en [1], se ven los encabezados HTTP enviados por el navegador en su solicitud. No tenía ningún documento que enviar;
en [2], se ven los encabezados HTTP enviados por el servidor como respuesta. En [3], se ve el documento que envió.

En [3], se reconoce la página estática HTML que colocamos en el servidor web.

Analicemos la solicitud HTTP del navegador:

GET /intro/exemple-01.html HTTP/1.1
Host: localhost:9000
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Safari/537.36
Content-Type: text/plain; charset=utf-8
Accept: */*
Accept-Encoding: gzip, deflate, sdch
Accept-Language: fr-FR,fr;q=0.8,en-US;q=0.6,en;q=0.4

la línea 1 no fue mostrada por la aplicación;
línea 6: el navegador se identifica con el encabezado [User-Agent];
línea 7: el navegador indica que envía al servidor un documento de texto (text/plain) en formato UTF-8. De hecho, en este caso, el navegador no ha enviado ningún documento;
línea 8: el navegador indica que acepta cualquier tipo de documento como respuesta;
línea 9: el navegador especifica los formatos de documento aceptados;
línea 10: el navegador especifica los idiomas que desea, en orden de preferencia.

El servidor le respondió enviando los siguientes encabezados HTTP:

HTTP/1.1 200 OK
Server: Apache-Coyote/1.1
Last-Modified: Sat, 29 Nov 2014 07:31:43 GMT
Content-Type: text/html
Content-Length: 255
Date: Sat, 29 Nov 2014 08:20:52 GMT

línea 1: no fue mostrada por la aplicación;
línea 2: el servidor se identifica; en este caso, es un servidor Apache-Coyote;
línea 3: la fecha de la última modificación del documento enviado;
línea 4: la naturaleza del documento enviado por el servidor. En este caso, un documento HTML;
línea 5: el tamaño en bytes del documento HTML enviado.
línea 6: fecha y hora de la respuesta;

2.4.4. Conclusión

Hemos descubierto la estructura de la solicitud de un cliente web y la de la respuesta que le da el servidor web a través de algunos ejemplos. El diálogo se lleva a cabo mediante el protocolo HTTP, un conjunto de comandos en formato de texto que intercambian ambas partes. La solicitud del cliente y la respuesta del servidor tienen la misma estructura, que es la siguiente:

Los dos comandos habituales para solicitar un recurso son GET y POST. El comando GET no va acompañado de un documento. El comando POST, por su parte, va acompañado de un documento que, en la mayoría de los casos, es una cadena de caracteres que reúne todos los valores ingresados en un formulario. El comando HEAD permite solicitar únicamente los encabezados HTTP y no va acompañado de ningún documento.

A petición de un cliente, el servidor envía una respuesta que tiene la misma estructura. El recurso solicitado se transmite en la parte [Document], a menos que el comando del cliente haya sido HEAD, en cuyo caso solo se envían los encabezados HTTP.

2.5. Conceptos básicos del lenguaje HTML

Un navegador web puede mostrar diversos documentos, siendo el más común el documento HTML (HyperText Markup Language). Este es un texto formateado con etiquetas de la forma <balise>texte</balise>. Así, el texto <B>important</B> mostrará el texto importante en negrita. Existen etiquetas independientes, como la etiqueta <hr/>, que muestra una línea horizontal. No repasaremos las etiquetas que se pueden encontrar en un texto HTML. Existen numerosos programas WYSIWYG que permiten crear una página web sin escribir una sola línea de código HTML. Estas herramientas generan automáticamente el código HTML a partir de un diseño realizado con el ratón y controles predefinidos. De esta manera, se puede insertar (con el ratón) una tabla en la página y luego consultar el código HTML generado por el programa para descubrir las etiquetas que se deben utilizar para definir una tabla en una página web. No es más complicado que eso. Por otra parte, el conocimiento del lenguaje HTML es indispensable, ya que las aplicaciones web dinámicas deben generar por sí mismas el código HTML que se enviará a los clientes web. Este código se genera mediante un programa y, por supuesto, es necesario saber qué se debe generar para que el cliente obtenga la página web que desea.

En resumen, no es necesario conocer todo el lenguaje HTML para comenzar a programar para la web. Sin embargo, este conocimiento es necesario y se puede adquirir mediante el uso de programas de creación de páginas web en WYSIWYG, como DreamWeaver y muchas otras. Otra forma de descubrir las sutilezas del lenguaje HTML es navegar por la web y ver el código fuente de las páginas que presentan características interesantes y que aún no conoces.

2.5.1. Un ejemplo

Consideremos el siguiente ejemplo, que presenta algunos elementos que se pueden encontrar en un documento web, tales como:

una tabla;
una imagen;
un enlace.

Un documento HTML tiene la siguiente estructura general:

<html>
    <head>
        <title>Un título</title>
        ...
    </head>
    <atributos del cuerpo>
        ...
    </body>
</html>

Todo el documento está enmarcado por las etiquetas <html>...</html>. Consta de dos partes:

<head>...</head>: es la parte no visible del documento. Proporciona información al navegador que mostrará el documento. A menudo contiene la etiqueta <title>...</title>, que establece el texto que aparecerá en la barra de título del navegador. También puede contener otras etiquetas, en particular aquellas que definen las palabras clave del documento, las cuales son utilizadas posteriormente por los motores de búsqueda. En esta sección también pueden encontrarse scripts, escritos generalmente en JavaScript o VBScript, que serán ejecutados por el navegador.

<body atributos>...</body>: esta es la parte que mostrará el navegador. Las etiquetas HTML contenidas en esta sección le indican al navegador el aspecto visual «deseado» para el documento. Cada navegador interpretará estas etiquetas a su manera. Por lo tanto, dos navegadores pueden mostrar de manera diferente un mismo documento web. Esto suele ser uno de los retos a los que se enfrentan los diseñadores web.

El código HTML de nuestro documento de ejemplo es el siguiente:


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>balises</title>
</head>

<body style="height: 400px; width: 400px; background-image: url(images/standard.jpg)">
    <h1 style="text-align: center">Les balises HTML</h1>
    <hr />
    <table border="1">
        <thead>
            <tr>
                <th>Colonne 1</th>
                <th>Colonne 2</th>
                <th>Colonne 3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>cellule(1,1)</td>
                <td style="width: 150px; text-align: center;">cellule(1,2)</td>
                <td>cellule(1,3)</td>
            </tr>
            <tr>
                <td>cellule(2,1)</td>
                <td>cellule(2,2)</td>
                <td>cellule(2,3</td>
            </tr>
        </tbody>
    </table>

    <table>
        <tr>
            <td>Une image</td>
            <td><img border="0" src="images/cerisier.jpg" /></td>
        </tr>
        <tr>
            <td>le site de l'ISTIA</td>
            <td><a href="http://istia.univ-angers.fr">ici</a></td>
        </tr>
    </table>
</body>
</html>

Elemento	etiquetas y ejemplos HTML
título del documento	<title>etiquetas</title> (línea 5) El texto balises aparecerá en la barra de título del navegador que muestre el documento
barra horizontal	<hr/>: muestra una línea horizontal (línea 10)
tabla	<table atributos>....</table>: para definir la tabla (líneas 11, 31) <thead>...</thead>: para definir los encabezados de las columnas (líneas 12, 18) <tbody>...</tbody>: para definir el contenido de la tabla (líneas 19, 30) <tr atributos>...</tr>: para definir una fila (líneas 20, 24) <td atributos>...</td>: para definir una celda (línea 21) ejemplos: <table border="1">...</table>: el atributo border define el grosor del borde de la tabla <td style="width: 150px; text-align: center;">celda(1,2)</td>: define una celda cuyo contenido será celda(1,2). Este contenido se centrará horizontalmente (text-align: center). La celda tendrá un ancho de 150 píxeles (width: 150px)
imagen	<img border="0" src="/images/cerisier.jpg"/> (línea 36): define una imagen sin borde (border="0") cuyo archivo de origen es /images/cerisier.jpg en el servidor web (src="images/cerisier.jpg"). Este enlace se encuentra en un documento web obtenido con el URL http://localhost:port/intro/exemple-04.html. Por lo tanto, el navegador solicitará el archivo URL http://localhost:port/intro/images/cerisier.jpg para obtener la imagen a la que se hace referencia aquí.
enlace	<a href="http://istia.univ-angers.fr">aquí</a> (línea 40): hace que el texto ici sirva como enlace a la imagen URL http://istia.univ-angers.fr.
pie de página	<body style="height:400px;width:400px;background-image:url(images/standard.jpg)"> (línea 8): indica que la imagen que se utilizará como fondo de la página se encuentra en la ruta URL [images/standard.jpg] del servidor web. En el contexto de nuestro ejemplo, el navegador solicitará la imagen URL http://localhost:port/intro/images/standard.jpg para obtener esta imagen de fondo. Además, el cuerpo del documento se mostrará en un rectángulo de 400 píxeles de alto y 400 píxeles de ancho.

En este sencillo ejemplo se observa que, para construir el documento completo, el navegador debe realizar tres solicitudes al servidor:

http://localhost:port/intro/exemple-04.html para obtener el código fuente HTML del documento
http://localhost:port/intro/images/cerisier.jpg para obtener la imagen cerisier.jpg
http://localhost:port/intro/images/standard.jpg para obtener la imagen de fondo standard.jpg

2.5.2. Un formulario HTML

El siguiente ejemplo muestra un formulario:

El código HTML que genera esta visualización es el siguiente:


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>formulaire</title>
  <script type="text/javascript">
    function effacer() {
      alert("Vous avez cliqué sur le bouton Effacer");
    }
  </script>
</head>

<body style="height: 400px; width: 400px; background-image: url(images/standard.jpg)">
  <h1 style="text-align: center">Formulaire HTML</h1>
  <form method="post" action="postFormulaire">
    <table>
      <tr>
        <td>Etes-vous marié(e)</td>
        <td>
          <input type="radio" value="Oui" name="R1" />Oui
          <input type="radio" name="R1" value="non" checked="checked" />Non
        </td>
      </tr>
      <tr>
        <td>Cases à cocher</td>
        <td>
          <input type="checkbox" name="C1" value="un" />1
          <input type="checkbox" name="C2" value="deux" checked="checked" />2
          <input type="checkbox" name="C3" value="trois" />3
        </td>
      </tr>
      <tr>
        <td>Champ de saisie</td>
        <td>
          <input type="text" name="txtSaisie" size="20" value="qqs mots" />
        </td>
      </tr>
      <tr>
        <td>Mot de passe</td>
        <td>
          <input type="password" name="txtMdp" size="20" value="unMotDePasse" />
        </td>
      </tr>
      <tr>
        <td>Boîte de saisie</td>
        <td>
          <textarea rows="2" name="areaSaisie" cols="20">
ligne1
ligne2
ligne3
</textarea>
        </td>
      </tr>
      <tr>
        <td>combo</td>
        <td>
          <select size="1" name="cmbValeurs">
            <option value="1">choix1</option>
            <option selected="selected" value="2">choix2</option>
            <option value="3">choix3</option>
          </select>
        </td>
      </tr>
      <tr>
        <td>liste à choix simple</td>
        <td>
          <select size="3" name="lst1">
            <option selected="selected" value="1">liste1</option>
            <option value="2">liste2</option>
            <option value="3">liste3</option>
            <option value="4">liste4</option>
            <option value="5">liste5</option>
          </select>
        </td>
      </tr>
      <tr>
        <td>liste à choix multiple</td>
        <td>
          <select size="3" name="lst2" multiple="multiple">
            <option value="1" selected="selected">liste1</option>
            <option value="2">liste2</option>
            <option selected="selected" value="3">liste3</option>
            <option value="4">liste4</option>
            <option value="5">liste5</option>
          </select>
        </td>
      </tr>
      <tr>
        <td>bouton</td>
        <td>
          <input type="button" value="Effacer" name="cmdEffacer" onclick="effacer()" />
        </td>
      </tr>
      <tr>
        <td>envoyer</td>
        <td>
          <input type="submit" value="Envoyer" name="cmdRenvoyer" />
        </td>
      </tr>
      <tr>
        <td>rétablir</td>
        <td>
          <input type="reset" value="Rétablir" name="cmdRétablir" />
        </td>
      </tr>
    </table>
    <input type="hidden" name="secret" value="uneValeur" />
  </form>
</body>
</html>

La correspondencia entre el control visual y la etiqueta HTML es la siguiente:

Control	etiqueta HTML
formulario	<form method="post" action="...">
campo de entrada	<input type="text" name="txtSaisie" size="20" value="unas palabras" />
campo de entrada oculto	<input type="password" name="txtMdp" size="20" value="unMotDePasse" />
campo de entrada de varias líneas	<textarea rows="2" name="areaSaisie" cols="20"> línea1 línea 2 línea 3 </textarea>
botones de opción	<input type="radio" value="Sí" name="R1" />Sí <input type="radio" name="R1" value="no" checked="checked" />No
casillas de selección	<input type="checkbox" name="C1" value="uno" />1 <input type="checkbox" name="C2" value="dos" checked="checked" />2 <input type="checkbox" name="C3" value="tres" />3
Menú desplegable	<select size="1" name="cmbValeurs"> <option value="1">opción 1</option> <option selected="selected" value="2">opción 2</option> <option value="3">opción 3</option> </select>
lista de selección única	<select size="3" name="lst1"> <option selected="selected" value="1">lista1</option> <option value="2">lista2</option> <option value="3">lista3</option> <option value="4">lista4</option> <option value="5">lista5</option> </select>
lista de selección múltiple	<select size="3" name="lst2" multiple="multiple"> <option value="1">lista1</option> <option value="2">lista2</option> <option selected="selected" value="3">lista3</option> <option value="4">lista4</option> <option value="5">lista5</option> </select>
botón de tipo submit	<input type="submit" value="Enviar" name="cmdRenvoyer" />
botón de tipo reset	<input type="reset" value="Restablecer" name="cmdRétablir" />
botón de tipo button	<input type="button" value="Borrar" name="cmdEffacer" onclick="effacer()" />

Repasemos estas diferentes etiquetas:

2.5.2.1. El formulario « »

formulario


<form method="post" action="postFormulaire">

etiqueta HTML

<form name="..." method="..." action="...">...</form>

atributos

name="frmexemplo": nombre del formulario

method="..." : método que utiliza el navegador para enviar al servidor web los valores recopilados en el formulario

action="...": URL a la que se enviarán los valores recopilados en el formulario.

Un formulario web está delimitado por las etiquetas <form>...</form>. El formulario puede tener un nombre (name="xx"). Esto aplica a todos los controles que se pueden encontrar en un formulario. El objetivo de un formulario es recopilar la información ingresada por el usuario mediante el teclado o el ratón y enviarla a una URL del servidor web. ¿Cuál? La que se indica en el atributo action="URL". Si este atributo no está presente, la información se enviará al documento en el que se encuentra el formulario. Un cliente web puede utilizar dos métodos diferentes, llamados POST y GET, para enviar datos a un servidor web. El atributo method="méthode", con method igual a GET o POST, de la etiqueta <form> le indica al navegador el método que debe utilizar para enviar la información recopilada en el formulario a la URL especificada por el atributo action="URL". Cuando no se especifica el atributo method, se utiliza el método GET por defecto.

2.5.2.2. Los campos de entrada de texto

campo de entrada

etiqueta HTML

<input type="..." name="..." size=".." value=".."/>

La etiqueta input existe para diversos controles. Es el atributo type el que permite diferenciar estos controles entre sí.

atributos

type="text": indica que se trata de un campo de entrada

type="password": los caracteres que aparecen en el campo de entrada se sustituyen por asteriscos (*). Esta es la única diferencia con respecto al campo de entrada normal. Este tipo de control es adecuado para ingresar contraseñas.

size="20": número de caracteres visibles en el campo; no impide ingresar más caracteres

name="txtEntrada" : nombre del control

value="algunas palabras": texto que se mostrará en el campo de entrada.

2.5.2.3. Los campos de entrada de varias líneas

campo de entrada de varias líneas

línea1

línea 2

línea 3

</textarea>

etiqueta HTML	<textarea ...>texto</textarea> muestra un campo de entrada de varias líneas que inicialmente contiene texto
atributos	rows="2": número de líneas cols="'20": número de columnas name="areaSaisie": nombre del control

2.5.2.4. Los botones de opción

botones de radio

<input type="radio" value="Sí" name="R1" />Sí

<input type="radio" name="R1" value="no" checked="checked" />No

etiqueta HTML

<input type="radio" atributo2="valor2" ..../>texto

muestra un botón de opción con texto al lado.

atributos

name="radio": nombre del control. Los botones de opción con el mismo nombre forman un grupo de botones que se excluyen entre sí: solo se puede seleccionar uno de ellos.

value="valor": valor asignado al botón de opción. No se debe confundir este valor con el texto que aparece junto al botón de opción. Este último solo sirve para la visualización.

checked="checked": si se incluye esta palabra clave, el botón de radio está marcado; de lo contrario, no lo está.

2.5.2.5. Las casillas de selección

casillas de selección

<input type="checkbox" name="C1" value="uno" />1

<input type="checkbox" name="C2" value="dos" checked="checked" />2

<input type="checkbox" name="C3" value="tres" />3

etiqueta HTML

<input type="checkbox" atributo2="valor2" ....>texto

muestra una casilla de selección con texto al lado.

atributos

name="C1": nombre del control. Las casillas de selección pueden tener o no el mismo nombre. Las casillas con el mismo nombre forman un grupo de casillas asociadas.

value="valor": valor asignado a la casilla de selección. No se debe confundir este valor con el texto que aparece junto a la casilla de selección. Este último es solo para fines de visualización.

checked= "checked": si esta palabra clave está presente, la casilla de selección está marcada; de lo contrario, no lo está.

2.5.2.6. La lista desplegable (combo)

Combo

<option value="1">opción1</option>

<option selected="selected" value="2">opción 2</option>

<option value="3">opción 3</option>

</select>

etiqueta HTML

<select size=".." name="..">

<option [selected="selected"] value=”v”>...</option>

...

</select>

muestra en una lista los textos que se encuentran entre las etiquetas <option>...</option>

atributos

name="cmbValeurs": nombre del control.

size="1": número de elementos visibles de la lista. size="1" convierte la lista en el equivalente a un cuadro combinado.

selected="selected": si esta palabra clave está presente para un elemento de la lista, este aparece seleccionado en la lista. En nuestro ejemplo anterior, el elemento de la lista choix2 aparece como el elemento seleccionado del cuadro combinado cuando este se muestra por primera vez.

value=”v”: si el usuario selecciona el elemento, es este valor [v] el que se envía al servidor. Si no se incluye este atributo, se envía al servidor el texto que se muestra y está seleccionado.

2.5.2.7. Lista de selección única

lista de selección única

<option selected="selected" value="1">lista1</option>

<option value="2">lista2</option>

<option value="3">lista3</option>

<option value="4">lista4</option>

<option value="5">lista5</option>

</select>

etiqueta HTML	<select size=".." name=".."> <option [selected="selected"]>...</option> ... </select> muestra en una lista los textos que se encuentran entre las etiquetas <option>...</option>
atributos	los mismos que para la lista desplegable que muestra solo un elemento. Este control solo se diferencia de la lista desplegable anterior por su atributo size>1.

2.5.2.8. Lista de selección múltiple

lista de selección única

<option value="1" selected="selected">lista1</option>

<option value="2">lista2</option>

<option selected="selected" value="3">lista3</option>

<option value="4">lista4</option>

<option value="5">lista5</option>

</select>

etiqueta HTML	<select size=".." name=".." multiple="multiple"> <option [selected="selected"]>...</option> ... </select> muestra en una lista los textos que se encuentran entre las etiquetas <option>...</option>
atributos	múltiple: permite seleccionar varios elementos de la lista. En el ejemplo anterior, se seleccionan los elementos liste1 y liste3.

2.5.2.9. Botón de tipo button

botón de tipo button

etiqueta HTML

<input type="button" value="..." name="..." onclick="effacer()" ..../>

atributos

type="button": define un control de botón. Existen otros dos tipos de botón: los tipos submit y reset.

value="Borrar": el texto que se muestra en el botón

onclick="función()": permite definir una función que se ejecutará cuando el usuario haga clic en el botón. Esta función forma parte de los scripts definidos en el documento web que se muestra. La sintaxis anterior es una sintaxis javascript. Si los scripts están escritos en VBScript, habría que escribir onclick="función" sin los paréntesis. La sintaxis es idéntica si se deben pasar parámetros a la función: onclick="función(val1, val2,...)"

En nuestro ejemplo, al hacer clic en el botón Effacer se invoca la siguiente función de JavaScript effacer:

function borrar() {

alert("Ha hecho clic en el botón Borrar");

}

</script>

La función effacer muestra un mensaje:

2.5.2.10. Botón de tipo «submit»

botón de tipo «submit»

etiqueta HTML

atributos

type="submit": define el botón como un botón para enviar los datos del formulario al servidor web. Cuando el usuario haga clic en este botón, el navegador enviará los datos del formulario a la URL URL definida en el atributo action de la etiqueta <form>, según el método definido por el atributo method de esa misma etiqueta.

value="Enviar": el texto que se muestra en el botón

2.5.2.11. Botón de tipo reset

Botón de tipo «reset»

etiqueta HTML	<input type="reset" value="Restablecer" name="cmdRétablir"/>
atributos	type="reset": define el botón como un botón para restablecer el formulario. Cuando el usuario haga clic en este botón, el navegador devolverá el formulario al estado en el que lo recibió. value="Restablecer": el texto que se muestra en el botón

2.5.2.12. Campo oculto

campo oculto

etiqueta HTML

<input type="hidden" name="..." value="..."/>

atributos

type="hidden": indica que se trata de un campo oculto. Un campo oculto forma parte del formulario, pero no se muestra al usuario. Sin embargo, si el usuario solicitara a su navegador que mostrara el código fuente, vería la presencia de la etiqueta <input type="hidden" value="..."> y, por lo tanto, el valor del campo oculto.

value="unValor": valor del campo oculto.

¿Para qué sirve el campo oculto? Permite que el servidor web conserve información a lo largo de las solicitudes de un cliente. Consideremos una aplicación de compras en línea. El cliente compra un primer artículo art1 en una cantidad de q1 en una primera página de un catálogo y luego pasa a una nueva página del catálogo. Para recordar que el cliente compró q1 artículos art1, el servidor puede colocar esta información en un campo oculto del formulario web de la nueva página. En esta nueva página, el cliente compra los artículos q2 y art2. Cuando los datos de este segundo formulario se envíen al servidor (submit), este no solo recibirá la información (q2, art2), sino también (q1, art1), que también forma parte del formulario como un campo oculto. A continuación, el servidor web colocará en un nuevo campo oculto la información (q1,art1) y (q2,art2) y enviará una nueva página del catálogo. Y así sucesivamente.

2.5.3. Envío de los valores de un formulario a un servidor web por parte de un cliente web

En el estudio anterior mencionamos que el cliente web cuenta con dos métodos para enviar a un servidor web los valores de un formulario que ha mostrado: los métodos GET y POST. Veamos con un ejemplo la diferencia entre ambos métodos.

2.5.3.1. Método GET

Hagamos una primera prueba, en la que, en el código HTML del documento, la etiqueta <form> se define de la siguiente manera:


<form method="get" action="doNothing">

Cuando el usuario haga clic en el botón [1], los valores ingresados en el formulario se enviarán al controlador Spring [2]. Hemos visto que los valores del formulario se enviarán a URL y [doNothing]:


<form method="get" action="doNothing">

La acción [doNothing] se define en el controlador [MyController] [2] de la siguiente manera:


    // ----------------------- vaciar un flujo [Content-Length=0]
    @RequestMapping(value = "/doNothing")
    @ResponseBody
    public void doNothing() {
}

línea 1: la acción procesa URL [/doNothing], es decir, en realidad [/context/doNothing], donde [context] es el contexto o nombre de la aplicación web, en este caso, [/intro];
línea 3: la anotación [@ResponseBody] indica que el resultado del método anotado debe enviarse directamente al cliente;
línea 4: el método no devuelve nada. Por lo tanto, el cliente recibirá una respuesta vacía del servidor.

Solo queremos saber cómo el navegador transmite los valores ingresados al servidor web. Para ello, utilizaremos una herramienta de depuración disponible en Chrome. Se activa presionando CTRL-Mayús-I (mayúscula) [3]:

Como nos interesa el intercambio de datos de red entre el navegador y el servidor web, activamos arriba la pestaña [Network] y luego hacemos clic en el botón [Envoyer] del formulario. Este es un botón de tipo [submit] dentro de una etiqueta [form]. El navegador responde al clic solicitando el URL [/intro/doNothing] indicado en el atributo [action] de la etiqueta [form], con el método GET indicado en el atributo [method]. De esta manera, obtenemos la siguiente información:

La captura de pantalla anterior nos muestra el código URL solicitado por el navegador al hacer clic en el botón [envoyer]. Efectivamente, solicita el URL previsto como [/intro/doNothing], pero al final agrega información que corresponde a los valores ingresados en el formulario. Para obtener más información, hacemos clic en el enlace anterior:

Arriba, en [1, 2], vemos los encabezados HTTP enviados por el navegador. Aquí se han formateado. Para ver el texto sin formato de estos encabezados, seguimos el enlace [view source] [3, 4]. El texto completo es el siguiente:

GET /intro/doNothing?R1=non&C2=deux&txtSaisie=qqs+mots&txtMdp=unMotDePasse&areaSaisie=ligne1%0D%0Aligne2%0D%0Aligne3%0D%0A&cmbValeurs=2&lst1=1&lst2=1&lst2=3&cmdRenvoyer=Envoyer&secret=uneValeur HTTP/1.1
Host: localhost:9000
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Safari/537.36
Referer: http://localhost:9000/intro/exemple-05.html
Accept-Encoding: gzip, deflate, sdch
Accept-Language: fr-FR,fr;q=0.8,en-US;q=0.6,en;q=0.4

Encontramos elementos que ya hemos visto anteriormente. Otros aparecen por primera vez:

Connection: keep-alive	el cliente le pide al servidor que no cierre la conexión después de su respuesta. Esto le permitirá usar la misma conexión para una solicitud posterior. La conexión no permanece abierta indefinidamente. El servidor la cerrará después de un lapso demasiado largo de inactividad.
Referer	el URL que se mostraba en el navegador cuando se realizó la nueva solicitud.

La novedad se encuentra en la línea 1 de la información que sigue a URL. Se observa que las selecciones realizadas en el formulario se reflejan en el URL. Los valores ingresados por el usuario en el formulario se han pasado a la orden GET URL?param1=valor1&param2=valor2&... HTTP/1.1, donde parami son los nombres (atributo name) de los controles del formulario web y valeuri los valores que se les asocian. A continuación presentamos una tabla de tres columnas:

columna 1: recoge la definición de un control HTML del ejemplo;
columna 2: muestra cómo se ve este control en un navegador;
columna 3: muestra el valor que el navegador envía al servidor para el control de la columna 1, tal como aparece en la solicitud GET del ejemplo.

control HTML	Visualización	valor(es) devuelto(s)
<input type="radio" value="Sí" name="R1"/>Sí <input type="radio" name="R1" value="no" checked="checked"/>No		R1=Sí - el valor del atributo value del botón de opción marcado por el usuario.
<input type="checkbox" name="C1" value="uno"/>1 <input type="checkbox" name="C2" value="dos" checked="checked"/>2 <input type="checkbox" name="C3" value="tres"/>3		C1=uno C2=dos - valores de los atributos value de las casillas marcadas por el usuario
<input type="text" name="txtSaisie" size="20" value="unas palabras"/>		txtEntrada = programación+Web - texto escrito por el usuario en el campo de entrada. Los espacios se han reemplazado por el signo +
<input type="password" name="txtMdp" size="20" value="unMotDePasse"/>		txtMdp=estoesecreto - texto escrito por el usuario en el campo de entrada
<textarea rows="2" name="areaSaisie" cols="20"> línea1 línea 2 línea 3 </textarea>		areaIntroducción=los+fundamentos+de+la%0D%0A programación+web - texto escrito por el usuario en el campo de entrada. %OD%OA es el marcador de fin de línea. Los espacios se han reemplazado por el signo +
<select size="1" name="cmbValeurs"> <option value='1'>opción1</option> <option selected="selected" value='2'>opción2</option> <option value='3'>opción3</option> </select>		cmbValores=3 - atributo [value] del elemento seleccionado por el usuario
<select size="3" name="lst1"> <option selected="selected" value='1'>lista1</option> <option value='2'>lista2</option> <option value='3'>lista3</option> <option value='4'>lista4</option> <option value='5'>lista5</option> </select>		lst1=3 - atributo [value] del elemento seleccionado por el usuario
<select size="3" name="lst2" multiple="multiple"> <option selected="selected" value='1'>lista1</option> <option value='2'>lista2</option> <option selected="selected" value='3'>lista3</option> <option value='4'>lista4</option> <option value='5'>lista5</option> </select>		lst2=1 lst2=3 - Atributos [value] de los elementos seleccionados por el usuario
<input type="submit" value="Enviar" name="cmdRenvoyer"/>		cmdRenvoyer=Enviar - nombre y atributo value del botón que se utilizó para enviar los datos del formulario al servidor
<input type="hidden" name="secret" value="uneValeur"/>		secret=unValor - atributo value del campo oculto

2.5.3.2. Método POST

Modificamos el documento HTML para que el navegador utilice ahora el método POST para enviar los valores del formulario al servidor web:


  <form method="post" action="doNothing">

Llenamos el formulario tal como lo haríamos para el método GET y enviamos los parámetros al servidor con el botón [Envoyer]. Al igual que se hizo en el párrafo anterior de la página 62, en Chrome tenemos acceso a los encabezados HTTP de la solicitud enviada por el navegador:

POST /intro/doNothing HTTP/1.1
Host: localhost:9000
Connection: keep-alive
Content-Length: 172
Pragma: no-cache
Cache-Control: no-cache
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Origin: http://localhost:9000
User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Safari/537.36
Content-Type: application/x-www-form-urlencoded
Referer: http://localhost:9000/intro/exemple-05.html
Accept-Encoding: gzip, deflate
Accept-Language: fr-FR,fr;q=0.8,en-US;q=0.6,en;q=0.4

R1=non&C2=deux&txtSaisie=qqs+mots&txtMdp=unMotDePasse&areaSaisie=ligne1%0D%0Aligne2%0D%0Aligne3%0D%0A&cmbValeurs=2&lst1=1&lst2=1&lst2=3&cmdRenvoyer=Envoyer&secret=uneValeur

Aparecen novedades en la solicitud HTTP del cliente:

POST URL HTTP/1.1	La consulta GET ha sido sustituida por la consulta POST. Los parámetros ya no aparecen en esta primera línea de la consulta. Se puede observar que ahora se encuentran (línea 15) después de la consulta HTTP, tras una línea en blanco. Su codificación es idéntica a la que tenían en la consulta GET.
Content-Length	número de caracteres «enviados», c.a.d. El número de caracteres que deberá leer el servidor web tras recibir los encabezados HTTP para recuperar el documento que le envía el cliente. El documento en cuestión es, en este caso, la lista de valores del formulario.
Content-type	especifica el tipo de documento que el cliente enviará después de los encabezados HTTP. El tipo [application/x-www-form-urlencoded] indica que se trata de un documento que contiene valores de formulario.

Existen dos métodos para transmitir datos a un servidor web: GET y POST. ¿Hay algún método mejor que el otro? Hemos visto que si los valores de un formulario se enviaban desde el navegador con el método GET, el navegador mostraba en su campo Adresse la URL solicitada en el formato URL?param1=val1&param2=val2&.... Esto puede verse como una ventaja o una desventaja:

una ventaja si se quiere permitir que el usuario agregue este URL configurado a sus enlaces favoritos;
una desventaja si no se desea que el usuario tenga acceso a cierta información del formulario, como, por ejemplo, los campos ocultos.

De ahora en adelante, utilizaremos casi exclusivamente el método POST en nuestros formularios.

2.6. Conclusion

En este capítulo se han presentado diversos conceptos básicos del desarrollo web:

las comunicaciones entre el cliente y el servidor a través del protocolo HTTP;
el diseño de un documento mediante el lenguaje HTML;
el diseño de formularios de entrada de datos.

Hemos podido ver, a través de un ejemplo, cómo un cliente puede enviar información al servidor web. No hemos explicado cómo el servidor puede

recuperar esa información;
procesarla;
enviar al cliente una respuesta dinámica que dependa del resultado del procesamiento.

Este es el ámbito de la programación web, tema que abordaremos en el siguiente capítulo con la presentación de la tecnología Spring MVC.