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.

1. Ajax
Anderson Rodrigues
Danilo Guimarães
com
jQuery

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;

3. Ajax
 Popularizou-se em 2005 através do
google suggest;

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;

6. XMLHttpRequest
 IE 5.0 e 6.0 utilizam ActiveX .
 Demais browsers utilizam objeto nativo JS;

7. Funcionamento Ajax

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

14. Ajax e jQuery
 Principais funções eventos jQuery
(manipulação ajax):
 $.get();
 $.post();
 $.ajax();
 ajaxStart;
 ajaxStop;

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”

21. jQuery - Função $.post
 Exemplo:
$.post(exemplo-post.php,
{nome: “Anderson”, email:
“andereson@pweb.com”, comentario:
“Texto...”},
function(data){
//manipular os dados retornados
},
“html”)
 Arquivo exemplo: arquivo-2.2c.php

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)

23. jQuery – Função $.ajax
 Parâmetros
 async{true, false}
 beforeSend {function(){....}}
 cache{true, false}
 complete {function(){....}}
 contentType{„text/XML‟,‟application/x-
www-form-urlencoded‟}
 data{campo1: „valor1‟, campo2: „valor2‟}

24. jQuery – Função $.ajax
 Parâmetros
 dataFilter{function(){....}}
 dataType{xml, html script, json, jsonp, text}
 error {function(){....}}
 global{true, false}
 ifModified{function(){....}}
 url{string}
 type{„GET‟, „POST‟, „PUT‟, „DELETE‟ }

25. jQuery – Função $.ajax
 Parâmetros
 sucess{function(){....}}
 Timeout{function(){....}}

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.

27. Evento ajaxStart
 Exemplo:
$(„#carregando‟).ajaxStart(function(){
$(this).show(„slow‟);
});

28. Evento ajaxStop
 Ocorre quando todas as atividades de
uma requisição Ajax chegam ao fim.
 Sintaxe semelhante à AjaxStart.
ajaxStop(callback)

29. Evento ajaxStop
 Exemplo:
$(„#carregando‟).ajaxStop(function() {
$(this),hide();
});