Faça páginas dinâmicas elegantes com AJAX em PHP
Fazer páginas dinâmicas não é suficiente, é necessário fazê-las com elegância.
Pois é, quando clicamos em item da página e ela simplesmente se recarrega por completo não tem a mesma boa impressão que uma página atualiza somente um certo local que precisa ser atualizado.
Existem exemplos bem bacanas que poderia mostrar aqui, porém eu irei falar somente de como funciona e como fazer requisições em AJAX com PHP para vocês entenderem, e em outros posts eu darei alguns exemplos bacanas.
Vamos lá.
Algumas pessoas acham que AJAX é uma linguagem de programação. Essa ideia é errada, o fato é que AJAX não é uma linguagem de programação mas sim uma técnica utilizada para se realizar solicitações ao servidor a partir de um navegador de internet.
Essa técnica basicamente tem como ator principal a linguagem utilizada na máquina cliente. No caso essa linguagem é javascript. No lado do servidor o documento requisitado será processado do mesmo jeito que seria se fosse uma solicitação normal.
Afinal, o que significa AJAX? Ajax vem de "Asynchronous Javascript and XML" isso quer dizer "Javascript e XML Assíncrono". A comunicação realizada entre seu navegador e o servidor é feita de forma assíncrona, ou seja passa a ser possível se fazer uma ou mais solicitações independentes, que não seja de uma página inteira.
O seu navegador para mostrar um conteúdo qualquer que está na internet precisa, na verdade, requisitar ao servidor onde esse conteúdo se encontra que lhe envie o mesmo.
Para que isso aconteça o seu navegador se conecta ao servidor e faz uma solicitação de documento, se o servidor tiver condições de atender à solicitação irá devolver o documento, ou resultado do processamento do mesmo, e ao final essa conexão entre o navegador e o servidor é desfeita.
Algo similar acontece com AJAX, a diferença é que você não busca um conteúdo inteiro para uma página, o documento que você requisita será colocado em uma área específica no seu navegador, dando um ar profissional em aplicações executadas nos navegadores.
No lado da máquina cliente
Tudo começa no javascript, onde temos que criar um objeto para realizar a comunicação com o servidor, veja o comando em javascript abaixo.
minhaRequisicao = new XMLHttpRequest();
O comando new vai instanciar uma objeto cuja classe é XMLHttpRequest. O objeto criado é colocado em minhaRequisicao. A partir daí tudo o que precisarmos fazer no servidor deverá usar minhaRequisicao.
Bem, como os navegadores antigos usam um outro objeto para trabalhar com AJAX teremos que testar se o comando foi bem executado. Caso ele não tenha sido bem executado então o navegador que está sendo usado usa outro objeto, e então teremos que testar um outro objeto de conexão. Se o comando acima falhar, então precisamos tentar o seguinte:
minhaRequisicao = new ActiveXObject("Msxml2.XMLHTTP");
Se o camando acima também não funcionar, então faremos uma última tentativa com:
falhar, então precisamos tentar o seguinte:
minhaRequisicao = new ActiveXObject("Microsoft.XMLHTTP");
Se esse também não funcionar, então não podemos trabalhar com AJAX nesse navegador, e devemos informar ao usuário que ele precisa atualizar o mesmo para acessar o site.
Um código mais completo seria assim:
try {
// Para IE7+, Firefox, Chrome, Opera e Safari
minhaRequisicao = new ActiveXObject("Msxml2.XMLHTTP");
Se o camando acima também não funcionar, então faremos uma última tentativa com:
falhar, então precisamos tentar o seguinte:
minhaRequisicao = new ActiveXObject("Microsoft.XMLHTTP");
Se esse também não funcionar, então não podemos trabalhar com AJAX nesse navegador, e devemos informar ao usuário que ele precisa atualizar o mesmo para acessar o site.
Um código mais completo seria assim:
try {
// Para IE7+, Firefox, Chrome, Opera e Safari
minhaRequisicao = new XMLHttpRequest();
} catch (tentaIEantigo) {
try {
// Para IE6 e IE5
minhaRequisicao = new ActiveXObject("Msxml2.XMLHTTP");
} catch (tentaOutros) {
try {
// Qualquer coisa diferete
minhaRequisicao = new ActiveXObject("Microsoft.XMLHTTP");
} catch (falhou) {
// Nada funcionou
minhaRequisicao = false;
}
}
}
Depois da criação do objeto de conexão precisamos informar qual documento abrir bem como o método que deverá ser utilizado e se deseja usar uma conexão assíncrona ou não. O navegador faz requisições com GET ou POST, um deles deverá ser o método a ser utilizado. Veja.
minhaRequisicao.open("GET","meunome.php",true);
O primeiro parâmetro passado na função acima informa o método a ser utilizado, o segundo parâmetro informa o documento que se deseja, o terceiro parâmetro informa se deseja comunicação assíncrona.
Agora é necessário informar qual função do javascript precisa ser executada quando o estado de recebimento se alterar.
A linha de comando abaixo informa ao objeto de conexão para executar a função javascript de nome recebeDados quando o estado de recebimento for alterada.
minhaRequisicao.onreadystatechange = recebeDados;
A função recebeDados será descrita mais abaixo.
Bem, até aqui nada aconteceu. Agora precisamos fazer com que nosso objeto de conexão seja executado. Usaremos o comando mostrado a seguir.
minhaRequisicao.send();
Quando o objeto minhaRequisicao tiver seu estado alterado irá executar a função recebeDados.
Lá precisaremos testar se o estado é de completo, o atributo readyState do objeto de conexão precisa ser igual a 4 indicando que o recebimento foi realizado. O da conexão estar terminada não quer dizer que o recebimento tenha sido realizado com sucesso, por isso também temos que testar se o status é igual a 200.
Veja o código abaixo.
function recebeDados(){
//Verificar pelo estado "4" de pronto
if (minhaRequisicao.readyState == '4'){
// Verifica se o documento encontrado com sucesso
if (minhaRequisicao.status == 200) {
//Pegar dados da resposta XML
var resultado = minhaRequisicao.responseText;
minhaDiv.innerHTML = resultado;
}
else {
minhaDiv.innerHTML = "Erro: " + minhaRequisicao.statusText;
}
}
}
Esses estados são úteis para nos ajudar a colocar aquela imagem animada na tela informando que está processando. Ao final, se retira aquela imagem e mostra o resultado do documento recebido.
O comando a seguir pega o resultado enviado pelo servidor.
var resultado = minhaRequisicao.responseText;
E finalmente colocamos o resultado na nossa página, no exemplo dado colocamos na DIV de nome minhaDIV. O atributo innerHTML é quem é responsável para conter o texto HTML.
O nosso código completo poderia ficar assim:
funcion pegaMeuNome() {
minhaRequisicao = criaRequisicao();
if(minhaRequisicao != false) {
minhaRequisicao.open("GET","meunome.php",true);
minhaRequisicao.onreadystatechange = recebeDados;
minhaRequisicao.send();
}
}
funciotn criaRequisicao () {
function recebeDados(){
//Verificar pelo estado "4" de pronto
if (minhaRequisicao.readyState == '4'){
// Verifica se o documento encontrado com sucesso
if (minhaRequisicao.status == 200) {
//Pegar dados da resposta XML
var resultado = minhaRequisicao.responseText;
minhaDiv.innerHTML = resultado;
}
else {
minhaDiv.innerHTML = "Erro: " + minhaRequisicao.statusText;
}
}
}
Se você estiver passando um formulário para o servidor há a necessidade de se colocar mais uma linha informando que se trata de um formulário e alterar o método send colocando os dados do form como parâmetro. Veja a alteração necessária apenas na função pegaMeuNome. Assuma que o formulario só tenha um campo de id = matricula.
funcion pegaMeuNome() {
minhaRequisicao = criaRequisicao();
matr = documment.getElementById("matricula");
if(minhaRequisicao != false) {
minhaRequisicao.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
minhaRequisicao.open("GET","meunome.php",true);
minhaRequisicao.onreadystatechange = recebeDados;
minhaRequisicao.send("matricula="+matr);
}
}
No lado do servidor
No lado do servidor estão os documentos html, Perl, PHP e etc. No nosso caso vamos falar do PHP.
O PHP deverá devolver o HTML para o navegador que fez a solicitação. O navegador então, como visto anteriormente irá pegar o código HTML e colocá-lo na área devida da página web.
Vamos lá.
O código PHP deverá receber os parâmetros passados pelo navegador, se não há parâmetros para serem recebidos basta, então, desprezar essa parte.
Nós usamos uma das seguintes GLOBALS Arrays para coletar as informações passadas.
$_GET[] ou $_POST[]
Usaremos os nomes nas variáveis passadas como parâmetro no método send lá do javascript.
$matriculaFunc = $_GET['matricula'];
Supondo que se faça uma comunicação com o banco de dados MySql para coletar o nome do funcionário teremos o seguinte:
Obs. Não comentarei sobre essa parte, se desejar saber mais acesse o tópico Conexão MySql PHP.
O código seria algo assim:
<?php
// Pegando parâmetros
$matriculaFunc = $_GET['matricula'];
// Abrindo a conexão com o MySql
$con = mysql_connect("localhost", "userdb", "123456");
// Verificando se a conexão foi bem sucedida
if (!$con) {
// A conexão falhou
echo ('Não foi possível conectar: ' . mysql_error());
exit(-1);
}
// Selecionando o banco de dados
if (!mysql_select_db("meudb")) {
// A seleção de banco de dados falhou
echo ("Não foi possível selecionar o banco dados\n");
exit (-2);
}
// Executando a query de consulta
$meuresultado = mysql_query("Select nome_func from FUNCIONARIO Where matr_func = $matriculaFunc");
// Verificando se a consulta foi executada sem erro
if (!$meuresultado ) {
// A consulta falhou
echo ('A consulta falhou: ' . mysql_error());
exit(-3);
}
// Passando o resultado para um array
$linha= mysql_fetch_row($meuresultado);
// Mostrando o resultado
echo ($linha[0);
// Fechando a conexão com o MySql
mysql_close($con);
?>
É isso aí, pessoal. Espero trer ajudado mais uma vez.
Um grande abraço.
Joselmo Carvalho
} catch (tentaIEantigo) {
try {
// Para IE6 e IE5
minhaRequisicao = new ActiveXObject("Msxml2.XMLHTTP");
} catch (tentaOutros) {
try {
// Qualquer coisa diferete
minhaRequisicao = new ActiveXObject("Microsoft.XMLHTTP");
} catch (falhou) {
// Nada funcionou
minhaRequisicao = false;
}
}
}
Depois da criação do objeto de conexão precisamos informar qual documento abrir bem como o método que deverá ser utilizado e se deseja usar uma conexão assíncrona ou não. O navegador faz requisições com GET ou POST, um deles deverá ser o método a ser utilizado. Veja.
minhaRequisicao.open("GET","meunome.php",true);
O primeiro parâmetro passado na função acima informa o método a ser utilizado, o segundo parâmetro informa o documento que se deseja, o terceiro parâmetro informa se deseja comunicação assíncrona.
Agora é necessário informar qual função do javascript precisa ser executada quando o estado de recebimento se alterar.
A linha de comando abaixo informa ao objeto de conexão para executar a função javascript de nome recebeDados quando o estado de recebimento for alterada.
minhaRequisicao.onreadystatechange = recebeDados;
A função recebeDados será descrita mais abaixo.
Bem, até aqui nada aconteceu. Agora precisamos fazer com que nosso objeto de conexão seja executado. Usaremos o comando mostrado a seguir.
minhaRequisicao.send();
Quando o objeto minhaRequisicao tiver seu estado alterado irá executar a função recebeDados.
Lá precisaremos testar se o estado é de completo, o atributo readyState do objeto de conexão precisa ser igual a 4 indicando que o recebimento foi realizado. O da conexão estar terminada não quer dizer que o recebimento tenha sido realizado com sucesso, por isso também temos que testar se o status é igual a 200.
Veja o código abaixo.
function recebeDados(){
//Verificar pelo estado "4" de pronto
if (minhaRequisicao.readyState == '4'){
// Verifica se o documento encontrado com sucesso
if (minhaRequisicao.status == 200) {
//Pegar dados da resposta XML
var resultado = minhaRequisicao.responseText;
minhaDiv.innerHTML = resultado;
}
else {
minhaDiv.innerHTML = "Erro: " + minhaRequisicao.statusText;
}
}
}
O que essa função faz?
O fato do documento ter alterado o seu estado de recebimento não significa que ele tenha sido carregado com sucesso. Por isso precisamos verificar se o estado é igual a 4. Os estados possíveis são:
0 = uninitialized (não inicializado)
1 = loading (carregando)
2 = loaded (carregado)
3 = interactive (interagindo)
4 = complete (pronto)
O comando a seguir pega o resultado enviado pelo servidor.
var resultado = minhaRequisicao.responseText;
E finalmente colocamos o resultado na nossa página, no exemplo dado colocamos na DIV de nome minhaDIV. O atributo innerHTML é quem é responsável para conter o texto HTML.
O nosso código completo poderia ficar assim:
funcion pegaMeuNome() {
minhaRequisicao = criaRequisicao();
if(minhaRequisicao != false) {
minhaRequisicao.open("GET","meunome.php",true);
minhaRequisicao.onreadystatechange = recebeDados;
minhaRequisicao.send();
}
}
funciotn criaRequisicao () {
try {
// Para IE7+, Firefox, Chrome, Opera e Safari
// Para IE7+, Firefox, Chrome, Opera e Safari
XmlReq= new XMLHttpRequest();
}
catch (tentaIEantigo) {
try {
// Para IE6 e IE5
XmlReq = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (tentaOutros) {
try {
// Qualquer coisa diferete
XmlReq = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (falhou) {
// Nada funcionou
XmlReq = false;
}
}
}
return(XmlReq);
}
catch (tentaIEantigo) {
try {
// Para IE6 e IE5
XmlReq = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (tentaOutros) {
try {
// Qualquer coisa diferete
XmlReq = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (falhou) {
// Nada funcionou
XmlReq = false;
}
}
}
return(XmlReq);
}
function recebeDados(){
//Verificar pelo estado "4" de pronto
if (minhaRequisicao.readyState == '4'){
// Verifica se o documento encontrado com sucesso
if (minhaRequisicao.status == 200) {
//Pegar dados da resposta XML
var resultado = minhaRequisicao.responseText;
minhaDiv.innerHTML = resultado;
}
else {
minhaDiv.innerHTML = "Erro: " + minhaRequisicao.statusText;
}
}
}
Se você estiver passando um formulário para o servidor há a necessidade de se colocar mais uma linha informando que se trata de um formulário e alterar o método send colocando os dados do form como parâmetro. Veja a alteração necessária apenas na função pegaMeuNome. Assuma que o formulario só tenha um campo de id = matricula.
funcion pegaMeuNome() {
minhaRequisicao = criaRequisicao();
matr = documment.getElementById("matricula");
if(minhaRequisicao != false) {
minhaRequisicao.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
minhaRequisicao.open("GET","meunome.php",true);
minhaRequisicao.onreadystatechange = recebeDados;
minhaRequisicao.send("matricula="+matr);
}
}
No lado do servidor
No lado do servidor estão os documentos html, Perl, PHP e etc. No nosso caso vamos falar do PHP.
O PHP deverá devolver o HTML para o navegador que fez a solicitação. O navegador então, como visto anteriormente irá pegar o código HTML e colocá-lo na área devida da página web.
Vamos lá.
O código PHP deverá receber os parâmetros passados pelo navegador, se não há parâmetros para serem recebidos basta, então, desprezar essa parte.
Nós usamos uma das seguintes GLOBALS Arrays para coletar as informações passadas.
$_GET[] ou $_POST[]
Usaremos os nomes nas variáveis passadas como parâmetro no método send lá do javascript.
$matriculaFunc = $_GET['matricula'];
Supondo que se faça uma comunicação com o banco de dados MySql para coletar o nome do funcionário teremos o seguinte:
Obs. Não comentarei sobre essa parte, se desejar saber mais acesse o tópico Conexão MySql PHP.
O código seria algo assim:
<?php
// Pegando parâmetros
$matriculaFunc = $_GET['matricula'];
// Abrindo a conexão com o MySql
$con = mysql_connect("localhost", "userdb", "123456");
// Verificando se a conexão foi bem sucedida
if (!$con) {
// A conexão falhou
echo ('Não foi possível conectar: ' . mysql_error());
exit(-1);
}
// Selecionando o banco de dados
if (!mysql_select_db("meudb")) {
// A seleção de banco de dados falhou
echo ("Não foi possível selecionar o banco dados\n");
exit (-2);
}
// Executando a query de consulta
$meuresultado = mysql_query("Select nome_func from FUNCIONARIO Where matr_func = $matriculaFunc");
// Verificando se a consulta foi executada sem erro
if (!$meuresultado ) {
// A consulta falhou
echo ('A consulta falhou: ' . mysql_error());
exit(-3);
}
// Passando o resultado para um array
$linha= mysql_fetch_row($meuresultado);
// Mostrando o resultado
echo ($linha[0);
// Fechando a conexão com o MySql
mysql_close($con);
?>
Um grande abraço.
Joselmo Carvalho
Nenhum comentário:
Postar um comentário