EDO0417_14

Prévia do material em texto

PROGRAMAÇÃO PARA INTERNET RICA - EDO0417
Semana Aula: 14
Ajax
Tema
Ajax
Palavras-chave
Objetivos
Neste aula, você aprenderá:
 
O que é Ajax e por que ele é importante para a criação de aplicações ricas para a 
Internet.
 
O que são solicitações assíncronas e como elas ajudam as aplicações Web a terem o 
comportamento das aplicações de desktop.
 
O que é o objeto XMLHttpRequest e como ele é usando para criar e gerenciar 
solicitações assíncronas aos servidores e receber respostas assíncronas dos 
servidores.
 
Os métodos e propriedades do objeto XMLHttpRequest.
 
 
Estrutura de Conteúdo
 
Aplicações ricas para a Internet habilitadas com Ajax
Apesar do enorme crescimento tecnológico da Internet na década passada, a usabilidade das aplicações 
Web ficou; para trás em comparação com a das aplicações de desktop. Cada interação significativa em 
uma aplicação Web resulta um período de espera, enquanto a aplicação se comunica pela Internet com um 
servidor.
 
Aplicações Ricas para a Internet Rich Internet Applications, são aplicações Web que se aproximam da 
aparência, comportamento e usabilidade das aplicações de desktop. As RIAs possuem dois atributos 
fundamentais — desempenho e uma GUI rica. Uma das formas de se conseguir desempenho da RIA vem 
do Ajax (Asynchronous JavaScript and XML), que utiliza a criação de scripts no lado do cliente para 
tornar as aplicações Web mais reativas. Aplicações Ajax separam a interação com o usuário no lado 
do cliente e a comunicação com o servidor, e as executam em paralelo, o que reduz os atrasos 
do processamento no lado do servidor, normalmente experimentados pelo usuário. 
 
O nome AJAX foi idealizado por Jesse James Garrett, que definiu o objeto XMLHttpRequest 
como um componente criado juntamente com o Internet Explorer 5, da Microsoft. 
Foi incorporado aos outros navegadores posteriormente.
 
Vantagens do AJAX
 
Redução de banda 
 
A cada requisição que fazemos no navegador na Web, muitos objetos como menus, rodapé, figuras e 
dados, são carregados e a parte da informação o qual o usuário quer visualizar corresponde a uma peque
na fração do que se vê na página carregada.
Uma grande parte da banda é consumida nas transferências do conteúdo da página que 
esta no servidor até o navegador.
 
Toda e qualquer transferência de dados que ocorre num website usa banda.
Banda é algo que se paga caro.
 
O ponto forte de AJAX esta exatamente na menor taxa de transferência de arquivos entre o servidor e o na
vegador, reduzindo muito mesmo o consumo de banda.
 
Rapidez
 
Utilizando AJAX, ao carregar uma página o usuário terá facilidade e rapidez para buscar uma nova infor
mação já que grande parte dos elementos de uma página estão carregados e visualizados no navegador. Is
to torna a navegação uma tarefa mais ágil e agradável.
 
Interatividade
 
Os elemento básicos de interatividade e usabilidade são disponibilizados de forma a não ter um elevado co
nsumo de banda. AJAX melhora e agrega facilidades para o usuário.
 
Validação de dados
 
É sempre complicado lidar com segurança e principalmente na internet tanto do lado do 
servidor e do navegador do usuário, trabalho dobrado.
Com AJAX todo o processo de validação fica no lado do servidor, que permite ocultar as regras
de negócio.
 
 Interfaces sofisticadas.
 
Fica bastante acessível colocar elementos gráficos de excelente qualidade ser ter a contrapartida de torna
r a navegação mais lenta, pois cada componente não precisa ser novamente carregado a partir do servidor
. Formulários podem ter multiplas ações sem que o mesmo precise ser carregado a cada nova etapa 
de preenchimento. Tudo ocorre pontualmente sem a necessidade de renderizar a página novamente.
 
 
Funcionalidades do Ajax
 
