FUNDAÇÃO DE ENSINO “EURÍPIDES SOARES DA ROCHA”

CENTRO UNIVERSITÁRIO EURÍPIDES DE MARÍLIA – UNIVEM

TRABALHO DE CONCLUSÃO DE CURSO

NELSON GUIMARÃES
RAPHAEL ZANON RODRIGUES

APLICAÇÕES WEB COM AJAX

MARÍLIA
2007
 1

NELSON GUIMARÃES
RAPHAEL ZANON RODRIGUES

APLICAÇÕES WEB COM AJAX

TCC – Trabalho de Conclusão de

Curso entregue a Fundação Eurípides
Soares da Rocha. Sob orientação do
Prof. Ms. Elvis Fusco, como requisito
parcial para obtenção do título de
Bacharel em Administração com
habilitação em Análise de Sistemas.

MARÍLIA
2007
 2

AMARAL, Nelson Guimarães do; RODRIGUES, Raphael Zanon.

Aplicações Web com Ajax. / Nelson Guimarães do Amaral; Raphael
Zanon Rodrigues; orientador Elvis Fusco. Marília, SP:[s.n.], 2007.
73 f.

Dissertação (Bacharelado em Administração com Habilitação

em Análise de Sistemas) – Centro Universitário Eurípides de Marília,
Fundação de Ensino Eurípides Soares da Rocha, Marília, 2007.

1. Conceitos 2. Ajax 3. Estudo de caso.

CDD: 004.6783
3
 4

AGRADECIMENTOS

Agradecemos primeiramente a Deus por ter-nos dado a capacidade suficiente para

concluir este trabalho que marca o fim de mais uma fase de nossas vidas. é impossível agradecer

a todas as pessoas que nos acompanharam nesta jornada e que certamente estarão nos apoiando a

chegar ainda mais longe, mas temos a certeza de que se tivéssemos percorrido todo o caminho

sozinhos, certamente teria sido mais difícil, por isso, queremos agradecer a todas as pessoas que

por ventura não foram citadas diretamente nas próximas linhas.

Gostaríamos de agradecer em segundo lugar às nossas famílias, os responsáveis por nós

sermos como somos hoje. Juntamente com eles, Gostaríamos de agradecer às nossas

companheiras que nos apoiaram e que desde já estão fazendo sacrifícios pelo nosso futuro

profissional e acadêmico.

Gostaríamos de agradecer também a todos os nossos grandes professores, que nos

incentivam desde o início do colégio até o fim da graduação e agradecemos ainda a nossos

amigos que nos entenderam e deram força nos momentos que hesitamos.

Por fim, queremos agradecer às mesmas pessoas que citei no início e que não foram

citadas aqui, e que ainda teremos muito tempo pra agradecer pessoalmente a cada um de vocês. A

todos, nosso muito obrigado de coração.

 5

"Os Problemas não podem ser resolvidos em um

mesmo nível de pensamento no qual foram gerados"
Albert Einstein
 6

AMARAL, Nelson Guimarães do; RODRIGUES, Raphael Zanon. Aplicações Web com Ajax.
2007. 73 f. Dissertação (Bacharelado em Administração com Habilitação em Análise de
Sistemas) – Centro Universitário Eurípides de Marília, Fundação de Ensino Eurípides Soares da
Rocha, Marília, 2007.

RESUMO

Com o crescente aumento da utilização de aplicações web devido à popularização da internet

banda larga e o conseqüente aumento na necessidade de recursos cada vez mais avançados como
linguagens e técnicas de desenvolvimento, este trabalho apresenta a metodologia de
desenvolvimento de uma aplicação web com AJAX, como ela funciona, suas vantagens e
desvantagens. São abordadas as características das principais tecnologias que compõem esta
metodologia de desenvolvimento como, por exemplo, o HTML, JavaScript, XML, CSS e DOM.
A seguir são mostradas as tecnologias que se integram resultando no AJAX, que resumidamente
é a apresentação dos dados para o usuário sem a necessidade de recarregar toda a página, com os
principais métodos e a forma de utilização deles, além da apresentação de alguns frameworks que
auxiliam no desenvolvimento e os conceitos que compõe a Web 2.0. Por fim, é proposto um
estudo de caso com base na tecnologia de desenvolvimento .NET oferecida pela Microsoft
composta pelo ambiente de desenvolvimento Visual Studio 2005, a framework ASP.NET AJAX
2.0 e o banco de dados SQL Server 2005. Esta aplicação é baseada nos conceitos apresentados
durante o trabalho em conjunto com o ambiente de desenvolvimento que auxilia no
desenvolvimento da aplicação juntamente com o framework ASP.NET AJAX, mostrando as
facilidades para o desenvolvimento de aplicações utilizando uma framework.

Palavras-Chave: Desenvolvimento Web, AJAX, Framework, Web 2.0.

 7

AMARAL, Nelson Guimarães do; RODRIGUES, Raphael Zanon. Aplicações Web com Ajax.
2007. 73 f. Dissertação (Bacharelado em Administração com Habilitação em Análise de
Sistemas) – Centro Universitário Eurípides de Marília, Fundação de Ensino Eurípides Soares da
Rocha, Marília, 2007.

ABSTRACT

With the increase of the utilization of web applications due to the popularization of the bandwidth
internet fallowing as a result of the need of advanced resources, as language and development
technique, this research present the development methodology of web application with AJAX,
such as, how it works, advantages and disadvantages. Boarding the characteristics of the main
technologies that are part of this development methodology, as example, HTML, JavaScript,
XML, CSS and DOM. Following is shown how this technologies are integrated resulting AJAX,
in other words it is the way how the data is showed to the user even before the full load of the
page, with the main methods and how to use them, besides the presentation of some frameworks
which assist the development and the concepts that compound the Web 2.0. Lastly, a case study
based on the technology .NET offered by Microsoft part of the Visual Studio 2005, framework
ASP.NET AJAX 2.0 and the database SQL Server 2005. This application is based on the
concepts showed during the research combined with the development environment which
supports the application development amongst ASP.NET AJAX, showing the facility to develop
applications using framework.

Keywords: Web development, AJAX, Framework, Web 2.0

 8

LISTA DE ILUSTRAÇÕES

FIGURA 01 – Arquitetura da plataforma .NET ........................................................................... 14

FIGURA 02 – Acesso a Base de Dados por meio do ADO.NET ................................................ 16
FIGURA 03 – Funcionamento do ADO.NET .............................................................................. 17
FIGURA 04 – Visão geral da arquitetura ASP.NET .................................................................... 19
FIGURA 05 – Modelo de Code-Behind no ASP.NET ................................................................. 20
FIGURA 06 – Modelo tradicional de aplicação web ................................................................... 27
FIGURA 07 – Árvore de um documento HTML simples ............................................................ 31
FIGURA 08 – Conceitos da Web 2.0 ........................................................................................... 35
FIGURA 09 – Tecnologias utilizadas pelo AJAX ....................................................................... 40
FIGURA 10 – Apresentação da página Default.aspx sem CSS ................................................... 56
FIGURA 11 – Apresentação da página Default.aspx com CSS ................................................... 59
FIGURA 12 – Tabelas do Banco de Dados .................................................................................. 60
FIGURA 13 – Modelo de apresentação no Visual Studio ............................................................ 65
FIGURA 14 – Mensagem de progresso sendo apresentada ......................................................... 68
 9

LISTA DE LISTAGENS

Listagem 01 – Instanciando um objeto e utilizando método OPEN ............................................. 47

Listagem 02 – Utilizando método SEND ..................................................................................... 48
Listagem 03 – Retorno XML ........................................................................................................ 48
Listagem 04 – Atribuir Função ..................................................................................................... 48
Listagem 05 – Verificando Estado ............................................................................................... 49
Listagem 06 – Resposta do Servidor ............................................................................................ 49
Listagem 07 – Impressão no Navegador ...................................................................................... 50
Listagem 08 – Exemplo completo de AJAX ................................................................................ 51
Listagem 09 – Código da página Default.aspx ............................................................................. 55
Listagem 10 – Código CSS .......................................................................................................... 58
Listagem 11 – Código da diretiva @Page .................................................................................... 58
Listagem 12 – Consulta de grupos ............................................................................................... 61
Listagem 13 – Consulta de usuários do grupo .............................................................................. 61
Listagem 14 – Tabelas do Banco de Dados .................................................................................. 62
Listagem 15 – Vinculação do dado na propriedade Text do rótulo .............................................. 63
Listagem 16 – Atualização dos dados vinculados aos rótulos ...................................................... 63
Listagem 17 – Posicionamento dos controles UpdatePanel ......................................................... 64
Listagem 18 – Código dos controles UpdateProgress .................................................................. 67
 10

LISTA DE ABREVIATURAS

ADO: ActiveX Data Objects

AJAX: Asynchronous Javascript And XML
API: Applications Programming Interface
ASP: Active Server Pages
CGI: Common Gateway Interface
CLR: Common Language Runtime
CLS: Common Language Specification
CSS: Cascading Style Sheets
DHTML: Dynamic HTML
DOM: Document Object Model
ECMA: European Computer Manufacturers Association
GML: General Markup Language
HTML: HyperText Markup Language
IIS: Internet Information Services
JIT: Just In Time
MSIL: Microsoft Intermediate Language
OO: Orientação a Objetos
SGML: Standard Generalized Markup Language
SOAP: Simple Object Protocol
W3C: World Wide Web Consortium
XML: eXtensible Markup Language
 11

SUMÁRIO

INTRODUÇÃO ............................................................................................................................ 11

1. CONCEITOS ............................................................................................................................ 12
1.1. NET ....................................................................................................................................... 12
1.1.1. Framework .......................................................................................................................... 17
1.2. ASP.NET ............................................................................................................................... 18
1.3. C# ........................................................................................................................................... 21
1.3.1. Orientação a Objetos .......................................................................................................... 22
1.4. JavaScript ............................................................................................................................... 23
1.5. CSS ……………………………………………………………............................................ 26
1.6. HTML ……………………………………………………………........................................ 28
1.7. DHTML ................................................................................................................................. 28
1.8. DOM ...................................................................................................................................... 29
1.9. XML ...................................................................................................................................... 31
1.10. WEB 2.0 .............................................................................................................................. 33

2. AJAX ........................................................................................................................................ 36
2.1. Conceitos ............................................................................................................................... 36
2.2. Aplicações ............................................................................................................................. 37
2.3. Estado da Arte ....................................................................................................................... 38
2.4. Tecnologias Utilizadas Pelo Ajax .......................................................................................... 39
2.5. Frameworks ........................................................................................................................... 40
2.6. XMLHttp ............................................................................................................................... 44
2.7. XMLHttpRequest .................................................................................................................. 45
2.8. Funcionamento ...................................................................................................................... 46
2.9. Exemplos ............................................................................................................................... 47
2.10. Limitações ........................................................................................................................... 51

3. ESTUDO DE CASO ................................................................................................................ 53

3.1. Resultados obtidos ................................................................................................................. 68

CONSIDERAÇÕES FINAIS ....................................................................................................... 70

REFERÊNCIAS ........................................................................................................................... 71
 12

INTRODUÇÃO

Ao longo do trabalho, busca-se conceituar as tecnologias envolvidas na metodologia

AJAX, mostrando como elas funcionam e como elas se integram para atingir um melhor

resultado nas aplicações.

O termo AJAX significa Asynchronous Javascript And XML, sendo utilizado para

especificar a utilização em conjunto de tecnologias que torna possível às aplicações Web serem

mais dinâmicas, evitando o reload total da página a cada informação requisitada pelo usuário,

atualizando apenas o que for realmente necessário.

No primeiro capítulo, temos como objetivo apresentar dos conceitos da plataforma .NET

e juntamente com o ASP.NET, mostrando seus conceitos e como a plataforma funciona, dando

suporte para o desenvolvimento de uma aplicação web. Neste mesmo capítulo, são apresentadas

as tecnologias que envolvem o AJAX e a forma com que elas interagem com as requisições

realizadas ao servidor da aplicação web, sendo apresentado também o conceito da Web 2.0 que se

baseia em aplicações mais dinâmicas, que permitem que os usuários não sejam apenas receptores

das informações, mas também, um produtor delas.

O objetivo do capítulo seguinte é definir os conceitos do AJAX, apresentando os tipos

de aplicações que ele deve ser inserido, alguns frameworks que auxiliam no desenvolvimento, os

principais métodos seguidos de exemplos de como utilizá-los e as limitações que o AJAX possui.

O último capítulo tem como objetivo demonstrar o desenvolvimento de uma aplicação

Web que faz uso das tecnologias descritas anteriormente em conjunto com a metodologia de

desenvolvimento AJAX, como também apresentar algumas tecnologias de desenvolvimento que

auxiliam nas tarefas do desenvolvedor seguido de uma descrição dos resultados obtidos com o

