Desenvolvimento WEB II
Introdução ao AJAX
Professora: Kelly de Paula Cunha
Introdução ao AJAX
• Aplicações web criadas até agora:
– Necessário recarregar as páginas para que
modificações fossem mostrados na tela do
navegador
– Eram feitas requisições ao servidor e o retorno era
feito em outra página
Introdução ao AJAX
• Aplicações web criadas até agora:
Ex: No CadAgenda se você quisesse alterar os dados
de uma pessoa, você precisava inserir o Código dela,
e os dados que gostaria alterar, para só então clicar
no botão enviar (e ser feita uma requisição para o
servidor), cuja resposta era apresentada em uma
nova página.
Introdução ao AJAX
Exemplo:
Introdução ao AJAX
• Aplicações web criadas até agora:
- Mas seria interessante se, ao digitar o Código da
pessoa, o programa já o enviasse para o servidor
- O servidor buscasse no banco de dados se aquele
Código existe no banco de dados
- Em caso negativo, retornasse uma mensagem de
erro antes mesmo de o usuário digitar os dados que
deseja alterar.
Introdução ao AJAX
Exemplo:
Introdução ao AJAX
Exemplo:
Introdução ao AJAX
Modelo de comunicação síncrona:
Chamadas e respostas sequenciais ao servidor, ou
seja, é necessário receber a resposta da requisição
anterior, antes de enviar a próxima requisição.
Introdução ao AJAX
Modelo de comunicação assíncrona:
Ao enviar uma requisição ao servidor, não é
necessário receber a resposta para que outros
processos sejam executados.
Introdução ao AJAX
Asynchronous JavaScript And XML (AJAX):
- O termo surgiu em fevereiro de 2005, por Jesse
James Garrett
- Artigo on-line intitulado “Ajax: A New Approach to
Web Applications”.
Introdução ao AJAX
Asynchronous JavaScript And XML (AJAX):
É um conj. de tecnologias que permite melhorar a
interatividade das aplicações web, utilizando-se de
solicitações assíncronas de informações
Não é uma tecnologia e sim o uso de tecnologias
incorporadas.
Principais tecnologias que compõem o AJAX:
JavaScript e o XML.
Introdução ao AJAX
Outras tecnologias que compõem o AJAX:
 HTML/XHTML e CSS: juntos compõem a apresentação visual da
página Web.
 Document Object Model (DOM): exibe e interage com o
usuário
 XML e XSLT: fazem o intercambio e manipulam os dados;
 XMLHttpRequest: recupera dados de forma assíncrona;
 JavaScript: a linguagem de scripts do lado cliente que une essas
tecnologias.
Introdução ao AJAX
Onde usar o AJAX?
Em situações na web em que se deseja que o
retorno a uma solicitação seja feito em tempo real.
Introdução ao AJAX
Exemplos:
1) Em mecanismos de busca, á medida que
digitamos uma palavra aparece um conjunto de
frases envolvendo essa palavra automaticamente.
Introdução ao AJAX
Exemplos:
2) No preenchimento de formulários, quando você
digita o CEP e já aparece o nome da rua.
Introdução ao AJAX
Principais aplicações do AJAX:
Validação em tempo real: validações que não
podem ser feitas do lado do cliente, como, por
exemplo, verificar se o usuário já esta cadastrado.
Introdução ao AJAX
Principais aplicações do AJAX:
Auto Completion: possibilita que, ao mesmo tempo
que o usuário digita, aparece uma lista de possíveis
respostas.
Introdução ao AJAX
Principais aplicações do AJAX:
Visualização de detalhes de um item: em vez de
carregar todos os dados do item na tela, pode se
mostrar os detalhes de um item em um local
diferente quando ele é selecionado.
Introdução ao AJAX
Principais aplicações do AJAX:
Controles de interface de usuário sofisticados:
controles dinâmicos como árvore de diretórios,
menus, barras de progresso etc. podem ser
implementados sem a necessidade de refresh da
página
Introdução ao AJAX
Principais aplicações do AJAX:
Atualização de dados na página: atualização de
informações na página em tempo real possibilita,
por exemplo, o desenvolvimento de chats,
acompanhamento de ações na bolsa, publicação de
notícias, etc.
Introdução ao AJAX
Vantagens de AJAX:
Troca mensagem entre o cliente e o servidor de
forma assíncrona, ou seja, envia requisições e
continua o processamento sem precisar aguardar
a resposta.
Respostas às requisições na mesma página sem
necessidade de refresh
Introdução ao AJAX
Vantagens de AJAX:
 Outros processos podem ser executados em
