AJAX?? Não!! Asynchronous Javascript and... JSON!!

AJAX? Não!!
Asynchronous Javascript and...
JSON! AJAJ!!

Lucas Brasilino
<lucas.brasilino@gmail.com>
Procuradoria Geral da República - MPF

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.

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.

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.

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.

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.

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

navegador servidor

XML

Aprenda AJAX em 24 segundos
var oHTTPReq = new XMLHttpRequest();

oHTTPReq.open('GET','consulta.php',true);

oHTTPReq.onreadystatechange = trataResposta;

oHTTPReq.send(null);

Aprenda AJAX em 24 segundos

function trataResposta() {

if (oHTTPReq.readyState == 4)

if (oHTTPReq.status == 200) {

var oXMLResp = oHTTPReq.responseXML;

atualizaPagina (oXMLResp);

}

}

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>


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.
}

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.

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

[“laranja”,”pera”,”maçã”]

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” }

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.

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

Novo exemplo
Ouvidoria

function trataResposta() {

if (oHTTPReq.readyState == 4)

if (oHTTPReq.status == 200) {

var sJSONResp = oHTTPReq.responseText;

atualizaPagina (sJSONResp);

}

}

Novo exemplo
Ouvidoria

sJSONResp:

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


function atualizaPagina (sJSON) {

oFuncionario = sJSON.parseJSON();

//utiliza oFuncionario.nome, oFuncionario.endereco,
//e oFuncionario.cep para atualizar a
//página Web.
}

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);

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!!

Dúvidas??

Obrigado!!

Lucas Brasilino
<lucas.brasilino@gmail.com>

AJAX?? Não!! Asynchronous Javascript and... JSON!!

Mais conteúdo relacionado

Mais procurados (19)

Destaque (8)

Semelhante a AJAX?? Não!! Asynchronous Javascript and... JSON!! (20)

Último (20)

AJAX?? Não!! Asynchronous Javascript and... JSON!!