Ajax

Junio Gonçalves

Ajax

Ajax

O que é? Para que serve? Qual a relevância para o mobile? Existe algum caso de sucesso?

AJAX é uma sigla que significa Asynchronous JavaScript And XML. O AJAX permite que as páginas web sejam atualizadas de forma assíncrona através da troca de pequenas quantidades de dados com o servidor sendo transparente para o usuário. Isto significa que é possível atualizar partes de uma página web sem recarregar a página inteira. Isso no mobile é ainda mais importante para o funcionamento de aplicativos e widgets e com isso também melhora a UX (User Experience).

Em 2005 AJAX tornou-se popular graças ao Google. Sugestões do Google usam AJAX para criar uma interface web muito dinâmica. Quando você começa a digitar na caixa de pesquisa do Google, o JavaScript envia dados para um servidor e ele retorna uma lista de sugestões.

Exemplos de aplicativos que usam AJAX: Google Maps, Gmail, YouTube e Facebook.

how_ajax_works

Práticas

Quais as principais práticas?

jQuery fornece vários métodos para a funcionalidade AJAX. Com os métodos jQuery, você pode fazer requisições texto, HTML, XML ou JSON a partir de um servidor remoto usando tanto GET como POST. Você pode também carregar os dados externos diretamente para os elementos HTML da sua página web.
A programação em AJAX pode ser um pouco complicada, porque diferentes navegadores têm diferentes sintaxes para a implementação. Isso significa que você terá que escrever código extra para cada navegador. No entanto, com jQuery ele faz esse trabalho para nós de modo que podemos escrever a funcionalidade AJAX com apenas uma única linha de código.

$(selector).load(URL,data,callback);

O método load do jQuery é bem simples e muito eficaz. Ele faz com que dados são colocados a partir do servidor em um HTML específico.

URL é o parâmetro obrigatório e especifica a URL que você deseja carregar.
Data é um parâmetro opcional de conjunto de chave/valor para ser enviado junto ao request.
Callback é outro parâmetro opcional que refere a função que irá ser executada após o método load. Nessa função de callback temos alguns parâmetros:
responseTxt – o resultado do AJAX caso tenha obtido sucesso;
statusTxt – é o status da chamada AJAX;
xhr – é o objeto XMLHttpRequest.

Exemplo
O método a seguir mostra um alerta após a execução do método load. Caso o método tenha sucesso é mostrado “Sucesso”, caso o contrário aparece “Erro”.

$("button").click(function(){
 $("#div1").load("test.txt", function(responseTxt, statusTxt, xhr){
   if(statusTxt == "success")
     alert("Sucesso");
   if(statusTxt == "error")
     alert("Erro: " + xhr.status + ": " + xhr.statusText);
  });
 });

Os métodos jQuery get() e post() são usados para fazer requisão ao servidor usando HTTP GET ou POST. GET é basicamente usado para receber dados do servidor. O método GET pode retornar dados em cache. Já o método POST nunca retorna dados em cache e normalmente também envia dados junto ao request.

$.get(URL,callback);

Assim como o método load o método get tem como parâmetro a URL a ser chamada e a função de callback. Nota-se que aqui não e possível passar o parâmetro de chave/valor.

Exemplo:

$("button").click(function(){
 $.get("demo_test.asp", function(data, status){
   alert("Data: " + data + "\nStatus: " + status);
  });
 });

demo_test.asp
 <%
 response.write("Esse é um texto que vêm do arquivo ASP.")
 %>

Como não é possível passar dados para no método GET a URL que é chamada é bem simples não contendo nenhum processamento.

$.post(URL,data,callback);

Nos post os parâmetros são exatamente iguais ao da função load.

Exemplo:

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

demo_test_post.asp
 <%
 dim fname,city
 fname=Request.Form("name")
 city=Request.Form("city")
 Response.Write("Dear " & fname & ". ")
 Response.Write("Hope you live well in " & city & ".")
 %>

Nesse caso, o método POST recebe dados que podem ser processados e retornados.

Busque mais

♦ AJAX Tutorial

♦ Getting started with Mobile AJAX

♦ jQuery – AJAX Introduction

♦ jQuery Ajax Tutorial #1 – Using AJAX & API’s (jQuery Tutorial #7)

Related posts