paralelo às requisições/respostas.
Introdução ao AJAX
Desvantagens de AJAX:
 AJAX é principalmente JavaScript que executa no
navegador do usuário. Se for desativado o
processamento de JavaScript no navegador a
aplicação falha.
Introdução ao AJAX
Desvantagens de AJAX:
 A programação JavaScript necessária para
desenvolver aplicações web com AJAX é complexa,
principalmente na manipulação de conteúdo XML
geralmente retornado como resultado de pesquisa
ao banco de dados.
Introdução ao AJAX
Como o AJAX funciona?
Introdução ao AJAX
Como o AJAX funciona?
Em vez do modelo de aplicação Web tradicional,
onde o próprio browser é responsável por iniciar os
pedidos e processar os pedidos do servidor Web
O modelo AJAX prove uma camada intermediária
para controlar esta comunicação
Introdução ao AJAX
Como o AJAX funciona?
O AJAX contém um mecanismo que na verdade é
um conj. de funções escritas em JavaScript que são
chamadas sempre que uma informação precisa ser
pedida ou enviada ao servidor.
Introdução ao AJAX
Como o AJAX funciona?
O servidor antes serviria: HTML, imagens, CSS ou
JavaScript
Agora: é configurado para devolver dados que o
mecanismo do AJAX possa usar. Estes dados podem
ser textos simples, XML, etc.
Introdução ao AJAX
Como o AJAX funciona?
Quando o mecanismo do Ajax recebe a resposta do
servidor, inicia-se a análise dos dados, onde são
aplicadas transformações para trazer a informação
de forma agradável ao usuário.
Introdução ao AJAX
Atividade 7
Criar um novo projeto, e seguir as instruções do
Capítulo 17 do livro WEB TOTAL, Pág. 230.
Encontra-se disponível:
- Na biblioteca do instituto
- No Moodle (versão pdf)
Introdução ao AJAX
Criação do arquivo config.css
 Clique com o botão direito no nome do projeto
na aba Projetos, selecione a opção Novo e clique
na opção Outro.
Na divisão Categorias, selecione Outro, em Tipos
de arquivo selecione a opção Cascading Style
Sheets e clique no botão Próximo.
Atribua o nome config.css ao arquivo no campo
Nome do arquivo CSS, selecione Páginas Web no
campo Localizações e clique no botão Finalizar
Introdução ao AJAX
Criação do arquivo config.css
O arquivo config.css é uma folha de estilo que foi
utilizada para formatar os elementos do menu
(index.jsp) e demonstrar que o conteúdo HTML dos
arquivos JSPs pode ser estilizado pela linguagem
CSS.
Introdução ao AJAX
config.css
*{
margin:0px;
}
ul{
list-style: none;
background-color: #E6E6FA;
padding-top: 7px;
padding-bottom: 7px;
text-align:center;
}
ul li{
padding-left:30px;
display:inline;
}
a{
text-decoration: none;
font-family:verdana;
font-size:14pt;
color:#000000;
}
a:hover{
text-decoration:underline;
color:#0000ff;
}
Introdução ao AJAX
Código para criação da tabela cliente no banco de
dados Bd007:
create table cliente (
id integer (10) not null,
nome varchar (50),
renda decimal (10,2),
primary key (id)
);