Desenvolvimento WEB II Introdução ao AJAX Professora: Kelly de Paula Cunha.

Apresentação em tema: "Desenvolvimento WEB II Introdução ao AJAX Professora: Kelly de Paula Cunha."— Transcrição da apresentação:

1 Desenvolvimento WEB II Introdução ao AJAX Professora: Kelly de Paula Cunha

2 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

3 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.

4 Introdução ao AJAX Exemplo:

5 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.

6 Introdução ao AJAX Exemplo:

7 Introdução ao AJAX Exemplo:

8 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.

9 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.

10 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”.

11 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.

12 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.

13 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.

14 Introdução ao AJAX Exemplos: 1) Em mecanismos de busca, á medida que digitamos uma palavra aparece um conjunto de frases envolvendo essa palavra automaticamente.

15 Introdução ao AJAX Exemplos: 2) No preenchimento de formulários, quando você digita o CEP e já aparece o nome da rua.

16 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.

17 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.

18 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.

19 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

20 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.

21 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

22 Introdução ao AJAX Vantagens de AJAX:  Outros processos podem ser executados em paralelo às requisições/respostas.

23 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.

24 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.

25 Introdução ao AJAX Como o AJAX funciona?

26 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

27 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.

28 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.

29 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.

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

31 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

32 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.

33 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; }

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