Jquery

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 : <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 tresparametros: • responseTxt – contem o resultado da chamada. • statusTxt– contem o status. • xhr - contem o objetoXMLHttpRequest.

8. 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);  });});

9. Método Get() e Post() • São métodos que são utilizados para trocar dados do servidor: • GET - solicita dados de um recursoespecifico. • POST - envia dados para um recursoexterno. • 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);  });});