SlideShare uma empresa Scribd logo
1 de 29
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 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;
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 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.
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(){
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”);
}
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
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.
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.
Ajax e JavaScript
 Escreve muito;
 Trabalho árduo para o desenvolvedor;
 Pouco Resultado;
 Qual a solução?
 Utilizar a biblioteca jQuery;
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
Ajax e jQuery
 Principais funções eventos jQuery
(manipulação ajax):
 $.get();
 $.post();
 $.ajax();
 ajaxStart;
 ajaxStop;
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])
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”
Requisições Ajax - Função
$.get
 Exemplo:
$.get(exemplo-get.php,
{nome: “Danilo”, cidade: “Itabuna”},
function(data){
//manipular os dados retornados
},
“html”)
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
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])
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”
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
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)
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‟}
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‟ }
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.
ajaxStart(callback)
 Função callback a ser executada por
ocasião da ocorrência do evento.
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.
ajaxStop(callback)
Evento ajaxStop
 Exemplo:
$(„#carregando‟).ajaxStop(function() {
$(this),hide();
});

Mais conteúdo relacionado

Mais procurados

Usando seu codigo java no mule part 2
Usando seu codigo java no mule part 2Usando seu codigo java no mule part 2
Usando seu codigo java no mule part 2Jeison Barros
 
Introdução ao Google App Engine
Introdução ao Google App EngineIntrodução ao Google App Engine
Introdução ao Google App EngineRodrigo Amaral
 
Java Web 3 - Servlets e JSP 1
Java Web 3 - Servlets e JSP 1Java Web 3 - Servlets e JSP 1
Java Web 3 - Servlets e JSP 1Eduardo Mendes
 
Exemplo caso de uso(Mulesoft)
Exemplo caso de uso(Mulesoft)Exemplo caso de uso(Mulesoft)
Exemplo caso de uso(Mulesoft)Guilherme Baccas
 
Ajax (Asynchronous Javascript And Xml)
Ajax (Asynchronous Javascript And Xml)Ajax (Asynchronous Javascript And Xml)
Ajax (Asynchronous Javascript And Xml)kidh0
 
Minha aplicação Java vai pra nuvem. E agora?
Minha aplicação Java vai pra nuvem. E agora?Minha aplicação Java vai pra nuvem. E agora?
Minha aplicação Java vai pra nuvem. E agora?Felipe Mamud
 
Substituindo o request message no mule
Substituindo o request message no muleSubstituindo o request message no mule
Substituindo o request message no muleJeison Barros
 
React JS - Parte 1
React JS - Parte 1React JS - Parte 1
React JS - Parte 1Bruno Catão
 
React JS - Parte 2
React JS - Parte 2React JS - Parte 2
React JS - Parte 2Bruno Catão
 
Iniciando com Yeoman, Grunt e Bower
Iniciando com Yeoman, Grunt e BowerIniciando com Yeoman, Grunt e Bower
Iniciando com Yeoman, Grunt e BowerMateus Padua
 
Introdução à MEAN Stack
Introdução à MEAN StackIntrodução à MEAN Stack
Introdução à MEAN StackBruno Catão
 
Interagindo com web services RPC, SOAP e REST utilizando PHP
Interagindo com web services RPC, SOAP e REST utilizando PHPInteragindo com web services RPC, SOAP e REST utilizando PHP
Interagindo com web services RPC, SOAP e REST utilizando PHPEduardo Cesar
 

Mais procurados (20)

Usando seu codigo java no mule part 2
Usando seu codigo java no mule part 2Usando seu codigo java no mule part 2
Usando seu codigo java no mule part 2
 
Introdução ao Google App Engine
Introdução ao Google App EngineIntrodução ao Google App Engine
Introdução ao Google App Engine
 
Aula de Node
Aula de NodeAula de Node
Aula de Node
 
Java Web 3 - Servlets e JSP 1
Java Web 3 - Servlets e JSP 1Java Web 3 - Servlets e JSP 1
Java Web 3 - Servlets e JSP 1
 
JSPs Introdução Parte 1
JSPs Introdução Parte 1JSPs Introdução Parte 1
JSPs Introdução Parte 1
 
Exemplo caso de uso(Mulesoft)
Exemplo caso de uso(Mulesoft)Exemplo caso de uso(Mulesoft)
Exemplo caso de uso(Mulesoft)
 
