AJAX rev08

(1)

Protocolos Aplicativos

Avançados baseados no HTTP

AJAX, HTTP PUSH, COMET, Bayeoux e

SPDY

(2)

Prof. Nunzio Marco Torrisi Prof. Nunzio Marco Torrisi

Tópicos

(3)

O que é AJAX?

Ø

Asynchronous JavaScript e XML.

Ø

Não nem uma linguagem nem uma

tecnologia.

Ø

É uma técnica que combina um conjunto de

tecnologias conhecidas a fim de criar mais

rápido mais páginas web de fácil utilização.

Ø

As técnicas AJAX são client-side(lado client).

(4)

História do AJAX

Ø

Começa com páginas web

Ø

Páginas Static web

ü Página Static HTML é carregada ü Nenhuma interação com o usuário

Ø

Páginas Web dinâmicas(do SSI to ASP.NET)

ü Página HTML é gerada dinamicamente ü Interação com o usuário

ü Torna-se mais lenta à medida que aumenta a

funcionalidade

ü A velocidade torna-se intolerável, assim o AJAX

(5)

Finalidade do AJAX

Ø

Impede o recarregamento desnecessário de uma

página.

Ø

Quando submete um formulário, embora a maioria da

página permanece a mesma, toda a página é

recarregada a partir do servidor.

Ø

Causa longo tempo de espera, e o desperdício de

largura de banda.

Ø

AJAX visa carregar apenas as informações

necessárias, e fazer apenas as mudanças necessárias

na página atual sem recarregar a página inteira.

(6)

Technologias Usada

Ø

AJAX usa:

ü

Javascript (para alterar a página

client-side)

ü

XML (para troca de informações)

ü

ASP,ASP.NET, PHP ou JSP (do lado do

servidor)

(7)

Processamento Simples

Ø

AJAX é baseado em Javascript, e a

funcionalidade principal é o acesso do

servidor web dentro do código Javascript.

Ø

Temos acesso ao servidor usando objetos

especiais; enviamos dados e recuperamos

dados.

Ø

Quando o usuário inicia um evento de uma

função JavaScript que é chamado de servidor

de acessos, usando os objetos.

Ø

A informação recebida é mostrada ao usuário

por meio das funções do JavaScript.

(8)

C / S Processos

Ø

Na maioria das vezes, o cliente requer dois

arquivos

ü Html page: trata GUI e chama uma função de

JavaScript.

ü JavaScript: lida com a lógica de negócio do sistema

Ø

Em JavaScript, uma solicitação é enviada ao

cliente e a resposta é retirada do objeto

servidor via XMLHTTP

Ø

Resposta do servidor deve ser devolvido na

estrutura do arquivo xml

(9)

Estrutura do Sistema

Ø

Arquitetura Client /Server

Ø

Objeto XMLHTTP

é usado para fazer pedido

e receber a resposta no lado do cliente.

Ø

Pedido pode ser feito via "GET" ou "POST"

métodos

ü "GET": os parâmetros são anexados ao URL usado

para se conectar.

ü "POST": os parâmetros são enviados como

parâmetros para uma função

.

(10)

XMLHTTP Object

Ø

O objeto que é usado para se conectar ao

servidor remoto é chamado XMLHTTP.

Ø

É usado para acessar uma URL específica

para receber o conteúdo.

(11)

Criando o objeto

Ø Para IE 5.5:

objXMLHTTP = new ActiveXObject ( "Microsoft.XMLHTTP")

Ø Para Mozilla:

(12)

Enviando informações

Ø Após criar o objeto, podemos enviar informações para o

servidor web e obter a resposta usando funções deste objeto:

• METODO GET: xmlhttp.open ( "GET", url, true)

xmlhttp.send ()

• METODO POST: xmlhttp.open ( "POST", url, true)

xmlhttp.send ( "data = 11-11-2006 & name = Ali")

Ø O terceiro argumento diz que os dados serão processados de

forma assíncrona. Quando o servidor responde, o

(13)

Recuperando Informações

Ø

Obtemos o valor devolvido com a

propriedade

(14)

Prof. Nunzio Marco Torrisi

Data Exchange in AJAX

Click to edit Master text styles Second level

● Third level

● Fourth level

(15)

Exemplo basico

http://www.w3schools.com/ajax/ajax_example.asp

<h2>Let AJAX change this text</h2> </div>

<button type="button" onclick="loadXMLDoc('test1.txt')">Click Me</button> <button type="button" onclick="loadXMLDoc('test2.txt')">Click Me</button> </body>

(16)

Examplo 2 – Banco de dados

Ø

O processo geral será explicado em um

exemplo em

http://www.w3schools.com/ajax/ajax_database.asp

.

Ø

Neste exemplo, uma página HTML e um

JavaSocket(*) residem ao lado do cliente do

sistema, enquanto uma página ASP reside em

lados Server.

(17)

Html Código de Exemplo

<form> Select a Customer: <select name="customers"

onchange="showCustomer(this.value)">

<option value="ALFKI">Alfreds Futterkiste <option value="NORTS ">North/South

