Como adicionar Ajax para que as páginas (pagina1.php, pagina2.php) sejam carregadas na index.php sem refresh no site e com um loadzinho sem mudar muito a estrutura do site, isso por que eu sou novo nessa área e apesar de já saber bastante de php eu hoje que comecei a estudar javascript, rsrsrs, e aos poucos, tudo o que estou aprendendo estou implementando em meu site.<html><head>
<title>Amostra</title>
</head><body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><a href="index.php?pag=pagina1">Página 1</a> | <a href="index.php?pag=pagina2">Página 2</a> </td>
</tr>
<tr>
<td>
<?php
$pag = $_GET["pag"];
switch($pag){
case "pagina1":
include "pagina1.php";
break;
case "pagina2":
nclude "pagina2.php";
break;
default:
include "home.php";
break;
}
?>
</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</body></html>
Em alguns Forus IPB (as versões mais recentes) tem exatamente o que eu preciso, é só clicar no nick do usuário ao lado do tópico para acessar essa página e ver com seus próprios olhos o funcionamento.
No centro da página tem um menu e ao clicar em um link (Tópicos | Posts | Comentários...), aparece uma mensagem de Carragando... e em seguida abre a página solicitada sem refresh no site, a diferença é que eu acho que busca informações em uma base de dados e eu preciso é incluir páginas.
Bom eu não achei nada satisfatório para o meu caso na net então eu resolvi mesmo sem saber nada tentar montar alguma coisa com o que tem aqui, e deu isso:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Teste</title>
<script>
function openAjax() {
var ajax;
try {
ajax = new XMLHttpRequest();
} catch(ee) {
try {
ajax = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try {
ajax = new ActiveXObject("Microsoft.XMLHTTP");
} catch(E) {
ajax = false;
}
}
}
return ajax;
}
window.onload = loadFunctions;
function loadFunctions() {
ativarLinks();
}
function gE(ID) {
return document.getElementById(ID);
}
function gEs(tag) {
return document.getElementsByTagName(tag);
}
function ativarLinks() {
var menutag = gE('menubv');
var linksBtn = menutag.getElementsByTagName('a');
for (var x = 0; x < linksBtn.length; x++) {
var linkBtn = linksBtn[x];
var atributoRel = new String(linkBtn.getAttribute('href'));
linkBtn.onclick = function() {
var ID = this.getAttribute('href').split('=')[1];
var verificalink = this.getAttribute('rel');
if(verificalink == "out"){
return true;
}// if verificalink
var ajax = openAjax();
var recipiente = gE('conteudo');
ajax.open('GET', '?page=' + ID, true);
ajax.onreadystatechange = function() {
if (ajax.readyState == 1) {
// Cria o efeito de loading
loading(true);
}// if-ajax.readyState->1
if (ajax.readyState == 4) {
if (ajax.status == 200) {
// Remove o efeito de loading
recipiente.style.textAlign = 'left';
loading(false);
recipiente.innerHTML = ajax.responseText;
} // if-status->200
}// if-ajax.readyState->4
}//linkBtn.onclick
ajax.send(null);
return false;
}// for
}
}
function loading(opt) {
if (opt == true) {
var refer = gE('conteudo');
var referHeight = refer.offsetHeight;
refer.style.textAlign = 'left';
var img = document.createElement('img');
img.setAttribute('src','loading_bar.gif');
img.setAttribute('id','loading');
//img.setAttribute('width','235');
//img.style.marginTop = '5px';
if (!document.getElementById('loading')) {
refer.innerHTML = "";
refer.insertBefore(img, refer.firstChild);}
} else if (opt == false) {
var imgLoading = gE('loading');
if (imgLoading) {
imgLoading.parentNode.removeChild(imgLoading);
} //imgloading
} //elseif
} //loading
</script>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td id="menubv"><a href="?pag=pagina1">Página 1</a> | <a href="?pag=pagina2">Página 2</a></td>
</tr>
<tr>
<td id="conteudo">
<?php
switch($_GET['pag']){
case "pagina1":
include ("pagina1.php");
break;
case "pagina2":
include ("pagina2.php");
break;
default:
include ("home.php");
}
?>
</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</body>
</html>É assim, deveria ele pegar os links da TD com id="menubv" e abrir as paginas com um loadzinho dentro da TD com id="conteudo", mas ela não abre a pagina1/2.php dentro da TD com id="conteudo" ela abre a prória página dentro dessa TD, ou seja, a index.php (o loading funcionou perfeitamente) o pior é que com o FF, quantas vesez se clicar no lnk é quantas vesez a página vai abrir dentro da TD conteudo.Gente por favor uma ajudinha pra um pobre aprendiz, COMO EU FAÇO ISSO FUNCIONAR?????
Achei um código bem enxuto. Código final para quem precisar:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Teste</title>
<script type="text/javascript">
var xmlhttp = getXmlHttpRequest();
function getXmlHttpRequest()
{
if (window.XMLHttpRequest)
{
return new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
try
{
return new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
return new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){}
}
}
}
function requisicao(_strNomePagina)
{
xmlhttp.open("GET", _strNomePagina, true);
xmlhttp.setRequestHeader("Content-Type", "text/html; charset=iso-8859-1");
xmlhttp.setRequestHeader("Cache-Control", "no-store, no-cache, must-revalidate");
xmlhttp.setRequestHeader("Cache-Control", "post-check=0, pre-check=0");
xmlhttp.setRequestHeader("Pragma", "no-cache");
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState==1)
{
document.getElementById("contents").innerHTML = "<img src='loading_bar.gif' /><br />Carregando...";
}
if (xmlhttp.readyState==4)
{
if (xmlhttp.status == 200) {
document.getElementById("contents").innerHTML = xmlhttp.responseText;
}
}
}
xmlhttp.send(null);
}
</script>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td id="menu">
<a href="?pag=pagina1" onclick="requisicao('?pag=pagina1')">Página 1</a> |
<a href="?pag=pagina2" onclick="requisicao('?pag=pagina2')">Página 2</a> |
<a href="?pag=pagina3" onclick="requisicao('?pag=pagina3')">Página 3</a>
</td>
</tr>
<tr>
<td id="contents">
<?php
$pag = $_GET["pag"];
switch($pag){
case "pagina1":
include "pagina1.php";
break;
case "pagina2":
include "pagina2.php";
break;
case "pagina3":
include "pagina3.php";
break;
default:
include "home.php";
break;
}
?>
</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</body>
</html>Testado no IE e FF com javascript habilitado e desabilitado(óbvio que o ajax não funciona para este ultimo) e as páginas abrem beleza dentro da TD com id="conteudo".Testei também usando ao tabless e tudo filé.
