Desenvolvimento WEB II Introdução ao AJAX Professora: Kelly de Paula Cunha.
-
Upload
jessica-bastos-pinhal -
Category
Documents
-
view
215 -
download
4
Transcript of Desenvolvimento WEB II Introdução ao AJAX Professora: Kelly de Paula Cunha.
Desenvolvimento WEB IIIntroduçã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 AJAXComo 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 AJAXAtividade 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 AJAXCriaçã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 AJAXCriaçã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 AJAXconfig.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));