Aprenda sobre AJAX: Características, Tecnologias Utilizadas, Casos de Uso e Mais, Notas de estudo de Informática

Baixe Aprenda sobre AJAX: Características, Tecnologias Utilizadas, Casos de Uso e Mais e outras Notas de estudo em PDF para Informática, somente na Docsity!

• Características

– Modelo assíncrono

– Interface mais natural e intuitiva

– Atualização parcial da tela

• Apenas os elementos que contêm novas informações são atualizados
• Não há perda de contexto

– Fluxo baseado em dados

Usuário (^) HandlerEvent Servidor

1: Ação

3: Processamento

Response Handler

2: Requisição

4: Resposta

5: Atualizar Interface

• Casos de uso para AJAX
  • Validação em tempo real com lógica no servidor
    • Ex: Verificar disponibilidade de um login de usuário
  • Auto completar
    • Ex: Google Suggest
  • Operações MestreD etalhe
    • Ex: Carregamento de comboboxes
  • Componentes de interface avançados (widgets)
    • Ex: Árvores, menus, barra de progresso.
  • Notificação proveniente do servidor
    • Simulada através de requisições periódicas

• Tecnologias Utilizadas

– HTTP, Formulários

• É uma requisição HTTP comum

– Programação do lado do servidor

• O servidor ainda é necessário
• JSP, Servlets, JSF, Struts

– XMLHttpRequest

• Objeto JavaScript que fornece a comunicação assíncrona com o servidor

• XMLHttpRequest
  • Objeto JavaScript
  • Adotado pelos navegadores modernos
    • Primeira implementação nativa no Mozilla 1.0 (2002)
  • A World Wide Web Consortium publicou uma especificação como “Working Draft” em 5 de abril de 2006
  • No Internet Explorer é um controle ActiveX chamado MSXML - O IE7 irá suportar o objeto XMLHttpRequest de forma nativa

• Métodos do XMLHttpRequest

Interrompe uma requisição que está sendo processada.

abort()

getResponseHeader(label) Retorna o cabeçalho HTTP associado aolabel

Retorna uma lista de todos os cabeçalhos HTTP da resposta

getAllResponseHeaders()

send(postdata) Executa a requisição HTTP.

Associa um valor a um cabeçalho HTTP antes de fazer a requisição.

setRequestHeader(label, value)

Abre e prepara uma requisição HTTP identificada pelo método e URL. asynchFlag indica se a comunicação deve ser assíncrona ou não.

open(method, URL, asyncFlag, username, password)

Método Descrição

• Propriedades do XMLHttpRequest

Status HTTP recebido do servidor 200 = OK 403 = Forbidden 500 = Internal Error ...

status

Estado atual da requisição, pode ser: 0 = não iniciada 1 = iniciando conexão 2 = conexão estabelecida 3 = em atividade (algum dado foi recebido) 4 = completa

readystate

Informa a função JavaScript que deve ser chamada a cada mudança de estado

onreadystatechange

Propriedade Descrição

• API DOM (Document Object Model)

– Os navegadores mantém uma representação

dos documentos que estão sendo exibidos

• Disponível pelo objeto JavaScript document

– A API DOM permite que código JavaScript

altere a árvore DOM programaticamente

• Exemplos:
  • Adicionar uma nova linha a uma tabela
  • Alterar o conteúdo de uma DIV
  • Alterar o estilo CSS de um elemento