desenvolvimento.
 13

1. CONCEITOS

Neste capítulo serão apresentados conceitos das tecnologias básicas para o

desenvolvimento de uma aplicação Web utilizando a metodologia de desenvolvimento AJAX.

1.1. NET

A plataforma .NET é uma tecnologia de desenvolvimento da Microsoft, representando

uma significativa evolução nos pensamentos da empresa, sendo considerada uma melhoria

significativa sobre as tecnologias anteriormente desenvolvidas. De acordo com Turtschi et al

(2004, p.2), “A plataforma .NET é a fundação sobre a qual a próxima geração de softwares será

construída”. Para completar, o Turtschi et al (2004, p.2) diz que “A plataforma .NET é muito

mais de que uma linguagem, um kit de programação ou mesmo um sistema operacional. Ela

oferece novos e poderosos recursos”, não sendo possível usar eficientemente essas novas

ferramentas sem um forte conhecimento da plataforma.

O desenvolvimento da plataforma .NET teve alguns objetivos como segurança,

redimensionabilidade, confiabilidade, flexibilidade e interoperabilidade, tendo como objetivo

tornar a plataforma .NET pronta para a empresa e amigável para o programador, tornando única

para o desenvolvimento e a execução de sistemas e aplicações, sendo invocadas através dela

todas as funções necessárias ao funcionamento dos programas rodando independentemente do

sistema operacional.

A plataforma .NET é executada sobre uma aplicação similar a uma maquina virtual

chamada de Common Language Runtime (CLR). Segundo Turtschi et al (2004, p.2), a CLR é

“Um ambiente de execução gerenciado que manipula alocação de memória, detecção de erro e
 14

interação com os serviços do sistema operacional”, sendo encarregada da execução das

aplicações, para isso a CLR interage com uma coleção de bibliotecas unificadas formando o

framework.NET que possui numerosos serviços que servem para facilitar o desenvolvimento e a

manutenção das aplicações. Suportando tecnologias como: modelo de programação simples

(procedural), programação orientada a objetos e a coleta de lixo. Devido a coleção de bibliotecas

da CLR, a Microsoft e terceiros estão desenvolvendo versões adaptadas à .NET, permitindo

utilizar uma grande variedade de diferentes linguagens de programação tais como: Fortran,

Pascal, C++, Perl, C#, Python, COBOL, Microsoft JScript, SmallTalk, Oz, Microsoft Visual

Basic, Delphi, Eiffel, Java, Ruby e outras. Com isso, qualquer código compilado para .NET pode

ser executado em qualquer dispositivo ou plataforma que contenha o framework.NET, assim, o

programador não escreve mais os códigos para um dispositivo ou um sistema específico, mas

agora, ele escreve os códigos para a plataforma .NET, eliminando assim o problema de

compatibilidade entre Dynamic Link Libraries (DLL), tão conhecido e enfrentado em outras

plataformas de desenvolvimento da Microsoft.

A base da arquitetura da plataforma .NET é o CLR. Ele foi baseado na utilização de

compiladores Just In Time (JIT), onde executa um código intermediário chamado de Microsoft

Intermediate Language (MSIL) escrito em qualquer das linguagens de programação suportadas

pela Common Language Specification (CLS). De acordo com o Turtschi et al (2004, p.10) “Como

todo código visando a plataforma .NET roda com o ambiente CLR, ele é chamado de código

gerenciado.”, isso porque a compilação e o comportamento definido nos metadados do código é

gerenciado pelo CLR. Os metadados são um recurso mantido durante a compilação e consultado

em runtime pelo CLR permitindo que o mesmo saiba detalhes de como instanciar os objetos,

chamar seus métodos e acessar suas propriedades.

Segundo Turtschi et al (2004, p.12), “As aplicações .NET são distribuídas como
 15

assemblies, que podem ser um único executável ou uma coleção de componentes.”. Ao criar uma

aplicação .NET em uma linguagem escolhida é gerado um arquivo chamado de Assembly que

nada mais é do que um padrão de bits, ou seja, a linguagem de máquina que se torna legível pela

substituição dos valores por símbolos de acordo com o tipo do projeto com informações da

versão, outros assemblies referenciados por este e suas respectivas versões, os tipos contidos no

assembly, permissões de segurança e qualquer outro atributo personalizado. Já na execução do

programa, esse arquivo é novamente compilado por meio do CLR de acordo com o ambiente de

utilização do programa.

O fato de esta arquitetura utilizar a MSIL gera uma possibilidade pouco desejada entre

os criadores de software que é a de fazer a "engenharia reversa", ou seja, recuperar o código

original a partir de um código compilado. Esta não é uma idéia agradável para as empresas que

sobrevivem da venda de softwares produzidos na plataforma .NET. Devido a esta característica,

existem ferramentas que ofuscam este código MSIL, trocando nomes de variáveis, métodos,

interfaces e outros para dificultar o trabalho de quem tentar uma engenharia reversa num código

compilado MSIL.

Figura 01 – Arquitetura da plataforma .NET

Como é possível ver na Figura 01, todas a linguagens da plataforma .NET são
 16

compiladas gerando um código MSIL de acordo com a sua respectiva CLS. No próximo nível

estão os dois tipos principais de desenvolvimento de aplicação, sendo eles os Web Services e os

Windows Forms. Essas aplicações se comunicam usando o XML e o Simple Object Protocol

(SOAP) que obtém suas funcionalidades da Base Class Library e rodam no ambiente CLR. Ao

lado, é mostrado o Visual Studio.NET que não é necessário para o desenvolvimento de uma

aplicação .NET, porém, sua arquitetura o torna uma escolha ideal para o desenvolvimento de

software nesta plataforma.

Outro ponto bastante forte da plataforma .NET é o gerenciamento automático de

memória mais conhecido como coleta de lixo. No desenvolvimento em C e outras linguagens que

não possuíam esse recurso, os desenvolvedores despendiam muito tempo procurando por falhas

de memória em seus códigos. Segundo Turtschi et al (2004, p.13), “a coleta de lixo é executada

quando sua aplicação está aparentemente fora de memória livre ou simplesmente quando ela é

chamada”, ou seja, quando a aplicação solicita mais memória e não existe mais memória

disponível, a coleta de lixo é chamada. Para que o coletor possa liberar espaço na memória, ele

sai verificando todos os objetos que a aplicação faz referências, logo após ele realoca esses

objetos na memória e atualiza as referências da aplicação para apontarem para a nova posição dos

objetos na memória. Depois de feito esse processo de realocação e atualização das referências, o

coletor de lixo move a posição o ponteiro da memória para logo após o último objeto

referenciado determinando para começar a alocar a memória a partir desse ponto.

Para acesso a base de dados, a Microsoft desenvolveu o ADO.NET, sendo este o

sucessor do ActiveX Data Objects (ADO) clássico. De acordo com Turtschi at al (2004), a

Microsoft está posicionado o ADO.NET para ser a principal ferramenta de acesso a dados do

.NET Framework, Turtschi et al (2004, p.256) diz ainda que “Isso irá garantir que a arquitetura

de acesso a dados será madura e robusta, já que todas as linguagens do Common Language
 17

Runtime (CLR) estarão usando o ADO.NET como principal meio de comunicação com os

provedores de dados”. A Figura 02 mostra a interação de aplicações desenvolvidas para algumas

plataformas diferentes interagindo com o ADO.NET que realiza o acesso à base de dados.

Figura 02 – Acesso a Base de Dados por meio do ADO.NET

O desenvolvimento do ADO.NET foi baseado na estrutura do eXtensible Markup

Language (XML) o que proporciona um rico suporte para tais documentos. Os objetos do

ADO.NET são coerentes com a especificação do XML, o que torna possível abrir um documento

XML simples, alterar os dados e salvá-lo, sendo muito útil para a persistência. O ADO.NET

possui duas novas formas que trabalham juntas para servir os dados, são elas. A primeira é o

DataSet que segundo Turtschi et al (2004) pode ser considerado um banco de dados relacional

que fica alocado na memória do computador, porém, desconectado da base de dados e não sabe

de onde vieram os dados. O DataSet possui provisões para tarefas múltiplas, relações, chaves

primárias, visualizações, classificações entre outros. A segunda forma de servir os dados é com o

DataReader onde este é uma estrutura que possui um único sentido, não é atualizável e segue

apenas para a frente, sendo utilizado para realizar acessos de leitura a dados.
 18

Figura 03 – Funcionamento do ADO.NET

Quando citado anteriormente, as ferramentas DataSet e o DataReader trabalham juntas,

isso porque o DataSet não é conectado diretamente à fonte de dados, o que torna necessária a

utilização de um DataAdapter que representa a conexão com a base e é onde ficam guardados os

comandos para preencher o DataSet, como mostra a Figura 03. É nesse momento que entra o

DataReader, pois o DataAdapter utiliza um DataReader para ir até a base de dados e realizar a

busca para preencher o DataSet com os dados requisitados.

1.1.1. Framework

No desenvolvimento do software, um framework é uma estrutura de suporte definida em

que outro projeto de software pode ser organizado e desenvolvido. De acordo com Gonçalves

(2006, p. 351), “Um framework é um conjunto de melhores práticas resolvidas sobre os

problemas mais comum encontrados em um mesmo lugar.”. Um framework pode incluir

programas de suporte, bibliotecas de código, linguagens de script e outros softwares para ajudar a
 19

desenvolver e juntar diferentes componentes de um projeto de software, sendo projetadas com a

intenção de facilitar o desenvolvimento de software. Um Framework se diferencia de um simples

toolkit (biblioteca), pois este se concentra apenas em oferecer implementações de funcionalidades

sem definir a reutilização de uma solução de arquitetura.

1.2. ASP.NET

ASP.NET é uma tecnologia de processamento de solicitação HyperText Transfer

Protocol (HTTP) da Microsoft utilizado para transferências de dados pela internet, que evoluiu

durante os últimos anos, tornando-se segundo Shepherd (2006) uma das tecnologias mais

consistentes, estáveis e ricas com vários recursos disponibilizados para gerenciar as solicitações

HTTP. De acordo com Turtschi et al (2004) “O ASP.NET é a atualização da Microsoft para o

Active Server Pages (ASP).”. Devido a uma mudança na maneira de desenvolver partindo do

ASP clássico que praticamente não tinha ferramentas próprias e ganhando um ambiente

completo, conseguindo assim um aumento no desempenho, flexibilidade e redução no trabalho de

codificação, podendo escrever páginas ASP.NET em qualquer uma das linguagens suportadas

pelo CLR e tendo um aumento significativo no desempenho, pois os códigos são compilados, o

que traz mais rapidez e confiabilidade ao código fonte.

O ASP.NET é um componente do Internet Information Services (IIS) - servidor web

desenvolvido pela Microsoft para seus sistemas operacionais de servidores que segundo Shepherd

(2006, p. 37), “o IIS intercepta a solicitação e busca o recurso identificado pelo URL” retornando

a resposta para o navegador que fez a solicitação. O IIS permite através de uma linguagem de

programação integrada na .NET Framework criar páginas dinâmicas, ou seja, sempre que uma

página é requisitada pelo navegador, ela será executada pelo servidor e a partir daí serão gerados
 20

códigos em HTML com o resultado dos processos que será enviado para o navegador que o

solicitou como mostra a Figura 04.

Figura 04 – Visão geral da arquitetura ASP.NET

Uma das melhorias para o desenvolvedor é na hora de alterar algum código ou o layout

da pagina. Antes do ASP.NET era necessário alterar dentro do código HTML existente, o que se

tornava complicado e dificultava a manutenção. No ASP.NET existem dois arquivos separados,

um de layout e outro com o código, sendo que existe uma linha que vincula os arquivos, isso se

chama Code Behind. O modelo code-behind vincula um arquivo somente de código ao arquivo

ASPX que contém marcas de apresentação. Portanto, o design pode ser feito sem nenhum

problema, inclusive as alterações. Em paralelo o programador pode desenvolver o código, mas

também é possível o desenvolver ir inserindo o código dentro da página de design.

A Figura 05 mostra como a aplicação em ASP.NET é compilada antes da implantação

da aplicação, onde é gerado um arquivo em Assembly que contém todos os arquivos code-behind

compilados, por outro lado, a pagina ASPX é compilada em tempo de execução na primeira

solicitação em conjuntos de módulo, o que o torna vantajoso pois as próximas requisições serão
 21

carregadas a partido dos módulos.

Figura 05 – Modelo de Code-Behind no ASP.NET

Como o ASP.NET foi projetado como uma estrutura aberta, muitos módulos e

componentes que constituem o ASP.NET podem ser estendidos, por exemplo, uma aplicação

para web desenvolvida em ASP.NET pode reutilizar código de qualquer outro projeto escrito