<option value="WOLZA">Wolski Zajazd </select></form><p>

<div id="txtHint"><b>Customer info will be listed here.</b></div>

(18)

Exemplo de JavaScript

function showCustomer(str) {

var url="getcustomer.asp?sid=" + Math.random() + "&q=" + str

xmlHttp=GetXmlHttpObject(stateChanged) xmlHttp.open("GET", url , true)

xmlHttp.send(null) }

function stateChanged() {

if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")

{ document.getElementById("txtHint").innerHTML = \

xmlHttp.responseText }

(19)

ASP Código de Exemplo

sql="SELECT * FROM CUSTOMERS WHERE CUSTOMERID=" sql=sql & request.querystring("q")

... Open Connection to the DB rs.Open sql, conn

response.write("<table>")

do until rs.EOF

for each x in rs.Fields

response.write("<tr><td><b>" & x.name & "</b></td>") response.write("<td> & x.value & "</td></tr>")

(20)

Web: modelo tradicional

Click to edit Master text styles

Second level

●

Third level

●

Fourth level

●

Fifth level

fo nt e d ojo to olk it. or g

(21)

Web: modelo com Ajax

Click to edit Master text styles

Second level

●

Third level

●

Fourth level

●

Fifth level

(22)

AJAX: Prós / Contras

Ø Vantagens:

ü Independente da tecnologia de servidor.

ü Além de obter o objeto XMLHTTP, todo o processamento

é igual para todos os tipos de navegadores, pois o Javascript é usado.

ü Permite o desenvolvimento de aplicações web mais

rápido e mais interativo.

Ø Desvantagens:

ü O problema no botão voltar.As pessoas pensam que ao

apertar o botão de volta, retornaram para a última alteração que fizeram, mas em AJAX isso não ocorre.

ü Possíveis problemas de latência de rede. As pessoas

devem dar o feedback sobre o processamento.

(23)

O que o AJAX não inclui?

Ø

Abordagem ainda baseado em client

poll.

Ø

Os tradicionais contadores web/servlet

usam um thread-per-request.

Ø

Os recursos do Server limitam a duração

(24)

Introdução ao HTTP PUSH

O HTTP Push é mais conhecido por enviar

atualizações de files para um browser (é mais

antido que o AJAX).

Ø

Ele não é um streaming de verdade, mas

através dele pode-se perceber um

(25)

HTTP PUSH

§

É diferente do AJAX padrão (XMLHttpRequest)

porque o Browser não precisa perguntar

continuamente sobre as atualizações: quando

o Server tem ele envia para o Browser.

§

É muito usado em IP Câmeras e Webcams(1),

para passar ao browser uma nova imagem

em poucos segundos, sem precisar que o

browser verifique novas imagens disponíveis.

(26)

Content-Type: multipart/x-mixed-replace;boundary=meudelimitador

Como funciona o HTTP PUSH

Quando o Cliente(Browser) pede um file o Server responde com um campo HEADER chamado multipart

mixed-replace content type, invés do normal tipo MIME, como o

seguinte:

ØO Server nunca fecha a conexão.

ØQuando precisa enviar algo para o Client ele envia o

boundary precedido por “--” e uma linha branca

(27)

Como funciona o HTTP PUSH

Content-Type: multipart/x-mixed-replace;boundary=meudel --meudel Content-Type: image/jpeg ... novos dados ... -- meudel Content-Type: image/jpeg ... mais novos dados ...

O Client(browser) fica conectado de forma permanente, esperando novos dados, que irão visualizar

completamente o novo conteúdo. e previously displayed content.

(28)

Exemplo HTTP PUSH

(29)

HTTP PUSH: Prós / Contras

Ø Vantagens:

ü É muito simples de ser usado, no lado Client: não

precisa de JavaScript e XMLHTTP.

ü O Client não precisa enviar mensagens de volta para o

Servidor: ele recebe passivamente.

ü Permite o desenvolvimento de monitoramento web com

tempo de atualizações na ordem de segundos.

ü Nem todos os servidores suportam ele.

ü A conexão ao lado server é fechada muito depois do

fechamento do Client(Browser).

(30)

Introdução HTTP Polling

Em Polling Simples, o Client repetitivamente contata o

Server para verificar mudanças.

§ As atualizações iniciadas

pelo usuário do lado Client

não influenciam o

(31)

Piggybacking

No Piggybacking, as

repostas as atualizações iniciadas pelo usuário do lado Client incluíram

qualquer mudança e

resetará o escalonamento do polling.

(32)

Considerações

Todas as aplicações estão convergindo em web

applications,….ed ai?

P: Qual é o problema?

R: O fato é que a porta HTTP/80 está sendo

utilizada para replicar cada decent TCP protocol.

P: O que você acha?

R: …tudo isso leva a uma hiperlotação da porta

80

(33)

Comunicação HTTP Request e

Response

(34)

(35)

COMET

Uma request COMET é mantida aberta no Server por um tempo, durante o qual mudanças múltiplas são enviadas de volta para o Cliente.

(36)

COMET: Long Polling

No Long Polling , a request retorna uma resposta, mas é feita antecipada no tempo e mantida aberta até que algo não aconteça no Server.

(37)

Click to edit Master text styles

Second level

●

Third level

●

Fourth level

●

Fifth level

Web: modelo com COMET

(38)

COMET: Como funciona

Aberta uma HTTP request, ela fica com o final

aberto.

Respostas podem ser instantâneas ou delayed.

Conexões ficam abertas e writable.

(39)

COMET: Zero Latency HTTP

Request com final aberto:

POST /load/echo HTTP/1.1

User-Agent: SuperNunzioComet Client/1.0 Host: 127.0.0.1:8080

<CRLN> 10

test data test 1

Abrir o final permite adicionar novos dados

sem o HTTP overhead de uma nova request.

(40)

Bidirectional COMET

COMET pode suportar comunicações bidirecionais (well tested with Tomcat em ApacheCon 2007)

Server pode fazer data push data para o client Client pode fazer data push data para o server Unidirectional Comet entende-se que:

- somente o server pode fazer o data push para o client.

(41)

Exemplos de uso atual do COMET

Rich Clients

Mail(Yahoo Zimbra, GMAIL, etc…) Maps

Online conferences

Clients with need for server push Stock tickers

Auction sites Chat

(42)

COMET: Prós / Contras

Ø Vantagens:

ü No overhead de request/response headers para

cada request.

ü No overhead para TCP (abre/fecha).

ü Não há muitos thread a cada connection ou thread

para request.

ü Funcionamento através de HTTP Proxy ü Falta de um padrão de utilização.

(43)

O Protocolo Bayeux

§

É um padrão de feito para COMET.

§

É especificação dele é muito genérica, mas

existe uma implementação de referencia

conhecida como CometD

(44)

Bayeoux: HTTP Request Management

§Muitos browsers limitam entre 2 e 6 o numero max de

conexões concorrentes.

§O Bayeoux tenta agrupar as conexões Comet dentro

um numero menor de conexões chamadas de Bayeoux

channels.

§Dados Enviados sobre Bayeoux são sempre associados

a um “channel”.

O channel é uma propriedade de cada pedaço(chunck) de dados.

O usuário do Bayeoux usa os channels como stream discretos.

(45)

Bayeux Channel

O conceito de canal Bayeoux permite o multiplexing de várias conversações sobre uma conexão HTTP. A

comunicação entre o CometD object , lado client e lado Server é feita por channels.

(46)

Bayeux Channel

§

Os nomes dos canais são em estilo Unix-like

path

§

Organização hierárquica

§

São permitidas as estrelas(wildcards) para

identificar vários canais no mesmo nível

(47)

Bayeux Message Format

§Cada mensagem é codificada em JSON e pode ter uma

estrutura arbitrária

§O Canal envia a mensagem como string §Um ID único é associado a cada sessão

(48)

Bayeux: Transport

Negotiation

(49)

(50)

Bayeoux: Prós / Contras

Ø Vantagens:

ü Naming Channel em Unix-like style. ü Não precisa do objeto XMLHTTP.

ü Independente da plataforma.

ü Ainda pouco difundido no mercado. ü Concorrente do SPDY.

(51)

Protocolo SPDY

• O SPDY é mais um application-layer protocol dedicado

ao transporte de conteúdo no web, designado para ter latência mínima.

• Foi desenvolvido para teste um SPDY-enabled Google

Chrome browser e um open-source web server.

• Nos testes 64% de redução no tempo de

carregamento de paginas com SPDY(fonte Chromium Project).

(52)

Características do SPDY

§Multiplexed streams

SPDY permite streams ilimitados na mesma conexão TCP.

§Request prioritization

SPDY prevê request priorities: o client pode assinar uma prioridade a cada request.

§HTTP header compression

Comprime request e response HTTP headers.

§Server-initiated streams

Podem ser usados para enviar um conteúdo para o client sem que ele pergunta.

(53)

SPDY: Prós / Contras

Ø Vantagens:

ü Usa streams múltiplos.

ü Não depende do objeto XMLHTTP.

ü Permite uso de aplicações e navegação web mais rápida

e mais interativa.

ü Não é 100% compatível com o HTTP padrão.

ü Possíveis problemas com o HTTP proxies por causa do

SSL.

(54)

References

HTTP PUSH ØTutorial, http://www.howtocreate.co.uk/php/serverpushdemo.php ØSubbu.org, http://www.subbu.org/blog/2006/04/dissecting-ajax-server-push COMET

ØDave Crane, Phil McCarthy “Comet and Reverse AJAX”,

Apress 2008

ØDojo Project, dojotoolkit.org Bayoux Protocol

ØSpecification and CometD Projcet: http://cometd.org/ SPDY Protocol

ØSpecification and Implementatios:

(55)

O SEU PROTOCOLO

Quantas conexões TCP? Como agrupar elas?

Qual mecanismo de segurança?

Quais aplicações? => Quais requisitos? Qual processamento de messagens C/S:

XML-RPC JSON-RPC

Qual usuário:

Caixa eletrônico

Tsunami sensores no oceano Equipamento Medico