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

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.

São cinco os fundamentos: AJAX - 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! (05/04/06)

Browser Solicitação de Dados Anatomia Round-trip página usando AJAX ApresentaçãoHTMLApresentaçãoHTML ASP.NET Application Processos de Render Processos Apresentação Aparência (ManagedCode) (ManagedCode) XMLHTTP Dados Iniciais (HTML + CSS + Dados)ServiçosServiços Dados HTTPJavaScriptJavaScript Dados XML Dados TXT HTML + CSS + Dados

Implementando XMLHTTP Objeto XMLHttpRequest Criado pela Microsoft para o IE5 No Internet Explorer Outros navegadores var 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…