para a plataforma .NET, mesmo que em linguagem diferente. Uma página ASP.NET escrita em

VB.NET pode chamar componentes escritos em C# ou Web Services escritos em C++, por

exemplo. Ao contrário da tecnologia ASP, as aplicações ASP.NET são compiladas antes da

execução, trazendo um sensível ganho de desempenho.

As aplicações Web ASP.NET necessitam do framework .NET e do servidor IIS para

executar, pelo menos na plataforma Windows. Existem alguns projetos que estão se esforçando

para permitir que aplicações ASP.NET possam ser executadas em outras plataformas, como por

exemplo, o projeto Mono para o Linux.

 22

1.3. C#

O CSharp (C# pronuncia-se "cê chárp" em português ou "cí charp" em inglês) é uma

linguagem de programação orientada a objetos criada pela Microsoft junto com a arquitetura

.NET, e que teve como base para o desenvolvimento do C# a linguagem C++ e Java. De acordo

com Turtschi et al (2004, p. 22) “A C# é uma linguagem moderna. Ela suporta o conceito de tipos

de dados, fluxo de instruções de controle, operadores, arrays, propriedades e exceções.”, ele ainda

diz que o C# é uma linguagem orientada a objetos e que suporta o conceito de classes e toda a

natureza orientada a objetos, incluindo encapsulamento, a herança e o polimorfismo.

O C# está altamente vinculada ao .NET framework suportando interfaces como a coleta

de lixo do CLR sendo, a partir deste vinculo que ele obtém suas classes e/ou funções para a

execução da aplicação. O código em C# é organizado em um conjunto de namespaces

(NameSpaces são, ao "pé-da-letra", Espaços para Nome, ou seja, é possível atribuir um nome

para um elemento, criando assim o seu próprio elemento) que agrupam as classes com funções

similares para sistemas diferentes.

Embora tenham várias outras linguagens que suportam a tecnologia .NET, o C# é

considerada a linguagem principal dessa arquitetura, isso se deve ao fato dela ter algumas

vantagens como:

• Foi totalmente desenvolvida para rodar na nova plataforma da Microsoft, sendo assim,

não apresenta problemas de compatibilidade;

• O compilador do C# foi o primeiro a ser desenvolvido, tornando-se base para os

demais;

• A maior parte das classes desse framework foi desenvolvida na linguagem C#;

As estruturas de dados primitivas do C# são objetos que correspondem a tipos em .NET.

 23

A desalocação automática de memória pelo coletor de lixo além de várias de suas abstrações tais

como classes, interfaces, delegados e exceções são nada mais que a exposição explicita dos

recursos do ambiente .NET.

Muitos dos produtos e iniciativas da Microsoft geram polêmica no campo político e a

criação e desenho da C# não foi exceção. Devido à natureza fechada do C# com uma instituição

comercial, a discussão política continua em relação à legitimidade da sua normalização, a sua

semelhança com Java, o seu futuro como uma linguagem para uso generalizado e outros assuntos.

Alguns peritos em segurança encontram-se cépticos em relação à eficácia do mecanismo de

segurança do CLR e criticam a sua complexidade.

Ao contrário de linguagens proprietárias, tal como o Visual Basic, a Microsoft optou por

submeter a C# a um processo de normalização. No entanto, a Microsoft continua a ser a principal

força a induzir mudanças e inovação na linguagem. Além disso, a Microsoft tornou bem claro

que a C#, tal como outras linguagens .NET, é uma parte importante da sua estratégia de software,

tanto para uso interno e para consumo externo. A Microsoft se encarrega ativamente do papel de

publicitar a linguagem como uma componente da sua estratégia global de negócios.

1.3.1. Orientação a Objetos

A orientação a objetos (OO), ou também conhecida como programação orientada a

objetos (POO) ou ainda em inglês Object-Oriented Programming (OOP) é um paradigma de

análise, projeto e programação de sistemas baseado na composição e interação entre os dados

chamados de objetos. De acordo com Gonçalves (2006, p. 14), “Um objeto é uma entidade tida

por nós como sólida. Um computador, um carro, um cachorro, por exemplo, são objetos do

mundo físico.”, tais objetos possuem propriedades e métodos. Por meio das propriedades, é
 24

possível modificar os objetos e a mesma propriedade pode ser aplicada a diferentes objetos. Os

métodos indicam quais ações os objetos podem realizar.

As classes são unidades de programação que contêm propriedades e conjuntos de

métodos que manipulam os dados e é a partir da classe que os objetos são instanciados, ou seja,

criados em algum momento para realizar alguma tarefa.

Com base em Deitel et al (2003), na programação orientada a objetos, são determinadas

um conjunto de classes necessárias para implementar o sistema, as propriedades e os métodos

necessários definem como um objeto de cada classe colabora para atingir os objetivos do sistema,

ou seja, cada classe encapsula o comportamento e estados possíveis de seus objetos por meio dos

métodos e atributos respectivamente, como também o relacionamento com outros objetos sendo

eles amarrados entre si. Segundo Deitel et al (2003, p.373), “embora os objetos possam saber

como se comunicar uns com os outros por meio de interfaces bem definidas, os objetos não tem

permissão para conhecer como os outros objetos são implementados”, tais detalhes referentes à

implementação, ficam restritos dentro dos próprios objetos.

As linguagens de programação mais importantes com suporte a orientação a objetos são:

Smalltalk, Perl, Python, Ruby, Php, ColdFusion, C++, Object Pascal, Java, JavaScript,

ActionScript e C#.

1.4. JavaScript

Com base em Gonçalves (2006), o JavaScript é uma linguagem de programação

desenvolvida por Brendan Eich da Netscape no ano de 1995 e se trata da primeira linguagem de

script da web a ser introduzida e é a mais popular por ser quase tão fácil como o HTML. A

princípio se chamava LiveScript, e pretendia atender algumas necessidades que surgiram de

 25

acordo com a evolução da web que se tornava mais dinâmica e tinha a necessidade de ter maior

interação com o usuário como por exemplo a validação de formulários no lado cliente, tomar

decisões e realizar outras validações simples que não eram possíveis de serem feitos utilizando a

linguagem de marcação de texto simples como o HTML. As linguagens de script são mais

simples por possuir uma sintaxe fácil de aprender, além de permitirem combinar script com

HTML para criar páginas da Web interativas.

De acordo com Flanagam (2004, p. 19) “JavaScript é uma linguagem de programação

leve, interpretada e com recursos de orientação a objetos”. Por ser uma linguagem interpretada o

navegador executa cada linha de script como as recebe, por isso é importante saber que o

JavaScript é sensível ao tipo de letra em sua sintaxe. Portanto, é necessário que seja obedecida a

forma de escrever os comandos, caso contrario o JavaScript interpretará, por exemplo, o que seria

um comando, como sendo o nome de uma variável. Esses pontos são o que diferem o JavaScript

de outras linguagens de programação que devem ser compiladas ou traduzidas em código de

máquina antes de serem executadas.

O JavaScript não tem quase nenhuma semelhante com o Java a não ser pelo nome e a

sintaxe de ambas as linguagens que têm por base as linguagens C e C++. De acordo com

Gonçalves (2006, p. 13), “Enquanto Java é uma linguagem de programação avançada e

poderosa[...] o JavaScript é uma linguagem de scripts[...] e que depende de um programa que a

interprete”. O que os torna totalmente diferente no conceito e no uso, como por exemplo, a

tipagem dinâmica onde os tipos das variáveis não são definidos, é uma linguagem interpretada e

não compilada, oferece um bom suporte a expressões regulares e possui ótimas ferramentas

padrão para listagens, sendo as duas últimas, características das linguagens de script.

Utilizando o JavaScript é possível realizar tarefas diversas como adicionar mensagens

que rolam na tela, alterar as mensagens na linha de status do navegador, validar os conteúdos de
 26

um formulário, fazer cálculos, exibir mensagens para o usuário, tanto como parte de um pagina

da web como em caixas de alertas, fazer animações de imagens ou criar imagens que mudam

quando você move o mouse sobre elas, detectar o navegador em utilização e exibir conteúdo

diferente para navegadores diferentes, detectar plug-ins instalados e notificar o usuário se um

plug-ins foi exigido.

A partir do JavaScript foi desenvolvido um padrão conhecido como European Computer

Manufacturers Association (ECMA) que é o responsável pela padronização de grande parte das

tecnologias que já utilizamos ou que ainda utilizaremos. O ECMA define apenas características

intrínsecas da linguagem e seu compilador (no caso do JavaScript, interpretador), tais como:

Sintaxe, Convenções léxicas, Tipos e Conversões, operadores e expressões aritméticas e

booleanas, funções e objetos nativos, estruturas de controle e várias outras definições).

Assim como o HTML, o JavaScript exige um navegador da web para ser exibido e

navegadores diferentes podem exibi-lo de forma diferente. Diferente do HTML, os resultados de

incompatibilidade de navegador com o JavaScript são mais drásticos como: em vez de exibir seu

texto incorretamente o script absolutamente pode não executar, exibir uma mensagem de erro ou

até derrubar o navegador.

O Common Gateway Interface (CGI) é uma especificação que permite aos programas

serem executados em um servidor da Web e não uma linguagem de programação, podendo ser

escritos em C, Visual Basic ou outras linguagens de programação. Os programas utilizando CGI

são muito utilizados na Web, muito provavelmente, se você já digitou uma informação num

formulário e pressionou o botão para enviá-las para um site da Web, elas foram enviadas para um

aplicativo de CGI.

O JavaScript, diferentemente do CGI, é executado no cliente, ou seja, no navegador

Web, enquanto o CGI é executado no servidor, sendo esta, a principal desvantagem do CGI
 27

frente ao JavaScript pois, como os dados devem ser enviados para o servidor e retornados ao

navegador Web, o tempo de resposta pode ser lento. Por outro lado, o CGI pode enviar um

arquivo para o servidor, funcionalidade que o JavaScript não suporta, ou seja, o JavaScript apenas

manipulas as informações, ele não armazena dados. O JavaScript trata suas estruturas básicas,

propriedades do navegador e os elementos de uma página HTML como objetos (entidades com

propriedades e comportamentos) e permite que sejam manipulados através de eventos do usuário

programáveis, operadores e expressões. Ele oferece também recursos interativos que faltam no

HTML e permite a criação de páginas interativas e dinâmicas, que são interpretadas localmente

pelo navegador, sem precisar recorrer a execução remota de programas no servidor.

1.5. CSS

Cascading Style Sheets (CSS) ou simplesmente folha de estilos, é uma página que

contém definições ou especificações de diferentes estilos que são utilizados para definir a

apresentação de documentos HTML ou XML. Com base em Gonçalves(2006), o CSS teve seu

inicio com Hakon Wium Lie e Bert Bos no ano de 1994.

De acordo com Flanagam (2004, p. 272) “A capacidade de criar script com estilos de

CSS permite alterar dinamicamente cores, fontes e assim por diante. Acima de tudo, permite

configurar e alterar a posição dos elementos e até ocultar e mostrar elementos”. O principal

benefício do CSS é prover a separação entre o formato e o conteúdo de um documento,

oferecendo ao web designer (pessoa responsável pelo desenvolvimento da camada de

apresentação da aplicação) novas ferramentas que dá, segundo Gonçalves(2006) algumas

vantagens como:

- Reutilização dos estilos, onde define a mesma forma de apresentação de todo o

 28

documento HTML ou em apenas parte dele é padronizado;

- Etiquetas para a utilização, podendo definir vários estilos para uma mesma etiqueta;

- Reutilização do código;

- Simplicidade do código HTML, reutilizando os códigos do CSS para tarefas como

colocar elementos na página com maior precisão, distância entre as linhas do documento,

visibilidade dos elementos, margens, sublinhados, etc.;

Porém, essa tecnologia deve ser utilizada com cuidado, pois como ela é relativamente

nova, tendo sido lançada oficialmente pelo World Wide Web Consortium (W3C) que é uma

entidade responsável pela definição da área gráfica da internet, o CSS1 é a primeira versão e foi

lançado oficialmente em 1996 e a segunda versão chamada de CSS2 foi lançada em 1998. Os

navegadores modernos garantem a sua utilização, mas alguns navegadores como versões

anteriores ao Netscape 4 ou Internet Explorer 3 por exemplo, não suportam a sua utilização ou

não implementam as mesmas funções de folhas de estilo, sendo assim, os documentos podem se

apresentar de maneiras diferentes dependendo da versão do browser.

Figura 06 – Modelo tradicional de aplicação web

A Figura 06 mostra o modelo tradicional das aplicações web, onde o navegador do

cliente realiza uma requisição via HTTP ao servidor web e este acessa a base dados em busca dos

dados requisitados, devolvendo para o navegador um código em HTML com o que o cliente

requisitou, juntamente com parametrizações em JavaScript e/ou CSS referentes à página.

 29

