• Save
AJAX?? Não!! Asynchronous Javascript and... JSON!!
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 1,090 views

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

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

Statistics

Views

Total Views
1,090
Views on SlideShare
1,090
Embed Views
0

Actions

Likes
1
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • 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 segundosvar oHTTPReq = new XMLHttpRequest();oHTTPReq.open(GET,consulta.php,true);oHTTPReq.onreadystatechange = trataResposta;oHTTPReq.send(null);
  • Aprenda AJAX em 24 segundosfunction trataResposta() { if (oHTTPReq.readyState == 4) if (oHTTPReq.status == 200) { var oXMLResp = oHTTPReq.responseXML; atualizaPagina (oXMLResp); }}
  • 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>
  • 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.}
  • 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.
  • 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 Ouvidoriafunction trataResposta() { if (oHTTPReq.readyState == 4) if (oHTTPReq.status == 200) { var sJSONResp = oHTTPReq.responseText; atualizaPagina (sJSONResp); }}
  • Novo exemplo OuvidoriasJSONResp:{"nome":"João José da Silva", "endereco":"Av. Conde da Boa Vista 1204", "cep":"50070-060"}
  • Exemplo de aplicaçãofunction 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);
  • Vamos aos exemplos!
  • 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!!
  • Dúvidas?? Obrigado!! Lucas Brasilino<lucas.brasilino@gmail.com>