aplicações web com ajax

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 dragand-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-anddrop 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, tornouse 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 malcodificados 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ó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, devese 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”
AssiciatedUpdatePanelID
devem
e
“UpdateProgressUsuario”
ser
definidas
como
e
a
propriedade
“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.