Introdução ao AJAX

Prévia do material em texto

Aula 10 – AJAX 
 
Introdução 
Nesta aula, veremos a diferenciação superficial dos três ambientes para a linguagem Java: JME, JSE e JEE. Serão 
abordadas as diferentes formas de atribuição de valores, bem como os controles de fluxo. Serão abordados, 
também, os conceitos básicos de orientação a objetos, aliados diretamente às palavras reservadas da linguagem 
Java. Finalmente, serão apresentados os elementos básicos utilizados no controle de erros, particularmente as 
palavras-chave utilizadas no controle do fluxo de erros, como try, catch e finally. 
 
Introdução ao AJAX 
 
O AJAX surgiu para resolver um problema que ocorre desde o surgimento da Internet: que é o de que a interação é 
feita de forma síncrona, ou seja, exige-se que, para cada solicitação em uma página Web, atualize-se a página inteira 
no navegador. Não importava se a atualização era só de uma pequena parte da página, toda a página era recebida 
pelo servidor e a página era toda redesenhada e retornada para o navegador Web. 
 
O AJAX é uma nova tecnologia em ascensão e, embora seja incontestavelmente atual, não é realmente novo. Ajax 
não é por si só tecnologia, mas sim uma forma de mesclar outras tecnologias que já conhecemos a fim de tornar 
páginas Web mais interativas. Ele já existe desde o final da década de 90. Reúne várias tecnologias Web bem 
estabelecidas e as usa de maneira nova e interessante. 
 
Fonte: LIMEIRA, J.L.S. Utilização de AJAX no Desenvolvimento de Sistemas Web. Monografia (Especialização em Web 
e Sistemas de Informação). 
 
Os princípios do Ajax separam elegantemente o cliente do servidor e podem ser utilizados com qualquer linguagem 
server-side. O Ajax (Asynchronous JavaScript +XML) é um nome relativamente novo, criado por Jesse James Garret, 
da Adaptive Path. 
 
Utilizado inicialmente pelo Microsoft Internet Explorer® e adotado posteriormente pelos demais navegadores, o 
AJAX é uma forma arrojada de uso de Javascript e XML que permite a criação de um objeto Ajax (Javascript). Este 
objeto consegue acessar outra página e receber o retorno de informação (sem sair da primeira página). 
 
A informação recebida pode ser tratada dentro do código (da página onde o objeto existe), permitindo ao 
desenvolvedor uma maneira progressista na criação de sua interface, de forma a enriquecer e agilizar a experiência 
do usuário dentro do sistema. 
 
Uma das características deste objeto é que o mesmo pode comportar-se de uma forma assíncrona em relação à 
página HTML. Ou seja, enquanto a página continua a ser carregada (parcial ou totalmente), o objeto funciona em 
paralelo, correspondendo-se com a página destino até receber a informação desejada (ou algum erro ocorrer). 
[Fonte] 
 
Antes do surgimento do AJAX, alguns subterfúgios eram utilizados para amenizar esse problema. A utilização de pré-
carregamento dos dados, frames e iframes nunca resolveram o problema da maneira mais eficiente. Em alguns 
casos, apenas davam a falsa impressão de que a página não era toda atualizada, quando, na verdade, os dados já 
estavam carregados e apenas eram escondidos até serem necessários. Em outros casos (frames ou iframes), eram 
carregadas partes da página e, geralmente, trafegavam mais informações do que era realmente necessário. [Fonte] 
 
Com o AJAX pode-se trafegar apenas os dados que realmente foram atualizados em uma página Web e, assim, 
ganhar em desempenho e interatividade com o usuário. O seu uso é recomendado, principalmente, para páginas 
que utilizem validações e preenchimento de formulários. 
 
Exemplificando o AJAX 
 
Praticamente todos os navegadores, em suas últimas versões, são compatíveis com as técnicas utilizadas no AJAX, 
viabilizando o seu uso em qualquer aplicação Web. 
 
Na figura, pode-se visualizar a estrutura tradicional da Web com o fluxo das informações: toda a página Web é 
transferida entre o servidor e o navegador cada vez que é solicitada qualquer informação da página. 
 
 
 
Estrutura de uma aplicação Web tradicional 
Fonte: SOUSA, M. Unindo JavaServer Faces a Ajax: melhorando o processo de desenvolvimento Web. 
 
