Ajax
Anderson Rodrigues
Danilo Guimarães
com
jQuery
Ajax
 Asynchronous JavaScript and XML;
 Linguagem de programação?
 Técnica de carregamento de conteúdos;
 Utiliza Java...
Ajax
 Popularizou-se em 2005 através do
google suggest;
XMLHttpRequest
 O que é?
 Objeto XMLHttpRequest (Requisição XML
com o uso do protocolo HTTP).
 Foi inventado pela Micro...
XMLHttpRequest
 Em 2006 o W3C publicou as primeiras
especificações para tornar o
XMLHttpRequest uma recomendação
oficial;
XMLHttpRequest
 IE 5.0 e 6.0 utilizam ActiveX .
 Demais browsers utilizam objeto nativo JS;
Funcionamento Ajax
Exemplo de Requisição
var requisicaoAjax = iniciaAjax();
if (requisicaoAjax){
requisicaoAjax.onreadystatechange = funciton...
Requisição e inserção Ajax
 Requisição TXT:
 Mostraremos o conteúdo de um arquivo.txt em
uma caixa de alerta.
 Exs: aja...
Vantagens no uso do Ajax
 Possibilita uso de recursos desktop em
sistemas Web;
 Reduz o tráfego de dados entre cliente e...
Problemas no uso do Ajax
 AJAX não é a solução milagrosa para todos os
males e se usado de forma inadequada pode
piorar u...
Ajax e JavaScript
 Escreve muito;
 Trabalho árduo para o desenvolvedor;
 Pouco Resultado;
 Qual a solução?
 Utilizar ...
jQuery
 O que é?
 Biblioteca JavaScript disponibilizada
como código livre
 Criada por John Resig
 Foco principal é a s...
Ajax e jQuery
 Principais funções eventos jQuery
(manipulação ajax):
 $.get();
 $.post();
 $.ajax();
 ajaxStart;
 aj...
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
...
jQuery - Função $.get
 url: O URL do arquivo requisitado
 data: Dados no formato chave/valor a
serem enviados ao servido...
Requisições Ajax - Função
$.get
 Exemplo:
$.get(exemplo-get.php,
{nome: “Danilo”, cidade: “Itabuna”},
function(data){
//m...
jQuery - Função $.get
 Exemplos:
 exemplo-get.php - processa dados
enviados ao servidor e retorna uma
resposta ao usuári...
jQuery - Função $.post
 Função $.post
 Requisição HTTP com o uso do metodo
POST.
 Admite só uma função callback a ser
e...
jQuery - Função $.post
 url: O URL do arquivo requisitado
 data: Dados no formato chave/valor a
serem enviados ao servid...
jQuery - Função $.post
 Exemplo:
$.post(exemplo-post.php,
{nome: “Anderson”, email:
“andereson@pweb.com”, comentario:
“Te...
jQuery – Função $.ajax
 Semelhante ao $.get e $.post
 Fornece a possibilidade de receber vários
parâmetros
 Considerada...
jQuery – Função $.ajax
 Parâmetros
 async{true, false}
 beforeSend {function(){....}}
 cache{true, false}
 complete {...
jQuery – Função $.ajax
 Parâmetros
 dataFilter{function(){....}}
 dataType{xml, html script, json, jsonp, text}
 error...
jQuery – Função $.ajax
 Parâmetros
 sucess{function(){....}}
 Timeout{function(){....}}
Evento ajaxStart
 Ocorre quando se inicia uma requisição
AJAX e nenhuma outra atividade está em
curso na página.
ajaxStar...
Evento ajaxStart
 Exemplo:
$(„#carregando‟).ajaxStart(function(){
$(this).show(„slow‟);
});
Evento ajaxStop
 Ocorre quando todas as atividades de
uma requisição Ajax chegam ao fim.
 Sintaxe semelhante à AjaxStart...
Evento ajaxStop
 Exemplo:
$(„#carregando‟).ajaxStop(function() {
$(this),hide();
});
Upcoming SlideShare
Loading in …5
×

Ajax

370 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
370
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
19
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Ajax

  1. 1. Ajax Anderson Rodrigues Danilo Guimarães com jQuery
  2. 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. 3. Ajax  Popularizou-se em 2005 através do google suggest;
  4. 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. 5. XMLHttpRequest  Em 2006 o W3C publicou as primeiras especificações para tornar o XMLHttpRequest uma recomendação oficial;
  6. 6. XMLHttpRequest  IE 5.0 e 6.0 utilizam ActiveX .  Demais browsers utilizam objeto nativo JS;
  7. 7. Funcionamento Ajax
  8. 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. 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. 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. 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. 12. Ajax e JavaScript  Escreve muito;  Trabalho árduo para o desenvolvedor;  Pouco Resultado;  Qual a solução?  Utilizar a biblioteca jQuery;
  13. 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. 14. Ajax e jQuery  Principais funções eventos jQuery (manipulação ajax):  $.get();  $.post();  $.ajax();  ajaxStart;  ajaxStop;
  15. 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. 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. 17. Requisições Ajax - Função $.get  Exemplo: $.get(exemplo-get.php, {nome: “Danilo”, cidade: “Itabuna”}, function(data){ //manipular os dados retornados }, “html”)
  18. 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. 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. 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. 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. 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. 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. 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. 25. jQuery – Função $.ajax  Parâmetros  sucess{function(){....}}  Timeout{function(){....}}
  26. 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. 27. Evento ajaxStart  Exemplo: $(„#carregando‟).ajaxStart(function(){ $(this).show(„slow‟); });
  28. 28. Evento ajaxStop  Ocorre quando todas as atividades de uma requisição Ajax chegam ao fim.  Sintaxe semelhante à AjaxStart. ajaxStop(callback)
  29. 29. Evento ajaxStop  Exemplo: $(„#carregando‟).ajaxStop(function() { $(this),hide(); });

×