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