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

1.215 visualizações

Publicada em

Talk at FISL8 (year 2007) intro about AJAX development with JSON. At that time, JSON was not too used. In Brazilian Portuguese.

Publicada em: Tecnologia
0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
1.215
No SlideShare
0
A partir de incorporações
0
Número de incorporações
3
Ações
Compartilhamentos
0
Downloads
0
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

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

  1. 1. AJAX? Não!!Asynchronous Javascript and... JSON! AJAJ!! Lucas Brasilino <lucas.brasilino@gmail.com> Procuradoria Geral da República - MPF
  2. 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. 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. 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. 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. 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. 7. Modo de transporte de dados entre servidor e cliente web● Geralmente utiliza-se XML navegador servidor XML
  8. 8. Aprenda AJAX em 24 segundosvar oHTTPReq = new XMLHttpRequest();oHTTPReq.open(GET,consulta.php,true);oHTTPReq.onreadystatechange = trataResposta;oHTTPReq.send(null);
  9. 9. Aprenda AJAX em 24 segundosfunction trataResposta() { if (oHTTPReq.readyState == 4) if (oHTTPReq.status == 200) { var oXMLResp = oHTTPReq.responseXML; atualizaPagina (oXMLResp); }}
  10. 10. Exemplo de aplicação OuvidoriaoXMLResp:<funcionario> <nome>João José da Silva</nome> <endereco>Av.Conde da Boa Vista,1024</endereco> <cep>50070-060</cep></funcionario>
  11. 11. Exemplo de aplicaçãofunction 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. 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 APIs 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. 13. O que é JSON ?● Array: [ “valor1”, “valor2”, ... ] – Exemplo: oFruta = new Array(laranja,pera,maçã); – Resultado: [“laranja”,”pera”,”maçã”]
  14. 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. 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. 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. 17. Novo exemplo Ouvidoriafunction trataResposta() { if (oHTTPReq.readyState == 4) if (oHTTPReq.status == 200) { var sJSONResp = oHTTPReq.responseText; atualizaPagina (sJSONResp); }}
  18. 18. Novo exemplo OuvidoriasJSONResp:{"nome":"João José da Silva", "endereco":"Av. Conde da Boa Vista 1204", "cep":"50070-060"}
  19. 19. Exemplo de aplicaçãofunction atualizaPagina (sJSON) { oFuncionario = sJSON.parseJSON(); //utiliza oFuncionario.nome, oFuncionario.endereco, //e oFuncionario.cep para atualizar a //página Web.}
  20. 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. 21. Vamos aos exemplos!
  22. 22. Para finalizar! Não existe AJAJ!! Mesmo que você não utilize XML, apenas ofato de se utilizar o objeto XMLHttpRequest você está desenvolvendo aplicações AJAX!!
  23. 23. Dúvidas?? Obrigado!! Lucas Brasilino<lucas.brasilino@gmail.com>

×