Carregar paginas via ajax

gapaiva44 · Dezembro 30, 2008

E ai Pessoal BLZA,

Eu gostaria de uma ajudinha de vcs, eu programo em php e estou louco para aprender o ajax e para isso resolvi desenvolver tudo usando esta ferramenta.

Hoje e faço o seguinte para arregar as minhas paginas, monto um css base com o layout ai coloco a div conteudo por exemplo recebendo uma variavel ex:

<div id='conteudo'>

<?

//recebendo a secao

$secao=$_GET["pg"];

if (file_exists($secao.".php"))

{

include($secao.".php");

}

else {

$inicio = "principal";

include($inicio.".php");

}

?>

</div>

ex: menu=> <a href='home.php?pg=contato'> Home </a>

este comando recebe o nome da pagina passado via GET pelo link (botao), caso a pagina não exista ou a variavel $secao a nada ou vacia o sistema inclui a pagina principal, agora eu gostaria de passar este recebimento para o ajax usando um loading.

mais uma pergunta se o navegador da pessoa não tiver suporte a java script o que acontece? ele vai conseguir navegar pelo site?

Desde já agradeço a ajuda, fiquem com Deus !

DarkDragonLord · Dezembro 30, 2008

Bom, eu faço layout quase igual ao metodo que você usa.

No caso de AJAX, Use jQuery + UI Tabs Plugin.

Assim, o menu ficaria

<div id="container">
	 <ul>
		 <li><a href="ahah_1.html"><span>Content 1</span></a></li>
		 <li><a href="ahah_2.html"><span>Content 2</span></a></li>
		 <li><a href="ahah_3.html"><span>Content 3</span></a></li>
	 </ul>
</div>

Se o JS tiver ok, aparecerá o 'Loading' e carregará na DIV setada.

Se não houver JS, os links funcionarão como se fossem a href normais.

Leia atentamente pois o UI Tab precisa, além do JS do jQuery e o dele próprio, o ui.core.js e também, declarar no css:

.ui-tabs-hide { display: none; }

Acho que tá ok a explicação, mais que isso só se eu te der exemplo ou pior, codigo pronto. Exemplo aqui :P

gapaiva44 · Dezembro 30, 2008

Bom, eu faço layout quase igual ao metodo que você usa.

No caso de AJAX, Use jQuery + UI Tabs Plugin.

Assim, o menu ficaria
<div id="container">
	 <ul>
		 <li><a href="ahah_1.html"><span>Content 1</span></a></li>
		 <li><a href="ahah_2.html"><span>Content 2</span></a></li>
		 <li><a href="ahah_3.html"><span>Content 3</span></a></li>
	 </ul>
</div>
Se o JS tiver ok, aparecerá o 'Loading' e carregará na DIV setada.

Se não houver JS, os links funcionarão como se fossem a href normais.

Leia atentamente pois o UI Tab precisa, além do JS do jQuery e o dele próprio, o ui.core.js e também, declarar no css:
.ui-tabs-hide { display: none; }
Acho que tá ok a explicação, mais que isso só se eu te der exemplo ou pior, codigo pronto. Exemplo aqui :P

Por favor se possivel isso me ajudaria muito a entender este metodo e assim aprender mais rapidamentwe sobre o AJAX, desde já agradeço pela ajuda.

DarkDragonLord · Dezembro 30, 2008

beleza, é simples:

Exemplo:

http://raphaelddl.com/teste/CONTATO/Contact.html

coloque o CSS do Tabs + FIX pra IE (pra variar hahahah) no cabeçalho do index/inicial/oq seja.

<link rel="stylesheet" href="jquery.tabs.css" type="text/css" media="print, projection, screen">
		<!-- Additional IE/Win specific style sheet (Conditional Comments) -->
		<!--[if lte IE 7]>
		<link rel="stylesheet" href="jquery.tabs-ie.css" type="text/css" media="projection, screen">
		<![endif]-->

http://raphaelddl.com/teste/CONTATO/jquery.tabs.css

http://raphaelddl.com/teste/CONTATO/jquery.tabs-ie.css

http://raphaelddl.com/teste/CONTATO/loading.gif

http://raphaelddl.com/teste/CONTATO/tab.png

Agora, adicione os JS que precisaremos:

