A apresentação está carregando. Por favor, espere

A apresentação está carregando. Por favor, espere

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

Apresentações semelhantes


Apresentação em tema: "JQUERY Ajax. 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."— 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 : teste de jquery Um paragrafo 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: $.get(URL,callback); Exemplo: $("button").click(function(){ $.get("demo_test.asp", function(data,status){ alert("Data: " + data + "\nStatus: " + status); }); });

11 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); }); });


Carregar ppt "JQUERY Ajax. 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."

Apresentações semelhantes


Anúncios Google