Introdução ao Ajax

O que é Ajax?

Ajax não é uma nova tecnologia, metodologia ou linguagem de programação, mas sim um acrônimo para Asynchronous JavaScript And XML. É uma combinação de técnicas disponíveis desde meados do ano 2000, consistindo de:

(X)HTML e CSS
Document Object Model
XMLHttpRequest

O termo Ajax foi popularizado em um artigo da consultoria Adaptive Path, e por isso, muitas pessoas o consideram uma jogada de marketing. Outras, como desenvolvedores no Google, usam apenas a palavra Javascript. Entretanto, devido ao enorme impacto no mundo do desenvolvimento Web e as possibilidades que se abrem, usarei essa terminologia.

DOM e XMLHttpRequest

O DOM manipula HTML, desde o conteúdo de blocos, width, height, até linhas de uma tabela. Os elementos são conhecidos como Nodes, e cada tipo tem seus próprios métodos e atributos particulares.

O conteúdo de um input do tipo text com id “cliente_nome” pode ser acessado da seguinte maneira:

Também podemos trocar seu valor:

Com o DOM, também conseguimos preencher um <div> com nosso próprio conteúdo:

O XMLHttpRequest foi inventado pela Microsoft para o Internet Explorer 4.0, mas o Mozilla, Safari, Opera e outros navegadores também o implementaram. Ele permite que eventos de Javascript façam POST ou GET no servidor, como durante o envio de formulários, e passem o retorno de dados como argumento a outras funções de Javascript.

Script de exemplo

Eu recomendo utilizar uma biblioteca já pronta para seu desenvolvimento em Ajax. A CPAINT automatiza o trabalho de criar o objeto XMLHttpRequest, além de fazer um tratamento no dados que retornarão do servidor, deixando você escolher entre texto puro, XML ou objetos de Javascript.

Para acostumá-lo com o CPAINT, vamos desenvolver um script em PHP para contar quantas vezes uma imagem foi clicada.

Precisamos do arquivo com o Javascript e outro que funcionará como backend, recebendo a função a ser chamada, os argumentos, e executando código em PHP para retornar o número de cliques na imagem.

< ?php
// contador.php
require_once("cpaint2.inc.php");
// vamos simplificar e gravar em um arquivo, mas poderia ser um banco de dados
function contador()
{
    $arquivo = "contador.txt";
    $fp = fopen($arquivo, "a");
    $conteudo = trim(fread($fp, filesize($arquivo)));
    fwrite($fp, $conteudo + 1);
    $cpaint->set_data($conteudo + 1);
    fclose($fp);
}

$cpaint = new cpaint();
$cpaint->register("contador");
$cpaint->start();
$cpaint->return_data();
?>

E é só? É sim. Basta iniciar um objeto da classe cpaint, registrar as funções que você deseja utilizar, e retornar os dados.

Agora o Javascript com HTML:

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

  
    
    
    
  
  
    

      
      

        Nenhum clique na imagem...
      
    

  

O que acontece nesse script? Quando clicamos na imagem a função Javascript contar() é executada, e dentro dessa função, chamamos o método call() do objeto cp, com três argumentos:

1. O nome do arquivo PHP
2. O nome da função PHP
3. O nome da função de Javascript que será chamada quando acabar o processamento do arquivo PHP

Existe um quarto argumento, não usado nesse exemplo, mas que é o valor de algum elemento da página. Isso permite que você construa um <select> ou tenha um <input> e que passe o valor selecionado ou digitado para o script PHP.

O terceiro argumento também é conhecido como a função de callback. É nessa função onde você decide como manipular os elementos da página, fixando valores de campos de formulários, criando HTML adicional, ou trocando imagens. Com a possibilidade de passar à função argumentos criados pelo retorno do servidor.

Cuidado com acentos e caracteres especiais! Muito provavelmente você deverá usar a função urlencode() do PHP antes de retornar os dados e a seguinte função em Javascript para tratar o texto:

function decode(str) {
     return unescape(str.replace(/\+/g, " "));
}

192.168.0.100

O Ajax redefine o significado de páginas dinâmicas, pois elementos HTML são alterados conforme respostas dos aplicativos no servidor. A Web se aproxima do desktop, e os usuários passam a não distinguir mais entre aplicativos locais e remotos.

Nos próximos 3 anos, com exceção de softwares para áudio, imagem, vídeo e jogos, encontraremos diversos substitutos para softwares atualmente só encontrados em Desktops.

Divirta-se 😀