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));