Download - Jquery
JQUERYAjax
O que é AJAX ? AJAX - Asynchronous JavaScript and XML E um conjunto de técnicas que tem
como objetivo carregar e enviar informações de um servidor de aplicação sem a necessidade de recarregar a página inteira.
Aplicações web que utilizam ajax: gmail, google, facebook entre outros.
Jquery e AJAX Jquery implementa diversos métodos do
ajax, e possível trocar dados em diversos formatos: HTML, XML ou JSON de um servidor remoto.
E pode diretamente alimentar os elementos de tela com o retorno da informação.
Sem jquery a implementação do AJAX e complicada e precisa de muitas linhas de codigo.
Método load() O método LOAD carrega dados de um
servidor remoto e pode alimentar algum objeto de tela.
$(selector).load(URL,data,callback);
URL – Caminho da página que contém os dados
DATA – dados enviado como parametroCALLBACK – função para ser chamada posteriormente
Exemplo Fonte de dados demo.txt :<h2>teste de jquery</h2><p id=“p1”>Um paragrafo</p1>
Utilizando o metodo load:$("#div1").load("demo_test.txt");
Exemplo Carregando o elemento através do
seletor$("#div1").load("demo_test.txt #p1");
Método load() com callback O callback e opcional e é executado
quando a ação e finalizada, como o ajax depende de uma conexão assíncrona, isto e útil pois permite a correta utilização, recebe tres parametros: responseTxt – contem o resultado da
chamada. statusTxt – contem o status. xhr - contem o objeto XMLHttpRequest.
Método load() com callback $("button").click(function(){ $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){ if(statusTxt=="success") alert("External content loaded successfully!"); if(statusTxt=="error") alert("Error: "+xhr.status+": "+xhr.statusText); });});
Método Get() e Post() São métodos que são utilizados para
trocar dados do servidor: GET - solicita dados de um recurso
especifico. POST - envia dados para um recurso
externo. Basicamente GET receberá dados de um
determinado recurso e pode ser cacheado.
Post também e utilizado para enviar e receber dados de um servidor, porem os dados de retorno NUNCA serão cacheados.
Metodo $.get() Sintaxe:
$.get(URL,callback); Exemplo:$("button").click(function(){ $.get("demo_test.asp",
function(data,status){ alert("Data: " + data + "\nStatus: " + status); });});
Metodo $.post() Sintaxe:
$.post(URL,data,callback); Exemplo:
$("button").click(function(){ $.post("demo_test_post.asp", { name:"Donald Duck", city:"Duckburg" }, function(data,status){ alert("Data: " + data + "\nStatus: " + status); });});