Há muitas maneiras de implementar a funcionalidades do Ajax. O Ajax “puro” usa JavaScript para 
enviar solicitações assíncronas ao servidor, e depois atualiza a página usando o DOM. Ajax “puro” é 
mais adequado para criar pequenos componentes Ajax que atualizam uma seção da página de forma 
assíncrona, mas, ao escrever Ajax “puro”, é preciso lidar diretamente com questões de portabilidade entre 
navegadores, o que torna impraticável o desenvolvimento de aplicações em grande escala. Essas questões 
de portabilidade são ocultadas por kits de ferramentas Ajax, como Dojo, 
Prototype, Script.aculo.us e ASPNET Ajax, que oferecem controles e funções poderosas e fáceis de usar, as 
quais enriquecem as aplicações Web e simplificam a codificação JavaScript, tornando-a mais compatível 
entre os navegadores. 
 
Aplicações Web tradicionais utilizam formulários XHTML para montar GUIs simples e elegantes, em 
comparação com as GUIs ricas do Windows, do Macintosh e de sistemas de desktop em geral. Uma GUI 
rica é obtida nas RIAs com kits de ferramentas Ajax e com ambientes RIA, como Adobe Flex e JavaServer 
Faces. Esses kits de ferramentas e ambientes oferecem controles e funções poderosas e fáceis de usar, que 
enriquecem as aplicações Web. 
 
O lado do cliente das aplicações Ajax é escrito em XHTML e CSS, e usa JavaScript para acrescentar 
funcionalidade à interface com o usuário. Para estruturar os dados passados entre o servidor e o cliente, 
usaremos XML e JSON (JavaScript Object Notation). Em geral, o componente Ajax que gerencia a 
interação com o servidor é implementado com o objeto XMLHttpRequest, que costuma ser abreviado como 
XHR. O processamento no servidor pode ser implementado por meio de qualquer tecnologia no lado do 
servidor, como PHP, ASP.NET, JavaServer Faces e Ruby on Rails. 
 
 
 
 
Aplicações Web tradicionais versus aplicações Ajax 
 
Aplicações Web tradicionais 
 
Nas aplicações web tradicionais primeiro, o usuário preenche os campos do formulário, depois submete-o
O navegador gera uma solicitação ao servidor, que a recebe e a processa. O servidor gera e envia uma resposta que 
contém a página exata que o navegador exibirá e faz o navegador carregar a nova página e apagar temporariamente a 
janela do navegador. Observe que o cliente espera que o servidor responda e recarregue a página inteira com os 
dados da resposta. Enquanto essa solicitação síncrona está sendo processada no 
servidor, o usuário não pode interagir com a página Web do cliente. Os constantes longos períodos de espera, talvez 
devido ao congestionamento na Internet, têm levado alguns usuários a chamar a World Wide Web de “World Wide 
Wait” (rede mundial de espera). Se o usuário interage com outro formulário e o submete, o processo começa 
novamente
 
 
Aplicações Web com Ajax
http://asp.net/
 
As aplicações Ajax acrescentam uma camada entre o cliente e o servidor para gerenciar a comunicação entre os 
dois. Quando o usuário interage com a página, o cliente cria um objeto XMLHttpRequest para gerenciar a 
solicitação. O objeto XMLHttpRequest envia a solicitação ao servidor e espera a resposta. As solicitações são 
assíncronas, de modo que o usuário continua interagindo com a aplicação no lado do cliente, enquanto o servidor 
processa a solicitação anterior simultaneamente. Outras interações com o usuário poderiam resultar em solicitações 
adicionais ao servidor. Quando o servidor responde à solicitação original, o objeto XMLHttpRequest que a emitiu 
chama uma função no lado do cliente para processar os dados retomados pelo servidor. Essa função, conhecida como 
função de callback utiliza atualizações de página parciais para exibir os dados na página Web existente sem 
recarregar a página inteira. Ao mesmo tempo, o servidor pode estar respondendo à segunda solicitação e o cliente 
pode estar começando a fazer outra atualização de página parcial. A função de callback atualiza apenas determinada 
parte da página. Essas atualizações parciais ajudam a tomar as aplicações Web mais ágeis em relação a respostas no 
lado do cliente, tomando-as mais parecidas com as aplicações de desktop. A aplicação Web não carrega uma nova 
página enquanto o usuário interage com ela.
 
 
 
 
XMLHttpRequest
 