1.6. HTML

HyperText Markup Language ou apenas HTML, significa Linguagem de Marcação de

Hipertexto, foi criada em 1990 pelo cientista Tim Berners-Lee. A sua finalidade era apenas tornar

possível o acesso e a troca de informações e documentações de pesquisas entre os cientistas de

diversas universidades. Segundo Lemay (1998, p. 47), o HTML “se baseia na SGML (Standard

Generalized Markup Language), que consiste em um sistema de processamento de documentos

bem maior.”. Lemay (1998) cita ainda que para desenvolver páginas em HTML, não é necessário

conhecer mais do que uma das principais características da SGML que ela não descreve a

estrutura geral do conteúdo do documento e não a apresentação desse documento para o usuário.

O HTML devido a sua herança do SGML é uma linguagem de marcação utilizada para a

construção de páginas web que inicialmente limitava-se a apenas exibir informações contidas nos

documentos, tendo a idéia de que os documentos possuem elementos em comum como, por

exemplo, cabeçalhos, títulos, parágrafos, listas e tabelas. Devido ao fato de que os documentos

HTML eram apenas para exibir informação, eles são interpretados pelos navegadores, ou seja, os

navegadores reproduzem exatamente como eles foram escritos, linha a linha.

Devido à constante evolução da Web em geral, a linguagem passou a ter a necessidade

de ter uma maior flexibilidade para manipular visualmente os conteúdos e, juntamente com a

evolução da linguagem e com a introdução gradativa de novas tags, atributos e aplicações

específicas, o HTML tornou-se padrão mundial de apresentação de páginas de conteúdo na Web.

1.7. DHTML

A utilização do JavaScript em conjunto com o Cascading Style Sheets (CSS), permite

tornar os sites mais interativos para os usuários dando mais movimento, dinamismo e o HTML
 30

simples fica conhecido como Dynamic HTML. O Dynamic HTML ou simplesmente DHTML é,

de acordo com Gonçalves (2006, p. 04) “a união das tecnologias HTML, JavaScript e a CSS

aliada ao Document Object Model (DOM), para permitir que uma página Web seja modificada

dinamicamente na própria máquina cliente, sem a necessidade de novos acessos aos servidor

Web” que permite que a pagina web seja modificada na máquina que fez a requisição não tendo a

necessidade de realizar novos acessos ao servidor web.

O DHTML é uma nova tecnologia da web que deixa os elementos de uma página como

textos, imagens, posição dos elementos e estilos de páginas mais dinâmicos, ou seja, tudo pode

ser mudado dinamicamente. Segundo Lemay (1998), o Dynamic HTML foi projetado para

melhorar a capacidade do projetista de controlar a aparência do documento no navegador do

usuário, proporcionando um controle preciso em relação ao posicionamento exato de elementos

em uma página, ou seja, é graças ao DHTML que hoje é possível desfrutar de interatividades

semelhantes às encontradas em sistemas para desktop. Para tornar os sites mais interativos, o

DHTML utiliza scripts, embora seja possível a utilização de várias linguagens para escrever os

scripts, as mais popularmente utilizadas são JavaScript e o VBscript.

1.8. DOM

O Document Object Model (DOM) ou traduzido para o português como Modelo de

Objeto de Documentos é, segundo Flanagam (2004, p.240) “é uma interface de programação de

aplicativos (API – Applications Programming Interface) para representar um documento (como

um documento HTML) e acessar e manipular os vários elementos (como marcas HTML e strings

de texto) que compõe esse documento”.

De acordo com Gonçalves (2006, p.72), “O DOM é uma plataforma – e uma linguagem
 31

– de interface neutra que permitirá programas e scripts acessar dinamicamente e atualizar o

conteúdo, estrutura e estilos de documentos”, ou seja, ele é um mecanismo que permite a

programação DHTML sendo um modelo de objetos expostos pelo navegador que permite através

do Event Model (Modelo de Evento) acessar eventos do usuário e torná-los acessíveis por uma

linguagem de script como o JavaScript.

O Event Model permite que o documento HTML reaja a ações (eventos) do usuário

como, por exemplo, pressionar uma tecla ou arrastar o ponteiro do mouse sobre um elemento.

Como os scripts que contém a programação para essas ações são executados no navegador do

usuário, existe um grande ganho de desempenho e velocidade com que são executadas as ações.

O DOM foi definido pela W3C em cinco categorias de acordo com Gonçalves (2006) que são

descritas a seguir:

DOM Core – é a especificação de um modelo genérico, onde é possível ver e manipular

os documentos em estilo de árvore.

DOM HTML – essa especificação é uma extensão do DOM Core, porém com a

capacidade de manipular todos os elementos de um documento HTML. Ele utiliza uma sintaxe de

programação bem semelhante ao JavaScript.

DOM CSS – é a especificação das interfaces necessárias para manipular as regras do

CSS.

DOM Events – essa especificação adiciona eventos de controle ao DOM que variam

desde eventos de interface como cliques de mouse até eventos que são mais específicos,

disparados quando é modificada alguma parte da árvore do documento.

DOM XML – essa especificação é uma extensão do DOM Core para ser utilizada com

XML onde ela capta necessidades particulares do XML.

O DOM vê o documento como uma estrutura de dados caracterizados por uma relação
 32

de hierarquia entre os elementos que fazem parte dele montando uma estrutura semelhante a uma

árvore. Com base em Gonçalves (2006), é possível representar qualquer documento HTML ou

XML como uma árvore, sendo necessário apenas que este documento esteja bem formatado. A

figura 07 a seguir ilustra a representação em árvore de um documento HTML com suas tags

básicas em forma de árvore.

Figura 07 – Árvore de um documento HTML simples

Como é possível observar na Figura 07, o elemento <HTML> contém os elementos

<HEAD> e <BODY>. Apenas o elemento <BODY> contem outros elementos que são <H1> e o

<P>. O elemento <H1> contém uma string ‘Texto’, já o elemento <P> contém a string

‘Paragrafo’.

1.9. XML

Estimulado pela insatisfação com os formatos existentes (padronizados ou não), o W3C

começou a trabalhar em meados da década de 1990 em uma linguagem de marcação que

combinasse flexibilidade com a simplicidade da HTML. O principio do projeto era criar uma

linguagem que pudesse ser lida por software, e integrar-se com as demais linguagens.
 33

Segundo Gonçalves (2006, p. 127) “XML significa eXtensible Markup Language

(Linguagem Extensível de Marcação) e tem como característica sua semelhança em tags e

atributos com o HTML”. O XML é considerado uma grande evolução das linguagens para a Web

que teve como base a General Markup Language (GML), desenvolvida pela IBM nos anos 70.

XML é uma linguagem que foi desenvolvida para superar as limitações do HTML, sendo

definida como o formato universal para dados estruturados na Web, consistindo em tabelas,

desenhos, parâmetros de configurações, entre outros, ou seja, a linguagem define as regras que

permitem escrever documentos de forma que sejam adequadamente visíveis ao computador, não

tratando da apresentação das informações, mas apenas do conteúdo a ser apresentado, tendo

assim um papel importante na globalização e na compatibilidade entre os sistemas, pois, o seu

propósito principal é a facilidade de compartilhamento de informações com segurança,

confiabilidade e facilidade através da Internet.

O XML é um formato para a criação de documentos com dados organizados de forma

hierárquica, como se pode ver freqüentemente em documentos de texto formatados, imagens

vetoriais (imagem gerada a partir de descrições geométricas de formas, diferente das imagens

chamadas mapa de bits, que são geradas a partir de pontos minúsculos diferenciados por suas

cores) ou bancos de dados (são conjuntos de dados com uma estrutura regular que organizam

informação). Como se trata de um formato texto-puro, XML pode ser criado e editado em

qualquer dos mais recentes editores de textos. Conhecendo-se a sintaxe de XML, é possível

escrever documentos "na mão" tão válidos quanto os gerados por programas automatizados.

A extensibilidade do XML é tanta, que muitas corporações vêm adicionando funções

XML em seus produtos, como a Microsoft, Oracle, IBM, Google e Sun. É uma linguagem que

tende a alcançar um sucesso cada vez maior, não só no segmento de comércio eletrônico, como

vem acontecendo, mas em praticamente todas as áreas da Web.

 34

O XML é basicamente um formato de texto unicode bastante simples que representa

dados de forma semi-estruturados que podem ser considerados como uma combinação de texto e

estrutura que no caso da XML é fornecida pelas tags que carregam o valor e outras informações

que descrevem o dado tornando um documento auto-explicativo.

1.10. WEB 2.0

O termo Web 2.0 faz referência a uma nova fase da Web que dá ênfase a ferramentas e

plataformas que permitam ao usuário não ser apenas um receptor de informações, mas também

um produtor delas. Porém, este termo tem gerado muita discussão, pois alguns defendem que esta

atual fase da Web é uma evolução, o que não utilizaria o termo Web 2.0 e os que defendem que

esta nova fase é uma inovação e que por isso defendem o termo Web 2.0.

Como cita Tim O’Reilly (2005):

“Web 2.0 é a mudança para uma internet como plataforma, e um entendimento

das regras para obter sucesso nesta nova plataforma. Entre outras, a regra mais

importante é desenvolver aplicativos que aproveitem os efeitos de rede para se

tornarem melhores quanto mais são usados pelas pessoas, aproveitando a

inteligência coletiva”.

Para a realização deste trabalho, foi seguida a linha de raciocínio de Tim O`Reilly, que

foi quem iniciou o pensamento da Web 2.0 que se diferencia do modelo anterior (Web 1.0) com

seus sites estáticos e com conteúdo pré-programado para aparecer pro usuário.

Atualmente alguns fatores contribuem para o avanço e melhorias da Web 2.0, tais como:

o aumento de pessoas usando a internet devido a popularização da banda larga e a popularização

de tecnologias que possibilitam os sites serem desenvolvidos implementando as características da

Web 2.0 citadas abaixo:

 35

• Participação: mais pessoas utilizando a internet e com liberdade para alterar o

conteúdo, gerando uma Inteligência Coletiva (exemplo: Wikipedia);

• Cooperação: não existência do controle dos dados dos sites por meio de pessoas

responsáveis pelo seu desenvolvimento, possibilitando assim a utilização e constante melhoria

dos serviços já criados (exemplo: Google Maps);

• Usabilidade: facilitação no uso, tornando os sites mais intuitivos, onde os testes

são realizados com grande freqüência e com uma grande quantidade de usuários.

• Confiança no conteúdo: os usuários estão constantemente avaliando, corrigindo e

sugerindo, assim, as informações erradas são rapidamente denunciadas;

• Experiência rica para o usuário: as páginas estão cada vez mais leves, rápidas e

interativas, ficando cada vez mais com seu formato próximo aos aplicativos para Desktop;

• Personalização: os usuários têm a possibilidade de escolher o próprio conteúdo;

Além das características citadas acima, são necessários também alguns elementos

cruciais para que um site seja considerado integrante da família Web 2.0, sendo eles:

• Usuário: principal objetivo dos sites, sendo eles os responsáveis por criar, avaliar,

editar, organizar, compartilhar e escolhendo como e o que deseja ver;

• Conteúdo: a preocupação nessa nova versão da Web não está mais em publicar o

conteúdo, mas sim em criar alternativas que ajudem a selecioná-lo, organizá-lo e distribuí-lo;

• Organização: utilização da Folksonomia, que é a criação de tags pelo usuário para

que ele possa definir qual a categoria de um determinado site (exemplo http://del.icio.us);

• Avaliação: denuncia de erros e abusos, com um estímulo à avaliação;

• Distribuição: disponibilização do conteúdo por meio do bom uso de vários

dispositivos;
 36

• Designer: estimular o usuário a fazer parte da web permitindo autonomia,

facilidade e simplicidade na busca por informação e colaboração para o desenvolvimento desta;

Com essas características e elementos citados acima, os sites que fazem parte da família

Web 2.0, permitem aos seus desenvolvedores construir novos serviços em cima de serviços

disponibilizados por sites já existentes, sendo construídos e disponibilizados em cima de

arquiteturas de Web Services, transformando as aplicações em provedores de serviços e a web em

plataforma para estes serviços. Para isso, os desenvolvedores devem seguir algumas tendências

como: layout simples, projeção do conteúdo e não da página, utilização de espaços em branco,

textos grandes com cores fortes e contrastantes.

Figura 08 – Conceitos da Web 2.0

A Figura 08 fez um resumo do que é necessário para se ter um site dentro dos padrões da

Web 2.0 mostrando as tecnologias que a implementam, os serviços disponibilizados, o modelo

utilizado pela Web 2.0 e a Filosofia na qual se baseiam os conceitos da Web 2.0. O`Reilly (2005)

diz ainda que “Pode-se ter certeza de que, se um site ou produto depende de publicidade para se

