Jquery Ajax.

Apresentação em tema: "Jquery Ajax."— Transcrição da apresentação:

1 Jquery Ajax

2 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.

3 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.

4 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 parametro CALLBACK – função para ser chamada posteriormente

5 Exemplo Fonte de dados demo.txt : Utilizando o metodo load:
<h2>teste de jquery</h2> <p id=“p1”>Um paragrafo</p1> Utilizando o metodo load: $("#div1").load("demo_test.txt");

6 Exemplo Carregando o elemento através do seletor
$("#div1").load("demo_test.txt #p1");

7 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.

8 Método load() com callback
$("button").click(function(){   $("#div1").load("demo_test.txt",functio n(responseTxt,statusTxt,xhr){     if(statusTxt=="success")       alert("External content loaded successfully!");     if(statusTxt=="error")       alert("Error: "+xhr.status+": "+xhr.statusText);   }); });

9 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.

10 Metodo $.get() Sintaxe: Exemplo: $.get(URL,callback);
$("button").click(function(){   $.get("demo_test.asp", function(data,status){     alert("Data: " + data + "\nStatus: " + status);   }); });

11 Metodo $.post() Sintaxe: Exemplo: $.post(URL,data,callback);
$("button").click(function(){   $.post("demo_test_post.asp",   {     name:"Donald Duck",     city:"Duckburg"   },   function(data,status){     alert("Data: " + data + "\nStatus: " + status);   }); });