Web 2.0 e AJAX

Tópicos avançados em
internet B
Carlos Oberdan Rolim
Ciência da Computação
Web 2.0 e AJAX
Como funciona a web?
HTTP é stateless
Não mantém estado
Atualizações na página necessitam de envio de requisição
ao servidor a cada momento
Web “normal”
Cada atualização requer um “round trip” do cliente para o
servidor
Mesmo pequenas alteração seguem tal protocolo
Grande quantidade de dados fazem o usuário esperar
Dificulta uma rica experiência do usuário
Web “normal”
Arquitetura orientada ao servidor.
Cliente e servidor não estão integrados.
Experiência do Usuário
A web hoje é dinâmica?
O mesmo conteúdo é apresentado a todos os usuários
Aplicações Web ainda perdem de aplicações Desktop
Alternativas
Java Applets
.Net WinControls
Macromedia Flash
Flex
Experiência do Usuário
Controles HTML são limitados
Alguns navegadores provém melhorias
Diferentes versões da aplicação para diferentes navegadores
Sair da padronização W3C pode causar problemas futuros
Antigo paradigma
Páginas web estáticas
Provedores de conteúdo e informação
Falta interatividade com o usuário
Informação sempre vem do site para o usuário, ou seja, de
cima para baixo
Web 2.0
Desaparecem os sites e os portais e aparecem as aplicações
web
O usuário interage com a aplicação, a customizando de
acordo com seu gosto
Usuários interagem entre sí
Usuários provêm informação e conteúdo, ou seja, a
informação vem de baixo para cima
Web 2.0
Serviços e interfaces são separados.
Mashups
Interface rica, leve e simples, sem roundtrips, mais parecidas
com sistemas desktop (AJAX)
Performance
Nova bolha?
Web 2.0
Exemplos:
Wiki, Blogs, Tags, Del.icio.us, Digg, Google Home, Live.com, Flickr, You
Tube, Orkut, My Space, You OS.
Web 2.0 é muito mais que utilizar AJAX, é um novo
paradigma
Web 2.0 não é forma, é conteúdo
You OS
AJAX?!
O que é isso?
AJAX
Asynchronous JavaScript And XML
Permite a troca de informações entre cliente e servidor e a
atualização de partes de um site sem a necessidade de um
round trip
Trabalha de modo Síncrono ou Assíncrono
AJAX
Existe desde 1998 (4ª geração)
Microsoft Remote Scripting
XmlHttpRequest inserido no IE5
1º site a utilizar o objeto foi o Outlook Web Access, em 2000
AJAX
Não é uma tecnologia
É uma técnica de programação
Utiliza várias tecnologias
CSS
JavaScript/DOM
XMLHTTP
XMLHTTP
API utilizada por Web Browser Scripts
JavaScript, Jscript, VBScript, etc.
Utilizada para transferir dados XML entre um Browser (Cliente)
e um servidor
Utiliza protocolo HTTP
XMLHTTP
Trabalha com qualquer tipo de arquivo
Não está restrito a, mas normalmente utiliza XML, TXT, HTML ou JSON
XmlHttpRequest é suportado por qualquer browser geração
5 ou superior
AJAX (Vantagens)
Utiliza menos banda da rede.
Utiliza menos CPU do servidor.
Interface semelhante à sistemas Desktop convencionais.
Oportunidade de reaprender JavaScript... (tá, não é bem
uma vantagem).
AJAX (Vantagens)
Operações não precisam mais aguardar resposta do
servidor.
AJAX - Fundamentos
São cinco os fundamentos:
AJAX
- Fundamentos Web Standards e CSS
Seguir os padrões das definições do W3C (Word Wide Web Consortium).
Permitir uma separação clara do que é programação, o que é conteúdo e
o que é estilo visual. (C#/VB, XML e CSS)
AJAX
- Fundamentos DOM (Document
Object Model)
O DOM é uma API que define claramente a estrutura e organização de
um documento HTML
É um modelo que pode localizar e alterar os elementos das páginas sem
carregá-las novamente
Utilizado em conjunto com Web Browser Scripts
AJAX - Fundamentos
XML (Extensible Markup Language)
XML é uma linguagem de markups focada na descrição de dados
Possui portabilidade e transparência no transporte de dados sobre os
firewalls
Extremamente flexível, extensível, e de fácil utilização
Pode ser substituído pelo JSON quando for necessária melhor
performance
AJAX
- Fundamentos
JavaScript
Possui a característica de poder ser executada pelo lado do cliente, sem
envio de dados para o servidor
Suportado em todos os navegadores atuais (IE, Firefox, Safari, etc.)
É responsável pela união dos cinco componentes que fundamentam o
AJAX
AJAX - Fundamentos
XMLHttpRequest
Presente nos navegadores: IE 5.0+, Safari 1.2, Mozilla / Firefox e
Netscape 7
Tem a capacidade de executar a troca de dados com o servidor
remotamente e de forma assíncrona
Retorna dados em qualquer formato
PADRÃO RECONHECIDO PELO W3C!
http://www.w3.org/TR/XMLHttpRequest/
(05/04/06)
Anatomia
Round-trip página usando AJAX
Browser
Apresentação
Solicitação
HTML
de
Dados
JavaScript
HTTP
Dados Iniciais
(HTML +
CSS + Dados)
ASP.NET Application
Apresentação
Aparência
(Managed
Code)
XMLHTTP
Processos
de Render
Dados XML
Dados TXT
HTML + CSS + Dados
Serviços
Dados
Implementando XMLHTTP
Objeto XMLHttpRequest
Criado pela Microsoft para o IE5
No Internet Explorer
Outros
varnavegadores
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
//dependendo da versão…
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp = new XMLHttpRequest();
Solução ou outro problema?
Ajax é difícil de implementar
Mais uma linguagem a ser dominada
JavaScript
Difícil integração com ASP .NET
Não é orientado a objetos
Solução de problemas
Criação de outros…