Inércia Sensorial

03 de September de 2005

Introdução ao Ajax

Filed under: Javascript,PHP — inerte @ 02:05

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:

1
2
3
<script type="text/javascript">
var conteudo = document.getElementByID("cliente_nome").value
</script>

Também podemos trocar seu valor:

1
2
3
<script type="text/javascript">
document.getElementByID("cliente_nome").value = "Julio Nobrega Netto";
</script>

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

1
2
3
<script type="text/javascript">
document.getElementByID("div_id").innerHTML = "Olá Mundo!";
</script>

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
< ?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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
  <head>
    <title>Contador</title>
    <script src="cpaint2.inc.js" type="text/javascript"></script>
    <script type="text/javascript">
      <!--
      var cp = new cpaint();
      cp.set_response_type("TEXT");
      function contar()
      {
          cp.call('contador.php', 'contador', mostrarContador);
      }
 
      function mostrarContador(result) 
      {
          document.getElementById('contador').innerHTML =  result + " cliques!";
      }
      //-->
    </script>
  </head>
  <body>
    <p>
      <img src="imagem.png" alt="de grão em grão a galinha enche o papo" onClick="contar();" />
      <div id="contador">
        Nenhum clique na imagem...
      </div>
    </p>
  </body>
</html>

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:

1
2
3
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 😀

5 Comments »

  1. […] No dia 03/09/2005, publiquei uma introdução ao Ajax. Como dei uma rápida passada nos assuntos principais, como DOM e o XMLHttpRequest, resolvi que era a hora de mostrar mais exemplos práticos, de situações corriqueiras ou interessantes, onde você pode usar Ajax e a biblioteca CPAINT. […]

    Pingback by Inércia Sensorial » Blog Archive » Select dinâmico — 08 de October de 2005 @ 16:49

  2. Bom dia, algém sabe de uma função inversa para converter os acentos do Javascript para PHP? Obrigado

    Comment by Octavio — 20 de January de 2006 @ 08:21

  3. bom dia,
    estou tentando fazer uma especie de “include” do php com o ajax.. tenho o menu e um div para o conteudo do link, mas na hora de exibir tem o problema dos acentos.. jah tentei varias coisas, mas nenhuma resolveu esse problema.
    obrigado

    Comment by Diogo — 03 de March de 2006 @ 10:56

  4. Boa tarde,
    Tenho um XML e preciso filtrar dinamicamente para montar na página os menus e seus submenus (que vêm deste XML), além das imagens e texto a serem exibidos na página, dependendo sempre da seleção feita pelo usuário.
    Uso o CPaint para acesso a banco MySQL, mas nunca utilizei para XML. Só sei publicar um parser básico com PHP.
    Vc teria um exemplo utilizando o CPaint?
    Agradeço imensamente

    Comment by Roberto Kalili — 19 de April de 2006 @ 13:57

  5. […] Leia mais »» […]

    Pingback by .rstoever «com» » Para os que estão iniciando com o Ajax — 20 de May de 2006 @ 23:30

RSS feed for comments on this post. TrackBack URL

Leave a comment

Powered by WordPress