Desmistificando o AJAX – Parte III
Raphael Paiva
Primeiros passos: Explicando um exemplo simples
Como dito no início, o AJAX na verdade se resume a um único objeto javascript chamado XMLHttpRequest, que possibilita chamadas ao servidor sem a necessidade de refresh.
Temos duas implementações deste objeto, uma seguida pelo Internet Explorer e outra seguida pelo Mozilla (a maioria dos outros browsers do mercado seguem a implementação do Mozilla) e podemos instanciar da seguinte forma:
Criando um objeto XMLHttpRequest
1. function chamaAjax(){
2. var req;
3. var isIE;
4. if (window.XMLHttpRequest) {
5. req = new XMLHttpRequest();
6. }else if (window.ActiveXObject) {
7. isIE = true;
8. req = new ActiveXObject("Microsoft.XMLHTTP");
9. }
Com o código acima, teremos nossa variável ‘req’ instanciada com um objeto XMLHttpRequest para qualquer browser.
OBS: em algumas versões antigas do IE, deve ser instanciado o objeto “Msxml2.XMLHTTP” ao invés de “Microsoft.XMLHTTP”. Um exemplo de código mais detalhado para todos os casos será demonstrado no decorrer do tutorial.
Utilizando o XMLHttpRequest para transportar dados para o servidor
10. var url = "ajax?nome=raphael&tecnologia=java;
12. req.onreadystatechange = processRequest;
13. req.open("GET", url, true);
14. req.send(null);
15. }
O código acima faz a tarefa de passar ao servidor, através do método http GET, os parâmetros para processamento. Após a linha 14 ser executada, a requisição é transmitida.
OBS: Neste código já aparecem 3 propriedades do objeto XMLHttpRequest, estas e outras mais serão explicadas uma a uma posteriormente.
Declarando a Servlet a ser usada para o Ajax no web.xml
1. <servlet>
2. <servlet-name>ServletAjax</servlet-name>
3. <servlet-class>ServletAjax</servlet-class>
4. </servlet>
5. <servlet-mapping>
6. <servlet-name>ServletAjax</servlet-name>
7. <url-pattern>/ajax</url-pattern>
8. </servlet-mapping>
Acima demonstra como mapear no web.xml da aplicação o servlet que ficará responsável por receber as requisições. Qualquer requisição feita com o comando “ajax” será redirecionada para a Servlet descrita a seguir.
Implementando a Servlet que receberá as requisições das páginas
1. import javax.servlet.*;
2. import javax.servlet.http.*;
3. public class ServletAjax extends HttpServlet {
4. protected void service(HttpServletRequest request, HttpServletResponse response)
5. throws ServletException, IOException {
6. String nome = request.getParameter("nome ").trim();
7. String tecnologia = request.getParameter("tecnologia ").trim();
8. //LÓGICAS NECESSÁRIAS
9. response.getWriter().write(nome + “gosta de ” + tecnologia);
10. }
11.}
Acima é exemplificado o Servlet que lerá toda requisição feita pelo Ajax neste nosso exemplo. Nela, é possível pegar todos os parâmetros passados na requisição, realizar as lógicas necessárias, como acesso a banco, validação de valores, etc.
Através do método write da classe PrintWriter, pode-se retornar qualquer valor que seja String, int ou array de chars (para maiores detalhes, o JavaDoc [http://java.sun.com/j2se/1.4.2/docs/api/index.html] é nosso amigo).
Pronto! Já temos nosso Servlet que recebe, trata e responde às requisições ao cliente! Tudo isso, lembrando, sem refresh; agora precisamos escrever o método no cliente para que este receba a resposta e mostre-a ao usuário.
Implementando método de recepção de respostas do servidor
1. function processRequest() {
2. if (req.readyState == 4) {
3. if (req.status == 200) {
4. var texto = req.responseText;
5. alert("resposta = "+texto);
6. }
7. }
8. }
O método javascript acima é responsável por, simplesmente recuperar o texto enviado pelo servidor e mostrá-lo ao usuário.