Este documento apresenta as tecnologias AJAX e JSON para desenvolvimento de aplicações web interativas. Explica que AJAX permite atualizar partes de uma página ao invés de recarregá-la completamente para melhorar a experiência do usuário. Também descreve o que é JSON, como representa dados e como pode ser usado em JavaScript e PHP para troca de informações entre cliente e servidor. Por fim, demonstra exemplos práticos de uso dessas tecnologias em uma aplicação de ouvidoria.

1. AJAX? Não!!
Asynchronous Javascript and...
JSON! AJAJ!!
Lucas Brasilino
<lucas.brasilino@gmail.com>
Procuradoria Geral da República - MPF

2. Agenda
●
Tipos de aplicações;
●
O que AJAX ?;
●
Método de transporte AJAX;
●
Aprenda AJAX em 24 segundos;
●
Exemplo de aplicação tradicional;
●
O que JSON ?;
●
Uso do JSON em Javascript e PHP;
●
Exemplo prático.

3. Tipos de aplicações
●
Aplicações Desktop:
– Instalado e executado em seu computador
●
Eventualmente pode acessar algum site para efetuar
alguma atualização de código/base de dados/etc.
– Ótimo layout: geralmente utilizando componentes
(widgets) do sistema operacional.
– Ótima interatividade: pode-se digitar dados, utilizar
menus, atualizar campos, etc, praticamente sem
nenhum tempo de espera.

4. Tipos de aplicações
●
Aplicações Web:
– Código sendo executado no servidor Web
●
Excluíndo-se pequenas rotinas que são executadas no
navegador.
– Layout definido pelos webmasters
– Média interatividade
●
Baseada em links e submissão de formulários;
●
Alto tempo de espera do resultado destas interações;
●
A cada interação, o servidor envia todo o conteúdo da
nova página.

5. O que é AJAX ?
●
Seu objetivo principal é melhorar a interatividade da
aplicação Web, aproximando-a da aplicação Desktop;
●
Aplicação Web com AJAX não depende da resposta
do servidor Web a uma dada requisição, nem as
requisições dependem da interação (evento) do
usuário;
●
Desta forma permite atualizar partes da página Web
ao invés de recarregá-la novamente, diminuindo o
tempo de espera do usuário e aumentando a
interatividade.

6. O que é AJAX ?
●
É o uso de uma coletânea de tecnologias:
– Muito conhecidas:
●
HTML/XHTML;
●
Javascript;
●
DOM – Document Object Model;
●
XML;
●
HTTP.
– Pouco conhecida:
●
Objeto XMLHttpRequest.

7. Modo de transporte de dados
entre servidor e cliente web
●
Geralmente utiliza-se XML
navegador servidor
XML

8. Aprenda AJAX em 24 segundos
var oHTTPReq = new XMLHttpRequest();
oHTTPReq.open('GET','consulta.php',true);
oHTTPReq.onreadystatechange = trataResposta;
oHTTPReq.send(null);

9. Aprenda AJAX em 24 segundos
function trataResposta() {
if (oHTTPReq.readyState == 4)
if (oHTTPReq.status == 200) {
var oXMLResp = oHTTPReq.responseXML;
atualizaPagina (oXMLResp);
}
}

10. Exemplo de aplicação
Ouvidoria
oXMLResp:
<funcionario>
<nome>João José da Silva</nome>
<endereco>Av.Conde da Boa Vista,1024</endereco>
<cep>50070-060</cep>
</funcionario>

11. Exemplo de aplicação
function atualizaPagina (oXML) {
oTags = oXML.getElementsByTagName(“funcionario”);
sNome = oTags[0].firstChild.nodeValue;
sEnd = oTags[1].firstChild.nodeValue;
sCep = oTags[2].firstChild.nodeValue;
//utiliza as variáveis acima para atualizar a
//página Web.
}

12. O que é JSON ?
●
Javascript Object Notation
– Um formato leve de troca de informações;
– Inerente ao Javascript;
– Pode ser utilizado em outras linguagens utilizando-
se API's específicas;
– Representação de objetos e arrays, bem como
tipos simples, de forma serializada;
– Fácil para humano ler e para máquina analisar.

13. O que é JSON ?
●
Array:
[ “valor1”, “valor2”, ... ]
– Exemplo:
oFruta = new Array('laranja','pera','maçã');
– Resultado:
[“laranja”,”pera”,”maçã”]

14. O que é JSON ?
●
Objeto:
{ “atributo1”:“valor1”,
“atributo2”:“valor2”, ... }
– Exemplo:
oFuncionario = new Object();
oFuncionario.nome = “Jose”;
oFuncionario.endereco = “Av. Conde”;
– Resultado:
{ “nome”:”Jose”,”endereco”:”Av. Conde” }

15. Uso do JSON em Javascript
● Utilizando a função 'eval()'
– Transforma dados serializados em
objetos/array/tipos primitivos.
– Não deve ser utilizado pois é vulnerável a algumas
injeções de código.

16. Uso do JSON em Javascript
●
Utilizando os métodos parseJSON() e
toJSONString()
– Disponível em: http://www.json.org/json.js
– string.parseJSON();
●
Analisa a string JSON e retorna objeto.
– object.toJSONString();
●
Analisa o objeto e retorna a string JSON.
LEMBRETE! Tipos array, boolean, date, number e
string também são objetos em Javascript

17. Novo exemplo
Ouvidoria
function trataResposta() {
if (oHTTPReq.readyState == 4)
if (oHTTPReq.status == 200) {
var sJSONResp = oHTTPReq.responseText;
atualizaPagina (sJSONResp);
}
}

18. Novo exemplo
Ouvidoria
sJSONResp:
{"nome":"João José da Silva",
"endereco":"Av. Conde da Boa Vista 1204",
"cep":"50070-060"}

19. Exemplo de aplicação
function atualizaPagina (sJSON) {
oFuncionario = sJSON.parseJSON();
//utiliza oFuncionario.nome, oFuncionario.endereco,
//e oFuncionario.cep para atualizar a
//página Web.
}

20. Uso do JSON em PHP
●
Extensão php-json
– http://www.aurore.net/projects/php-json/
– Integrado ao PHP 5.2 e habilitado por default
●
Exemplos:
$frutas = array(“laranja”,”pera”,”maçã”);
$str_frutas = json_encode($frutas);
$funcionario = json_decode($str_funcionario);

21. Vamos aos exemplos!

22. Para finalizar!
Não existe AJAJ!!
Mesmo que você não utilize XML, apenas o
fato de se utilizar o objeto XMLHttpRequest
você está desenvolvendo aplicações AJAX!!

23. Dúvidas??
Obrigado!!
Lucas Brasilino
<lucas.brasilino@gmail.com>