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