Desmistificando o AJAX – Parte III

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.