Ajax (Asynchronous Javascript And Xml)
Ajax (Asynchronous Javascript And Xml)Ajax (Asynchronous Javascript And Xml)
Ajax (Asynchronous Javascript And Xml)
 
Minha aplicação Java vai pra nuvem. E agora?
Minha aplicação Java vai pra nuvem. E agora?Minha aplicação Java vai pra nuvem. E agora?
Minha aplicação Java vai pra nuvem. E agora?
 
Realtime com node.js e socket.io
Realtime com node.js e socket.ioRealtime com node.js e socket.io
Realtime com node.js e socket.io
 
Substituindo o request message no mule
Substituindo o request message no muleSubstituindo o request message no mule
Substituindo o request message no mule
 
React JS - Parte 1
React JS - Parte 1React JS - Parte 1
React JS - Parte 1
 
Servlets e JSP
Servlets e JSPServlets e JSP
Servlets e JSP
 
Servlets e jsp
Servlets e jspServlets e jsp
Servlets e jsp
 
React JS - Parte 2
React JS - Parte 2React JS - Parte 2
React JS - Parte 2
 
Iniciando com Yeoman, Grunt e Bower
Iniciando com Yeoman, Grunt e BowerIniciando com Yeoman, Grunt e Bower
Iniciando com Yeoman, Grunt e Bower
 
introdução a ajax
introdução a ajaxintrodução a ajax
introdução a ajax
 
Aula javascript
Aula  javascriptAula  javascript
Aula javascript
 
Grails
GrailsGrails
Grails
 
Introdução à MEAN Stack
Introdução à MEAN StackIntrodução à MEAN Stack
Introdução à MEAN Stack
 
Interagindo com web services RPC, SOAP e REST utilizando PHP
Interagindo com web services RPC, SOAP e REST utilizando PHPInteragindo com web services RPC, SOAP e REST utilizando PHP
Interagindo com web services RPC, SOAP e REST utilizando PHP
 

Destaque

Prototipos de Baixa e Alta Fidelidade
Prototipos de Baixa e Alta FidelidadePrototipos de Baixa e Alta Fidelidade
Prototipos de Baixa e Alta FidelidadeErico Fileno
 
La biblioteca
La bibliotecaLa biblioteca
La bibliotecamireinas
 
Licenciatura en administración empresarial
Licenciatura en administración empresarialLicenciatura en administración empresarial
Licenciatura en administración empresarialUlises Nieto
 
Artigo lei n. 12.846-13
Artigo   lei n. 12.846-13Artigo   lei n. 12.846-13
Artigo lei n. 12.846-13Pedro Ribeiro
 
Figfoz1
Figfoz1Figfoz1
Figfoz1alex
 
CARNAVAL DE VENECIA
CARNAVAL DE VENECIACARNAVAL DE VENECIA
CARNAVAL DE VENECIABRIAN MOORE
 
CAMBIO CLIMÁTICO
CAMBIO CLIMÁTICOCAMBIO CLIMÁTICO
CAMBIO CLIMÁTICOMMJRICO
 
Ângulo Perfeito para Fotografias !
Ângulo Perfeito para Fotografias !Ângulo Perfeito para Fotografias !
Ângulo Perfeito para Fotografias !alex
 
Koi And Goldfish
Koi And GoldfishKoi And Goldfish
Koi And Goldfishliewchiasen
 
Apresentação _ Biblioteca Escolar
Apresentação _ Biblioteca EscolarApresentação _ Biblioteca Escolar
Apresentação _ Biblioteca Escolarmariafilomenalr
 
Dream apel.com
Dream apel.comDream apel.com
Dream apel.comdreamapel
 
Anexo 7 - 1 [Categorias de Uso do Solo]
Anexo 7 - 1 [Categorias de Uso do Solo]Anexo 7 - 1 [Categorias de Uso do Solo]
Anexo 7 - 1 [Categorias de Uso do Solo]Luiz Dutra
 
Mercosu ry unasur
Mercosu ry unasurMercosu ry unasur
Mercosu ry unasurYure Peña
 

Destaque (20)

Prototipos de Baixa e Alta Fidelidade
Prototipos de Baixa e Alta FidelidadePrototipos de Baixa e Alta Fidelidade
Prototipos de Baixa e Alta Fidelidade
 
Eça de queirós
Eça de queirósEça de queirós
Eça de queirós
 
