2. Noções básicas de programação web

O objetivo principal deste capítulo é apresentar os princípios fundamentais da programação web, que são independentes da tecnologia específica utilizada para implementá-los. Ele apresenta diversos exemplos que é recomendável testar para, aos poucos, “absorver” a filosofia do desenvolvimento web. O leitor que já possua esses conhecimentos pode passar diretamente para o capítulo 3.

Os componentes de uma aplicação web são os seguintes:

Número	Função	Exemplos comuns
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 executados no lado do servidor. Podem ser executados por módulos do servidor ou por programas externos ao servidor (CGI).	JAVASCRIPT (Node.js) PHP (Apache, IIS) JAVA (Tomcat, WebSphere, JBoss, WebLogic, ...) C#, VB.NET (IIS)
4	Banco de dados — Ele pode estar na mesma máquina que o programa que o utiliza ou em outra máquina, acessível pela Internet.	Oracle (Linux, Windows) MySQL (Linux, Windows) Postgres (Linux, Windows) SQL Server (Windows)
5	OS Cliente	Unix, Linux, Windows
6	Navegador da Web	Chrome, Internet Explorer, Firefox, Opera, Safari, ...
7	Scripts executados no lado do cliente, dentro do navegador. Esses scripts não têm acesso aos discos do computador do usuário.	JavaScript (em qualquer navegador)

2.1. Trocas de dados em um aplicativo da Web com formulário