<script type="text/javascript" src="./jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="./jquery-ui-personalized-1.6rc2.min.js"></script>
<script type="text/javascript" src="./jquery.tabs.pack.js"></script>

http://raphaelddl.com/teste/CONTATO/jquery-1.2.6.min.js

http://raphaelddl.com/teste/CONTATO/jquery...d-1.6rc2.min.js

http://raphaelddl.com/teste/CONTATO/jquery.tabs.pack.js

Ainda no HEAD, vamos agora chamar o jQuery Tabs pra funcionar

<script language="javascript" type="text/javascript">
$(document).ready(function(){
	$('#ID DA DIV QUE TERÁ O MENU').tabs();
  });
</script>

Agora, crie o menu

<div id="ID DA DIV QUE TERÁ O MENU">
	<ul>
	<li><a href="Jajuda.html"><span>Ajuda</span></a></li>
	<li><a href="Jparceria.html"><span>Parceria</span></a></li>
	<li><a href="Jsite.html"><span>Site</span></a></li>
	<li><a href="Jeventos.html"><span>Eventos</span></a></li>
	<li><a href="Jrecruta.html"><span>Recruta</span></a></li>
		</ul>
</div>

PRONTO. O JS automaticamente criará as Tabs de acordo com o CSS e a div que aparecerá o conteúdo. Cabe a você criar o Jajuda.html e os outros com os devidos conteúdos.

Quando clicar na aba, se o JS tiver ativado, ele mostra o conteúdo do html que você chamou.

Se tiver desabilitado, seria como se não existisse as Tabs e quando você clicasse, seria um a href normal.

(por exemplo: http://raphaelddl.com/teste/CONTATO/Jajuda.html)

Pra finalizar, se quiser outro jeito de AJAX, dê uma olhada em www.eprimecare.com.br

Se gostar deste modo que foi feito, eu te explico como fazê-lo (afinal, eu que fiz o site :P)

gapaiva44 · Dezembro 30, 2008

Muito Legal !!!!!!!!!

vou instalar isso no meu site e dou noticias !!!!!

VALEU !!!!!!

DarkDragonLord · Dezembro 30, 2008

Muito Legal !!!!!!!!!

vou instalar isso no meu site e dou noticias !!!!!

VALEU !!!!!!

Ok!

By the way, notei que você tb é de BH ahahah q legal

http://forum.imasters.com.br/public/style_emoticons/default/natal_tongue.gif

gapaiva44 · Dezembro 31, 2008

Muito Legal !!!!!!!!!

vou instalar isso no meu site e dou noticias !!!!!

VALEU !!!!!!

Ok!

By the way, notei que você tb é de BH ahahah q legal

http://forum.imasters.com.br/public/style_emoticons/default/natal_tongue.gif

Resolvi aqui consegui fazer meu proprio loading, achei mais facil pa assim tenho mais controle sobre o arquivo de qualquer forma muito obrigado, segue abaixo os arquicos que usei

link do menu

funções ajax.js

/*INICIANDO O AJAX*/

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;

}

// Chama a função loadFunctions ao carregar a página

window.onload = loadFunctions;

// Função que chama outras funções

function loadFunctions() {

focusNome();

exibirBgBody();

}

// Utilizado para evitar de digitar: document.getElementById toda hora, tornando o processo mais prático

function gE(ID) {

return document.getElementById(ID);

}

// Utilizado para evitar de digitar: document.getElementsByTagName toda hora, tornando o processo mais prático

function gEs(tag) {

return document.getElementsByTagName(tag);

}

// Esta função seta o focus ao campo nome do formulário

function focusNome() {

// Se hão houver o campo nome aborta a função

if (!gE('nome')) return false;

// Concede o focus ao campo nome do cadastro

gE('nome').focus();

}

// Utilizado para criar o fundo sobre a página (wiewport), body.

