Desmistificando o AJAX – Parte III

Raphael Paiva

raphael@sena.com.br

 

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.