La biblioteca
La bibliotecaLa biblioteca
La biblioteca
 
Licenciatura en administración empresarial
Licenciatura en administración empresarialLicenciatura en administración empresarial
Licenciatura en administración empresarial
 
IS 700 Certificate
IS 700 CertificateIS 700 Certificate
IS 700 Certificate
 
Trabalho Reckon
Trabalho ReckonTrabalho Reckon
Trabalho Reckon
 
Artigo lei n. 12.846-13
Artigo   lei n. 12.846-13Artigo   lei n. 12.846-13
Artigo lei n. 12.846-13
 
Sports Go
Sports GoSports Go
Sports Go
 
Figfoz1
Figfoz1Figfoz1
Figfoz1
 
5º B Grupo 2
5º B Grupo 25º B Grupo 2
5º B Grupo 2
 
CARNAVAL DE VENECIA
CARNAVAL DE VENECIACARNAVAL DE VENECIA
CARNAVAL DE VENECIA
 
CAMBIO CLIMÁTICO
CAMBIO CLIMÁTICOCAMBIO CLIMÁTICO
CAMBIO CLIMÁTICO
 
Ângulo Perfeito para Fotografias !
Ângulo Perfeito para Fotografias !Ângulo Perfeito para Fotografias !
Ângulo Perfeito para Fotografias !
 
Sigapl defesa
Sigapl defesaSigapl defesa
Sigapl defesa
 
Koi And Goldfish
Koi And GoldfishKoi And Goldfish
Koi And Goldfish
 
La unión europea
La unión europeaLa unión europea
La unión europea
 
Apresentação _ Biblioteca Escolar
Apresentação _ Biblioteca EscolarApresentação _ Biblioteca Escolar
Apresentação _ Biblioteca Escolar
 
Dream apel.com
Dream apel.comDream apel.com
Dream apel.com
 
Anexo 7 - 1 [Categorias de Uso do Solo]
Anexo 7 - 1 [Categorias de Uso do Solo]Anexo 7 - 1 [Categorias de Uso do Solo]
Anexo 7 - 1 [Categorias de Uso do Solo]
 
Mercosu ry unasur
Mercosu ry unasurMercosu ry unasur
Mercosu ry unasur
 

Semelhante a Ajax

PHP e AJAX: do Request ao Framework
PHP e AJAX: do Request ao FrameworkPHP e AJAX: do Request ao Framework
PHP e AJAX: do Request ao FrameworkRafael Dohms
 
PHP e AJAX: do Request ao Framework
PHP e AJAX: do Request ao FrameworkPHP e AJAX: do Request ao Framework
PHP e AJAX: do Request ao FrameworkRafael Dohms
 
Minicurso de PHP Com Ajax
Minicurso de PHP Com AjaxMinicurso de PHP Com Ajax
Minicurso de PHP Com AjaxAdler Medrado
 
Ajax O Objeto Xml Http Request Parte 1
Ajax   O Objeto Xml Http Request   Parte 1Ajax   O Objeto Xml Http Request   Parte 1
Ajax O Objeto Xml Http Request Parte 1infinitopublicidade
 
Curso de WebServlets (Java EE 7)
Curso de WebServlets (Java EE 7)Curso de WebServlets (Java EE 7)
Curso de WebServlets (Java EE 7)Helder da Rocha
 
Aplicações Web com AJAX - Er Galvão Abbott
Aplicações Web com AJAX - Er Galvão AbbottAplicações Web com AJAX - Er Galvão Abbott
Aplicações Web com AJAX - Er Galvão AbbottTchelinux
 
AJAX?? Não!! Asynchronous Javascript and... JSON!!
AJAX?? Não!! Asynchronous Javascript and... JSON!!AJAX?? Não!! Asynchronous Javascript and... JSON!!
AJAX?? Não!! Asynchronous Javascript and... JSON!!Lucas Brasilino
 
PHP e Ajax com XAJAX
PHP e Ajax com XAJAXPHP e Ajax com XAJAX
PHP e Ajax com XAJAXRafael Dohms
 
Prototype Framework Javascript
Prototype Framework JavascriptPrototype Framework Javascript
Prototype Framework JavascriptMarcio Romu
 
Curso de Java (Parte 7) Web Application
Curso de Java (Parte 7) Web ApplicationCurso de Java (Parte 7) Web Application
Curso de Java (Parte 7) Web ApplicationMario Sergio
 
