O AJAX (Asynchroous Javascript and XML) é uma tecnologia que permite que aplicações web se comportem de forma parecida com aplicações desktop, ao criar chamadas assíncronas ao servidor. Isso elimina o processo de fazer uma atualização total da página quando se precisa que uma pequena parte dela seja atualizada. A auto-sugestão do Google é um bom exemplo de implementação do AJAX. À medida que digitamos termos de pesquisa na caixa de texto, o Google nos dá sugestão de acordo como os termos digitados sem atualizar a página.
O AJAX é implementado usando Javascript e XML. O XMLHttpRequest é o objeto que faz o trabalho de bastidor. Você pode usar o JSON (Javascript Object Notation) ao invés do XML. Nesse artigo, iremos demonstrar com um exemplo como fazer chamadas AJAX a partir de uma página JSP à um Servlet usando JQuery e atualizar a mesma página JSP com a resposta do Servlet. Em outras palavras, esse artigo lhe dará uma visão geral de como implementar chamadas em aplicações web Java. Estaremos usando a biblioteca JQuery ao invés de implementar isso tudo no Javascript porque esse seria um processo bastante tedioso de fazer funcionar em todos os navegadores e o JQuery simplifica bastante isso ao usar uma única função. A seguir estão os passos a serem reproduzidos para criar uma aplicação web simples com AJAX usando o Eclipse e o Tomcat7:
1. Crie um projeto Dynamic Web Project no Eclipse. Vamos chama-lo aqui de “JQueryAjaxDemo”
2. Agora clique com o botão direito sobre a pasta WebContent no Project Explorer e crie um arquivo JSP. Vamos chama-lo de “index.jsp”.
3. Na página index.jsp, criaremos uma caixa de texto onde o usuário terá que informar seu nome e um botão para exibir a mensagem de saudação com o nome fornecido na caixa de texto. Copie e cole o código a seguir no seu arquivo index.jsp.
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="ISO-8859-1"%> <!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>AJAX calls using Jquery in Servlet</title> <script src="http://code.jquery.com/jquery-latest.js"> </script> <script> $(document).ready(function() { $('#submit').click(function(event) { var username=$('#user').val(); $.get('ActionServlet',{user:username},function(responseText) { $('#welcometext').text(responseText); }); }); }); </script> </head> <body> <form id="form1"> <h1>AJAX Demo using Jquery in JSP and Servlet</h1> Enter your Name: <input type="text" id="user"/> <input type="button" id="submit" value="Ajax Submit"/> <br/> <div id="welcometext"> </div> </form> </body> </html>
3. Clique com o botão direito sobre o diretório Source e crie um novo pacote. Vamos chama-lo de “ajaxdemo”.
4. Clique com o botão direito do mouse sobre o diretório Source e selecione Add -> New -> Servlet e dê o nome “ActionServlet” para esse novo Servlet. Nele, obtemos o nome fornecido pelo usuário na página JSP e criamos uma mensagem de saudação que inclui esse nome. Esse valor é então retornado de volta para a página JSP para ser exibida para o usuário. Se nenhum nome foi digitado, então o valor padrão será retornado. Copie e cole o código abaixo em seu arquivo ‘ActionServlet.java‘.
package ajaxdemo; import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; /** * Servlet implementation class ActionServlet */ public class ActionServlet extends HttpServlet { private static final long serialVersionUID = 1L; public ActionServlet() { // TODO Auto-generated constructor stub } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String name=null; name = "Hello "+request.getParameter("user"); if(request.getParameter("user").toString().equals("")){ name="Hello User"; } response.setContentType("text/plain"); response.setCharacterEncoding("UTF-8"); response.getWriter().write(name); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub } }
Nota: Se escolher usar um nome diferente para o pacote e/ou servlet, forneça esse mesmo nome para o mapeamento de URL no descritor explicado no próximo passo.
5. Agora, vamos mapear o Servlet acima em um padrão de URL de forma que ele seja chamado sempre que esse padrão de URL seja utilizado. Abra o arquivo web.xml que está no diretório WEB-INF e cole o código abaixo acima da tag </web-app>.
<servlet> <servlet-name>ActionServlet</servlet-name> <servlet-class>ajaxdemo.ActionServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>ActionServlet</servlet-name> <url-pattern>/ActionServlet/*</url-pattern> </servlet-mapping>
6. Finalmente, execute o seu projeto. Clique com o botão direito sobre o arquivo index.jsp e selecione Run on Server. Use seu navegador padrão e evite usar o navegador interno embutido no Eclipse. Na página web, será pedido que o usuário informe um nome e, ao clicar no botão “Ajax Submit“, o usuário poderá visualizar a mensagem “Hello (NomeInserido)”. Isso tudo é feito de forma assíncrona e você não verá nenhuma atualização da página quando clica no botão “Ajax Submit“.
Explicação do Código
O código JQuery escrito na seção head da página JSP é responsável pela chamada AJAX feita para o Servlet e exibição da resposta na página JSP.
<script src="http://code.jquery.com/jquery-latest.js"> </script> <script> $(document).ready(function() { $('#submit').click(function(event) { var username=$('#user').val(); $.get('ActionServlet',{user:username},function(responseText) { $('#welcometext').text(responseText); }); }); }); </script>
Quando o usuário clica no botão “Ajax Submit“, o evento de clique no botão é disparado e a função ‘get’ executa a requisição GET do Servlet. O segundo argumento da função ‘get’ é um par chave/valor que recebe o valor da entrada da página JSP para o Servlet. O terceiro argumento da função ‘get’ é uma função que define o que será feito com a resposta retornada pelo Servlet.
Se quiser adicionar mais dinamismo e retornar outros objetos Java como listas, mapas, etc como resposta ao invés de texto puro pode usar JSON. O objetivo desse artigo é apenas fornecer um exemplo simples para projetos futuros.
Traduzido de programming-free.com