Publicado em 17 de ago.

Como Adicionar Ajax em site pronto?

Tenho um site pronto o qual a estrutura está mais ou menos assim:

<html>
<head>
<title>Teste</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>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.Tenho um bom conhecimento em php, porém, em java quase não saio do lugar, se alguem puder me ajudar eu agradeço muito.

Só mais uma coisinha!!!

Eu acessei o meu painel de controle aqui do Forum iMasters e lá tem exatamente o que eu preciso.

No centro da página tem um menu e ao clicar em um link (Tópicos | Posts | Comentários | Amigos | Configurações), 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.

Discussão (3)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

dinhografo· 18 de ago.

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">](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?????

dinhografo· 18 de ago.

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">](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é.

Andrei Amorim· 10 de set.

>
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é.

Cara, parabéns, era isso que eu precisava... pois este código não grava no cache de jeito nenhum... é perfeito.... Milhares de pessoas (como eu) estão quebrando a cabeça na net procurando soluções para este problema de Cache x Ajax e você conseguiu.... Mais uma vez... Parabéns ! ahhh e OBRIGADO !