Na figura, observa-se um fluxo de informações utilizando AJAX. Neste caso, o navegador interage com o servidor, 
passando apenas as informações solicitadas e apenas nos momentos que realmente são necessárias, evitando, 
assim, o tráfego de toda página a cada requisição. 
 
 
 
Funcionamento 
 
Pode-se afirmar que o Ajax dá vazão a uma grande quantidade de potenciais não realizados nas tecnologias dos 
navegadores Web. 
 
O Google e alguns outros dos principais competidores estão utilizando o Ajax para aumentar as expectativas do 
público em geral sobre o que um aplicativo Web pode fazer. 
 
Com o Ajax, o fluxo de trabalho do usuário não é interrompido pela necessidade de se comunicar com o servidor. As 
solicitações são assíncronas. E isto significa que alguns recursos da página permanecem acessíveis enquanto a página 
(navegador) coleta novos dados do servidor. E isto significa, também, economia de largura de banda. 
 
Atenção! 
 
Pode-se concluir, portanto, que um aplicativo Ajax é um código que se comunica eficientemente com o servidor 
enquanto o usuário prossegue com seu trabalho. 
 
Exemplo: 
 
• Carrega um arquivo chamado texto.txt. 
• Insere seu conteúdo no DIV cujo id é texto. 
 
 
 
Métodos: 
 
open (mode, url, boolean): 
 
• mode é POST ou GET; 
• url é o endereço, pode ser relativo; 
• o último parâmetro é TRUE para conexão assíncrona e FALSE para 
 conexão síncrona. 
 
send(): método que ativa a conexão e faz a requisição de informações ao documento aberto pelo método OPEN; 
 
Atributos: 
 
status: status do retorno do html. São códigos padrões do HTML: 200 ok, 400 no found; 
 
responseText: retorna a cadeia de caracteres que o servidor enviou; 
 
onreadystatechange: define qual função será chamada para fazer a manipulação dos dados assim que houver um 
retorno; 
 
readyState: código que informa o status da solicitação: 
• 0 (uninitialized); 
• 1 (a carregar); 
• 2 (carregado); 
• 3 (interactivo); 
• 4 (completo). 
 
Atenção! 
 
Para exibir o resultado da consulta podemos usar dois métodos: innerHTML ou DOM: 
 
 innerHTML: simplesmente interpreta o texto que vem do servidor como sendo HTML e joga dentro do 
objeto de destino; 
 
 DOM (Modelo de Objeto de Documentos): é a definição da estrutura lógica dos documentos e o meio pelo 
qual um documento é acessado e manipulado. 
 
Elementos – chave 
 
Como já mencionado, o Ajax não é uma tecnologia única. Trata-se de uma coleção de quatro tecnologias que se 
complementam. A tabela a seguir ilustra essas tecnologias e o papel de cada uma: 
 
 
 
Três das quatro tecnologias têm sido referidas coletivamente como Dynamic HTML, ou abreviando, DHTML. A 
DHTML era, em 1997, a grande promessa sobre a evolução de páginas Web. Oferecia a capacidade de criar 
interfaces interativas não convencionais para páginas Web, mas mesmo assim nunca superou o problema da 
atualização de página inteira. O Ajax usa maciçamente a DHTML, mas acrescentando as solicitações assíncronas, ele 
pode estender a longevidade de uma página Web consideravelmente. 
 
Todas essas tecnologias já estão pré-instaladas nos navegadores Web mais modernos, incluindo o Microsoft Internet 
Explorer, a família dos navegadores Mozilla, incluindo Firefox, Netscape, Opera, Safari da Apple e Konqueror. 
 
 
 
 
 
Felizmente, existem maneiras de lidar com a incompatibilidade de múltiplos navegadores, mas são frustrantemente 
trabalhosas, apesar de que essa situação foi amenizada nos últimos anos. Os navegadores presentes em PDAs e 
Smartphones geralmente oferecem uma lista reduzida de recursos e não suportam a linha completa das tecnologias 
Ajax. Por enquanto, o Ajax é principalmente uma tecnologia para máquinas desktop e laptop. Até mesmo porque as 
telas reduzidasde PDAs e métodos de entrada provavelmente seriam um problema, mesmo se eles suportassem 
integralmente o Ajax.