Trabalhando com Ajax no PHP 

Há algum tempo já venho desenvolvendo aplicações voltadas à web, usando a linguagem PHP. Porém, as aplicações rodavam de forma bem diferente de uma aplicação desktop comum, feita em Visual Basic, ou Delphi. Muitas tarefas necessitavam de um “refresh” ou “reload” da página para processar as solicitações consumindo tempo e paciência do usuário.

E é justamente aí que entra o Asynchronous JAvaScript and XML (Javascript e XML assíncrono), ou simplesmente AJAX.

O que significa AJAX afinal?

Vamos ver o que é AJAX e o que quer dizer cada uma destas palavras:

Assíncrono: Significa que quando você faz uma requisição e espera o retorno, mas está livre para fazer outras coisas enquanto isso. A resposta provavelmente chega quase que imediatamente, então você faz uma função que espera o envio do servidor e faz alguma coisa quando ela chegar.
Ou seja, assíncrono quer dizer “pede pro servidor, você faz o que tiver que fazer e quando ficar pronta, ele te manda a resposta”.

Javascript: É uma linguagem para criar scripts e deixar suas páginas mais dinâmica. Neste caso, do AJAX, usado para requisitar ao servidor. Uma vez que a resposta é retornada do servidor, você normalmente vai usar alguma(s) função(ões) Javascript para mudar algo na página atual para mostrar que a ação foi realizada com sucesso.

XML: É uma linguagem de marcação que armazena somente dados. Os dados que você recebe do servidor são empacotados como XML, sendo facilmente processado pelo Javascript. Este dado pode qualquer coisa de qualquer tamanho.

AJAX não é uma tecnologia nova e não foi “inventada”, mas uma junção de tecnologias. O javascript faz uma solicitação ao servidor, esse retorna o resultado para o javascript. Esta solicitação, na verdade, é uma chamada para uma página dinâmica, normalmente escrita nas linguagens PHP, ASP ou qualquer outra para a internet. Outro ponto importante, é que o AJAX não depende tão-somente do XML. Existem outros formatos que podem ser usados, desde uma string simples ou o JSON (utilizado direto pelos webservices do Yahoo!).
A partir disso, quando os dados são retornados, usando novamente o javascript, podemos tratar esses dados da forma que quisermos.

AJAX na prática

Saindo então da teoria e passando para a prática, vamos ver como fazer tudo isso funcionar. Lembrando que para que o PHP ou ASP funcionar é necessário ter um servidor que suporte esssa linguagens. No nosso caso, onde trabalharemos com PHP, é precisamos do Apache ou do IIS (Internet Information Server, que vem com o Windows a partir da versão 2000).

Iremos criar uma página onde, ao selecionar o nome do cliente, ela irá retornar telefone do cliente selecionado. Neste exemplo, para facilitar as coisas, não estarei usando XML. O retorno virá como uma string (ou texto). Primeiro criamos a função que será responsável em fazer a solicitação ao servidor. Segue abaixo o código:

1 – Declaramos a variável que fará e receberá a solicitação. Esta variável deve ser declarada logo abaixo da tag .

var oHTTP = null;

function Chama(id) {
2- Nesta parte, estamos inicializando a varivável declarada acima. Como os navegadores Firefox e Internet Explorer funcionam de maneira diferente, verificamos com qual navegador estamos trabalhando. Se for Firefox, inicializamos com o tipo XMLHttpRequest(), caso contrário, usamos ActiveXObject(”Microsoft.XMLHTTP”).

if (window.XMLHttpRequest) {
oHTTP = new XMLHttpRequest();
} else if (window.ActiveXObject) {
oHTTP = new ActiveXObject(”Microsoft.XMLHTTP”);
}

3- Aqui fazemos a solicitação ao servidor. Passamos como parâmetros o tipo da chamada (GET), e a página a ser processada (chama_telefone.php) e por fim o valor a ser passado para a página (id=” + id).

oHTTP.open( “GET”, “chama_telefone.php?id=” + id, true );

4- Aqui definimos a função que será executada para aguardar o fim do processamento.

oHTTP.onreadystatechange = process;

5- Por fim enviamos a solicitação.

oHTTP.send( null );
}

}

6-Agora, vamos criar a função que será executada até o fim do processamento solicitado. Quando a propriedade readyState for igual a 4 e o status igual a 200, significa que o processamento terminou. Chamamos então a função que trabalhará o retorno da página “chama_telefone.php”, neste caso “atualiza()”.

function process() {

if (oHTTP.readyState == 4) {
// apenas se o servidor retornar “OK”
if (oHTTP.status == 200) {
atualiza();
}
}
}

7- Feita a solicitação e tendo recebido o retorno, criamos então a função que irá colocar o telefone recebido em uma caixa de texto, cujo nome é “telefone”. Nota para a propriedade responseText: é nela que fica o resultado retornado. A funcção URLDecode é utilizada para resolver um problema de caracteres especiais (entre eles acentos).

function atualiza() {
document.getElementById(”telefone”).value = URLDecode(oHTTP.responseText);
}

Código completo do script

var oHTTP = null;

function Chama(id) {
if (window.XMLHttpRequest) {
oHTTP = new XMLHttpRequest();
} else if (window.ActiveXObject) {
oHTTP = new ActiveXObject(”Microsoft.XMLHTTP”);
}

oHTTP.open( “GET”, “chama_telefone.php?id=” + id, true );
oHTTP.onreadystatechange = process;
oHTTP.send( null );
}

}

function process() {

if (oHTTP.readyState == 4) {
// apenas se o servidor retornar “OK”
if (oHTTP.status == 200) {
atualiza();
}
}
}

function atualiza() {
document.getElementById(”telefone”).value = URLDecode(oHTTP.responseText);
}

Agora vamos ver como fica o código da página “chama_telefone.php”.

Colocamos estes códigos para evitar que a página seja posta em cache, trazendo sempre os mesmos resultados.

//Inicializamos as variáveis de sessão
session_start();

header(”Expires: Mon, 26 Jul 1997 05:00:00 GMT”);
header(”Last-Modified: ” . gmdate(”D, d M Y H:i:s”) . ” GMT”);
// HTTP/1.1
header(”Cache-Control: no-store, no-cache, must-revalidate”);
header(”Cache-Control: post-check=0, pre-check=0?, false);
// HTTP/1.0
header(”Pragma: no-cache”);

if ($_GET[’id’] == ‘1?) echo urlencode(”1111-1111?);
if ($_GET[’id’] == ‘2?) echo urlencode(”2222-2222?);

Acho que o exemplo é auto-explicativo, se o código do cliente for 1, o telefone a ser passado é “1111-1111?, se for 2, o telefone é “2222-2222?. A função urlencode do php usada junto com a URLDecode do javascript corrige um erro com caracteres especiais e acentos. Dessa forma, os caracteres são mostrads de forma correta.
Para ver um exemplo disso tudo funcionando, veja a nossa pesquisa de telefone.