Número	Função
1	O navegador solicita um URL pela primeira vez: (http://machine/url). Nenhum parâmetro é passado.
2	O servidor web envia a ele a página da web correspondente a esse URL. Ela pode ser estática ou gerada dinamicamente por um script de servidor (SA), que pode ter utilizado o conteúdo de bancos de dados (SB, SC). Nesse caso, o script detectará que o URL foi solicitado sem a passagem de parâmetros e gerará a página da Web inicial. O navegador recebe a página e a exibe (CA). Scripts do lado do navegador (CB) puderam modificar a página inicial enviada pelo servidor. Em seguida, por meio de interações entre o usuário (CD) e os scripts (CB), a página da Web será modificada. Os formulários, em particular, serão preenchidos.
3	O usuário confirma os dados do formulário, que devem então ser enviados ao servidor web. O navegador solicita novamente a página inicial URL ou outra, conforme o caso, e transmite ao mesmo tempo ao servidor os valores do formulário. Para isso, ele pode utilizar dois métodos chamados GET e POST. Ao receber a solicitação do cliente, o servidor aciona o script (SA) associado ao URL solicitado, script esse que detectará os parâmetros e os processará.
4	O servidor entrega a página da Web gerada programaticamente (SA, SB, SC). Esta etapa é idêntica à etapa 2 anterior. As trocas de dados ocorrem agora de acordo com as etapas 2 e 3.

2.2. Páginas da Web estáticas, páginas da Web dinâmicas

Uma página estática é representada por um arquivo HTML. Uma página dinâmica é uma página HTML gerada “na hora” pelo servidor da Web.

2.2.1. Página estática HTML (Linguagem de Marcação HyperText)

Vamos criar um primeiro projeto Spring MVC [1-2]:

no [1-2], criamos um novo projeto baseado no Spring Boot [http://projects.spring.io/spring-boot/];

as informações [3-7] são para a configuração do Maven do projeto;
em [3], o nome do projeto Maven;
em [4], o grupo do Maven no qual será colocado o resultado da compilação do projeto;
em [5], o nome atribuído ao produto da compilação;
em [6], uma descrição do projeto;
em [7], o pacote no qual será colocada a classe executável do projeto;
em [8], a natureza do projeto. Trata-se de um projeto web com visualizações Thymeleaf. Aqui, vemos todas as dependências do Maven prontas para uso oferecidas pelo projeto Spring Boot;
em [9], indica-se que o produto resultante da compilação do Maven será empacotado em um arquivo jar e não war. O projeto utilizará, então, um servidor Tomcat embutido que estará entre suas dependências;
em [10], seguimos para a próxima etapa do assistente;

em [11], indica-se a pasta do projeto;
em [12], conclui-se o assistente;
em [13], o projeto gerado.

Vamos examinar o arquivo [pom.xml] gerado:


<?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 /> <!-- pesquisa do pai no repositório -->
    </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>

Ele contém todas as informações fornecidas no assistente. Nas linhas 26 a 30, encontramos uma dependência que não conhecíamos. Ela permite a integração dos testes unitários JUnit com o Spring.

Vamos começar criando uma página estática HTML neste projeto. Ela deve ser colocada, por padrão, na pasta [src / main / resources / static]:

no [1-4], criamos um arquivo HTML na pasta [static];

em [6], nomeie a página;
em [7], a página foi adicionada.

O conteúdo da página criada é o seguinte:


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

</body>
</html>

linhas 2-10: o código é delimitado pela tag raiz <html>;
linhas 3-6: a tag <head> delimita o que chamamos de cabeçalho da página;
linhas 7-9: a tag <body> delimita o que chamamos de corpo da página.

Vamos modificar esse código da seguinte maneira:


<!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>

linha 5: define o título da página – será exibido como título da janela do navegador que exibe a página;
linha 8: um texto em letras grandes (<h1>).

Vamos executar o aplicativo [1-3]:

em seguida, usando um navegador, acessemos o URL [http://localhost:8080/exemple-01.html]:

no [1], o URL da página visualizada;
em [2], o título da janela – fornecido pela tag <title> da página;
em [3], o corpo da página — fornecido pela tag <h1>.

Vejamos o código [4-5], recebido pelo navegador:

em [5], o navegador recebeu a página HTML que havíamos criado. Ele a interpretou e a transformou em uma exibição gráfica.

2.2.2. Uma página dinâmica do Thymeleaf

Vamos agora criar uma página Thymeleaf. Trata-se de uma página HTML clássica com tags enriquecidas com atributos [Thymeleaf] e [http://www.thymeleaf.org/]. Seguimos um procedimento semelhante ao da criação da página HTML, mas, desta vez, é na pasta [templates] que devemos colocar a nova página HTML:

A página [exemple-02.html] ficará assim:


<!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>

linha 8: a tag <p> é uma tag HTML que insere um parágrafo na página exibida. [th:text] é um atributo [Thymeleaf] que tem duas funções diferentes, dependendo se [Thymeleaf] está em ação ou não:
- se [Thymeleaf] não interpretar a página HTML, o atributo [th:text] será ignorado, pois é desconhecido em HTML. O texto exibido será, então, [Voici l'heure],
- se [Thymeleaf] interpretar a página HTML, o atributo [th:text] será avaliado e seu valor substituirá o texto [Voici l'heure]. Seu valor será do tipo [Il est 17:11:06];

Vamos ver isso em ação. Duplicamos a página [templates / exemple-02.html] na pasta [static]. As páginas HTML colocadas nessa pasta não são interpretadas por [Thymeleaf]:

Executamos o aplicativo como já fizemos várias vezes e, em seguida, acessamos com um navegador os arquivos URL e [http://localhost:8080/exemple-02.html]:

Vemos em [1] que o atributo [th:text] não foi interpretado e também não causou nenhum erro. O código-fonte da página recebida em [2] mostra que o navegador recebeu corretamente a página completa.

Voltemos à página [exemple-02.html] da pasta [templates]:

As páginas HTML localizadas na pasta [templates] são interpretadas por [Thymeleaf]. Voltemos ao código da 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>

linha 7: [Thymeleaf] interpretará o atributo [th:text] e substituirá [Voici l'heure] pelo valor da expressão:

"'Il est ' + ${heure}"

Essa expressão utiliza a variável [${heure}], em que [heure] pertence ao modelo da visualização [exemple-02.html]. Portanto, precisamos criar esse modelo. Para isso, seguiremos o exemplo estudado no parágrafo 1.6. Atualizamos o projeto da seguinte maneira:

Em [1], adicionamos o controlador a seguir:


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 da hora
        SimpleDateFormat formater = new SimpleDateFormat("HH:MM:ss");
        // hora atual
        String heure = formater.format(new Date());
        // inserimos a hora no modelo da visualização
        model.addAttribute("heure", heure);
        // exibe-se a visualização [exemple-02.html]
        return "exemple-02";
    }
}

linhas 13-14: o método [heure] processa o URL e o [/];
linha 14: [Model model] é um modelo vazio. A ação [heure] deve inserir nele os atributos que deseja ver no modelo. Sabemos que a visualização [exemple-02.html] espera um atributo chamado [heure];
linhas 19-22: realizam o que acabamos de explicar. A visualização [exemple-02.html] será exibida (linha 22) com, em seu modelo, um atributo chamado [heure] (linha 20);
linha 16: cria-se um formatador de data. O formato [HH:MM:ss] utilizado é um formato [heures:minutes:secondes], no qual as horas estão no intervalo [0-24];
linha 18: com esse formatador, formata-se a data de hoje;
linha 20: a hora obtida é associada a um atributo chamado [heure];

Iniciamos o aplicativo e solicitamos o URL [/]:

em [1] a página obtida e em [2] seu conteúdo HTML. É possível constatar que o texto inicial [Voici l'heure] desapareceu completamente;

Se agora atualizarmos a página [1] (F5), obtemos uma exibição diferente (nova hora), enquanto o URL permanece inalterado. Esse é o aspecto dinâmico da página: seu conteúdo pode mudar com o passar do tempo.

Dito isso, é importante destacar a natureza fundamentalmente diferente das páginas dinâmicas e estáticas.

2.2.3. Configuração do aplicativo Spring Boot

Voltemos à arquitetura do projeto Eclipse:

O arquivo [application.properties] permite configurar a aplicação Spring Boot. Por enquanto, esse arquivo está vazio. Ele pode ser usado para configurar a aplicação de várias maneiras, descritas nos arquivos URL e [http://docs.spring.io/spring-boot/docs/current/reference/html/common-application-properties.html]. Vamos utilizar o arquivo [application.properties] de acordo com o [2]:

linha 1: define a porta de serviço do aplicativo web;
linha 2: define o contexto da aplicação web;

Com essa configuração, a página estática [exemple-01.html] será gerada a partir de URL e [http://localhost:9000/intro/exemple-01.html]:

2.3. Scripts do lado do navegador

Uma página HTML pode conter scripts que serão executados pelo navegador. A principal linguagem de script do lado do navegador é, atualmente (janeiro de 2015), o JavaScript. Centenas de bibliotecas foram criadas com essa linguagem para facilitar o trabalho do desenvolvedor.

Vamos criar uma nova página [exemple-03.html] na pasta [static] do projeto existente:

Vamos editar o arquivo [exemple-03.html] com o seguinte conteúdo:


<!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>

linha 13: define um botão (atributo type) com o texto “Clique aqui” (atributo value). Ao clicar nele, a função JavaScript [réagir] é executada (atributo onclick);
linhas 6-10: um script JavaScript;
linhas 7-9: a função [réagir];
linha 8: exibe uma caixa de diálogo com a mensagem [Vous avez cliqué sur le bouton].

Vamos visualizar a página em um navegador:

em [1], a página exibida;
em [2], a caixa de diálogo exibida ao clicar no botão.

Ao clicar no botão, não há troca de dados com o servidor. O código JavaScript é executado pelo navegador.

Com as inúmeras bibliotecas de JavaScript disponíveis, agora é possível incorporar verdadeiras aplicações no navegador. Assim, tende-se a adotar as seguintes arquiteturas:

1-2: o servidor HTML é um servidor de páginas estáticas HTML5 / CSS / JavaScript;
3-4: as páginas HTML5 / CSS / Javascript geradas interagem diretamente com o servidor de dados. Este fornece apenas dados sem formatação HTML. É o JavaScript que as insere nas páginas HTML já presentes no navegador.

Nessa arquitetura, o código JavaScript pode se tornar pesado. Por isso, procura-se estruturá-lo em camadas, da mesma forma que se faz com o código do lado do servidor:

a camada [UI] é a que interage com o usuário;
a camada [DAO] interage com o servidor de dados;
a camada [métier] reúne os procedimentos de negócio que não interagem nem com o usuário nem com o servidor de dados. Essa camada pode não existir.

2.4. As interações cliente-servidor

Voltemos ao nosso esquema inicial, que ilustrava os participantes de uma aplicação web:

Aqui, estamos interessados nas trocas entre a máquina cliente e a máquina servidor. Essas trocas ocorrem por meio de uma rede, e é importante relembrar a estrutura geral das trocas entre duas máquinas distantes.

2.4.1. O modelo OSI

O modelo de rede aberta denominado OSI (Open Systems Interconnection Reference Model), definido pela ISO (Organização Internacional de Padronização), descreve uma rede ideal na qual a comunicação entre máquinas pode ser representada por um modelo de sete camadas:

Cada camada recebe serviços da camada inferior e oferece os seus próprios serviços à camada superior. Suponhamos que duas aplicações localizadas em máquinas A e B diferentes desejam se comunicar: elas o fazem no nível da camada Application. Elas não precisam conhecer todos os detalhes do funcionamento da rede: cada aplicação entrega a informação que deseja transmitir à camada inferior: a camada Présentation. A aplicação precisa, portanto, conhecer apenas as regras de interface com a camada Présentation. Uma vez que a informação está na camada Présentation, ela é encaminhada, de acordo com outras regras, para a camada Session e assim por diante, até que a informação chegue ao suporte físico e seja transmitida fisicamente para a máquina de destino. Lá, ela passará pelo processo inverso ao que ocorreu na máquina remetente.

Em cada camada, o processo remetente encarregado de enviar a informação a transmite a um processo receptor na outra máquina, pertencente à mesma camada que ele. Isso ocorre de acordo com certas regras, conhecidas como protocolo da camada. Assim, temos o seguinte esquema final de comunicação:

A função das diferentes camadas é a seguinte:

Física	Garante a transmissão de bits por meio de um suporte físico. Nesta camada, encontram-se equipamentos terminais de processamento de dados (E.T.T.D.), tais como terminais ou computadores, bem como equipamentos de terminação de circuitos de dados (E.T.C.D.), tais como moduladores/demoduladores, multiplexadores e concentradores. Os pontos de interesse neste nível são: a escolha da codificação da informação (analógica ou digital) a escolha do modo de transmissão (síncrono ou assíncrono).
Ligação de dados	Oculta as particularidades físicas da camada Física. Detecta e corrige erros de transmissão.
Rede	Gerencia o caminho que as informações enviadas pela rede devem seguir. Isso é chamado de routage: determinar a rota que uma informação deve seguir para chegar ao seu destinatário.
Transporte	Permite a comunicação entre duas aplicações, enquanto as camadas anteriores permitiam apenas a comunicação entre máquinas. Um serviço fornecido por essa camada pode ser o multiplexamento: a camada de transporte poderá utilizar uma mesma conexão de rede (de máquina para máquina) para transmitir informações pertencentes a várias aplicações.
Sessão	Nesta camada, encontramos serviços que permitem que uma aplicação abra e mantenha uma sessão de trabalho em uma máquina remota.
Apresentação	Tem como objetivo uniformizar a representação dos dados nas diferentes máquinas. Assim, os dados provenientes de uma máquina A serão “formatação” pela camada Présentation da máquina A, de acordo com um formato padrão, antes de serem enviados pela rede. Ao chegarem à camada Présentation da máquina destinatária B, que os reconhecerá graças ao seu formato padrão, eles serão reformatados de outra maneira para que o aplicativo da máquina B os reconheça.
Aplicativo	Nesse nível, encontram-se as aplicações geralmente próximas ao usuário, como o e-mail ou a transferência de arquivos.

2.4.2. O modelo TCP/IP

O modelo OSI é um modelo ideal. O conjunto de protocolos TCP/IP se aproxima dele da seguinte forma:

a interface de rede (a placa de rede do computador) desempenha as funções das camadas 1 e 2 do modelo OSI
a camada IP (Protocolo de Internet) desempenha as funções da camada 3 (rede)
A camada TCP (Protocolo de Controle de Transferência) ou UDP (Protocolo de Datagrama do Usuário) desempenha as funções da camada 4 (transporte). O protocolo TCP garante que os pacotes de dados trocados entre os computadores cheguem corretamente ao destino. Caso contrário, ele reenvia os pacotes que se perderam. O protocolo UDP não realiza essa tarefa, cabendo, portanto, ao desenvolvedor de aplicativos fazê-lo. É por isso que, na internet — que não é uma rede 100% confiável —, o protocolo TCP é o mais utilizado. Fala-se, então, de rede TCP-IP.
A camada de Aplicação abrange as funções dos níveis 5 a 7 do modelo OSI.

As aplicações web estão na camada Application e, portanto, se baseiam nos protocolos TCP-IP. As camadas Application das máquinas clientes e do servidor trocam mensagens que são encaminhadas às camadas 1 a 4 do modelo para serem encaminhadas ao destino. Para se comunicarem, as camadas de aplicação das duas máquinas devem “falar” a mesma linguagem ou protocolo. O protocolo das aplicações web é chamado de HTTP (HyperText Transfer Protocol). Trata-se de um protocolo do tipo texto, c.a.d, pelo qual as máquinas trocam linhas de texto na rede para se comunicarem. Essas trocas são padronizadas, ou seja, o cliente dispõe de um determinado número de mensagens para indicar exatamente o que deseja ao servidor, e este último também dispõe de um determinado número de mensagens para dar sua resposta ao cliente. Essa troca de mensagens tem o seguinte formato:

Cliente --> Servidor

Quando o cliente faz sua solicitação ao servidor web, ele envia

linhas de texto no formato HTTP para indicar o que deseja;
uma linha em branco;
opcionalmente, um documento.

Servidor --> Cliente

Quando o servidor responde ao cliente, ele envia

linhas de texto no formato HTTP para indicar o que está enviando;
uma linha em branco;
opcionalmente, um documento.

As trocas têm, portanto, o mesmo formato nos dois sentidos. Em ambos os casos, pode haver o envio de um documento, embora seja raro que um cliente envie um documento ao servidor. Mas o protocolo HTTP prevê essa possibilidade. É isso que permite, por exemplo, que os assinantes de um provedor de acesso baixem diversos documentos para seu site pessoal hospedado nesse provedor. Os documentos trocados podem ser de qualquer tipo. Tomemos como exemplo um navegador solicitando uma página da Web que contenha imagens:

o navegador se conecta ao servidor web e solicita a página desejada. Os recursos solicitados são identificados de forma única por meio de URL (Uniform Resource Locator). O navegador envia apenas cabeçalhos HTTP e nenhum documento.
O servidor responde. Primeiro, ele envia cabeçalhos HTTP indicando o tipo de resposta que está enviando. Pode ser um erro se a página solicitada não existir. Se a página existir, o servidor indicará nos cabeçalhos HTTP de sua resposta que, após esses cabeçalhos, enviará um documento HTML (HyperText Markup Language). Esse documento é uma sequência de linhas de texto no formato HTML. Um texto HTML contém tags (marcadores) que fornecem ao navegador instruções sobre como exibir o texto.
O cliente sabe, com base nos cabeçalhos HTTP do servidor, que receberá um documento HTML. Ele analisará esse documento e talvez perceba que ele contém referências a imagens. Essas imagens não estão no documento HTML. Portanto, ele faz uma nova solicitação ao mesmo servidor web para pedir a primeira imagem de que precisa. Essa solicitação é idêntica à feita no passo 1, exceto que o recurso solicitado é diferente. O servidor processará essa solicitação enviando ao cliente a imagem solicitada. Desta vez, na resposta, os cabeçalhos HTTP especificarão que o documento enviado é uma imagem e não um documento HTML.
O cliente recebe a imagem enviada. As etapas 3 e 4 serão repetidas até que o cliente (geralmente um navegador) tenha todos os documentos necessários para exibir a página na íntegra.

2.4.3. O protocolo HTTP

Vamos conhecer o protocolo HTTP por meio de exemplos. O que um navegador e um servidor web trocam entre si?

O serviço da Web ou serviço HTTP é um serviço TCP-IP que normalmente opera na porta 80. Ele poderia operar em outra porta. Nesse caso, o navegador cliente seria obrigado a especificar essa porta na solicitação URL que ele envia. Uma URL tem o seguinte formato geral:

protocolo://máquina[:port]/caminho/informações

onde

protocolo	http para o serviço Web. Um navegador também pode atuar como cliente de serviços como FTP, news, telnet, etc.
máquina	nome da máquina onde o serviço Web está em operação
porta	porta do serviço Web. Se for 80, pode-se omitir o número da porta. Esse é o caso mais comum
caminho	caminho que indica o recurso solicitado
informações	informações complementares fornecidas ao servidor para especificar a solicitação do cliente

O que um navegador faz quando um usuário solicita o carregamento de um URL?

ele estabelece uma comunicação TCP-IP com a máquina e a porta indicadas na parte machine[:port] do URL. Estabelecer uma comunicação TCP-IP significa criar um “canal” de comunicação entre duas máquinas. Uma vez criado esse canal, todas as informações trocadas entre as duas máquinas passarão por ele. A criação desse canal TCP-IP ainda não envolve o protocolo HTTP da Web.
Com o canal TCP-IP criado, o cliente enviará sua solicitação ao servidor da Web, enviando-lhe linhas de texto (comandos) no formato HTTP. Ele enviará ao servidor a parte “caminho/informações” do URL
o servidor responderá da mesma forma e pelo mesmo canal
um dos dois participantes decidirá fechar o canal. Isso depende do protocolo HTTP utilizado. Com o protocolo HTTP 1.0, o servidor encerra a conexão após cada uma de suas respostas. Isso obriga um cliente que precise fazer várias solicitações para obter os diferentes documentos que compõem uma página da Web a abrir uma nova conexão a cada solicitação, o que acarreta um custo. Com o protocolo HTTP/1.1, o cliente pode instruir o servidor a manter a conexão aberta até que ele mesmo peça para fechá-la. Assim, ele pode recuperar todos os documentos de uma página da Web com uma única conexão e fechar a conexão por conta própria assim que o último documento for obtido. O servidor detectará esse fechamento e também encerrará a conexão.

Para analisar as trocas de dados entre um cliente e um servidor da Web, vamos usar a extensão [Advanced Rest Client] do navegador Chrome, que instalamos no parágrafo 9.6. Estaremos na seguinte situação:

O servidor web pode ser qualquer um. Nosso objetivo aqui é entender as interações que ocorrerão entre o navegador e o servidor web. Anteriormente, criamos a seguinte 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 em um navegador:

Vemos que a página URL solicitada é: [http://localhost:9000/intro/exemple-01.html]. O servidor do serviço Web é, portanto, localhost (=servidor local) e a porta 9000. Vamos usar o aplicativo [Advanced Rest Client] para solicitar o mesmo URL:

em [1], iniciamos o aplicativo (na aba [Applications] de uma nova aba do Chrome);
em [2], seleciona-se a opção [Request];
em [3], especifica-se o servidor consultado: http://localhost:9000;
em [4], especifique a URL solicitada: /intro/exemple-01.html;
em [5], adicionam-se eventuais parâmetros à URL. Nenhum neste caso;
em [6], especifica-se o comando HTTP utilizado para a consulta, neste caso GET.

Isso resulta na seguinte consulta:

A consulta assim preparada, [7], é enviada ao servidor por [8]. A resposta obtida é então a seguinte:

Mencionamos anteriormente que as trocas cliente-servidor tinham o seguinte formato:

em [1], vemos os cabeçalhos HTTP enviados pelo navegador em sua solicitação. Ele não tinha nenhum documento para enviar;
em [2], vemos os cabeçalhos HTTP enviados pelo servidor como resposta. Em [3], vemos o documento que ele enviou.

Em [3], reconhecemos a página estática HTML que colocamos no servidor web.

Vamos examinar a solicitação HTTP do 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

a linha 1 não foi exibida pelo aplicativo;
linha 6: o navegador se identifica com o cabeçalho [User-Agent];
linha 7: o navegador indica que está enviando ao servidor um documento de texto (text/plain) no formato UTF-8. Na verdade, neste caso, o navegador não enviou nenhum documento;
linha 8: o navegador indica que aceita qualquer tipo de documento como resposta;
linha 9: o navegador especifica os formatos de documento aceitos;
linha 10: o navegador especifica os idiomas que deseja, por ordem de preferência.

O servidor respondeu enviando os seguintes cabeçalhos 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

linha 1: não foi exibida pelo aplicativo;
linha 2: o servidor se identifica, neste caso, um servidor Apache-Coyote;
linha 3: a data da última modificação do documento enviado;
linha 4: o tipo do documento enviado pelo servidor. Neste caso, um documento HTML;
linha 5: o tamanho em bytes do documento HTML enviado.
linha 6: data e hora da resposta;

2.4.4. Conclusão

Descobrimos a estrutura da solicitação de um cliente da Web e a da resposta enviada a ele pelo servidor da Web por meio de alguns exemplos. A comunicação ocorre por meio do protocolo HTTP, um conjunto de comandos em formato de texto trocados entre os dois participantes. A solicitação do cliente e a resposta do servidor têm a seguinte estrutura:

Os dois comandos usuais para solicitar um recurso são GET e POST. O comando GET não é acompanhado por um documento. Já o comando POST é acompanhado por um documento que, na maioria das vezes, é uma sequência de caracteres que reúne todos os valores inseridos em um formulário. O comando HEAD permite solicitar apenas os cabeçalhos HTTP e não é acompanhado de documento.

A pedido de um cliente, o servidor envia uma resposta com a mesma estrutura. O recurso solicitado é transmitido na parte [Document], a menos que o comando do cliente tenha sido HEAD; nesse caso, apenas os cabeçalhos HTTP são enviados.

2.5. Noções básicas da linguagem HTML

Um navegador da Web pode exibir diversos documentos, sendo o mais comum o documento HTML (HyperText Markup Language). Trata-se de um texto formatado com tags no formato <balise>texte</balise>. Assim, o texto <B>important</B> exibirá o texto importante em negrito. Existem tags isoladas, como a tag <hr/>, que exibe uma linha horizontal. Não abordaremos as tags que podem ser encontradas em um texto HTML. Existem diversos softwares WYSIWYG que permitem criar uma página da Web sem escrever uma única linha de código HTML. Essas ferramentas geram automaticamente o código HTML a partir de um layout criado com o mouse e controles predefinidos. Assim, é possível inserir (com o mouse) uma tabela na página e, em seguida, consultar o código HTML gerado pelo software para descobrir as tags a serem utilizadas para definir uma tabela em uma página da Web. Não é mais complicado do que isso. Além disso, o conhecimento da linguagem HTML é indispensável, uma vez que as aplicações web dinâmicas devem gerar elas mesmas o código HTML a ser enviado aos clientes web. Esse código é gerado por programa e, obviamente, é preciso saber o que deve ser gerado para que o cliente tenha a página web que deseja.

Resumindo, não é necessário conhecer toda a linguagem HTML para começar a programar para a Web. No entanto, esse conhecimento é necessário e pode ser adquirido por meio do uso de softwares WYSIWYG para criação de páginas da Web, como o DreamWeaver e dezenas de outros. Outra maneira de descobrir as sutilezas da linguagem HTML é navegar pela Web e visualizar o código-fonte das páginas que apresentam características interessantes e ainda desconhecidas para você.

2.5.1. Um exemplo

Consideremos o exemplo a seguir, que apresenta alguns elementos que podem ser encontrados em um documento da Web, tais como:

uma tabela;
uma imagem;
um link.

Um documento HTML tem o seguinte formato geral:

<html>
    <head>
        <title>Um título</title>
        ...
    </head>
    <atributos do body>
        ...
    </body>
</html>

Todo o documento é delimitado pelas tags <html>...</html>. Ele é composto por duas partes:

<head>...</head>: essa é a parte não exibível do documento. Ela fornece informações ao navegador que irá exibir o documento. Nela, costuma-se encontrar a tag <title>...</title>, que define o texto a ser exibido na barra de título do navegador. Também podem ser encontradas outras tags, notadamente aquelas que definem as palavras-chave do documento, palavras-chave posteriormente utilizadas pelos mecanismos de busca. Também é possível encontrar nessa parte scripts, geralmente escritos em JavaScript ou VBScript, que serão executados pelo navegador.

<body atributos>...</body>: esta é a parte que será exibida pelo navegador. As tags HTML contidas nesta parte indicam ao navegador a forma visual “desejada” para o documento. Cada navegador interpretará essas tags à sua maneira. Dois navegadores podem, portanto, exibir um mesmo documento da Web de maneiras diferentes. Isso costuma ser um dos desafios dos web designers.

O código HTML do nosso documento de exemplo é o seguinte:


<!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	tags e exemplos HTML
título do documento	<title>tags</title> (linha 5) o texto balises aparecerá na barra de título do navegador que exibirá o documento
barra horizontal	<hr/>: exibe uma linha horizontal (linha 10)
tabela	<table atributos>....</table>: para definir a tabela (linhas 11, 31) <thead>...</thead>: para definir os cabeçalhos das colunas (linhas 12, 18) <tbody>...</tbody>: para definir o conteúdo da tabela (linhas 19, 30) <tr atributos>...</tr>: para definir uma linha (linhas 20, 24) <td atributos>...</td>: para definir uma célula (linha 21) exemplos: <table border="1">...</table>: o atributo border define a espessura da borda da tabela <td style="width: 150px; text-align: center;">célula(1,2)</td>: define uma célula cujo conteúdo será célula(1,2). Esse conteúdo será centralizado horizontalmente (text-align: center). A célula terá uma largura de 150 pixels (width: 150px)
imagem	<img border="0" src="/images/cerisier.jpg"/> (linha 36): define uma imagem sem borda (border="0") cujo arquivo de origem é /images/cerisier.jpg no servidor web (src="images/cerisier.jpg"). Esse link está em um documento da Web gerado com o URL http://localhost:port/intro/exemple-04.html. Assim, o navegador solicitará o URL http://localhost:port/intro/images/cerisier.jpg para obter a imagem referenciada aqui.
link	<a href="http://istia.univ-angers.fr">aqui</a> (linha 40): faz com que o texto ici funcione como um link para o URL http://istia.univ-angers.fr.
rodapé da página	<body style="height:400px;width:400px;background-image:url(images/standard.jpg)"> (linha 8): indica que a imagem que servirá como plano de fundo da página está localizada no endereço URL [images/standard.jpg] do servidor web. No contexto do nosso exemplo, o navegador solicitará o arquivo URL http://localhost:port/intro/images/standard.jpg para obter essa imagem de fundo. Além disso, o corpo do documento será exibido em um retângulo com 400 pixels de altura e 400 pixels de largura.

Vemos neste exemplo simples que, para construir o documento na íntegra, o navegador precisa fazer três solicitações ao servidor:

http://localhost:port/intro/exemple-04.html para obter a fonte HTML do documento
http://localhost:port/intro/images/cerisier.jpg para obter a imagem cerisier.jpg
http://localhost:port/intro/images/standard.jpg para obter a imagem de fundo standard.jpg

2.5.2. Um formulário HTML

O exemplo a seguir apresenta um formulário:

O código HTML que gera essa exibição é o seguinte:


<!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>

A correspondência entre o controle visual e a tag HTML é a seguinte:

Controle	tag HTML
formulário	<form method="post" action="...">
campo de preenchimento	<input type="text" name="txtSaisie" size="20" value="algumas palavras" />
campo de entrada oculto	<input type="password" name="txtMdp" size="20" value="unMotDePasse" />
campo de entrada com várias linhas	<textarea rows="2" name="areaSaisie" cols="20"> linha1 linha 2 linha 3 </textarea>
botões de opção	<input type="radio" value="Sim" name="R1" />Sim <input type="radio" name="R1" value="não" checked="checked" />Não
caixas de seleção	<input type="checkbox" name="C1" value="um" />1 <input type="checkbox" name="C2" value="dois" checked="checked" />2 <input type="checkbox" name="C3" value="três" />3
Lista suspensa	<select size="1" name="cmbValeurs"> <option value="1">opção1</option> <option selected="selected" value="2">opção 2</option> <option value="3">opção 3</option> </select>
lista de seleção ú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 seleção múltipla	<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ão do tipo submit	<input type="submit" value="Enviar" name="cmdRenvoyer" />
botão do tipo reset	<input type="reset" value="Restaurar" name="cmdRétablir" />
botão do tipo button	<input type="button" value="Apagar" name="cmdEffacer" onclick="effacer()" />

Vamos analisar essas diferentes tags:

2.5.2.1. O formulário

formulário


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

tag HTML

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

atributos

name="frmexemple": nome do formulário

method="..." : método utilizado pelo navegador para enviar ao servidor web os valores coletados no formulário

action="...": URL para onde serão enviados os valores coletados no formulário.

Um formulário da Web é delimitado pelas tags <form>...</form>. O formulário pode ter um nome (name="xx"). Esse é o caso de todos os controles que podem ser encontrados em um formulário. O objetivo de um formulário é coletar informações fornecidas pelo usuário por meio do teclado/mouse e enviá-las para uma URL de servidor web. Qual? Aquela referenciada no atributo action="URL". Se esse atributo estiver ausente, as informações serão enviadas para o URL do documento no qual o formulário está localizado. Um cliente da Web pode utilizar dois métodos diferentes, chamados POST e GET, para enviar dados a um servidor web. O atributo method="méthode", com method igual a GET ou POST, da tag <form> indica ao navegador o método a ser utilizado para enviar as informações coletadas no formulário para o URL especificado pelo atributo action="URL". Quando o atributo method não é especificado, o método GET é utilizado por padrão.

2.5.2.2. Os campos de entrada de texto

campo de entrada

tag HTML

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

A tag input existe para diversos controles. É o atributo type que permite diferenciar esses controles entre si.

atributos

type="text": especifica que se trata de um campo de entrada

type="password": os caracteres presentes no campo de entrada são substituídos por asteriscos (*). Essa é a única diferença em relação ao campo de entrada normal. Esse tipo de controle é adequado para a digitação de senhas.

size="20": número de caracteres visíveis no campo — não impede a digitação de mais caracteres

name="txtSaisie": nome do controle

value="algumas palavras": texto que será exibido no campo de entrada.

2.5.2.3. Campos de entrada com várias linhas

campo de entrada com várias linhas

linha1

linha 2

linha3

</textarea>

tag HTML	<textarea ...>texto</textarea> exibe uma área de entrada de várias linhas com o texto já inserido inicialmente
atributos	rows="2": número de linhas cols="'20" : número de colunas name="areaSaisie": nome do controle

2.5.2.4. Os botões de opção

botões de opção

<input type="radio" value="Sim" name="R1" />Sim

<input type="radio" name="R1" value="não" checked="checked" />Não

tag HTML

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

exibe um botão de opção com texto ao lado.

atributos

name="radio": nome do controle. Os botões de opção com o mesmo nome formam um grupo de botões mutuamente exclusivos: só é possível selecionar um deles.

value="valor": valor atribuído ao botão de opção. Não se deve confundir esse valor com o texto exibido ao lado do botão de opção. Este último destina-se apenas à exibição.

checked="checked": se essa palavra-chave estiver presente, o botão de opção estará marcado; caso contrário, não estará.

2.5.2.5. As caixas de seleção

caixas de seleção

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

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

<input type="checkbox" name="C3" value="três" />3

tag HTML

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

exibe uma caixa de seleção com texto ao lado.

atributos

name="C1": nome do controle. As caixas de seleção podem ou não ter o mesmo nome. As caixas com o mesmo nome formam um grupo de caixas associadas.

value="valor": valor atribuído à caixa de seleção. Não se deve confundir esse valor com o texto exibido ao lado do botão de opção. Este último destina-se apenas à exibição.

checked="marcado": se essa palavra-chave estiver presente, a caixa de seleção estará marcada; caso contrário, não estará.

2.5.2.6. A lista suspensa (combo)

Combo

<option value="1">opção1</option>

<option selected="selected" value="2">opção 2</option>

<option value="3">opção 3</option>

</select>

tag HTML

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

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

...

</select>

exibe em uma lista os textos contidos entre as tags <option>...</option>

atributos

name="cmbValeurs": nome do controle.

size="1": número de itens visíveis na lista. size="1" transforma a lista no equivalente a uma caixa de combinação.

selected="selected": se essa palavra-chave estiver presente para um elemento da lista, este aparecerá selecionado na lista. No nosso exemplo acima, o elemento da lista choix2 aparece como o elemento selecionado da caixa de combinação quando esta é exibida pela primeira vez.

value=”v”: se o elemento for selecionado pelo usuário, é esse valor [v] que é enviado ao servidor. Na ausência desse atributo, é o texto exibido e selecionado que é enviado ao servidor.

2.5.2.7. Lista de seleção única

lista de seleção ú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>

tag HTML	<select size=".." name=".."> <option [selected="selected"]>...</option> ... </select> exibe em uma lista os textos contidos entre as tags <option>...</option>
atributos	os mesmos da lista suspensa que exibe apenas um item. Esse controle difere da lista suspensa anterior apenas pelo atributo size>1.

2.5.2.8. Lista de seleção múltipla

lista de seleção ú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>

tag HTML	<select size=".." name=".." multiple="multiple"> <option [selected="selected"]>...</option> ... </select> exibe em uma lista os textos contidos entre as tags <option>...</option>
atributos	múltiplo: permite a seleção de vários elementos na lista. No exemplo acima, os elementos liste1 e liste3 estão ambos selecionados.

2.5.2.9. Botão do tipo button

botão do tipo button

tag HTML

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

atributos

type="button": define um controle de botão. Existem outros dois tipos de botão: os tipos submit e reset.

value="Apagar": o texto exibido no botão

onclick="função()": permite definir uma função a ser executada quando o usuário clica no botão. Essa função faz parte dos scripts definidos no documento da Web exibido. A sintaxe anterior é uma sintaxe javascript. Se os scripts forem escritos em VBScript, deve-se escrever onclick="função" sem os parênteses. A sintaxe permanece a mesma caso seja necessário passar parâmetros para a função: onclick="função(val1, val2,...)"

No nosso exemplo, um clique no botão Effacer chama a seguinte função JavaScript effacer:

function apagar() {

alert("Você clicou no botão Apagar");

}

</script>

A função effacer exibe uma mensagem:

2.5.2.10. Botão do tipo submit

botão do tipo submit

tag HTML	<input type="submit" value="Enviar" name="cmdRenvoyer" />
atributos	type="submit": define o botão como um botão para enviar os dados do formulário ao servidor web. Quando o usuário clicar nesse botão, o navegador enviará os dados do formulário para o endereço URL definido no atributo action da tag <form>, de acordo com o método definido pelo atributo method dessa mesma tag. value="Enviar": o texto exibido no botão

2.5.2.11. Botão do tipo reset

Botão do tipo reset

tag HTML	<input type="reset" value="Restaurar" name="cmdRétablir"/>
atributos	type="reset": define o botão como um botão de reinicialização do formulário. Quando o usuário clicar nesse botão, o navegador restaurará o formulário ao estado em que o recebeu. value="Restaurar": o texto exibido no botão

2.5.2.12. Campo oculto

campo oculto

tag HTML

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

atributos

type="hidden": indica que se trata de um campo oculto. Um campo oculto faz parte do formulário, mas não é exibido ao usuário. No entanto, se o usuário solicitar ao navegador que exiba o código-fonte, ele verá a presença da tag <input type="hidden" value="..."> e, portanto, o valor do campo oculto.

value="umValor": valor do campo oculto.

Qual é a utilidade do campo oculto? Ele permite que o servidor da Web mantenha informações ao longo das solicitações de um cliente. Consideremos um aplicativo de compras na Web. O cliente compra um primeiro item art1 na quantidade q1 na primeira página de um catálogo e, em seguida, passa para uma nova página do catálogo. Para lembrar que o cliente comprou q1 itens art1, o servidor pode inserir essas duas informações em um campo oculto do formulário da Web da nova página. Nessa nova página, o cliente compra os itens q2 e art2. Quando os dados desse segundo formulário forem enviados ao servidor (submit), este receberá não apenas a informação (q2, art2), mas também (q1, art1), que também fazem parte do formulário como campos ocultos. O servidor web, então, colocará em um novo campo oculto as informações (q1,art1) e (q2,art2) e enviará uma nova página do catálogo. E assim por diante.

2.5.3. Envio dos valores de um formulário de um cliente da Web para um servidor da Web

Mencionamos no estudo anterior que o cliente da Web dispõe de dois métodos para enviar a um servidor Web os valores de um formulário que ele exibiu: os métodos GET e POST. Vejamos, por meio de um exemplo, a diferença entre os dois métodos.

2.5.3.1. Método GET

Vamos fazer um primeiro teste, no qual, no código HTML do documento, a tag <form> está definida da seguinte maneira:


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

Quando o usuário clicar no botão [1], os valores inseridos no formulário serão enviados ao controlador Spring [2]. Vimos que os valores do formulário seriam enviados para o URL [doNothing]:


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

A ação [doNothing] está definida no controlador [MyController] [2] da seguinte maneira:


    // ----------------------- tornar um fluxo vazio [Content-Length=0]
    @RequestMapping(value = "/doNothing")
    @ResponseBody
    public void doNothing() {
}

linha 1: a ação processa o URL [/doNothing], portanto, na verdade, [/context/doNothing], onde [context] é o contexto ou nome do aplicativo web, aqui, [/intro];
linha 3: a anotação [@ResponseBody] indica que o resultado do método anotado deve ser enviado diretamente ao cliente;
linha 4: o método não retorna nada. Portanto, o cliente receberá uma resposta vazia do servidor.

Queremos apenas saber como o navegador transmite os valores inseridos ao servidor web. Para isso, vamos usar uma ferramenta de depuração disponível no Chrome. Ela é ativada digitando CTRL-Shift-I ( maiúsculo) [3]:

Como estamos interessados nas trocas de dados entre o navegador e o servidor web, ativamos acima a aba [Network] e, em seguida, clicamos no botão [Envoyer] do formulário. Trata-se de um botão do tipo [submit] dentro de uma tag [form]. O navegador reage ao clique solicitando o URL [/intro/doNothing] indicado no atributo [action] da tag [form], com o método GET indicado no atributo [method]. Assim, obtemos as seguintes informações:

A captura de tela acima mostra o URL solicitado pelo navegador após clicar no botão [envoyer]. Ele realmente solicita o URL, previsto como [/intro/doNothing], mas acrescenta informações adicionais, que são os valores inseridos no formulário. Para obter mais informações, clicamos no link acima:

Acima, em [1, 2], vemos os cabeçalhos HTTP enviados pelo navegador. Eles foram formatados aqui. Para ver o texto bruto desses cabeçalhos, seguimos o link [view source] [3, 4]. O texto completo é o seguinte:

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 já vistos anteriormente. Outros aparecem pela primeira vez:

Connection: keep-alive	o cliente solicita ao servidor que não feche a conexão após sua resposta. Isso permitirá que ele utilize a mesma conexão para uma solicitação posterior. A conexão não permanece aberta indefinidamente. O servidor a fechará após um período prolongado de inatividade.
Referer	o URL que estava sendo exibido no navegador quando a nova solicitação foi feita.

A novidade está na linha 1 das informações que seguem o URL. Observa-se que as opções selecionadas no formulário aparecem no URL. Os valores inseridos pelo usuário no formulário foram passados na solicitação GET URL?param1=valor1&param2=valor2&... HTTP/1.1, em que parami são os nomes (atributo name) dos controles do formulário da Web e valeuri são os valores a eles associados. Apresentamos abaixo uma tabela com três colunas:

coluna 1: apresenta a definição de um controle HTML do exemplo;
coluna 2: mostra a exibição desse controle em um navegador;
coluna 3: apresenta o valor enviado ao servidor pelo navegador para o controle da coluna 1, no formato em que aparece na solicitação GET do exemplo.

controle HTML	visual	valor(es) retornado(s)
<input type="radio" value="Sim" name="R1"/>Sim <input type="radio" name="R1" value="não" checked="checked"/>Não		R1=Sim - o valor do atributo value do botão de opção marcado pelo usuário.
<input type="checkbox" name="C1" value="um"/>1 <input type="checkbox" name="C2" value="dois" checked="checked"/>2 <input type="checkbox" name="C3" value="três"/>3		C1=um C2=dois - valores dos atributos value das caixas de seleção marcadas pelo usuário
<input type="text" name="txtSaisie" size="20" value="algumas palavras"/>		txtSaisie=programação+Web - texto digitado pelo usuário no campo de entrada. Os espaços foram substituídos pelo sinal +
<input type="password" name="txtMdp" size="20" value="unMotDePasse"/>		txtMdp=issoésegredo - texto digitado pelo usuário no campo de entrada
<textarea rows="2" name="areaSaisie" cols="20"> linha1 linha 2 linha3 </textarea>		areaSaisie=os+fundamentos+da%0D%0A programação+Web - texto digitado pelo usuário no campo de entrada. %OD%OA é o marcador de fim de linha. Os espaços foram substituídos pelo sinal +
<select size="1" name="cmbValeurs"> <option value='1'>opção1</option> <option selected="selected" value='2'>opção2</option> <option value='3'>opção3</option> </select>		cmbValores=3 - atributo [value] do elemento selecionado pelo usuário
<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] do elemento selecionado pelo usuário
<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] dos elementos selecionados pelo usuário
<input type="submit" value="Enviar" name="cmdRenvoyer"/>		cmdRenvoyer=Enviar - nome e atributo value do botão utilizado para enviar os dados do formulário ao servidor
<input type="hidden" name="secret" value="uneValeur"/>		secret=umValor - atributo value do campo oculto

2.5.3.2. Método POST

Alteramos o documento HTML para que o navegador passe a utilizar o método POST para enviar os valores do formulário ao servidor web:


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

Preenchemos o formulário da mesma forma que para o método GET e enviamos os parâmetros ao servidor clicando no botão [Envoyer]. Assim como foi feito no parágrafo anterior, na página 62, temos acesso no Chrome aos cabeçalhos HTTP da solicitação enviada pelo 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

Novidades aparecem na solicitação HTTP do cliente:

POST URL HTTP/1.1	A consulta GET foi substituída pela consulta POST. Os parâmetros não estão mais presentes nessa primeira linha da solicitação. É possível observar que agora eles estão posicionados (linha 15) após a solicitação HTTP, depois de uma linha em branco. Sua codificação é idêntica à que tinham na solicitação GET.
Content-Length	número de caracteres “enviados”, c.a.d. O número de caracteres que o servidor web deverá ler após receber os cabeçalhos HTTP para recuperar o documento enviado pelo cliente. O documento em questão é, neste caso, a lista de valores do formulário.
Content-type	especifica o tipo de documento que o cliente enviará após os cabeçalhos HTTP. O tipo [application/x-www-form-urlencoded] indica que se trata de um documento contendo valores de formulário.

Existem dois métodos para transmitir dados a um servidor web: GET e POST. Existe um método melhor do que o outro? Vimos que, se os valores de um formulário fossem enviados pelo navegador com o método GET, o navegador exibia em seu campo Adresse a solicitação URL na forma URL?param1=val1&param2=val2&.... Isso pode ser visto como uma vantagem ou uma desvantagem:

uma vantagem se quisermos permitir que o usuário salve esse URL configurado em seus favoritos;
uma desvantagem se não quisermos que o usuário tenha acesso a certas informações do formulário, como, por exemplo, os campos ocultos.

Daqui em diante, utilizaremos quase exclusivamente o método POST em nossos formulários.

2.6. Conclusion

Este capítulo apresentou diversos conceitos básicos do desenvolvimento web:

as trocas cliente-servidor por meio do protocolo HTTP;
a criação de um documento usando a linguagem HTML;
a criação de formulários de preenchimento.

Vimos, por meio de um exemplo, como um cliente pode enviar informações ao servidor web. Não abordamos como o servidor pode

recuperar essas informações;
processá-las;
enviar ao cliente uma resposta dinâmica dependendo do resultado do processamento.

Esse é o campo da programação web, tema que abordaremos no próximo capítulo com a apresentação da tecnologia Spring MVC.