AJAX

Asynchronous Javascript And Xml

 Conceitos Básicos

 Não é uma linguagem de programação, mas um

modelo de utilização das tecnologias existentes

 Baseado em Javascript e nos objetos HTTP

requests

 Comunicação direta do Javascript com o server

através do objeto XMLHttpRequest
 Conceitos Básicos

 Se tornou popular a partir de 2005

 Possibilita a criação de aplicações mais rápidas e

com melhor usabilidade

 Comunicação assíncrona entre o browser e o

servidor
 Conceitos Básicos

 Permite a transferência de pequenos trechos de

informação, ao invés de uma página completa

 Não é necessário criar frames e controlar páginas

separadas
 Conceitos Básicos - Utilização

 Pesquisas instantâneas

 Campanhas personalizadas

 Controle de logout

 Painéis dinâmicos (noticias, cotações etc)

 Controle de estatísticas de acesso, ...

Modelo Clássico VS Modelo Ajax
Fonte: on-line http://www.javalobby.org/articles/ajax/
Fonte: on-line http://www.javalobby.org/articles/ajax/
 Comparativo – Case:

 Para buscar dados em um banco de dados ou

em um arquivo no servidor...

 Ou simplesmente enviar uma informação para

atualização no cliente...
 Comparativo - Sem Ajax

 Enviar requisições através de GET ou POST

 Usuário deve clicar no Submit e Aguardar resposta

do server

 Toda a página é recarregada novamente quando

chega a resposta

 Usuário fica bloqueado até a chegada da resposta

 Comparativo – Com Ajax

 Request feito via Javascript (XMLHttpRequest)

 Processo disparado via script a partir de um evento

 Processo ocorre em background

 Usuário não percebe processo

 Apenas parte da página é atualizada

 Exemplo

Google suggest - Um dos primeiros sites a usar Ajax

http://www.google.com/webhp?complete=1&hl=en
Exemplo
 Standards

 JavaScript
 XML
 HTML
 CSS
 DOM
 Ajax x Browsers

 Ajax: independe da tecnologia do browser ou do web

server

 Objeto XMLHttpRequest suportado:

• Internet Explorer 6.0+,
• Safari 1.2,
• Mozilla 1.0 Firefox,
• Opera 8+
• Netscape 7
 Ajax x Browsers

 Métodos de criação do objeto XMLHttpRequest são

diferentes dependendo do browser:

 IE: ActiveXObject

 Outros: Javascript XMLHttpRequest

 Ajax x Browsers

 No Internet Explorer o objeto XMLHttpRequest é de

natureza ActiveX e possui duas versões:

Microsoft.XMLHTTP
Msxml2.XMLHTTP (Mais recente)
Ajax x Browsers

É necessário alguns tratamentos para ficar

compatível com os browsers...
 Exemplo
<script type="text/javascript">
function minhaFuncaoAjax() {
var xmlHttp;
try { // Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
} catch (e) {
try { // Internet Explorer 6.0+
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
} catch (e){
try { // Internet Explorer 5.5
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
alert(“ Seu navegador não suporta AJAX!");
return false;
}
}
} return xmlHttp;
} </script>
 XmlHttpRequest

 Propriedades principais:

 onreadystatechange

 readyState
 XmlHttpRequest

 onreadystatechange:
 Após chamada ao server é necessária uma
função para receber o retorno
 onreadystatechange é a função que processa
o retorno do server

Exemplo:
xmlHttp.onreadystatechange=function()
{
// code
}
 XmlHttpRequest

• readystate:
• Guarda o status da resposta do server.
• Cada mudança em readystate gera uma
chamada em onreadystatechange
 0: request não inicializado
 1: request configurado
 2: request enviado
 3: request em processamento
 4: request completado
 XmlHttpRequest

• readystate
Exemplo (usar if para testar estado):

xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
// tratar o retorno do servidor
}
}
 XmlHttpRequest

• responseText
Para obter o dado enviado pelo server em forma de texto

Exemplo:

xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4) {
document.form.obj.value=xmlHttp.responseText;
}
}
 XMLHttpRequest

Enviando dados ao server:

