Código do servidor

E como fica o código do servidor? O código do servidor é formado pelos seguintes componentes:

1. /AulasAjax1/src/exemplos/ajax/Controlador.java :

Classe java responsável por determinar o fluxo de navegação e colocar determinadas variáveis em memória que serão utilizadas pelas páginas JSP.

2. /AulasAjax1/WebContent/modelo_padrao.jsp:

Página JSP responsável por gerar a página HTML.

Para que o controlador funcione você precisa baixar o arquivo: <http://repo1.maven.org/maven2/jstl/jstl/1.2/jstl-1.2.jar> e adicionar na pasta WEB-INF/lib.

Vejamos a seguir cada um desses componentes.

/AulasAjax1/src/exemplos/ajax/Controlador.java: package exemplos.ajax; import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; /** * Controlador do sistema */ @WebServlet({"/Controlador/Ajax", "/Controlador/Ajax/Categoria", "/Controlador/Ajax/LivroInfo"}) public class Controlador extends HttpServlet { private static final String CATEGORIA_FICCAO = "ficcao"; private static final String CATEGORIA_NAO_FICCAO = "nao-ficcao"; private static final String CATEGORIA_INFORMATICA = "informatica"; private static final String CATEGORIA_AUTO_AJUDA = "auto-ajuda"; private static final String[] CATEGORIAS = { CATEGORIA_FICCAO, CATEGORIA_NAO_FICCAO, CATEGORIA_INFORMATICA, CATEGORIA_AUTO_AJUDA }; private static final String[] LIVROS_FICCAO = { "A cabana", "A Ilha sob o mar", "Querido John", "Fallen", "A ultima música", "Caminhos da lei", "Os homens que não amavam as mulheres", "A ilusão da alma", "Amante desperto", "O castelo dos Pirineus" }; private static final String[] LIVROS_NAO_FICCAO = { "1822", "Comprometida", "Comer, Rezar, Amar", "Agape", "Incríveis passatempos matematicos", "Brasil - uma historia", "Nosso lar", "O Aleph", "Aforismos" }; private static final String[] LIVROS_INFORMATICA = { "VBA e macros para Microsoft Office Excel 2007", "Java como programar", "Apresentação Zen", "UML2 - Uma abordagem pratica", "O mítico homem-mês", "Revis architecture 2010", "JQuery - A biblioteca do programador Javascript", "CCENT/CCNA ICND1", "Analise de pontos de função", "Formulas e funções com Microsoft Office Excel 2007", }; private static final String[] LIVROS_AUTO_AJUDA = { "O que se passa na cabeça dos cachorros", "Transformando suor em ouro", "O monge e o executivo", "O verdadeiro poder", "Qual é a tua obra? - Inquietacoes propositivas", "Fora de serie- Outliers", "O futuro hoje", "PMBOK - Guia do conjunto de conhecimentos", "Os 7 hábitos das pessoas altamente eficazes", "Faça como Steve Jobs", }; private static final long serialVersionUID = 1L; /** * Metodo que trata/recebe as requisicoes do tipo POST * * @see javax.servlet.http.HttpServlet#doPost(javax.servlet.http.HttpServletRequest, * javax.servlet.http.HttpServletResponse) */ @Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } /** * Metodo que trata/recebe as requisicoes do tipo GET * * @see javax.servlet.http.HttpServlet#doGet(javax.servlet.http.HttpServletRequest, * javax.servlet.http.HttpServletResponse) */ @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String acaoSelecionada = request.getServletPath(); if (acaoSelecionada.equalsIgnoreCase("/Controlador/Ajax")) { enviarPaginaPadrao(request, response); } else if (acaoSelecionada.equalsIgnoreCase("/Controlador/Ajax/Categoria")) { enviarNomeLivros(request, response); } else if (acaoSelecionada.equalsIgnoreCase("/Controlador/Ajax/LivroInfo")) { enviarInformacoesLivro(request, response); } } private void enviarPaginaPadrao(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { salvarCategoriasReq(request); salvarLivrosReq(request); request.getRequestDispatcher("/modelo_padrao.jsp").forward(request, response); } private void enviarNomeLivros(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String category = request.getParameter("categoria"); String[] livros = null; if (category != null) { if (category.equals(CATEGORIA_FICCAO)) { livros = LIVROS_FICCAO; } else if (category.equals(CATEGORIA_NAO_FICCAO)) { livros = LIVROS_NAO_FICCAO; } else if (category.equals(CATEGORIA_INFORMATICA)) { livros = LIVROS_INFORMATICA; } else if (category.equals(CATEGORIA_AUTO_AJUDA)) { livros = LIVROS_AUTO_AJUDA; } } String resp = ""; for (int i = 0; i < livros.length; i++) { resp += livros[i] + ";"; } response.setContentType("text/html; charset=ISO-8859-1"); response.getWriter().write(resp); response.flushBuffer(); } private void enviarInformacoesLivro(HttpServletRequest request, HttpServletResponse response) throws IOException { String livro = request.getParameter("livro"); if (livro == null) { livro = "null"; } response.setContentType("text/html; charset=ISO-8859-1"); response.getWriter().write("Essas sao as informacoes sobre o livro " + livro); response.flushBuffer(); } private void salvarCategoriasReq(HttpServletRequest request) { request.setAttribute("categorias", CATEGORIAS); } private void salvarLivrosReq(HttpServletRequest request) { String category = request.getParameter("categoria"); if (category != null) { if (category.equals(CATEGORIA_FICCAO)) { request.setAttribute("livros", LIVROS_FICCAO); } else if (category.equals(CATEGORIA_NAO_FICCAO)) { request.setAttribute("livros", LIVROS_NAO_FICCAO); } else if (category.equals(CATEGORIA_INFORMATICA)) { request.setAttribute("livros", LIVROS_INFORMATICA); } else if (category.equals(CATEGORIA_AUTO_AJUDA)) { request.setAttribute("livros", LIVROS_AUTO_AJUDA); } } } }

 