function exibirBgBody() {

// Seleciona a tag body. item(0) por que só existe uma tag body

var tagBody = gEs('body').item(0);

// Pega os tamanhos atuais da página, como largura, altura, ...

var sizesPage = getPageSize();

// Vamos criar uma tag div

var bgBody = document.createElement('div');

// Setar o atributo ID a div criada

bgBody.setAttribute('id','bgBody');

// Essa div terá o tamanho exato da página

bgBody.style.height = arrayPageSize[1] + 'px';

// Essa div terá a largura exata da página

bgBody.style.width = arrayPageSize[0] + 'px';

// Evita criar a div novamente

if (!gE('bgBody')) {

tagBody.insertBefore(bgBody, tagBody.firstChild);

}

// Cria a div denominada como boxCad, a qual conterá o formulário de cadastro

function boxCad() {

// Cria um 'container' que comportará o formulário de cadastro.

var objBody = gEs('body').item(0);

var sizesPage = getPageSize();

var boxCad = document.createElement('div');

boxCad.setAttribute('id','boxCad');

var wPage = arrayPageSize[0]; // Largura total da página

var hPage = arrayPageSize[1]; // tamanho total da página

/*boxCad.style.width = (wPage / 2) + 'px'; // metade da largura da página*/

boxCad.style.height = (wPage / 2) + 'px'; // metada da altura da página

boxCad.style.marginTop = -(wPage / 4) + 'px'; // 1 quarto da largura

//boxCad.style.marginLeft = -(wPage / 4) + 'px'; // 1 quarto da altura

objBody.insertBefore(boxCad, objBody.lastChild);

}

function boxTop() {

var objBody = gEs('topo').item(0);

var sizesPage = getPageSize();

var boxCad = document.createElement('div');

boxCad.setAttribute('id','boxCad');

var wPage = arrayPageSize[0]; // Largura total da página

var hPage = arrayPageSize[1]; // tamanho total da página

/*boxCad.style.width = (wPage / 2) + 'px'; // metade da largura da página*/

boxCad.style.height = (wPage / 2) + 'px'; // metada da altura da página

boxCad.style.marginTop = -(wPage / 4) + 'px'; // 1 quarto da largura

//boxCad.style.marginLeft = -(wPage / 4) + 'px'; // 1 quarto da altura

objBody.insertBefore(boxCad, objBody.lastChild);

}

// Utilizado para criar o efeito de loading

function loading(opt) {

if (opt == true) {

// A tag que receberá a img de loading

var refer = gE('bgBody');

// O tamanho da referida tag

var referHeight = refer.offsetHeight;

// Dizemos que os elementos dentro dela será alinhado ao centro

refer.style.textAlign = 'center';

// Criamos uma imagem, img.

var img = document.createElement('img');

// Informamos o caminho da img

img.setAttribute('src','images/loading.gif');

// Setamos um atributo ID na img criada

img.setAttribute('id','loading');

// Definimos seu tamanho

img.setAttribute('width','220');

// Dizemos que o margin-top será a metada do tamanho da div

img.style.marginTop = (referHeight /2) + 'px';

// Evita que seja criada duas ou mais img de loading

if (!document.getElementById('loading')) {

// Insere a img na tag informada na variável refer

refer.insertBefore(img, refer.firstChild);

}

} else if (opt == false) {

// Referenciamos a img de login através de seu ID

var imgLoading = gE('loading');

// Removemos a img de loading

if (imgLoading) {

imgLoading.parentNode.removeChild(imgLoading);

}

//iniciando a função de carregamento das páginas

function incluir(url) {

// Inicia o Ajax, através da variável Ajax

var ajax = openAjax();

//div que recebe o cinteudo

var recipiente = gE('conteudo');

//chamando a pagina

ajax.open('GET', 'include.php?variavel=' + url);

//chamando o loading

ajax.onreadystatechange = function() {

if (ajax.readyState == 1) {

// Cria o efeito de loading

exibirBgBody();

loading(true);

} // if->readyState->1

if (ajax.readyState == 4) {

if (ajax.status == 200) {

// Remove o efeito de loading

loading(false);

// Pega o conteúdo - HTML - da página requisitada: formulario.php?ajax=true e coloca dentra da div definida na variável recipiente

recipiente.innerHTML = ajax.responseText;

//remove as div

removerDivs();

} // if-status->200

} // if->readyState->4

} // ajax->onreadystatechange

// Envia a requisição

ajax.send(null);

// Evita o reload da página

return false;

/*fim da função*/}

function removerDivs() {

var bgBody = gE('bgBody');

var boxCad = gE('boxCad');

bgBody.parentNode.removeChild(bgBody);

if (boxCad) { // Por que ao clicar X (para deletar um registro) cria-se somente o encobridor e não o boxCad

boxCad.parentNode.removeChild(boxCad);

}

/* Funções de terceiros */

// getPageSize()

// Returns array with page width, height and window width, height

// Core code from - quirksmode.org

// Edit for Firefox by pHaez

//

function getPageSize(){

var xScroll, yScroll;

if (window.innerHeight && window.scrollMaxY) {

xScroll = document.body.scrollWidth;

yScroll = window.innerHeight + window.scrollMaxY;

} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac

xScroll = document.body.scrollWidth;

yScroll = document.body.scrollHeight;

} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari

xScroll = document.body.offsetWidth;

yScroll = document.body.offsetHeight;

}

var windowWidth, windowHeight;

if (self.innerHeight) { // all except Explorer

windowWidth = self.innerWidth;

windowHeight = self.innerHeight;

} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode

windowWidth = document.documentElement.clientWidth;

windowHeight = document.documentElement.clientHeight;

} else if (document.body) { // other Explorers

windowWidth = document.body.clientWidth;

windowHeight = document.body.clientHeight;

}

// for small pages with total height less then height of the viewport

if(yScroll < windowHeight){

pageHeight = windowHeight;

} else {

pageHeight = yScroll;

}

// for small pages with total width less then width of the viewport

if(xScroll < windowWidth){

pageWidth = windowWidth;

} else {

pageWidth = xScroll;

}

arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight)

}