Métodos open e send:
 Open: especifica como enviar
 1o. arg: método de envio (get ou post)
 2o. arg: URL do server
 3o. arg: modo assíncrono
 Send: solicita o envio
 Exemplo
<html><body> <script type="text/javascript">
function minhaFuncaoAjax() {
var xmlHttp;
try { // Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
} catch (e) {
try { // Internet Explorer 6.0+
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
} catch (e){
try { // Internet Explorer 5.5
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
alert(“ Seu navegador não suporta AJAX!");
return false;
}
}
}
....
 Exemplo
...
xmlHttp.onreadystatechange=function() {
if(xmlHttp.readyState==4) {
document.meuForm.fuso.value=xmlHttp.responseText;
}
}
xmlHttp.open("GET",“meusite\pesquisafuso.jsp?pais=“+pais, true);
xmlHttp.send(null);
}
</script>

<form name=“meuForm">
Pais: <input type="text” onkeyup="ajaxFunction();" name=“pais" />
Fuso: <input type="text" name=“fuso" />
</form>
</body></html>
 Exemplo – Resgatando Conteúdo XML

 responseXML

Para obter o dado enviado pelo server em forma de documento XML

Exemplo: http://www.w3schools.com/ajax/ajax_responsexml.asp

xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4) {
objXML=xmlHttp.responseXML.documentElement;
}
}
 XMLHttpRequest - Dicas

Open
• Cuidados com o parâmetro de
sincronização
• Padrão “true” que indica assíncrono.
• Caso “false” risco da conexão ficar
aguardando resultado por muito
tempo
 XMLHttpRequest - Dicas

Send
• Utilizar “null” no caso de não enviar
parâmetros quando usar post no método
open().
 Server

 Não existe o conceito de Ajax server

 Páginas em Ajax podem ser providas por

qualquer server
 Exemplo Aplicado – Somente Resultado
function ajaxFunction(URL){
var xmlHttp;
try { xmlHttp=new XMLHttpRequest();
}catch (e){
try{ xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}catch (e){
try { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}catch (e){ return false; }
}
}

xmlHttp.onreadystatechange=function() { // // sobreposição de métodos

if(xmlHttp.readyState==4) { // trata o resultado
if (xmlHttp.responseText== 'true') {
document.getElementById('banner').style.display =
"block";
}

xmlHttp.open("POST",URL,true); xmlHttp.send(null);
}
 Exemplo Aplicado – Somente Resultado

<!-- Conteúdo statico -->

<div style="display:none" id="banner">
<a href="javascript:void(mostra() );">
<img src="/../banner.gif">
</a>
</div>

//Chamada
try{
ajaxFunction("/DOMINIO/servlets/ServletControl?
codUsuario="+codUs);
}
catch(err){}
 AJAX Referências

 Referências
 http://www.w3schools.com/Ajax/Default.Asp
 http://www.w3schools.com/ajax/ajax_example
s.asp
 http://www.apachefriends.org/pt_br/xampp.ht
ml

XML DOM
 http://www.w3schools.com/HTMLDOM/dom_methods.as
p
 Atividades - 1

 Utilizando o conteúdo e exemplos apresentados fazer:

1) Uma página html que tenha referência a um arquivo javaScript
2) O arquivo JavaScript deverá conter uma chamada utilizando o conceito de
ajax para ler um arquivo XML.
3) Elaborar um arquivo XML que possua informações a serem apresentadas no
HTML.
4) Formatar o resultado no HTML.
5) Utilizar um servidor WEB.

Material de Apoio:
http://www.apachefriends.org/pt_br/xampp.html
http://www.w3schools.com/Ajax/ajax_examples.asp
 Atividade Extra
1) Um arquivo XML contendo dados fictícios :
1.1) Listagem dos Cursos de Informática (Análise, Ciência e Engenharia
1.2) Listagem das disciplinas para cada curso (Mínimo 3 para cada)
1.2) Listagem dos alunos inscritos em cada curso (Mínimo 4 para cad

2) Demonstrar em um formulário:
2.1) Para cada curso as respectivas disciplinas
2.2) Para cada disciplina os respectivos alunos