Tutorial Mootools - Tipos de requisições AJAX (Parte 3/3 - Request.JSON)

Prezado Leitor,

As postagens anteriores referentes as requisições AJAX, foram explanadas superficialmente. Desta maneira, podem ocorrer dúvidas quanto ao processo de interação entre o cliente e servidor. Portanto, deixem seus comentários, dúvidas e sugestões.

Além de como funciona uma requisição AJAX com JSON, neste tutorial será demonstrado como o PHP deverá preparar os dados para serem entendíveis pelo JavaScript.

Script.js

new Request.JSON({
   url:'Estado.php',
   onComplete:function(response) {
      alert(JSON.encode(response));
   }
}).post(null);

Estados.php

$estados = array(
   "DF" => "Distrito Federal",
   "GO" => "Goiás",
   "SP" => "São Paulo",
);

$encodedArray = array_map(utf8_encode, $estados);
echo json_encode($encodedArray);

No exemplo acima foi criado um array com as siglas e o nomes de alguns estados. Na codificação para json é importante que seja definido o encode de caracteres. No caso foi definido utf8.

O javascript receberá os dados através do parâmetro "response" no onComplete. Para exibir como os dados são decodificados foi utilizado o método JSON.encode(response), dentro do alert.

Na documentação oficial, há exemplos utilizando outras opções suportadas por Request.JSON: http://mootools.net/docs/core/Request/Request.JSON

Referência PHP: php.net

Atenciosamente,
Rondson Lima

Tutorial Mootools - Tipos de requisições AJAX (Parte 2/3 - Request.HTML)

Request.HTML é um tipo de requisição AJAX utilizada para obtenção de conteúdo HTML como resposta do servidor.

Os dois exemplos a seguir demonstram algumas das maneiras possíveis de manipular as respostas:

Exemplo 1:

new Request.HTML({
   url: baseURL+'/estados',
   update: 'elemento',
   onRequest: function(){
    new Loading();
   },
   onComplete: function(){
    new Ready();
   }
}).post(null);

No exemplo acima a resposta HTML da requisição "estados" atualizará o elemento através do parâmetro "update".

Exemplo 2:

new Request.HTML({
   url: baseURL+'/estados',
   onRequest: function(){
    new Loading();
   },
   onComplete: function(r1,r2,r3){
    $('elemento1).set('html',r1);
    $('elemento2).set('html',r3);
    new Ready();
   }
}).post(null);

Este exemplo é útil quando há a necessidade de manipular a resposta para atualizar mais de um elemento. No onComplete são adicionados os parâmetros r1, r2 e r3. Cada um retorna o html diferentemente. Acima foram alterados dois elementos com r1 e r3.

Na documentação oficial, há exemplos utilizando outras opções suportadas por Request.HTML: http://mootools.net/docs/core/Request/Request.HTML

Atenciosamente,
Rondson Lima

Tipos de requisições AJAX (Parte 1/3 - Request)

Request é utilizado quando não há a necessidade de obter como resposta da requisição, elementos HTML ou JSON. A seguir um exemplo de como realizar uma requisição AJAX.

var Sair = new Class({
 
 initialize: function(){
  new Request({
   url: baseURL+'/index/sair',
   onRequest: function(){
    new Loading();
   },
   onComplete: function(){
    window.location.href = baseURL + '/index/login';
   }
  }).post(null);
 }
});

Perceba que “initialize” é o construtor da classe “Sair”. Para realizar esta requisição basta instanciá-la dentro da tag javascript conforme segue:

new Sair();

Uma dica, aplicar a chamada da classe num evento de clique de um botão.

Detalhe das opções acima:

url - endereço a ser requisitado
onRequest - ação que deverá ser executada no momento da requisição
onComplete - ação que deverá ser executada após a requisição ser completada

Na documentação oficial, há exemplos utilizando outras opções suportadas por Request: http://mootools.net/docs/core/Request/Request

Atenciosamente,
Rondson Lima

Tutorial Mootools - Tipos de requisições AJAX

O que é Mootools

Mootools é uma biblioteca desenvolvida em JavaScript. Compacta, modular, bem documentada e orientada a objetos, foi designada para o desenvolvimento web avançado, proporcionando um código elegante e coerente (MOOTOOLS, 2009).

Tendo em vista que há na web parte da documentação traduzida para o português, segue um link como sugestão para quem está iniciando ou quer aprender os conceitos básicos deste framework: http://www.criarweb.com/manual-mootools/

Este tutorial tem como objetivo simplificar, para melhor entendimento, como funcionam as requisições AJAX com Mootools. São basicamente três tipos (Request, Request.HTML e Request.JSON). Será dividido em três partes.

Ferramentas utilizadas

Mootools versão: 1.2.3
IDE: Eclipse Galileo 3.5, PDT 2.1

Conhecimentos desejados

Noções de: JavaScript; Programação Orientada a Objetos; e AJAX.
Outros requisitos: vontade em aprender :)

Tipos de requisições

Tutorial Mootools - Tipos de requisições AJAX (Parte 1/3 - Request)

Tutorial Mootools - Tipos de requisições AJAX (Parte 2/3 - Request.HTML)

Tutorial Mootools - Tipos de requisições AJAX (Parte 3/3 - Request.JSON)

Referências

MOOTOOLS. Framework Mootools: Site Oficial. Disponível em http://mootools.net/

Atenciosamente,
Rondson Lima

Agradecimento

Prezados Leitores,

Gostaria de agradecer a todos que direta ou inderetamente contribuíram para o sucesso deste blog. Mesmo com um pequeno acervo de artigos/tutoriais e um grande período sem postagens, houve uma média mensal de 500 novos visitantes. A maioria dos acessos realizados pelos mecanismos de buscas.

O período sem posts foi devido aos projetos dos quais eu estava participando. O último tratou-se do Trabalho de Conclusão de Curso para obtenção do título de Bacharel em Sistemas de Informação.

Em 2010, continuarei compartilhando meus conhecimentos e experiências.

Sucesso a todos e feliz 2010.

Atenciosamente,
Rondson Lima