Ajax + Query String
Olá, meu e Henrique esse é meu primeiro artigo para Revista PHP, dedico a todos leitores, mas em especial para meus amigos Douglas Brucieri ,Carlos ,Bruno e Michel Ferreira
Então vamos ao artigo que se trata de Query String com AJAX
Se você sabe fazer uma query string esse tutorial sera bem simples para você.
Muitos já devem ter visto algo do tipo:
www.revistaphp.com.br/pagina=contato
Essa URL acima está passando a famosa Query String que todo mundo deve conhecer
Criando o objecto XMLHTTPREQUEST
Essa é uma function comum que utilizamos para trabalhar com Ajax, salve como “xhConn.js“.
/** XHConn - Simple XMLHTTP Interface - bfults@gmail.com - 2005-04-08 **
** Code licensed under Creative Commons Attribution-ShareAlike License **
** http://creativecommons.org/licenses/by-sa/2.0/ **/
function XHConn()
{
var xmlhttp, bComplete = false;
try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); }
catch (e) { try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); }
catch (e) { try { xmlhttp = new XMLHttpRequest(); }
catch (e) { xmlhttp = false; }}}
if (!xmlhttp) return null;
this.connect = function(sURL, sMethod, sVars, fnDone)
{
if (!xmlhttp) return false;
bComplete = false;
sMethod = sMethod.toUpperCase();
try {
if (sMethod == "GET")
{
xmlhttp.open(sMethod, sURL+"?"+sVars, true);
sVars = "";
}
else
{
xmlhttp.open(sMethod, sURL, true);
xmlhttp.setRequestHeader("Method", "POST "+sURL+" HTTP/1.1");
xmlhttp.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
}
xmlhttp.onreadystatechange = function(){
if (xmlhttp.readyState == 4 && !bComplete)
{
bComplete = true;
fnDone(xmlhttp);
}};
xmlhttp.send(sVars);
}
catch(z) { return false; }
return true;
};
return this;
}
Para maiores informações sobre XMLHTTPREQUEST, visite o link http://xkr.us/code/javascript/XHConn/:
Criamos o arquivo index.php
<html>
<head>
<style type="text/css">
#include {
width :450px;
height:150px;
float:right;
border:1px solid green;
}
</style>
<script type="text/javascript" language="javascript" src="XHConn.js"></script>
<script>
var myConn = new XHConn();
/*aqui eu chamo a funcao que tem o objecto com o metodo definido */
if (!myConn) alert("deu erro aqui.");
/*aqui e a famoso deu erro na inclusão do xhConn.js */
var inclusao = function (oXML) { document.getElementById('include').innerHTML = oXML.responseText; };
/*aqui e variavel onde vai ser include*/
function incluir (url)
{
document.getElementById('include').innerHTML = "<img src='loading.gif' />";
/*aqui em cima e aquela imagens de carregando criei uma imagens vc pra dar um
efeito legal */
myConn.connect("include.php", "GET", "variavel="+url, inclusao);
/*aqui rola a ação eu mandou pra pagina include.php com metodo get o value
da variavel + o conteudo e onde deve atualizar que no case e dentro do div include */
}
</script>
</head>
<body>
link 1: ola mundo <a href="#" onclick="incluir('ola');">Link</a><br/>
link 2: eu sou ajax <a href="#" onclick="incluir('ajax');">Link</a>
<div id="include">
aqui e que vai rola o conteudo
</div>
</div>
</body>
</html>
?>
Criamos o arquivo include.php
<?php /* Aqui é importante você fazer uma validação para evitar o famoso PHP injection e outros */ $pagina =$_GET['variavel']; $pagina =addslashes($pagina); /*aqui e o value tudo simples testa se a pagina existe senao existe eu respondo essa pagina no existe */ if(file_exists($pagina.'.php')) { include($pagina.'.php'); } else { echo "essa pagina no existe "; } ?>
Crie um pagina ola.php e ajax.php , clique aqui e faça o download do arquivo que montei, incluindo gif para exibir carregando…
Essa minha primeira materia espero que tenham gostado, qualquer dúvida mande um e-mail, sugestões sempre serão bem vidas.
Abraço a todos
Direto do Revista PHP