so tenho mais uma duvida e gostaria muito da sua ajuda veja que na função exibirBgBody(); driei uma div encima da tg BODY so que eu gostaria de criar uma DIV entre as 2 divs mais não estou conseguindo setar a div id=topo, você sabe como ajudar?

DarkDragonLord · Janeiro 6, 2009

uso esse aqui:

/* **********************************************
* Dynamic Ajax Content- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
*
*
* Extra Comment Below by Raphael DDL at RaphaelDDL.com
*
* Link: http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm
* Loading Change at: http://www.dynamicdrive.com/forums/archive/index.php/t-8954.html
*
*
* Common Usage:
* <a href="java script:ajaxpage('PAGE', 'DIV ID TO LOAD PAGE');"> Link Name </a>
*
*
* Loading absolute link: (this will get something like /home/theusername/folderWhereFileIs)
* <a href="java script:ajaxpage(rootdomain+'/mydir/index.htm', 'DIV ID TO LOAD PAGE');"> Link Name </a>
* 
*
********************************************** */


var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
var loadedobjects=""
var rootdomain="http://"+window.location.hostname
var bustcacheparameter=""

function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
} 
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false

//Here is the default script code. It already change the content.
//
//page_request.onreadystatechange=function(){
//loadpage(page_request, containerid)

// Here is the change to show the 'loading' before change content. Edit to your likes.

document.getElementById(containerid).innerHTML='<div id="LoadingBox"><center><table width="90%" height="75px" border="0" cellspacing="0" cellpadding="0" align="center" valign="bottom"><tr><td align="center">Aguarde. Carregando Página...</td></tr><tr><td align="center" valign="top"><img src="./images/loading.gif" alt="LoadingData" /></td></tr></table></center></div>'
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
//end changes
}

if (bustcachevar) //if bust caching of external page
bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', url+bustcacheparameter, true)
page_request.send(null)
}

function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}

function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}

E pra chamar um link,

<a href="java script:ajaxpage('./ARQUIVO.EXT', 'ID DA DIV');">algumacoisa</a>

Pra mudar oq você kizer, só editar essa parte lah

document.getElementById(containerid).innerHTML='<div id="LoadingBox"><center><table width="90%" height="75px" border="0" cellspacing="0" cellpadding="0" align="center" valign="bottom"><tr><td align="center">Aguarde. Carregando Página...</td></tr><tr><td align="center" valign="top"><img src="./images/loading.gif" alt="LoadingData" /></td></tr></table></center></div>'

DSerma · Janeiro 7, 2009

Caramba... vcs gostam de fazer o AJAX parecer um bicho de 7 cabeças hein ???

AHIUhAuhAUHuHAUHAuIAHuhAHA

Pra que um código gigante desse ssó pra carregar uma página ??

Eu hein ?? o.O

gapaiva44 · Janeiro 7, 2009

Caramba... vcs gostam de fazer o AJAX parecer um bicho de 7 cabeças hein ???

AHIUhAuhAUHuHAUHAuIAHuhAHA