Apostilava Java EE 5 - 2007
Apostilava Java EE 5 - 2007Apostilava Java EE 5 - 2007
Apostilava Java EE 5 - 2007Rafael Benevides
 
Apache Wicket - Desenvolvimento WEB orientado a componentes
Apache Wicket - Desenvolvimento WEB orientado a componentesApache Wicket - Desenvolvimento WEB orientado a componentes
Apache Wicket - Desenvolvimento WEB orientado a componentesCI&T
 
Ajax O Objeto Xml Http Request Parte 4
Ajax   O Objeto Xml Http Request   Parte 4Ajax   O Objeto Xml Http Request   Parte 4
Ajax O Objeto Xml Http Request Parte 4infinitopublicidade
 

Semelhante a Ajax (20)

Tutorial de ajax
Tutorial de ajaxTutorial de ajax
Tutorial de ajax
 
PHP e AJAX: do Request ao Framework
PHP e AJAX: do Request ao FrameworkPHP e AJAX: do Request ao Framework
PHP e AJAX: do Request ao Framework
 
PHP e AJAX: do Request ao Framework
PHP e AJAX: do Request ao FrameworkPHP e AJAX: do Request ao Framework
PHP e AJAX: do Request ao Framework
 
Minicurso de PHP Com Ajax
Minicurso de PHP Com AjaxMinicurso de PHP Com Ajax
Minicurso de PHP Com Ajax
 
Ajax O Objeto Xml Http Request Parte 1
Ajax   O Objeto Xml Http Request   Parte 1Ajax   O Objeto Xml Http Request   Parte 1
Ajax O Objeto Xml Http Request Parte 1
 
Curso de WebServlets (Java EE 7)
Curso de WebServlets (Java EE 7)Curso de WebServlets (Java EE 7)
Curso de WebServlets (Java EE 7)
 
Aplicações Web com AJAX - Er Galvão Abbott
Aplicações Web com AJAX - Er Galvão AbbottAplicações Web com AJAX - Er Galvão Abbott
Aplicações Web com AJAX - Er Galvão Abbott
 
AJAX?? Não!! Asynchronous Javascript and... JSON!!
AJAX?? Não!! Asynchronous Javascript and... JSON!!AJAX?? Não!! Asynchronous Javascript and... JSON!!
AJAX?? Não!! Asynchronous Javascript and... JSON!!
 
Treinamento ajax 02
Treinamento ajax   02Treinamento ajax   02
Treinamento ajax 02
 
Ajax como comecar
Ajax como comecarAjax como comecar
Ajax como comecar
 
PHP e Ajax com XAJAX
PHP e Ajax com XAJAXPHP e Ajax com XAJAX
PHP e Ajax com XAJAX
 
Conciex 2012
Conciex 2012Conciex 2012
Conciex 2012
 
Frameworks Ajax
Frameworks AjaxFrameworks Ajax
Frameworks Ajax
 
Prototype Framework Javascript
Prototype Framework JavascriptPrototype Framework Javascript
Prototype Framework Javascript
 
Curso de Java (Parte 7) Web Application
Curso de Java (Parte 7) Web ApplicationCurso de Java (Parte 7) Web Application
Curso de Java (Parte 7) Web Application
 
Aplicacoes Web Com AJAX
Aplicacoes Web Com AJAXAplicacoes Web Com AJAX
Aplicacoes Web Com AJAX
 
Apostilava Java EE 5 - 2007
Apostilava Java EE 5 - 2007Apostilava Java EE 5 - 2007
Apostilava Java EE 5 - 2007
 
Apache Wicket - Desenvolvimento WEB orientado a componentes
Apache Wicket - Desenvolvimento WEB orientado a componentesApache Wicket - Desenvolvimento WEB orientado a componentes
Apache Wicket - Desenvolvimento WEB orientado a componentes
 
Rest workshop
Rest workshopRest workshop
Rest workshop
 
Ajax O Objeto Xml Http Request Parte 4
Ajax   O Objeto Xml Http Request   Parte 4Ajax   O Objeto Xml Http Request   Parte 4
Ajax O Objeto Xml Http Request Parte 4
 

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;
  • 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;
  • 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.
  • 28. Evento ajaxStop  Ocorre quando todas as atividades de uma requisição Ajax chegam ao fim.  Sintaxe semelhante à AjaxStart. ajaxStop(callback)