tornar conhecido, não é Web 2.0”.

 37

2. AJAX

AJAX significa Asynchronous Javascript And XML e segundo Gonçalves (2006), o

termo AJAX foi lançado por Jesse James Garrett em um artigo on-line publicado em fevereiro de

2005 e pode ser lido na íntegra em

http://www.adaptivepath.com/publications/essays/archives/000385.php. A técnica do AJAX

consiste em utilizar tecnologias incorporadas que tem como as principais o JavaScript e o XML.

A utilização em conjunto dessas tecnologias, torna possível a criação de páginas que executam

códigos e os apresentam para o usuário sem a necessidade de recarregar a página por completo.

2.1. Conceitos

AJAX é o uso de tecnologias como Javascript e XML fazendo com que o navegador

carregue conteúdo do servidor sem recarregar a página atual, o que torna o navegador mais

interativo, transformando as páginas semelhantes às aplicações Desktop. AJAX não é uma

tecnologia, são algumas tecnologias trabalhando juntas, onde cada uma faz a sua parte, não sendo

somente um novo modelo, é também uma iniciativa na construção de aplicações web mais

dinâmicas e criativas oferecendo assim, novas funcionalidades.

O modelo clássico de aplicação web trabalha de forma que a maioria das ações do

usuário na interface dispara uma solicitação para o servidor web, o servidor realiza o

processamento recuperando dados, realizando cálculos, conversando com outros sistemas e então

retorna a solicitação para o usuário. Enquanto o servidor está fazendo seu trabalho, o usuário está

esperando, e a cada etapa em uma tarefa, o usuário aguarda mais uma vez. Com base em

Gonçalves (2006), a idéia do AJAX é tornar esse processamento do servidor mais simples, ou

seja, se o usuário já está com a página carregada, ele carrega apenas os conteúdos solicitados,
 38

reduzindo o tempo de processamento do servidor e o tráfego na rede. De acordo com esse

conceito, Gonçalves (2006, p. 5), “O AJAX contém um mecanismo que na realidade é um

conjunto de funções escritas em JavaScript que são chamadas sempre que uma informação

precisa ser pedida ou enviada ao servidor.”. Sendo assim, a maior vantagem das aplicações AJAX

é que elas rodam no próprio navegador então, para estar hábil a executar aplicações com AJAX, é

necessário apenas possuir algum dos navegadores modernos que já oferecem suporte às

tecnologias utilizadas pelo AJAX, sendo os mais populares o Mozilla Firefox, Internet Explorer,

Opera, Konqueror e Safari.

2.2. Aplicações

O principal problema resolvido com AJAX é a substituição da conhecida tela escondida

que era implementado como única solução para a realização de requisições ao banco, submissão

de formulários, validações, enfim tudo que fosse necessário para não realizar um refresh da

página sem recarregar toda a página atual.

A utilização do hidden frame apresentava alguns problemas como:

· Páginas com vários quadros;

· Quando ocorriam erros na página escondida, estes não eram rastreados com facilidade;

· Dificuldade de manutenção;

· O desenvolvedor, ao ver uma já implementada, tinha bastante receio em adicionar ou

modificar alguma funcionalidade dela, pois poderiam ocorrer erros em outros locais;

· Não se tinha um local que centralizasse e controlasse todas as requisições;

AJAX resolve este problema, possibilitando, através de um único método, realizar

request e receber responses com ilimitadas respostas, ou seja, a comunicação cliente-servidor fica
 39

transparente, fazendo com que sem nenhuma dificuldade o desenvolvedor possa acessar métodos

do servidor quase como se fosse um método JavaScript.

- Validação em tempo real: São validações que não podem ser feitas no navegador do

cliente, pois dependem de informações que estão no servidor, como, por exemplo, verificar se um

usuário já está cadastrado ou se a data informada é anterior à data atual;

- Auto Complete: permite que ao mesmo tempo em que o usuário for digitando, uma

lista de possíveis respostas é apresentada para que o usuário possa escolher alguma resposta.

