Artigo 41 / 58
Processar dados com Ajax e PHP
php ajax, XMLHttpRequest, ActiveXObject, Microsoft.XMLHTTP
O objectivo deste artigo é complementar a teoria do artigo que escrevi antes
"Compreenda como funciona o Ajax"
disponível aqui , o qual deverá ler com bastante atenção de forma a compreender o que foi aqui feito.Muitos programadores optam por chamar a livraria Ajax , a partir dum ficheiro *.js. No meu caso como a livraria é muito reduzida optei por por incluí-la na página , onde o pedido é solicitado.
Basicamente o processo é muito simples a página "ajax.php" contém a interface e o processamento dos dados com Ajax. A pagina "resultado.php" , recebe o parâmetro enviado por url , com a função send do Ajax , via GET.
Poder-se ia fazer algo muito mais complexo , mas eu optei apenas por simplificar a tarefa de forma a que quem nunca usou Ajax compreenda com essa funcionalidade é implementada.
<html>
<head>
<title>Processar dados com Ajax e PHP</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/javascript">
var pedido = null;
function myAjax(pagina)
{
try {
//cobre versão Firefox, Opera , Safari
pedido = new XMLHttpRequest();
pedido.onreadystatechange = pedidoStatus;
pedido.open("GET",pagina,true);
pedido.send(null);
} catch (tentaIEversaoNova) {
try {
// versões novas do IE
pedido = new ActiveXObject("Msxml2.XMLHTTP");
pedido.onreadystatechange = pedidoStatus;
pedido.open("GET",pagina,true);
pedido.send();
} catch (tentaIEversaoAntiga) {
try {
// versões antigas do IE
pedido = new ActiveXObject("Microsoft.XMLHTTP");
pedido.onreadystatechange = pedidoStatus;
pedido.open("GET",pagina,true);
pedido.send();
}catch (falha) {
pedido = null;
}
}
}
if (pedido == null)
alert("Não foi possível criar o objecto !");
}
function pedidoStatus()
{
// completou o pedido ...
if (pedido.readyState == 4)
{
// e o correu tudo bem no servidor
if (pedido.status ==200)
{
// o servidor responde em formado de texto
// plano no div conm id 'resultado'
document.getElementById('resultado')
.innerHTML = pedido.responseText;
}
else
{
// em caso de erro mostra mensagem
document.getElementById('resultado').innerHTML =
"<font color='red'><strong>Erro ao processar o pedido<strong></font>";
}
}
}
</script>
Ficheiro "ajax.php"
<script language="JavaScript" type="text/javascript">
var pagina;
function Pesquisa(str){
pagina = "resultado.php?tag="+str;
myAjax(pagina);
}
</script>
</head>
<body>
<form action="<?php $_SERVER['PHP_SELF'];?>" method="post" >
<label for="termo"><strong>Termo para pesquisa :</strong></label>
<input type="text" size="40" onKeyUp="Pesquisa(this.value)">
<br>
</form>
<!-- o RESULTADO SERá MOSTRADO NA DIV SEGUINTE-->
<div id="resultado"></div>
</body>
</html>
Ficheiro "resultado.php"
<?php
// se o parametro 'tag' existe é impreimido
if(isset($_GET['tag'])){
echo htmlentities("A tag é ".$_GET['tag']);
}
?>
Espero ter ajudado ;)
Abraço
José Franco
Existem 2 comentários para este artigo
Estão online 2 utilizadores !