Objeto JavaScript Criado dentro de uma função JavaScriptAdotado pelos modernos navegadores
Mozilla, Firefox, Safari, e Opera Comunicação com o servidor via padrão HTTP 
GET/POST Objeto XMLHttpRequest trabalha em background isto não interrompe a operação de usuário.
 
 
var req;
function initRequest(url) {
 if (window.XMLHttpRequest) {
 req = new XMLHttpRequest();
 } else if (window.ActiveXObject) {
 isIE = true;
 req = new ActiveXObject("Microsoft.XMLHTTP");
 }
}
function validateUserId() {
 if (!target) target = document.getElementById("userid");
 var url = "validate?id=" + escape(target.value); 
 initRequest(url);
 req.onreadystatechange = processRequest;
 req.open("GET", url, true); 
 req.send(null); 
}
 
function processRequest() {
 var duplicatereq = req;
 if (req.readyState == 4) {
 if (req.status == 200) {
 ...codigo ...
 }
 }
}
 
 
 
Principais notações e frameworks para AJAX
 
 
? JSON (JavaScript Object Notation)
http://www.json.org/
 
? Dojo Toolkit 
http://dojotoolkit.org/
 
? DWR (Direct Web Remoting)
http://getahead.ltd.uk/dwr/
 
? GWT (Google Web Toolkit)
code.google.com/webtoolkit/ 
 
? Integração de JavaServer Faces (JSF) e AJAX
https://ajax4jsf.dev.java.net/nonav/ajax/ajax-jsf/ 
 
 
 
XMLHttpRequest
 
Objeto JavaScript Criado dentro de uma função JavaScript Adotado pelos modernos navegadores
Mozilla, Firefox, Safari, e Opera Comunicação com o servidor via padrão HTTP 
GET/POST Objeto XMLHttpRequest trabalha em background isto não interrompe a operação de usuário.
 
Para se fazer um pedido HTTP ao servidor usando JavaScript, você precisa de 
uma instância de uma classe que disponibiliza essa funcionalidade. Tal classe 
foi primeiro introduzida no Internet Explorer sob a forma de um objecto ActiveX 
chamado XMLHTTP. Então o Mozilla, o Safari e outros browsers seguiram-se, 
implementando uma classe de nome XMLHttpRequest que suportava os 
métodos e as propriedades do objecto ActiveX original da Microsoft. 
 
Como resultado, em ordem para criar uma instância (objecto) multi-
plataformas da classe pretendida, você pode fazer: 
 
if (window.XMLHttpRequest) { // Mozilla, Safari, ... 
 http_request = new XMLHttpRequest(); 
} else if (window.ActiveXObject) { // IE 
 http_request = new ActiveXObject("Microsoft.XMLHTTP"); 
} 
 
 
Algumas versões de alguns browsers Mozilla não irão funcionar bem se a resposta do servidor não possuir 
um cabeçalho mime-type XML. Para satisfazer isto, você pode usar uma chamada extra a um método para 
ultrapassar o cabeçalho enviado pelo servidor, só no caso de não ser no formato text/xml. 
 
http_request = new XMLHttpRequest(); 
http_request.overrideMimeType('text/xml');
 
https://ajax4jsf.dev.java.net/nonav/ajax/ajax%C2%ADjsf/
A próxima coisa a ser feita é decidir o que quer fazer após receber a resposta do servidor ao seu pedido. 
Nesta etapa você precisa dizer ao objeto HTTP que função JavaScript irá processar a resposta. Isto é feito 
definindo a propriedade onreadystatechange do objeto ao nome da função JavaScript 
que pretende utilizar.
 
