Programação WEB com AJAX
Belo Horizonte , Minas Gerais Brasil
(Tecle F11 para visualização em tela cheia. F11 novamente volta ao modo normal)
Antes de tudo, esqueça o Hype !
Concentre-se nos benefícios da tecnologia
Afinal o que é AJAX?
- Defini-se como Asynchronous JavaScript and XML, é uma técnica para criar interfaces WEB mais interativas
- Muitos desenvolvedores já programavam em AJAX antes do surgimento do termo, comumente denominava-se método HTTPRequest - devido ao objeto do JS
- O termo AJAX foi criado por Jesse James Garret em fevereiro de 2005, e seu mérito principal foi ter popularizado esta técnica, além de conseguir simplificar para o cliente
AJAX
-
AJAX Como Funciona? Visão do Desenvolvedor
AJAX
-
AJAX Como Funciona? Visão do Cliente
Navegadores carregam a aplicação JS,
não apenas o conteúdo
Navegador lê os dados,
a aplicação trata a sua exibição.
Transferência de Dados
transparente para o Usuário
Vantagens
- Aplicações mais ágeis
- Padrão aberto, não precisa de tecnologias proprietárias para o seu desenvolvimento
- Melhora a experiência do usuário (se bem aplicado é claro)
- Aplicações WEB semelhantes as aplicações Desktop (dragn-drop, autocomplete)
Menor consumo de banda na aplicacão
Vantagens - Aplicações mais ágeis
Vantagens - Aplicações mais ágeis
Desvantagens
- Cuidado! se mal planejado, AJAX pode dar uma dor de cabeça para o usuário e desenvolvedor
- Não dar feedback instantâneo após o click
- Usuário não pode voltar, nem adicionar página nos favoritos
- Sistemas inacessíveis
- Segurança nas aplicações
- Todos os possíveis problemas acima podem ser corrigidos, depende do programador!
Desvantagens - Inacessível
- Solução: Javascript Não Obstrutivo
Desvantagens - Usabilidade Comprometida
- A usabilidade do site é comprometida!
AJAX - Onde Utilizar e Quando Utilizar
- Interações levadas por formulários.
- Navegação em árvore com grande hierarquia
- Comunicação usuário-a-usuário rápida (instant messengers, chats, fóruns)
- Votação, caixas Sim/Não, envio de avaliações
- Sugestão de textos entrados freqentemente / Autocompletar
- DragnDrop de objetos com ações
AJAX - Exemplos
- Writely - http://www.writely.com - Editor de texto on-line
- Meebo - http://www4.meebo.com/ - Serviço de mensagens instantânea
- Microsoft Star.com - http://www.start.com/ - Portal da Microsoft
- Google Suggest http://www.google.com/webhp?complete=1&hl=en ? Motor de busca que fornece sugestões
- Google Maps - http://maps.google.com/ - Serviço de mapas do Google
- SQL Designer - http://ondras.praha12.net/sql/demo/ - Modelador de Banco de Dados
- NetVibes - http://www.netvibes.com/ - Página Pessoal
Tecnologias Envolvidas
Tecnologias Envolvidas
- As tecnologias e linguagens de programacão/marcação envolvidas são:
- xHTML e CSS
- DOM Document Object Model
- XML e JSON
- JavaScript
- Linguagem Server-side
AJAX - xHTML e CSS
Web standards e CSS. Sites preparados conforme os padrões da w3c (World Wide Web Consortium), utlizando xHTML para o conteúdo e CSS para o comportamento visual
AJAX - DOM
DOM (Document Object Model).
Interface para acessar e modificar a estrutura de um documento XML/html, para que a programação encontre o que precisa dentro de uma página sem problemas.
AJAX - Mais sobre DOM
AJAX - XML
XML (Extensible Markup Language). Um padrão de linguagem para tornar mais fácil a transferência de dados entre aplicações.
AJAX - JSON
"JavaScript Object Notation", é um formato para a transferência de dados entre aplicações.
- Tem a vantagem de ser mais leve que o XML
- Representação do Objeto Aluno - Atributos: nome, e-mail, curso
-
{
"nome":"Marcelo Carvalho Linhares",
"email":"marcelo@agenciadetalhes.com.br",
"curso":"sistemas de informação"
}
AJAX - JavaScript
Linguagem Client-Side responsável por agilizar interações entre o usuário e a página, baseado no padrão EcmaScript.
AJAX - Linguagem Server-side
Linguagem de programação que é executada no servidor, exemplos:
Programando em Camadas
AJAX - Programação em Camadas
- Uma boa prática no desenvolvimento de interfaces WEB é dividí-la em camadas, separando em camadas de Conteúdo (xHTML), Formatação Visual (CSS) e Comportamento (JavaScript).
- Dividir em camadas melhora a produtividade na construção e manutenção da interface pois isola na folha de estilo toda a informação referente a formatação visual da página e deixa o código (x)HTML limpo e semântico, tornando-o mais legível e compatível com outros dispositivos e navegadores, e por fim o arquivo Javascript manipula todos os comportamentos com propósito de melhorar a experiência do usuário.
[any material that should appear in print but not on the slide]
AJAX - Programando em Camadas
- Divisão do Projeto em Camadas
[any material that should appear in print but not on the slide]
Mão na Massa
AJAX - Mão na Massa
- Iremos aproveitar o Blog de Exemplo do MiniCurso de PHP e vamos dar mais interação a ele
- Ao adicionar um novo Post, o post adicionado imediatamente aparecerá no topo da listagem, sem recarregar a tela
[any material that should appear in print but not on the slide]
AJAX - Dando Interatividade ao Blog
[any material that should appear in print but not on the slide]
Segundo Passo
AJAX - Isolando o JavaScript
- Crie uma pasta denominada "js/" e coloque o arquivo "acao.js", e inclua todo conteúdo que está dentro da tag SCRIPT do index.php no arquivo
- Anexe o arquivo acao.js na página index.php
-
<script
type="text/javascript" src="js/acao.js"
></script>
- Testa o programa, tem que estar funcionando da mesma forma
[any material that should appear in print but not on the slide]
Terceiro Passo
AJAX - Objeto XMLHttpRequest
-
A partir de agora iremos mecher apenas no arquivo acao.js
- Vamos criar o objeto XMLHTTPRequest Cross-Browser
- Primeiro problema, a criação do Objeto é diferente no Internet Explorer, neste (pseudo)browser o objeto é criado através de um ActiveX
-
var objeto = new XMLHttpRequest(); // firefox / ópera / konqueror / safari
var objeto = new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
[any material that should appear in print but not on the slide]
AJAX - Objeto XMLHttpRequest Cross-Browser
-
A solução!
-
function getXML() {
var objeto; // declara o objeto
try { // tenta criar objeto XMLHTTPRequest
objeto = new XMLHttpRequest()
}catch(e) { // caso dê erro, tenta criar o ActiveXObject
objeto = new ActiveXObject("Msxml2.XMLHTTP");
}
return objeto
}
- Coloca a função acima dentro do arquivo acao.js
[any material that should appear in print but not on the slide]
O Objeto XMLHTTPRequest
AJAX - Objeto XMLHttpRequest
-
O objeto XMLHTTPRequest é responsável por fazer uma requisição assíncrona com o servidor
- Métodos e Propriedade do Objeto
-
open('tipo','endereco','assincrono') // efetua a requisição ao servidor
tipo - POST, GET, Método da requisição;
endereco - endereço do script que está sendo feita a requisição, apenas são aceitos pedidos de áginas locais
assincrono - informa se vai ser assíncrono ou não - por padrão o valor é tru
- Exemplo
-
XMLHTTPRequest.open('GET','cadastraPost.php',true) // efetua a requisição ao servidor via GET de forma assíncrona
[any material that should appear in print but not on the slide]
AJAX - Objeto XMLHttpRequest
- Outros Métodos
-
onreadystatechange -
Atribui uma função para ser executada quando receber a resposta do servidor
- Exemplo
-
XMLHTTPRequest.onreadystatechange = function() {
// código da função que será executada
}
[any material that should appear in print but not on the slide]
AJAX - Objeto XMLHttpRequest
- Outros Métodos - Recebendo
-
send() -
Efetua a Transmição os dados
[any material that should appear in print but not on the slide]
AJAX - Objeto XMLHttpRequest
- Atributos
-
readyState() - Status da Requisição efetuada pelo Objeto
0 = valor inicial
1 = método chamada com sucesso
2 = requisição completa, mas os dados ainda não foi recebidos
3 = Momentos antes de receber os dados, os cabeçalhos já foram recebidos
4 = Todos dados foram enviados
- Exemplo
-
XMLHTTPRequest.open('GET','cadastraPost.php',true) // efetua a requisição ao servidor via GET de forma assíncrona
XMLHTTPRequest.onreadystatechange = function() {
if(XMLHTTPRequest.readyState==4) {
alert('requisição efetuada com sucesso')
}
}
XMLHTTPRequest.send(null)
[any material that should appear in print but not on the slide]
AJAX - Objeto XMLHttpRequest
- Atributos de Resposta
-
responseText - Retorna os dados em texto puro
responseXML - Retorna uma estrutura de dados em XML
- Exemplo
-
XMLHTTPRequest.open('GET','cadastraPost.php',true) // efetua a requisição ao servidor via GET de forma assíncrona
XMLHTTPRequest.onreadystatechange = function() {
if(XMLHTTPRequest.readyState==4) {
var optionsSelect = XMLHTTPRequest.responseXML
result = optionsSelect.getElementsByTagName('option')
alert(result.length) // imprime o número de tags option
}
}
XMLHTTPRequest.send(null)
[any material that should appear in print but not on the slide]
Voltando ao Blog
AJAX
- Vamos criar uma função que envia os dados via GET para o arquivo cadastraPostAjax.php, esta função retornará verdadeiro ou falso para o função
- Se a resposta for verdadeira, vai retornar a Data formatada de quando o post foi inserido, e insere o conteúdo no topo da página, caso contrário, emite uma mensagem de erro
-
function submitAjax()
¨
[any material that should appear in print but not on the slide]
AJAX - Dando Interatividade ao Blog
-
/**
* Função responsável por fazer a requisição HTTP e retornar o resultado para a função trataDados()
*/
function submitAjax(){
// pegando os valores do formulário
titulo = document.getElementById('id_titulo').value
texto = document.getElementById('id_texto').value
autor = document.getElementById('id_autor').value
// montando a url que será requisitada, já colocando os dados que serão enviados
var url_enviada = 'cadastraPostAjax.php?titulo=' + titulo + '&texto=' + texto + '&autor=' + autor
XMLHTTPRequest = getXML();
XMLHTTPRequest.open('GET',url_enviada,true) // efetua a requisição ao servidor via GET de forma assíncrona
XMLHTTPRequest.onreadystatechange = function() {
if(XMLHTTPRequest.readyState==4) {
trataDados(XMLHTTPRequest.responseText)
}
}
XMLHTTPRequest.send(null)
}
[any material that should appear in print but not on the slide]
AJAX
- Vamos criar uma função que tratará os dados conforme a resposta do servidor
-
Se a resposta for negativa, emite mensagem de erro, casso contrário insere o post no topo da lista
-
function trataDados( respostaDoServidor )
¨
[any material that should appear in print but not on the slide]
AJAX - Dando Interatividade ao Blog
-
function trataDados(resposta) {
if(resposta=="false") { // se aconteceu algum erro
alert("Erro ao tentar cadastrar dados")
}
else {
// Manipulando os objetos via DOM
var ADICIONAR = document.getElementById('adicionar')
var CONTEUDO = document.getElementById('conteudo')
var novo_post = document.createElement('div')
var novo_post_titulo = document.createElement('h2')
var novo_post_text = document.createElement('div')
var novo_post_rodape = document.createElement('p')
novo_post_rodape.className = "context"
novo_post_text.className = "text"
novo_post.className = 'list' // seta o className para list
novo_post_titulo.innerHTML = titulo // coloca o conteúdo do título dentro da tag h2
novo_post_text.innerHTML = texto
novo_post_rodape.innerHTML = "Publicado por " + autor + ", dia " + resposta
novo_post.appendChild(novo_post_titulo) // coloca o novo_post_child 'dentro' do novo_post
novo_post.appendChild(novo_post_text) // coloca o conteúdo do texto
novo_post.appendChild(novo_post_rodape) // insere o rodapé
CONTEUDO.insertBefore(novo_post,CONTEUDO.childNodes[1]) // Insere o novo_post depois do Formulário Adicionar
ADICIONAR.style.display = 'none' // esconde o formulário de envio do post
}
}
[any material that should appear in print but not on the slide]
AJAX - Dando Interatividade ao Blog
[any material that should appear in print but not on the slide]
Caramba, mas o código ficou grande demais
Não vou ter produtividade desta forma!
AJAX -Frameworks
[any material that should appear in print but not on the slide]
Cuidado ao utlizar frameworks,
tenha sempre o controle da situação!
Ferramentas de Trabalho
AJAX - Ferramentas
- Que fique claro o desenvolvedor não é obrigado a utilizar nenhuma dessas ferramentas para desenvolver em AJAX, estas ferramentas são apenas SUGESTÕES para auxiliar no desenvolvimento
[any material that should appear in print but not on the slide]
AJAX - Firefox
- Firefox não é apenas um navegador, ele é um poderoso ambiente de desenvolvimento
- Console de Erros eficiente (Nativo)
- DOM Inspector - verifica Árvore de Objetos DOM (Nativo)
- Extensão FireBug para Depurar Scripts/CSS/HTML e verificar Árvore de Objetos DOM
- Extensão WebDeveloper ( CSS/ JavaScript / xHTML / Validadores )
[any material that should appear in print but not on the slide]
AJAX - Eclipse
- Eficiente plugin para trabalhar com HTML/CSS/JS e AJAX (Aptana)
- Eficiente plugin para PHP (PHPEclipse)
- Peca por ser muito grande e consumir muita memória
[any material that should appear in print but not on the slide]
Quero saber mais, como faço?
- Não se esqueça, o Google é seu amigo ;-);
- PHP.net, portal oficial da linguagem, centenas de funções documentadas;
- Participe de listas de discussão, blogs, fóruns, interaja;
- Já existem alguns livros na área ;
- Qualquer dúvida, beba direto da fonte W3C
[any material that should appear in print but not on the slide]
AJAX - Referências
- http://en.wikipedia.org/wiki/AJAX_%28programming%29
- http://www.vs-solutions.com/?pg=artigos/traducao_001
- http://www.phpbrasil.com/articles/article.php/id/1239
- http://webinsider.uol.com.br/vernoticia.php/id/2618
- http://www.tableless.com.br/artigos/AJAXdemo/
- http://developer.mozilla.org/pt/docs/AJAX:Como_come%C3%A7ar#1.C2.BA_passo_-_dizer_.22Por_favor.21.22_ou_Como_fazer_um_pedido_HTTP
- http://www.xml.com/pub/a/2005/02/09/xml-http-request.html
- http://developer.apple.com/internet/webcontent/xmlhttpreq.html
- http://www.w3.org/TR/2006/WD-XMLHttpRequest-20060619/
- http://www.usabilidoido.com.br/ajax_e_design_de_interacao.html
