Inércia Sensorial

Introdução ao Ajax

Comments 3 dAmerica/Los_Angeles September, 2005 sob Javascript, PHP.
Tags:

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:

PLAIN TEXT

JavaScript:

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

Também podemos trocar seu valor:

PLAIN TEXT

JavaScript:

<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:

PLAIN TEXT

JavaScript:

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

PLAIN TEXT

PHP:

<?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:

PLAIN TEXT

HTML:

<!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:

O nome do arquivo PHP
O nome da função PHP
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:

PLAIN TEXT

JavaScript:

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

Roberto Kalili

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

Diogo

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