Pra que um código gigante desse ssó pra carregar uma página ??

Eu hein ?? o.O

Se você tiver uma solução mais simples seria otimo, ajudaria muito pq para carregar uma pagina em ajax eu uso 4 funções, so postei tudo o meu 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;

}

// Utilizado para evitar de digitar: document.getElementById toda hora, tornando o processo mais prático

function gE(ID) {

return document.getElementById(ID);

}

// Utilizado para criar o efeito de loading

function loading(opt) {

if (opt == true) {

// A tag que receberá a img de loading

var refer = gE('bgBody');

// O tamanho da referida tag

var referHeight = refer.offsetHeight;

// Dizemos que os elementos dentro dela será alinhado ao centro

refer.style.textAlign = 'center';

// Criamos uma imagem, img.

var img = document.createElement('img');

// Informamos o caminho da img

img.setAttribute('src','images/loading.gif');

// Setamos um atributo ID na img criada

img.setAttribute('id','loading');

// Definimos seu tamanho

img.setAttribute('width','220');

// Dizemos que o margin-top será a metada do tamanho da div

img.style.marginTop = (referHeight /2) + 'px';

// Evita que seja criada duas ou mais img de loading

if (!document.getElementById('loading')) {

// Insere a img na tag informada na variável refer

refer.insertBefore(img, refer.firstChild);

}

} else if (opt == false) {

// Referenciamos a img de login através de seu ID

var imgLoading = gE('loading');

// Removemos a img de loading

if (imgLoading) {

imgLoading.parentNode.removeChild(imgLoading);

}

//iniciando a função de carregamento das páginas

function incluir(url) {

// Inicia o Ajax, através da variável Ajax

var ajax = openAjax();

//div que recebe o cinteudo

var recipiente = gE('conteudo');

//chamando a pagina

ajax.open('GET', 'include.php?variavel=' + url);

//chamando o loading

ajax.onreadystatechange = function() {

if (ajax.readyState == 1) {

// Cria o efeito de loading

exibirBgBody();

loading(true);

} // if->readyState->1

if (ajax.readyState == 4) {

if (ajax.status == 200) {

// Remove o efeito de loading

loading(false);

// Pega o conteúdo - HTML - da página requisitada: formulario.php?ajax=true e coloca dentra da div definida na variável recipiente

recipiente.innerHTML = ajax.responseText;

//remove as div

removerDivs();

} // if-status->200

} // if->readyState->4

} // ajax->onreadystatechange

// Envia a requisição

ajax.send(null);

// Evita o reload da página

return false;

/*fim da função*/}

sendo que as 3 primeiras são usadas em varias partes do sistema e somente a incluir e usada exlusivamente no carregamento das paginas, se você tiver uma solução mais simples seria de grande ajuda.

DSerma · Janeiro 7, 2009

4 funções ????

Caramba

HAIUhiuAHIUAiUAHiuhA

Usa essa aki fio

var url;
var xmlHttp=null;
function showPage(str)
{ 
document.getElementById("conteudo").innerHTML = "<img src = 'loading.gif' border ='0'>";
xmlHttp=GetXmlHttpObject();
url=str;
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}


function stateChanged() 
{ 
if (xmlHttp.readyState==4 && xmlHttp.status == 200)
{
document.getElementById("conteudo").innerHTML = xmlHttp.responseText;
}
}



function GetXmlHttpObject()
{
 if (window.XMLHttpRequest) {   
		   a=new XMLHttpRequest(); } 
	   else {  
		 try {   
			a=new ActiveXObject("Msxml2.XMLHTTP");  
		 }	 
		 catch(e) {  
		   try {   
			  a=new ActiveXObject("Microsoft.XMLHTTP"); 
		   }	 
		   catch(e) { 
			  a=false;   
		   }  
		 }  
	   }   
	   return a;  
	 }

Abraços...

Arquivado

Carregar paginas via ajax

Recommended Posts

gapaiva44 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

DarkDragonLord 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

gapaiva44 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

DarkDragonLord 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

gapaiva44 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

DarkDragonLord 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

gapaiva44 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

DarkDragonLord 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

DSerma 19

Compartilhar este post

Link para o post

Compartilhar em outros sites

gapaiva44 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

DSerma 19

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Fóruns

Tempo Real

Informação importante