A tabela a seguir apresenta uma descrição dos principais métodos da classe Controlador.

Método	Descrição
doPost	Recebe as requisições do tipo POST e encaminha para ser tratada pelo método doGet.
doGet	Recebe as requisições do tipo GET e, baseado na URL chamada (usando o request.getServletPath()) definir a acaoSelecionada.
enviarInformacoesLivro	Retorna informações do livro informado através do parâmetro "livro" (utilizado pela página modelo_ajax.jsp).
enviarPaginaPadrao	Redireciona o navegador para a página "/AulasAjax1/WebContent/modelo_padrao.jsp"
salvarCategoriasReq	Salva a variável "categorias" contendo as categorias pré-definidas no escopo da requisição (variável utilizada em todas as páginas para popular a lista de categorias).
salvarLivrosReq	Salva a variável "livros" contendo os livros da categoria selecionada no escopo da requisição (variável utilizada pela página modelo_padrao.jsp para popular a lista de livros).
enviarNomeLivros	Retorna os nomes dos livros da categoria selecionada através do parâmetro categoria (utilizado pela página modelo_ajax.jsp).

 

/AulasAjax1/WebContent/modelo_padrao.jsp:

Veja a seguir o código da página JSP.

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Modelo Ajax 2 (POST)</title> </head> <body> <script type="text/javascript"> function buscarLivros() { var ajaxReq = new XMLHttpRequest(); var url = "/AulasAjax1/Controlador/Ajax/Categoria"; var data = "categoria=" + document.getElementById("campoCategoria").value; ajaxReq.onreadystatechange = function() { if (ajaxReq.readyState == 4 && ajaxReq.status == 200) { var text = ajaxReq.responseText; var livros = text.split(';'); var campoLivro = document.getElementById("campoLivro"); campoLivro.length = 0; for(var i=0; i<livros.length; i++){ if(livros[i].length>0){ campoLivro.options[campoLivro.length] = new Option(livros[i], livros[i]); } } } }; ajaxReq.open("POST", url, true); ajaxReq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); ajaxReq.send(data); } function buscarInfoLivro() { var ajaxReq = new XMLHttpRequest(); var url = "/AulasAjax1/Controlador/Ajax/LivroInfo"; var data = "livro=" + document.getElementById("campoLivro").value; ajaxReq.onreadystatechange = function() { if (ajaxReq.readyState == 4 && ajaxReq.status == 200) { var campoInfoLivro = document.getElementById("campoInfoLivro"); campoInfoLivro.value = ajaxReq.responseText; } }; ajaxReq.open("POST", url, true); ajaxReq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); ajaxReq.send(data); } </script> <p> <select id="campoCategoria" name="categoria" size="5" onchange="buscarLivros()"> <c:forEach var="c" items="${categorias}"> <option value="${c}">${c}</option> </c:forEach> </select> <select id="campoLivro" name="livro" size="5" style="width: 200px;" onchange="buscarInfoLivro()"> </select> </p> <textarea id="campoInfoLivro" rows="5" cols="40"> </textarea> </body> </html>

Para ver a página basta acessar a URL http://localhost:8080/AulasAjax1/Controlador/Ajax e ao clicar em uma categoria você verá a lista de livros dessa categoria.Ao clicar em um livro você verá suas informações. Repare que somente os dados necessários são enviados por Ajax do servidor para o navegador, não sendo necessário recarregar toda a página.

Chegamos ao fim da aula de hoje, agora você é capaz de entender e desenvolver um código AJAX para permitir uma melhor interatividade na sua página web, além de torná-la mais rápida e leve para atualizar dados vindos do servidor.