O documento discute técnicas de carregamento assíncrono de conteúdo na web usando Ajax e jQuery. Apresenta como Ajax utiliza JavaScript e XML para recuperar dados de servidores e popular conteúdo dinâmico sem recarregar páginas. Também explica como jQuery simplifica o uso de Ajax através de funções como $.get, $.post e $.ajax.
2. Ajax
Asynchronous JavaScript and XML;
Linguagem de programação?
Técnica de carregamento de conteúdos;
Utiliza JavaScript e XML;
Pode recuperar HTML, TXT, PHP, ASP, JSON
ou qualquer linguagem de marcação ou
programação capaz de ser recuperada
de um servidor;
4. XMLHttpRequest
O que é?
Objeto XMLHttpRequest (Requisição XML
com o uso do protocolo HTTP).
Foi inventado pela Microsoft;
Atender necessidade de um cliente de email
que rodava em um browser;
Implementado inicialmente no IE 5.0;
O IE 7.0- usa o ActiveXObject enquanto os
outros browsers usam o objeto interno do
JavaScript.
5. XMLHttpRequest
Em 2006 o W3C publicou as primeiras
especificações para tornar o
XMLHttpRequest uma recomendação
oficial;
8. Exemplo de Requisição
var requisicaoAjax = iniciaAjax();
if (requisicaoAjax){
requisicaoAjax.onreadystatechange = funciton(){
If (requisicaoAjax.readyState==4){
alert(“Chegou a requisição feita ao servidor”);
}
};
requisicaoAjax.open(“POST”, “/requisicoes/arquivo-
requisitado.php?”. true);
requisicaoAjax.setRequestHeader(“Content-Type”,
“application/x-www-form-urlencode”);
requisicaoAjax.send(“produto=mouse+sem+fio&mod
elo=Microsof”);
}
9. Requisição e inserção Ajax
Requisição TXT:
Mostraremos o conteúdo de um arquivo.txt em
uma caixa de alerta.
Exs: ajaxtext.js, arquivo-1.6.1a.php
Requisição HTML:
A função mostraResposta(requiscaoAjax) foi
adaptada para requisição de um arquivo
HTML.
Conteúdo mostrado em uma div
id=insere_aqui, usamos a propriedade
JavaScript innerHTML.
Exs: ajaxhtml.js, arquivo-1.6.2a.php
10. Vantagens no uso do Ajax
Possibilita uso de recursos desktop em
sistemas Web;
Reduz o tráfego de dados entre cliente e
servidor;
Maior aproveitamento do processamento
no lado cliente;
AJAX não é uma tecnologia por isto não
é necessário pagar para a utilizar.
11. Problemas no uso do Ajax
AJAX não é a solução milagrosa para todos os
males e se usado de forma inadequada pode
piorar uma situação que já era feia;
Os Navegadores usam diferentes métodos por isso
temos que estar atentos quanto a eles para não
impossibilitar o uso de nossos sistemas por tais
navegadores;
Como existe uma divisão de processamente entre
o cliente e o servidor, temos que minimizar este
processamento pois os Navegador em geral não
suporta uma carga muito pesada de scripts;
Os botões voltar, avança e histórico não
funcionam muito bem com AJAX.
12. Ajax e JavaScript
Escreve muito;
Trabalho árduo para o desenvolvedor;
Pouco Resultado;
Qual a solução?
Utilizar a biblioteca jQuery;
13. jQuery
O que é?
Biblioteca JavaScript disponibilizada
como código livre
Criada por John Resig
Foco principal é a simplicidade
Não é necessário conhecer JavaScript a
fundo
15. jQuery - Função $.get
Função $.get
Requisição HTTP com o uso do método GET.
Admite apenas uma função callback a ser
executada ao fim da requisição em caso de
sucesso.
Para tratamento de erros deve-se usar a
$.ajax()
$.get(url, [data], [callback], [tipo])
16. jQuery - Função $.get
url: O URL do arquivo requisitado
data: Dados no formato chave/valor a
serem enviados ao servidor (facultativo).
callback: Função a ser executada após o
carregamento do arquivo requisitado.
tipo: tipo do dado da requisição.
Ex: “html”
17. Requisições Ajax - Função
$.get
Exemplo:
$.get(exemplo-get.php,
{nome: “Danilo”, cidade: “Itabuna”},
function(data){
//manipular os dados retornados
},
“html”)
18. jQuery - Função $.get
Exemplos:
exemplo-get.php - processa dados
enviados ao servidor e retorna uma
resposta ao usuário.
arquivo-2.2a.php – envia um nome e o
nome de uma cidade para serem
processados pelo arquivo anterior.
arquivo-2.2b.php – o usuário entra com os
nomes para serem processados em
exemplo-get.php
19. jQuery - Função $.post
Função $.post
Requisição HTTP com o uso do metodo
POST.
Admite só uma função callback a ser
executada ao término da requisição se
esta for bem sucedida.
$.post(url, [data], [callback], [tipo])
20. jQuery - Função $.post
url: O URL do arquivo requisitado
data: Dados no formato chave/valor a
serem enviados ao servidor .
callback: Função a ser executada após o
carregamento do arquivo requisitado.
tipo: tipo do dado da requisição.
Ex: “html”
22. jQuery – Função $.ajax
Semelhante ao $.get e $.post
Fornece a possibilidade de receber vários
parâmetros
Considerada uma função de baixo nível
$.ajax(opções)
26. Evento ajaxStart
Ocorre quando se inicia uma requisição
AJAX e nenhuma outra atividade está em
curso na página.
ajaxStart(callback)
Função callback a ser executada por
ocasião da ocorrência do evento.