Como exemplo, existe Google Suggest (http://www.google.com/webhp?complete=1&hl=en);

- Atualização apenas da informação solicitada: permite carregar apenas as informações

solicitadas pelo usuário, ao invés de carregar todos os dados na tela novamente ou então

necessitar de janelas auxiliares podendo montar a lista de “itens-pai” e dependendo da escolha,

montar os detalhes do item. Esse tipo de atualização permite o desenvolvimento de chats

(http://www.qwadchat.com), notícias (http://digg.com/spy) ou aplicações que tem a necessidade

de serem atualizadas constantemente;

- Interface de usuário sofisticada: são controles dinâmicos como árvore de diretórios,

menus, barras de progresso, apresentando uma interface rica semelhante às aplicações desktop ou

implementar jogos sem necessidade de refresh. Um exemplo de interface rica pode ser

visualizado no site Flickr (http://flickr.com/), onde o usuário pode organizar uma coleção de fotos

com diversos recursos, como por exemplo, com utilização de drag n´ drop;

2.3. Estado da Arte

AJAX não é exatamente uma tecnologia, mas um termo que define uma nova

abordagem um conjunto de tecnologias existentes para formar uma ferramenta de criação de

 40

aplicações web onde, segundo Gonçalves (2006), o AJAX é composto pelas seguintes

tecnologias:

• Apresentação visual baseada nos padrões HTML/XHTML e CSS;

• Exposição e interação dinâmica com o usuário através do DOM;

• Intercâmbio e manipulação de dados utilizando XML;

• Recuperação de dados de forma assíncrona com XMLHttpRequest;

• JavaScript responsável por unir as tecnologias acima do lado do usuário;

Combinando estas tecnologias as aplicações web são capazes de fazer atualizações

incrementais e rápidas na interface do utilizador sem ser preciso recarregar novamente toda a

página. Com isto, se obtém uma maior velocidade nas respostas às ações do usuário, pois não é

preciso recarregar informações que não serão atualizadas, assim podendo criar aplicações web

mais parecidas com aplicações desktop.

2.4. Tecnologias Utilizadas pelo AJAX

Como se pode ver na Figura 09, o AJAX é uma combinação de várias tecnologias que

foram apresentadas nos capítulos anteriores como JavaScript, CSS, DHTML e XML.

Além das tecnologias já apresentadas, o AJAX faz uso também de outras tecnologias

que serão mais bem apresentadas a seguir, como o XMLHttp e XMLHttpRequest.

 41

Figura 09 – Tecnologias utilizadas pelo AJAX

A Figura 09 expõe bem como são integradas as tecnologias para a utilização dos

recursos da metodologia AJAX onde são utilizados os conceitos de cada uma das tecnologias e

que no conjunto, forma o AJAX.

2.5. AJAX Frameworks

Para facilitar o desenvolvimento de aplicações Web, pode-se utilizar um Framework,

que irá agilizar, descomplicar e padronizar as aplicações Web. A grande vantagem dos

frameworks é que eles geram o código pronto de muitas operações básicas e com isso os

desenvolvedores de aplicações Web ficam com mais tempo disponível para implementar as

tarefas mais difíceis dos sites, pois das mais comuns, os frameworks já se encarregam.

Entre as tarefas que os frameworks implementam estão os recursos em AJAX, como a

utilização do objeto XMLHttpRequest. Com isso, é possível que boa parte da implementação
 42

necessária para que os módulos interajam com o envio de solicitações entre o cliente e o servidor

possa ser implementada e gerenciada pelos frameworks.

Existem dezenas de frameworks para AJAX. Abaixo estão selecionados alguns dos

Frameworks Web que implementam os recursos do AJAX:

AJAXLIB

É uma classe escrita em JavaScript e que pode ser utilizada em conjunto com várias

linguagens, como PHP, PERL e JSP. É uma ferramenta simples e indicada para aplicações que

não requerem muitos recursos. Esse produto possui código aberto. (AJAXLIB, 2007)

ASP.NET AJAX

É um framework da Microsoft que vem integrado ao ASP.NET. Com uma biblioteca que

contém vários componentes prontos, ele permite facilmente incorporar no site funções de drag-

and-drop, menus dinâmicos, popup com informações temporárias (Exemplo: calendário),

controle de painéis na página, blocos sempre visíveis mesmo com rolagem da página, controle de

campos drop-down em cascata (alterando um campo atualiza os demais), controle de animações,

etc. No site do produto, é possível ver todos os componentes disponíveis para o ASP.NET AJAX

e exemplos interessantes para sua utilização. (ATLAS, 2007)

DOJO

O Dojo é um toolkit DHTML escrito em Javascript e independente de plataforma. Seu

foco está no desempenho, por isso é recomendado se o uso de JavaScript for intenso. Possui uma

API complexa e sua documentação não é muito completa. É um dos frameworks mais antigos,

seu desenvolvimento foi iniciado em setembro de 2004 e hoje é considerado um dos produtos

mais maduros. Um recurso que diferencia o Dojo é seu suporte aos botões Voltar e Avançar,

possibilitando registrar um método de retorno de chamada que será acionado se o usuário clicar

no botão Voltar ou Avançar. Esse produto possui código aberto (DOJO, 2007).
 43

DWR

O Direct Web Remoting (DWR) é um framework Java para rodar aplicações AJAX.

DWR é um dos mais conceituados frameworks AJAX disponíveis para a plataforma Java. Tudo

funciona de maneira simples e é de fácil aprendizado.

A estrutura do código fonte Java fica acessível ao cliente via JavaScript, não existindo

uma distinção entre lado cliente e servidor do ponto de vista do desenvolvedor. Tudo é feito de

forma transparente, pois o DWR cuida de todo processo de criação e manipulação do

XMLHttpRequest. Esse produto possui código aberto (DWR, 2007).

ECHO2

Echo2 é um framework desenvolvido em Java que cria a interface baseada em templates

HTML, não necessitando que o desenvolvedor saiba HTML ou JavaScript, apenas tenha

conhecimento em Java. O desenvolvimento fica muito parecido com o feito utilizando o Swing.

Esse produto possui código aberto (ECHO2, 2007).

GWT

Com o Google Web Toolkit (GWT), é possível transformar uma aplicação feita em Java

em aplicações Web com AJAX integrado ao HTML, CSS e JavaScript. A aplicação já fica pronta

para rodar em qualquer navegador da maneira mais leve possível.

Além disso, o GWT oferece bibliotecas prontas para que qualquer um possa colocar os

recursos de AJAX facilmente em seu site sem precisar maiores conhecimentos de programação.

O GWT foi utilizado pela Google para desenvolver os sites Google Maps e Gmail. Pode ser

integrado com qualquer IDE Java. Existem versões do GWT para Linux e Windows (GWT,

2007).
 44

MOCHIKIT

O Mochikit extrai algumas funcionalidades do Python para sua API. A biblioteca

também é distribuída com a versão do framework do Python para Web, chamada de TurboGears.

O código do Mochikit é muito limpo e fácil de utilizar. Sua estrutura de log é muito boa

(MOCHIKIT, 2007).

PROTOTYPE

O Prototype Implementa um conjunto inteiro de efeitos visuais, assim como o drag-and-

drop e alguns componentes de interface com o usuário. O suporte ao AJAX é razoavelmente

direto e bem desenvolvido, uma vez que foi desenvolvido para Ruby on Rails. O Prototype é um

dos framework mais utilizado. O que contribui para isso é a facilidade de uso de suas funções e

sua documentação bem detalhada. Seu código é todo escrito em JavaScript. Esse produto possui

código aberto (PROTOTYPE, 2007).

SAJAX

O SAJAX (Simple AJAX Toolkit) é um framework para AJAX com implementações do

lado do servidor. Possui implementações para PHP, ASP, ColdFusion, Perl, Python, Ruby entre

outros. Esse produto possui código aberto. (SAJAX, 2007)

SYMFONY

É um Framework desenvolvido em PHP e traz como características a geração de código

tableless e opção de internacionalização. Utiliza o modelo MVC para separação do código

gerado. Esse produto possui código aberto (SYMFONY, 2007).

XAJAX

XAJAX é uma biblioteca de funções em PHP para facilitar o uso de AJAX. São

bibliotecas desenvolvidas como software livre. Os Frameworks SAJAX e XAJAX possuem uma

diferença básica, enquanto no SAJAX o retorno é tratado em uma função JavaScript, no XAJAX
 45

o retorno é feito em uma função do PHP, assim como os comandos e eventos adicionados são

feitos no PHP, resguardando o código JavaScript. O XAJAX também tem a vantagem de

funcionar muito bem nos três principais navegadores: Internet Explorer, Firefox e Opera

(XAJAX, 2007).

XOAD

É um framework desenvolvido em PHP e baseado nos recursos do AJAX. Tem como

característica principal ser orientado a objetos. Utiliza JSON e objetos PHP para fazer a

comunicação entre cliente e servidor. Possui uma documentação bem completa, descrevendo

todas as suas classes, métodos e variáveis. No site oficial, podem ser encontrados vários

exemplos de utilizam deste framework. Esse produto possui código aberto (XOAD, 2007).

Yahoo! UI

A biblioteca Yahoo! UI (YUI) foi desenvolvida pelo Yahoo! para desenvolvimento dos

seus sites e teve seu código aberto junto com uma gama de recursos excelentes para

desenvolvedores. O YUI é mais uma coleção distinta de "utilidades" do que uma biblioteca, com

cinco scripts principais que tratam de: animação, AJAX, manipulação DOM, drag-and-drop,

tratamento de eventos. Existem seis controles, chamados de: Calendar, Slider, Menu,

AutoComplete, TreeView, Container classes (com o qual é possível executar janelas no estilo de

widgets). Todos esses controles possuem exemplos no site do Yahoo para serem baixados. É um

framework voltado para aplicações menores, pois não possui muitos recursos (DEVELOPER,

2007).

2.6. XMLHttp

Segundo cita Gonçalves (2006), o XMLHttp foi desenvolvido pela Microsoft em 2001
 46

como um objeto ActiveX (objetos de programação proprietários da Microsoft) lançado junto com

a biblioteca que suportava o XML para o navegador Internet Explorer, o objeto XMLHttp foi

incluído com a intenção de nada além de manipular objetos XML. Com a propriedade de

manipular objetos XML através de um objeto trabalhando em conjunto com o JavaScript, tornou-

se possível realizar buscas no servidor ser ter a necessidade de recarregar a página.

Como o XMLHttp é um objeto ActiveX proprietário da Microsoft, outros navegadores

não conseguiam utilizá-lo nativamente. Ao invés do Mozilla permitir acesso aos objetos ActiveX,

eles desenvolveram o seu próprio objeto que segundo Gonçalves (2006, p. 5) “ [...] reproduziram

os métodos principais do objeto e propriedades em um objectXMLHttpRequest do seu browser

nativo” possibilitando que esse objeto se tornasse portável para outros sistemas operacionais.

2.7. XMLHttpRequest

XMLHttpRequest é biblioteca permite que requisições HTTP sejam feitas via GET ou

POST sem que haja a necessidade de um refresh na página. E o resultado pode ser obtido como

texto simples (objetoXMLHttpRequest.responseText) ou como objeto DOM que retorna em

formato de XML (objetoXMLHttpRequest.responseXML).

Segundo Gonçalves (2006), requisições realizadas no servidor de aplicação web para

trazer dados via método GET, são requisições feitas através da URL como, por exemplo:

cadastroUsuario.aspx/?id_usuario=4, como é possível verificar na URL de exemplo,

inicialmente está o nome do programa a ser utilizado, seguida por um caractere de interrogação

“?”, o nome da variável, um sinal de igual que indica a atribuição de valor para a variável e o

valor a ser atribuído na variável.

As requisições via método POST são, de acordo com Gonçalves (2006, p.107), “[...]
 47

muito similar ao pedido via GET, mas se diferencia pela quantidade de que podem ser

transmitidas por essa forma”, porém, utilizado para o envio de dados ao servidor. Um exemplo

pode ser visto da seguinte forma: buscaUsuario.aspx/?id_usuario=4&nome=Jose. Como se

pode notar existe o caractere especial & “e-comercial” que é o separador padrão para o envio de

mais de uma variável.

Existem algumas outras propriedades existentes no objeto XMLHttpRequest que serão

apresentados nos exemplos a seguir. São eles: open, send, onreadstatechange, readState,

setHeader, getResponseHeader, getAllResponseHeaders e abort.

Segundo Gonçalves (2006), o método open inicia a comunicação com o servidor, o

método setHeader define o nome da propriedade e o seu valor para o envio do cabeçalho do

documento. O método getResponseHeader retorna o valor de uma propriedade em específico do

cabeçalho, existem ainda o método getAllResponseHeaders que retorna não apenas uma

propriedade conforme o método getResponseHeader, mas todas as propriedades existentes no

cabeçalho. Por fim, existe o método abort, que serve para interromper a requisição atual.

2.8. Funcionamento

Para capturar respostas de páginas dinâmicas, o AJAX utiliza os métodos responseText e

responseXML. Com base em Gonçalves (2006), utilizando a tecnologia JavaScript inserido na

página HTML, o navegador do cliente realiza uma chamada assíncrona por um objeto

XMLHttpRequest que pode retornar ao servidor web para buscar documentos XML. Após obter

este documento XML, se utiliza JavaScript para atualizar o DOM (modelo de objeto) da pagina.

Com isto o usuário obtém a atualização da página sem precisar recarregá-la totalmente.
 48

2.9. Exemplos

Será apresentada a estrutura básica de um código em AJAX, começando com a

inicialização do componente até a apresentação na tela do usuário baseados em Gonçalves

(2006).

Para iniciar um código em AJAX, é necessário instanciar o objeto XMLHttpRequest,

conforme é demonstrado na Listagem 01. Após o objeto ter sido instanciado, o próximo passo é

iniciar a comunicação com o servidor, sendo nesta fase que se é utilizado o método OPEN do

objeto criado permitindo abrir um documento, passar argumentos e receber uma resposta.

objXMLHttpRequest = new XMLHttpRequest();

objXMLHttpRequest.open(“GET”,”/informacoes.xml”)
;
Listagem 01 – Instanciando um objeto e utilizando método OPEN

Analisando o código da Listagem 01, é possível perceber na segunda linha que a página

‘informacoes.xml’ está sendo aberta no segundo par6ametro por meio do método GET passado

no primeiro parâmetro da segunda linha, sendo esses dois parâmetros obrigatórios. É possível

também utilizar o método POST nesse momento, porém ele é mais utilizado quando existem

muitos parâmetros a serem passados à próxima página. É possível ainda, passar outros três

parâmetros opcionais definindo assim o tipo de sincronização (síncrona ou assíncrona) e o nome

de usuário e senha, caso a intenção seja acessar uma página protegida.

Nesse momento é acionado o método SEND que envia de fato os dados ativando a

conexão e fazendo a requisição de informações ao documento aberto pelo método OPEN,

aceitando apenas um único argumento, que é uma string para o envio. Caso não haja um envio, é

necessário que seja passado o valor null que é o mesmo que passar um valor em branco como

pode ser visto na Listagem 02.

 49

objXMLHttpRequest.send(NULL);

Listagem 02 – Utilizando método SEND

Neste momento, já se tem pronto o processo de comunicação restando apenas receber o

retorno das informações, que podem ser efetuados pelas propriedades responseText e

responseXML.

Como visto anteriormente, a propriedade responseText recebe o retorno de informações

no modo de um texto, enquanto que a propriedade responseXML retorna um objeto DOM para

que posteriormente possam ser trabalhadas estas informações. Este retorno das informações pode

ser visto na Listagem 03.

resposta = objXMLHttpRequest.responseXML;

Listagem 03 – Retorno XML

Até o momento, foi apresentada a sequência padrão para a utilização do AJAX, porém,

como a comunicação é feita de forma assíncrona, ou seja, os dados não necessariamente são

carregados ao mesmo tempo em que a página web é apresentada, é necessário verificar em que

momento os dados requisitados estão prontos para serem mostrados na tela do usuário. Para essa

verificação, é utilizada a propriedade onreadstatechange que permite atribuir uma função que é

chamada de acordo com a mudança de estado do documento. Esta atribuição de função pode ser

vista na Listagem 04.

objXMLHttpRequest.onreadstatechange = processadorMudancaEstado;

Listagem 04 – Atribuir Função

Conforme Listagem 04 mostra, a função “processadorMudancaEstado” será chamada

sempre que houver uma mudança no estado do documento que é verificada através da

propriedade readState do objeto XMLHttpRequest. De acordo com Gonçalves(2006), a

propriedade readState possui os seguintes valores:

 50

0 – Não iniciado: O Objeto foi criado, mas o método Open() ainda não foi chamado;

1 – Carregando: O método open() foi chamado mas o pedido ainda não foi enviado;

2 – Carregado: O pedido foi enviado;

3 – Interativo: Uma parte da resposta foi recebida;

4 – Completado: Todos os dados foram recebidos e a conexão está fechada;

Segundo Gonçalves (2006, p. 117), “Toda vez que a propriedade do readState muda de

um valor para outro, o evento de readstatechange dispara e o manipulador de evento

onreadstatechange é chamado”, executando a função atribuída na Listagem 04. Com estes

valores, é possível verificar cada iteração que ocorre no documento, mas o valor mais utilizado é

o 4, quando o processo está completado, pois neste momento se pode saber se a comunicação foi

realizada, como pode ser visto na Listagem 05.

estadoObj = objXMLHttpRequest.readState;

Listagem 05 – Verificando Estado

Porém, se faz necessário ainda se assegurar que o resultado da resposta é 200, pois

mesmo recebendo um retorno de documento completado, não é possível ter a certeza que este

retorno é o esperado ou não, pois, a propriedade status informa, dentre outros códigos, o 404 e o

200, que significam respectivamente, “Documento Não Encontrado” e “OK”. A Listagem 06

mostra um exemplo na de como é utilizada esta propriedade.

estadoServidor = objXMLHttpRequest.status;

Listagem 06 – Resposta do Servidor

Com os exemplos apresentados até o momento, já é possível abrir uma conexão com o

servidor, enviar parâmetros para processamento, receber o retorno das informações fornecidas

pelo servidor e saber qual o momento certo para mostrar o retorno para o usuário. O próximo

passo é mostrar as informações no navegador do usuário que está acessando a página. Esse
 51

processo pode ser realizado por meio da propriedade innerHTML do JavaScript conforme pode

ser observado na Listagem 07.

document.getElementById(‘div_conteudo’).innerHTML = objXMLHttpRequest.responseText;

Listagem 07 – Impressão no Navegador

Neste momento foram apresentados todos os elementos básicos, mas completos para

processar um programa AJAX. Juntando todos os exemplos citados anteriormente, a Listagem 08

mostra como ficaria um programa completo para utilizar o AJAX.

var objXMLHttpRequest = null;

function pegaConteudo() {
try {
objXMLHttpRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
objXMLHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
objXMLHttpRequest = false;
}
}
if (!objXMLHttpRequest && typeof XMLHttpRequest != 'undefined' ) {
try {
objXMLHttpRequest = new XMLHttpRequest();
} catch (e) {
objXMLHttpRequest = false ;
}
}

if (objXMLHttpRequest) {
objXMLHttpRequest.onreadystatechange = processadorMudancaEstado;
objXMLHttpRequest.open("GET", "/dados.html");
objXMLHttpRequest.setRequestHeader('Content-Type','text/xml');
objXMLHttpRequest.setRequestHeader('encoding','ISO-8859-1');
objXMLHttpRequest.send(null);
}
}

(…)
 52

(…)

function processadorMudancaEstado () {
if (objXMLHttpRequest.readyState == 4) { // Completo
if (objXMLHttpRequest.status == 200) { // resposta do servidor OK
document.getElementById ( "div_conteudo"). innerHTML =
objXMLHttpRequest.responseText ;
} else {
alert( "Problema: " + objXMLHttpRequest.statusText );
}
}
}
}

Listagem 08 – Exemplo completo de AJAX

No exemplo apresentado na Listagem 08, é possível observar que foram utilizados todos

os objetos do XMLHttpRequest citados no início do tópico.

2.10. Limitações

Do mesmo modo que o uso do AJAX tem muitos benefícios conforme citado

anteriormente, ele também tem algumas desvantagens. Um dos problemas no uso de AJAX que

pode ser facilmente verificado é a questão de a navegação do usuário não fica no histórico do

navegador, com isso, se o mesmo desejar usar o botão voltar do navegador, poderá não ter o

resultado esperado.

Conforme cita Asleson 2006:

[...] diferentemente dos IFRAMES e quadros ocultos, fazer uma solicitação

através do XMLHttpRequest não alterará a pilha do histórico de seu navegador. Em
muitos casos, isso não importará (quantas vezes você clicou em Voltar só para descobrir
que nada mudou?), mas se seus usuários estiverem esperando que o botão Voltar
funcione, você terá alguns problemas. Outra desvantagem encontrada é de não ser
modificada a barra de endereço, desta forma, fica mais complicada a tarefa de colocar
um botão do tipo, ‘Recomende esta notícia’, ou ainda, salvar nos favoritos um conteúdo
do site visitado.

Existe ainda uma desvantagem no uso do AJAX que está diretamente ligada na

utilização do JavaScript.
 53

Segundo Asleson 2006:

É importante não se exceder com o AJAX. Lembre-se que o código

JavaScript está sendo executado no navegador de seu cliente e ter milhares de linhas de
JavaScript pode tornar muito lenta as experiências de seus usuários. Scripts mal-
codificados podem sair rapidamente de controle, principalmente conforme o volume
aumentar. Neste caso, o que principalmente acontece é que, como você cria vários
códigos JavaScript para validações, atualizações, etc., estes códigos vão todos para o
navegador do usuário, e se este JavaScript for muito grande, o tempo de transferência de
todo este código, pode se tornar um problema.

Outra questão que pode gerar confusões é de o usuário não estar preparado ou

familiarizado com AJAX, ou seja, estar esperando por uma reação do navegador enquanto

acontece outra. No caso de uma mudança de página, o usuário pode estar esperando que toda a

página faça o refresh e, com o AJAX, somente o conteúdo necessário altera. Desta forma, pode

acontecer de o usuário não perceber que o conteúdo já alterou e ficar aguardando muito para

continuar sua navegação.

Para que esse tipo de situação não aconteça, é necessário fazer alguma ação para que o

usuário perceba que algo mudou, como por exemplo, no caso do Gmail do Google, onde para

cada mudança de página, ele apresenta a mensagem “Carregando...”. Isto faz com que o usuário

saiba quando a página está sendo alterada em seu navegador.

 54

3. ESTUDO DE CASO

Para o estudo de caso foi desenvolvida uma aplicação utilizando a infra-estrutura

fornecida pelas extensões AJAX 1.0 da Microsoft ao ASP.NET 2.0. Esta aplicação faz acesso ao

banco de dados SQL Server é utilizada a IDE de desenvolvimento Visual Studio 2005 juntamente

com a biblioteca ASP.NET AJAX 2.0, para a visualização será utilizado o navegador Firefox.

Depois de instaladas as ferramentas citadas anteriormente, é possível verificar todas dos

componentes de bibliotecas das classes .NET que oferecem suporte do lado do servidor e os

arquivos JavaScript que dão suporte do lado do cliente do ASP.NET 2.0 AJAX Extencions 1.0 que

por padrão estão em “C:\Program Files\Microsoft ASP.NET\ASP.NET 2.0 AJAX

Extencions\v1.0.61025”. No Visual Studio é incluída no Toolbox apresentada quando escolhida

para desenvolvimento, um projeto de Web Site a nova aba AJAX Extencions que contém

componentes utilizados para o desenvolvimento de aplicações com AJAX. Este estudo de caso

mostrará a facilidade que um framework fornece para adicionar algumas funcionalidades AJAX

em uma aplicação ASP.NET 2.0.

Criando a nova aplicação Web

Para iniciar com a aplicação, deve-se abrir o Visual Studio e selecionar um novo projeto

escolhendo New Web Site. Na caixa de diálogo, deve ser escolhida a opção ASP.NET AJAX

Enabled Web Site e a linguagem Visual C#.

Construindo a interface

Para o desenvolvimento da interface da aplicação, um arquivo CSS será criado para

padronizar o posicionamento e a formatação dos elementos utilizando a técnica Tableless Layout

 55

que é a utilização de tabelas para ajudar no posicionamento dos elementos.

Abaixo pode ser vista a Listagem 09 que contém todo o código correspondente à

interface da aplicação Web que deve estar inserido na página Default.aspx.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs"

Inherits="_Default"%>
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >

<head id="Head1" runat="server">

<title>Aplicações Web com AJAX</title>
</head>
<body>
 56

<asp:GridView ID="GridViewUsuarios" CssClass="info" runat="server">

<Columns>
<asp:BoundField DataField="Codigo" HeaderText="C&#243;digo">
<ItemStyle HorizontalAlign="Center" />
</asp:BoundField>
<asp:BoundField DataField="nome" HeaderText="Nome">
<ItemStyle HorizontalAlign="Center" />
</asp:BoundField>
<asp:BoundField DataField="rua" HeaderText="Rua">
<ItemStyle HorizontalAlign="Center" />
</asp:BoundField>

Listagem 09 – Código da página Default.aspx

É possível verificar no código que ele faz referências a pseudo-classes que serão

definidas do documento CSS mais adiante. A Figura 10 mostra como é a apresentação da página

Default.aspx no navegador Firefox sem a aplicação do arquivo de CSS.

 57

Figura 10 – Apresentação da página Default.aspx sem CSS

Para definir um arquivo CSS com os padrões de formatação e posicionamento como

disposto anteriormente, dentro do Visual Studio, na janela onde fica definida a estrutura do

projeto, a Solution Explorer deve-se clickar com o botão direito e selecionar a opção Add

ASP.NET Folder e o subitem Theme. Será criada uma pasta com o nome Theme que servirá para

definir um padrão, deve ser modificada para “Padrao” e nesta pasta deverá ser configurado o

padrão para a aplicação. Para adicionar uma folha de estilos, deve ser adicionado um novo Web

Site e ser renomeado para “Estilos.css”. Dentro de Estilos.css deve ser adicionado o código que

consta na Listagem 10.

 58

body, select {
background-color:White;
font-family: Verdana, Arial, Helvetica, Sans-Serif;
font-size: 9pt;
}

select {
border: solid 1px #00460A;
}
 59

table.dados {
border: solid 1px #00460A;
border-collapse: collapse; width: 100%;
}

table.dados tr th
. table.dados tr td {
border: solid 1px #00460A; padding: 3px;
}

table.dados tr th {
border: solid 1px #00460A; color: White;
}

table.dados tr.alt. td {
background-color: #B7D5AB;
}

Listagem 10 – Código CSS

Mesmo depois de criado o arquivo CSS com o código acima, se a aplicação for

executada, os padrões definidos no CSS não serão apresentados. Isso ocorre porque a folha de

estilos ainda não foi vinculada com a página Default.aspx, para que esses padrões sejam

utilizados pela aplicação, deve ser inserido dentro da diretiva @Page da página Default.aspx o

atributo StylessheetTheme que é o atributo responsável pelo vínculo da folha de estilos CSS com

a página Default.asp, ficando semelhante à Listagem 11.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs"

Inherits="_Default" StylesheetTheme="Padrao"%>

Listagem 11 – Código da diretiva @Page

A Figura 11 mostra como vai ficar a página dinâmica Default.aspx depois de aplicada a

folha de estilo Estilos.css.

 60

Figura 11 – Apresentação da página Default.aspx com CSS

Desenvolvendo as funcionalidades em AJAX

Serão apresentadas as funcionalidades de acesso a banco de dados para preencher com

dados do banco de dados os objetos incluídos na página. Para isso, serão utilizados os assistentes

disponibilizados pelo Visual Studio, não havendo a necessidade de escrever uma única linha de

código.

Para carregar o DropDownListGrupos com os Grupos de usuários que existem na base

de dados, deve-se clicar no Smart tag do DropDownListGrupos e marcar a opção Enable

AutoPostBack. Feito isso, para abrir o assistente para conectar no banco de dado, deve-se clicar

em Choose Data Source que aparecerá a janela Configuration Wizard. Na lista Select a data

source, escolhendo a opção New data source, aparecerá a tela Choose a Data Source Type. Deve-
 61

se escolher a opção Database e digitar “SqlDataSourceGrupos”, depois deve-se clickar em OK.

Será apresentada a tela Choose Your Data Source Connection, deve-se clickar em New

Connection. Nesse momento, surgirá a janela Add Connection é necessário colocar as

informações para estabelecer uma conexão com o banco de dados.

Para essa aplicação foi desenvolvido o banco de dados “Usuarios” no SQL Server 2005

com apenas duas tabelas, sendo uma para armazenamento dos grupos de usuários e a outra para o

armazenamento do cadastro dos usuários como está apresentado na Figura 12.

Figura 12 – Tabelas do Banco de Dados

As informações para a conexão com o banco de dados devem ser informadas e acertadas

até que apareça a mensagem Teste connection succeeded ao clickar no botão Test Connection.

Após isso aparecerá uma mensagem perguntando se aceita salvar a string de conexão no arquivo

Web.config, é necessário confirmar e clickar em Next. A tela de Configure the Select Statement,

deve-se escolher a opção Specify a custom SQL statement os stored procedure e clickar em Next.

A próxima tela que irá aparecer é a Define Custom Statements or Stored Procedures, a opção

SQL Statement deve estar marcada e no campo destinado deve-se digitar a instrução SQL que

está definida na Listagem 12 que retorna os grupos e seus códigos. Depois, deve-se clickar em

Test Query para testar a consulta que deve apresentar um Grid com as colunas id_grupo e

descrição. Feito isso, deve-se clickar em Finish para terminar a configuração da fonte de dados
 62

que será utilizada.

A tela Choose a Data Source será mostrada novamente, porém, a lista Select a data

source estará preenchida com a fonte de dados SqlDataSourceGrupos. Na lista Select a data

Field to display in the DropDownList, o campo descricao deve ser selecionado e na lista Select a

data Field for the value of the DropDownList deve-se escolher o campo código. Feito isso, deve-

se clickar em OK para finalizar o assistente.

Para testar se tudo foi configurado da maneira correta, basta executar a aplicação e

verificar se o DropDownListGrupos vem preenchido com os Grupos.

SELECT id_grupo, descricao FROM grupo

Listagem 12 – Consulta de grupos

Para carregar o DropDownListUsuarios deve-se seguir os mesmos passos informados,

alterando apenas o nome do componente DataSource para “SqlDataSourceUsuarios” e utilizar o

código da Listagem 13, que é uma instrução que retorna os Usuários pertencentes ao Grupo

selecionado.
SELECT id_usuario, nome FROM usuario WHERE id_grupo = @id_grupo

Listagem 13 – Consulta de usuários do grupo

Pode-se notar na Listagem 13 que está possui um parâmetro chamado @id_grupo que

será utilizado para informar o código do grupo que está sendo realizada a busca. Por existir este

parâmetro a ser passado, será apresentada a janela Define Parameters onde deve ser selecionado

o parâmetro id_grupo para se definir que o valor do parâmetro deve se obtido por meio do valor

selecionado no DropDownListGrupos, para isso, na opção Control da lista Parameter source e a

opção DropDownListGrupos em ControlID. Feito isso, deve-se clickar em Next e depois em Test

Query para testar a consulta parametrizada. A janela Parameter Values Editor deve ser

apresentada para que seja informado um valor para o parâmetro na coluna Value para realizar um

teste de consulta que deve apresentar um Grid com as colunas id_usuario e nome.
 63

Para carregar os dados do usuário na GridViewUsuarios é necessário seguir os passos

descritos acimas mudando apenas o nome do DataSource para SqlDataSourceDadosUsuario. Na

tela Define Custom Statements or Stored Procedures deve-se informar o código da Listagem 14

que corresponde a uma busca que retorna o Codigo, Nome, Rua, Numero, Cidade, Estado, Email,

Usuario. Porém, esta consulta possui dois parâmetros que são @id_usuario e @id_grupo que

servem para informar o id do usuário e o id do grupo.

SELECT id_usuario AS Codigo, nome AS Nome, rua AS Rua, numero AS Numero,

cidade AS Cidade, estado AS Estado, email AS Email, usuario AS Usuario
FROM usuario WHERE id_usuario = @id_usuario AND id_grupo = @id_grupo

Listagem 14 – Tabelas do Banco de Dados

Como essa consulta possui parâmetros, novamente a janela Define Parameters será

apresentada para serem definidos os parâmetros. Para o parâmetro id_grupo, deve ser defino a

opção Control em Parameter Source e na opção ControlID o DropDownListGrupos e para o

parâmetro id_usuario, deve ser escolhida novamente a opção Control e o DropDownListUsuarios

para a opção ControlID.

Para testar, basta executar a aplicação Web e verificar as novas funcionalidades

selecionando o Grupo e vendo que as opções da segunda lista é alterada.

Apresentação das informações nos rótulos

Até o momento foram utilizados apenas os assistentes do Visual Studio para inserção

das funcionalidades, não sendo necessário escrever uma linha de código para isso.

Serão adicionadas algumas linhas de código para que a LabelUsuario seja atualizada do

lado do servidor com o nome do usuário escolhido. Nos códigos da página Default.aspx, é

necessário acrescentar a propriedade Text ao rótulo com o valor definido do lado do servidor tal
 64

como o código apresentado na Listagem 15.

<asp:Label ID="LabelUsuario" CssClass="info" runat="server"

Text="<%# DropDownListUsuarios.SelectedItem.Text.ToUpper() %>"><br/>
</asp:Label>

Listagem 15 – Vinculação do dado na propriedade Text do rótulo

Aos eventos DataBound e SelectedIndexChanged do controle DropDownListUsuarios

deve ser adicionado o código da Listagem 16 para que exista a atualização do dado vinculado ao

rótulo.

protected void DropDownListUsuario_DataBound(object sender, EventArgs e)

{
LabelUsuario.DataBind();
}

protected void DropDownListUsuarios_SelectedIndexChanged(object sender,

EventArgs e)
{
LabelUsuario.DataBind();
}

Listagem 16 – Atualização dos dados vinculados aos rótulos

Adicionando as Funcionalidades do AJAX na aplicação Web

Para adicionar as funcionalidades do AJAX na aplicação Web, devem ser inseridos os

controles ScriptManager e UpdatePanel que são partes fundamentais para o funcionamento do

ASP.NET AJAX.

O ScriptManager é uma das principais partes do ASP.NET AJAX 2.0 Extensions 1.0,

sendo responsável por gerenciar os recursos do AJAX na página ASP.NET, tais como baixar o

JavaScript da biblioteca AJAX e coordenar as atualizações parciais nas páginas que são

habilitadas com o uso do UpdatePanel, sendo muito importante que o ScriptManager seja

colocado na página ASPX antes de qualquer outro controle que necessite dele como o

UpdatePanel que provoca um retorno ao servidor web (postback) que são automaticamente

configurados como disparadores (trigger) do controle, ou seja, provoca a atualização do conteúdo

 65

desse painel.

Os UpdatePanel são utilizados em conjunto com o ScriptManager para permitir a

atualização parcial da página que melhora a experiência do usuário por motivos como a

diminuição do volume de informações trocadas entre o navegador e o servidor web, redução do

efeito de “piscar” em relação a uma atualização completa do conteúdo e a interface não é

posicionada no início da pagina em cada retorno ao servidor web.

Para adicionar o ScriptManager na página deve-se arrastar o componente

ScriptManager que fica na aba AJAX Extencions do ToolBox para a parte inicial da página. Feito

isso, o componente UpdatePanel deve ser utilizado para delimitar a região de atualização parcial

da página. Na aplicação web Default.aspx, foram utilizados dois UpdatePanel, sendo o primeiro

com o nome de UpdatePanelUsuariosGrupo delimitando o DropDownListUsuario e o segundo

chamado de UpdatePanelUsuario delimitando desde a LabelUsuario até o final da

GridViewUsuarios conforme mostra a Listagem 17.

<asp:UpdatePanel ID="UpdatePanelUsuariosGrupo" runat="server">

<ContentTemplate>
Selecione o Usuário do Grupo: <br />
...
</asp:DropDownList>
</ContentTemplate>
</asp:UpdatePanel>

<asp:UpdatePanel ID="UpdatePanelUsuario" runat="server" >

<ContentTemplate>
<div class="titulo">
Informações do Usuário:
<asp:Label ID="LabelUsuario"

</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>

Listagem 17 – Posicionamento dos controles UpdatePanel

No modo de edição visual da página Default.aspx (designer), devem ser alteradas de

ambos os UpdatePanel as propriedades ChildrenAsTrigger para False o que não permitirá que
 66

seja realizado um retorno ao servidor web pelo controle que está dentro dele, alterar a

propriedade UpdateMode para o valor Conditional que indica que o controle deve ser atualizado

apenas quando solicitado e na propriedade Triggers deve ser adicionado um disparados de

retorno assíncrono (AsyncPostBackTrigger) por meio do botão “...”.

No UpdatePanel UpdatePanelUsuariosGrupo, a propriedade ControlID deve ser

escolhido o DropDownListGrupos e na propriedade EventName deve ser escolhido o evento

SelectedIndexChanged. Para o UpdatePanel UpdatePanelUsuario a propriedade ControlID deve

estar o DropDownListUuarios e na propriedade EventName deve estar definido o mesmo evento

SelectedIndexChanged. A Figura 13 mostra como deve ficar a página Defaul.aspx no modelo de

apresentação Designer da IDE Visual Studio.

Figura 13 – Modelo de apresentação no Visual Studio

 67

Para verificar se está tudo funcionando corretamente, depois de executar a aplicação,

deve-se perceber que ao alterar o Grupo de Usuários do DropDownListGrupos, o

DropDownListUsuariosGrupos será apresentado com os Usuários cadastrados no Grupo

escolhido e após selecionar um dos usuários listados, a GridViewUsuarios irá exibir os dados

referentes ao cadastro desse usuário.

Como o carregamento da página utilizando o AJAX é mais rápido que o carregamento

sem essa funcionalidade, o usuário pode não perceber que a informação já foi carregada e ficar

aguardando a página recarregar por completo, como ele está acostumado. Para evitar esse tipo de

situação, é possível apresentar uma mensagem informativa ao usuário toda vez que houver uma

atualização parcial da página.

Adicionando controle UpdateProgress

Os UpdateProgress são utilizados com a finalidade de apresentar ao usuário o progresso

de atualização parcial da página. Este controle pode sempre ser utilizado em conjunto com um

UpdatePanel para informar ao usuário sobre as atualizações parciais. Para utilização na aplicação

web, o UpdateProgress mostrará ao usuário uma mensagem informativa quando provocada uma

atualização parcial da página.

Pensando nisso, foi colocada uma pseudo-classe chamada mensagemProgresso para

elementos div no arquivo Estilos.css que define um posicionamento absoluto da mensagem de

progresso sobre o formulário HTML de filtragem dos usuários por grupo que pode ser definido

no final do código da página.

Devem ser inseridos dois controles UpdateProgress na parte inferior da página

Default.aspx e a propriedade ID de cada um deve ser definido como

 68

“UpdateProgressUsuariosGrupos” e “UpdateProgressUsuario” e a propriedade

AssiciatedUpdatePanelID devem ser definidas como “UpdatePanelUsuariosGrupo” e

“UpdatePanelUsuario” respectivamente. A propriedade DisplayAfter que define o tempo de

atraso em milissegundos de cada controle deve ser alteradas de “500” para “0”, fazendo com que

a mensagem de progresso seja mostrada imediatamente quando uma chamada assíncrona for

realizada ao servidor para atualizar o painel associado, de forma que o código deve ficar como o

da Listagem 18.

<asp:UpdateProgress
ID="UpdateProgressUsuariosGrupo"
runat="server"
AssociatedUpdatePanelID="UpdatePanelUsuariosGrupo"
DisplayAfter="0">
<ProgressTemplate>
<div class="mensagemProgresso">
Carregando os Usuarios do Grupo...
</div>
</ProgressTemplate>
</asp:UpdateProgress>

<asp:UpdateProgress
ID="UpdateProgressUsuario"
runat="server"
AssociatedUpdatePanelID="UpdatePanelUsuario"
DisplayAfter="0">
<ProgressTemplate>
<div class="mensagemProgresso">
Carregando os dados do Usuario...
</div>
</ProgressTemplate>
</asp:UpdateProgress>

Listagem 18 – Código dos controles UpdateProgress

A Figura 14 mostra mensagem de progresso sendo apresentada quando uma requisição é

feita ao servidor e a aplicação aguarda para receber estas informações para atualizar apenas a

parte referente à requisição realizada pelo navegador do cliente.

 69

Figura 14 – Mensagem de progresso sendo apresentada

Como apresentado na Figura 14, o usuário é informado através da mensagem de

progresso que a aplicação está aguardando uma resposta do servidor para carregar a parte da

página referente à requisição que, no caso, são os dados do Usuário para serem carregados na

tela.

3.1. Resultados obtidos

Com este exemplo de aplicação Web, foi possível perceber que a utilização do AJAX

em uma aplicação Web a torna mais rica, interativa e rápida. A utilização do framework da

Microsoft para o desenvolvimento AJAX permite criar interfaces mais ricas. Outro ponto que

pode ser notado é a agilidade que a utilização do Visual Studio juntamente com o framework

ASP.NET AJAX traz para o desenvolvimento da aplicação que normalmente é bastante

trabalhoso de desenvolver.
 70

A complexidade escondida pela utilização do framework ASP.NET AJAX pode ser vista

nos exemplos citados anteriormente onde, cada objeto deve ser instanciado na aplicação e

atribuído seus valores. Com a utilização do framework, isso fica mais fácil, pois, que faz o

gerenciamento destas informações é o próprio framework, não havendo a necessidade de digitar

uma linha sequer para esses objetos.

O framework fornecido gratuitamente pela Microsoft oferece muitos outros recursos

como acesso a arquivos XML, controles do lado do servidor e manipulação de dados remotos,

direto do browser e sem a necessidade de escrever muito código para isso.

A aplicação desenvolvida possui ainda um comportamento Cross-Browser, ou seja, ela

funciona corretamente com os principais navegadores da atualidade, como: Internet Explorer 5.0

ou superior, Firefox 1.0 ou superior, Apple Safari 1.2 ou superior, Opera 8.0 ou superior e o

Netscape 7.0 ou superior.

 71

CONSIDERAÇÕES FINAIS

As aplicações web utilizam cada vez mais de recursos visuais e mesmo com essa

preocupação e a popularização da internet banda larga, muitas dessas aplicações não tem se

preocupado com a forma que o usuário irá enxergar as informações apresentadas, e por isso,

acabam trazendo informações desnecessárias aumentando o tráfego na rede, o que não é muito

agradável ao usuário.

Visando a solução de problemas semelhantes, este trabalho apresentou a metodologia de

desenvolvimento AJAX, oferecendo informações sobre o que ela é, como ela funciona, onde

utilizá-la e suas limitações com alguns exemplos de empresas que a utilizam o conceito da Web

2.0 com recursos em AJAX.

Além da metodologia AJAX foram apresentados os conceitos de algumas tecnologias

que envolvem esta metodologia de desenvolvimento como, por exemplo, HTML, JavaScript,

XML, DOM e algumas frameworks de desenvolvimento.

Foi apresentado por último um estudo de caso que teve por objetivo, além de mostrar

como implementar uma aplicação web, mostrar também uma framework que auxilia e facilita o

desenvolvimento de uma aplicação web utilizando o AJAX e por último foram dispostos os

resultados obtidos com o desenvolvimento deste estudo de caso utilizando a framework

ASP.NET AJAX 2.0.

Como foi possível verificar por todo o trabalho, o AJAX não é uma tecnologia de

desenvolvimento, mas sim, uma metodologia. Isso porque, as tecnologias que englobam esta

metodologia já são utilizadas há bastante tempo, porém, o nome AJAX foi lançado apenas em

fevereiro de 2005 por Jesse James Garrett na mesma época que Tim O’Reilly lançava o conceito

da Web 2.0, sendo mais dinâmica e voltada para o usuário visando a inteligência coletiva.
 72

REFERÊNCIAS

AJAXLIB. 2007. Disponível em: <http://AJAXlib.sourceforge.net>. Acesso em: out. 2007.

ASLESON Ryan; SCHUTTA, Nathaniel T. Fundamentos do Ajax. Rio de janeiro: Alta Books,

2002.

ATLAS. 2007. Disponível em: <http://atlas.asp.net/atlastoolkit>. Acesso em: out. 2007.

BUENO, Luiz Henrique; SCHAAF, Sergio. Aplicações Web com Visual Studio .NET,

ASP.NET e C#. Rio de janeiro: Alta Books, 2002.

DEITEL, Harvey M.; DEITEL, Paul J. Java Como Programar . Porto Alegre: Bookman, 2003.

DOJO. 2007. Disponível em: <http://dojotoolkit.org>. Acesso em: out. 2007.

DWR. 2007. Disponível em: <http://getahead.ltd.uk>. Acesso em: out. 2007.

ECHO2. 2007. Disponível em: <http://www.nextapp.com/products/echo2>. Acesso em: out.

2007.

FLANAGAM, David. JavaScript – O Guia Definitivo. Porto Alegre: Bookman, 2004.

GONÇALVES, Edson. Dominando o AJAX. Rio de Janeiro: Ciência Moderna, 2006.

GWT. 2007. Disponível em: <http://code.google.com>. Acesso em: out. 2007.

Lemay, Laura. HTML 4. Rio de Janeiro: Campus, 1998.

MOCHIKIT. 2007. Disponível em: <http://mochikit.com>. Acesso em: out. 2007.

PROTOTYPE. 2007. Disponível em: <http://prototype.conio.net>. Acesso em: out. 2007.

SAJAX. 2007. Disponível em: <http://absinth.modernmethod.com/sajax>. Acesso em: out. 2007.

SHEPHERD, George. Microsoft ASP.NET 2.0. Porto Alegre: Bookman, 2006.

SYMFONY. 2007. Disponível em: <http://www.symfony-project.com>. Acesso em: out. 2007.

TURTSCHI, Adrian; WERRY, Jason; HACK, Greg. C#.Net - Guia do Desenvolvedor Web.

Rio de janeiro: Alta Books, 2004.

 73

XAJAX. 2007. Disponível em: <http://www.xAJAXproject.org>. Acesso em: out. 2007.

XOAD. 2007. Disponível em: < http://www.xoad.org>. Acesso em: out. 2007.

YAHOO Mail. 2007. Disponível em: <http://mail.yahoo.com.br>. Acesso em: out. 2007.