http_request.onreadystatechange = nameOfTheFunction; 
 
 
Note-se que não existem chaves após o nome da função e não são passados parâmetros. Também, em vez 
de dar um nome de uma função, você pode usar a técnica JavaScript de definir funções e definir as ações 
que vão processar a resposta.
 
http_request.onreadystatechange = function(){ 
 // do the thing 
};
 
Após ter declarado o que vai acontecer você precisa concluir o pedido chamando os métodos open() e 
send() da classe pedido HTTP:
 
http_request.open('GET', 'http://www.example.org/some.file',true); 
http_request.send(null); 
 
O primeiro parâmetro da chamada do método open() é o método pedido HTML – GET, POST, HEAD ou 
outro método qualquer que queira usar e que seja suportado pelo seu servidor. Mantenha o nome do 
método em maiúsculas para obedecer às normas HTTP senão certos browsers (como o Firefox) podem não 
processar o pedido. 
 
O segundo parâmetro é a URL da página. Como medida de segurança, não pode efectuar pedidos de 
páginas de domínios externos. Certifique que usa o nome exato do domínio em todas as suas páginas ou 
irá receber um erro "Permissão Negada" quando efetua uma chamada open().
 
O terceiro parâmetro define se o pedido é assíncrono. Se TRUE, a execução da função JavaScript irá 
continuar enquanto que a resposta do servidor ainda não foi recebida. Isto é o A de AJAX. 
 
O parâmetro do método send() pode ser constituído por quaisquer dados que pretenda enviar ao servidor 
ao enviar o pedido (POST). Os dados devem estar sob a forma de uma string por exemplo: 
name=value&anothername=othervalue&so=on. Note que se pretende enviar (POST) dados, você deve 
alterar o tipo MIME do pedido usando a seguinte linha: 
 
http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
 
De outra forma o servidor irá ignorar os dados (post). 
 
Lembre-se que quando estava a enviar o pedido, você providenciou o nome d
uma função JavaScript que é criada para lidar com a resposta. 
 
http_request.onreadystatechange = nameOfTheFunction; 
 
Vamos a ver o que é que esta função deve fazer. Primeiro, a função precisa verificar o estado do pedido. 
Se o estado possui o valor 4, isso significa que a totalidade da resposta do servidor foi recebida e que pode 
continuar a processá-la à vontade. 
 
if (http_request.readyState == 4) { 
 // everything is good, the response is received 
} else { 
 // still not ready 
}
 
A lista completa dos valores readyState é a seguinte:
 
0 (uninitialized) 
1 (a carregar) 
2 (carregado) 
3 (interactivo) 
4 (completo) 
 
A próxima coisa a verificar é o código do estado da resposta HTTP do servidor. 
Todos os códigos possíveis estão listados na página W3C. 
Para os nossos objetivos nós só estamos interessados na resposta 200.
 
if (http_request.status == 200) { 
 // perfeito! 
} else { 
 // ocorreu um problema com o request, 
 // por exemplo a resposta pode ser 404 (Not Found) 
 // or 500 (Internal Server Error) 
}
 
Depois de verificar o estado do pedido e o código do estado HTTP da resposta, você estará pronto para 
utilizar os dados que o servidor lhe enviou. Você tem duas opções para acessar esses dados:
 
http_request.responseText 
 
irá devolver a resposta do servidor como uma linha de texto 
 
http_request.responseXML 
 
– irá devolver a resposta do servidor como um objecto XMLDocument que pode percorrer 
usando as funções DOM de JavaScript. 
 
 
 
 
Estratégias de Aprendizagem
Indicação de Leitura Específica
Aplicação: articulação teoria e prática
Leia o capítulo 13 "Aplicações ricas para internet habilitadas com Ajax" de DEITEL, 
Harvey M.; DEITEL, Paul J.. AJAX, RICH INTERNET APLICATIONS E 
DESENVOLVIMENTO: WEB PARA PROGRAMADORES. São Paulo: Pearson 
Prentice Hall Brasil, 2009.
 
Considerações Adicionais