AJAX com jQuery – Método $.ajax()
Hoje falarei sobre a função $.ajax onde podemos requisitar informações via GET ou POST assíncronamente. Creio que o AJAX deva ser mundialmente conhecido, por isso não entrarei nos detalhes, apenas mostrarei as formas que podemos utilizá-lo.
- jQuery.ajax( url, [ settings ] )
- Executar uma requisição HTTP assíncrona.
Exemplo:
$.ajax({
url: "loremipsum.html",
context: document.body,
type: “GET”,
success: function(){
$(this).addClass("done");
}
});
Veremos o que cada parâmetro faz.
- url
- Serve para passarmos o endereço da pagina requisitada.
- context
- Serve para indicarmos qual o objeto de contexto da requisição, podendo ser qualquer objeto do DOM.
- type
- Serve para passarmos o método de requisição podendo ser: “GET”, “POST:, “DELETE” e “PUT”.
- success
- Serve para passarmos a função de callback a ser executada após o sucesso da requisição.
Ou seja com esses parâmetros nós montamos nossa requisição AJAX.
Agora veremos um exemplo prático utilizando o GET e o POST para seus devidos fins. Nesse HTML temos apenas três parágrafos sendo: o primeiro para a requisição GET, o segundo para requisição POST e o últiomo para receber o resultado da requisição.
<p> <a href="listagem.html" id="btn_receber">Receber dados</a> </p> <p> <form action="buscar.php" method="post"> <input name="busca" type="text" id="busca" /><input type="submit" id="btn_enviar" value="Enviar dados" /> </form> </p> <p id="resultado"></p>
Agora na parte do jQuery eu criamos uma função para o evento click tanto no link #btn_receber quanto no submit #btn_enviar.
Porém o #btn_receber requisitará uma listagem de dados via GET, que serve para este propósito, receber dados do servidor.
Já o #btn_enviar enviará uma string para o servidor que a processará como foi programado, retornando alguma resposta para a requisição. O método POST serve para enviar dados para o servidor.
Para deixar a requisição não obstrutiva pego o valor da pagina requisitada diretamente da action do formulário, ou seja, caso o javascript do navegador do usuário estiver desligado seu sistema funcionará normalmente.
Utilizo o context com o valor jQuery('#resultado') para indicar qual objeto será o contexto do retorno e na função callback de sucesso apenas insiro o retorno no p #resultado utilizando a referência this.
JavaScript
$(document).ready(function(){
$("#btn_receber").click(function(event) {
event.preventDefault();
$.ajax({
//pegando a url apartir do href do link
url: $(this).attr("href"),
type: 'GET',
context: jQuery('#resultado'),
success: function(data){
this.append(data);
}
});
});
$("#btn_enviar").click(function(event) {
event.preventDefault();
$.ajax({
//pegando a url apartir da action do form
url: $(this).parent("form").attr("action"),
data: 'busca=' +$("#busca").val(),
type: 'POST',
context: jQuery('#resultado'),
success: function(data){
this.append(data);
}
});
});
});
PHP
echo $_POST['busca'];
Nos próximos artigos me aprofundarei mais em outras técnicas e opções em AJAX com jQuery.
ajax, jquery
Para que serve os types ‘DELETE’ e ‘PUT’?
Olá Léo. Os types GET / POST / PUT / DELETE fazem parte do HTTP Request, em RestFull eles são usados nas seguintes categorias
GET – Pegar dados
PUT – Atualizar dados
POST – Inserir dados
DELETE – Deletar dados
Atenciosamente
Alguém Pode me explicar a maneira correta de utilizar este código, pois ao executá-lo a pag2.html que tem apenas tags simples(h1, h2 e p) é carregada da div#resultado como uma página completa(desde o 1º html até o /html), ou seja o site é carregado todinho na #resultado. Por que isso acontece? Lembro que com o método load() também ocorre isso porém o load() tem a opção de restringir o conteúdo de uma div por exemplo, tem como fazer isso com o $.ajax()?
já tentei usando this.append(data), this.html(data), this.text(data) e até refiz a função usando o .live() mas não obtive sucesso. Não dá erro algum no console do Chrome e do FF.
Eu uso a vesão 1.6.4 do jQuery.
Olá, isso esta no seu arquivo de resposta. se no seu arquivo de resposta tiver apenas 1 linha, ele retornará apenas essa linha, se ele tiver uma página inteira, ele vai retornar essa página.
Isso seria o lógico porém não é o que de fato acontece uma vez que sistemas de inclusão de páginas com ajax são problemáticos pois ainda (re)carregam páginas como se fazia há 10 anos atraz com document.write, mesmo evoluções como innerHTML ainda tem problemas para acompanhar a evolução da web nesse sentido, ainda não entenderam que INCLUIR um documento dentro de outro NÃO é escrever nesse documento e deixar o browser se virar e sim incluir e pronto sem mais. Por se tratar de uma linguagem em que o tem que ser interpretado no lado do cliente é preciso se passar bem direitinho os parametros para dizer pro browser que ele quer que a pag2.html seja inclusa/escrita dentro do maracador html selecionado e só isso, do contrário uma http://.www.dominio.com.br/index.php?pag=pag2.html será inclusa no marcador.
Em http://forum.imasters.com.br/topic/450009-problemas-serios-ao-utilizar-ajax-do-jquery/ tem o que seria uma forma de solucionar esse pequeno contra tempo.
Desculpe o link externo, e obrigado pela atenção.
Não é a internet que esta errada, ou os navegadores, ou a linguagem js, muito menos o XMLHTTPRequest. É seu pensamento. Não é o navegador que tem que adivinhar o que ele tem que fazer, e sim você que tem que dizer a ele. Ajax não é pra carregar páginas, e sim pedaços de conteúdo.
Amigo não vou transformar o jQuery Brasil em uma discursão desnecessária, para isso tem N discursões sobre o futuro da comunicação utulizando a web.
Pensamento certo ou errado é uma questão de interpretação(em países mulçumanos estão matando cristãos por terem um pensamento sobre Deus diferente do deles).
Eu me referi a uma linha de pensamento tomando por base uma linguagem server-side(php).
Se você tivesse dito na primeira resposta.
”
Não é o navegador que tem que adivinhar o que ele tem que fazer, e sim você que tem que dizer a ele. Ajax não é pra carregar páginas, e sim pedaços de conteúdo.
”
E se viesse com um exemplo de código, você teria sanado não só a minha dúvida como as dos demais internautas e de quebra mostrado seu conhecimento de jQuery(javascript).
Agora se você quiser acrescentar, engandecer, complementar ou qualquer coisa que sesa útil para os fins proprostos com o titulo dessa postagem, fique a vontade. Do contrário é melhor usar este site http://www.reclameaqui.com.br ou este http://www.reclamao.com.
Obrigado pela atenção.
Não entendi nada mas tudo bem =D
Qual a diferença do metodo ajax() para o metodo load() ???
Como faço para carregar este conteudo para dentro de uma variavel e não para dentro de uma camada (div)
load é via GET. e ajax pode ser por qualquer outro método, sem contar na configuração que da para alterar.
O retorno é feito através do callback de success, onde vc pode pegar o conteúdo retornado. Vale dar uma lida na documentação também.
Não sei a sintaxe de cabeça, mas parece que é:
onde o response é o retorno do ajax, ou seja, a resposta da requisição, a variavel ‘response’ conterá todo o html(eu acho) da requisição, assim você poderá tratar da forma que quizer