AJAX? Não!!Asynchronous Javascript and...       JSON! AJAJ!!           Lucas Brasilino      <lucas.brasilino@gmail.com>  P...
Agenda●    Tipos de aplicações;●    O que AJAX ?;●    Método de transporte AJAX;●    Aprenda AJAX em 24 segundos;●    Exem...
Tipos de aplicações●    Aplicações Desktop:    –   Instalado e executado em seu computador         ●             Eventualm...
Tipos de aplicações●    Aplicações Web:    –   Código sendo executado no servidor Web         ●             Excluíndo-se p...
O que é AJAX ?●    Seu objetivo principal é melhorar a interatividade da    aplicação Web, aproximando-a da aplicação Desk...
O que é AJAX ?●    É o uso de uma coletânea de tecnologias:    –   Muito conhecidas:         ●             HTML/XHTML;    ...
Modo de transporte de dados    entre servidor e cliente web●    Geralmente utiliza-se XML        navegador               s...
Aprenda AJAX em 24 segundosvar oHTTPReq = new XMLHttpRequest();oHTTPReq.open(GET,consulta.php,true);oHTTPReq.onreadystatec...
Aprenda AJAX em 24 segundosfunction trataResposta() {    if (oHTTPReq.readyState == 4)      if (oHTTPReq.status == 200) { ...
Exemplo de aplicação           OuvidoriaoXMLResp:<funcionario> <nome>João José da Silva</nome> <endereco>Av.Conde da Boa V...
Exemplo de aplicaçãofunction atualizaPagina (oXML) {    oTags = oXML.getElementsByTagName(“funcionario”);    sNome = oTags...
O que é JSON ?●    Javascript Object Notation    –   Um formato leve de troca de informações;    –   Inerente ao Javascrip...
O que é JSON ?●    Array:     [ “valor1”, “valor2”, ... ]     – Exemplo:    oFruta = new Array(laranja,pera,maçã);     – R...
O que é JSON ?●    Objeto:    { “atributo1”:“valor1”,       “atributo2”:“valor2”, ... }    – Exemplo:    oFuncionario = ne...
Uso do JSON em Javascript●   Utilizando a função eval()    –   Transforma dados serializados em        objetos/array/tipos...
Uso do JSON em Javascript●    Utilizando os métodos parseJSON() e    toJSONString()    –   Disponível em: http://www.json....
Novo exemplo                 Ouvidoriafunction trataResposta() {    if (oHTTPReq.readyState == 4)      if (oHTTPReq.status...
Novo exemplo               OuvidoriasJSONResp:{"nome":"João José da Silva", "endereco":"Av. Conde da Boa Vista 1204", "cep...
Exemplo de aplicaçãofunction atualizaPagina (sJSON) {    oFuncionario = sJSON.parseJSON(); //utiliza oFuncionario.nome, oF...
Uso do JSON em PHP●    Extensão php-json    –    http://www.aurore.net/projects/php-json/    –   Integrado ao PHP 5.2 e ha...
Vamos aos exemplos!
Para finalizar!            Não existe AJAJ!! Mesmo que você não utilize XML, apenas ofato de se utilizar o objeto XMLHttpR...
Dúvidas??         Obrigado!!       Lucas Brasilino<lucas.brasilino@gmail.com>
Upcoming SlideShare
Loading in …5
×

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

1,110 views
985 views

Published on

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

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,110
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for 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>

×