Tweet
Olá estou programando uma web e resolvi colocar o carregar página por AJAX, mas estou tendo problemas com o SCRIPT
Oque eu quero: Clicar no link, EXIBIR UMA DIV " carregando ", AO CARREGAR A PÁGINA e SUMIR APÓS CARREGAR.
Oque ele está fazendo: Clicar no link, EXIBIR UMA DIV " carregando " mas não desaparece após carregar, sei que é facil, mais não tenho muito conhecimento com AJAX, javascript
[CÓDIGO DO SCRIPT] ajax.js
[CÓDIGO HTML]
Oque eu quero: Clicar no link, EXIBIR UMA DIV " carregando ", AO CARREGAR A PÁGINA e SUMIR APÓS CARREGAR.
Oque ele está fazendo: Clicar no link, EXIBIR UMA DIV " carregando " mas não desaparece após carregar, sei que é facil, mais não tenho muito conhecimento com AJAX, javascript
[CÓDIGO DO SCRIPT] ajax.js
Código:
function Load(url, div, tipo, campos)
{
var ajax = null;
if(window.ActiveXObject)
{
ajax = new ActiveXObject('Microsoft.XMLHTTP');
}
else if(window.XMLHttpRequest)
{
ajax = new XMLHttpRequest();
}
if(ajax != null)
{
var cache = new Date().getTime()
ajax.open(tipo, url+'&cache='+cache, true);
ajax.onreadystatechange = function status()
{
if(ajax.readyState == 4)
{
if(ajax.status == 200)
{
document.getElementById(div).innerHTML = ajax.responseText;
document.getElementById('carregando').style.display="none";
var texto = unescape(ajax.responseText.replace(/\+/g, " "))
ExtractScript(texto);
}
}
else
{
document.getElementById('carregando').style.display="block";
document.getElementById('carregando').innerHTML = "<center>Carregando...</center>";
}
}
if(tipo == "POST")
{
ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
ajax.setRequestHeader("Cache-Control", "no-store, no-cache, must-revalidate");
ajax.setRequestHeader("Cache-Control", "post-check=0, pre-check=0");
ajax.setRequestHeader("Pragma", "no-cache");
ajax.send(campos);
}
else
{
ajax.send(null);
}
}
}
[CÓDIGO HTML]
Código HTML:
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <script type="text/javascript" src="[COLOR="Red"][B]ajax.js[/B][/COLOR]"></script> <style type="text/css"> body{ margin:0; } #carregando{ display:none; position:absolute; left:550px; padding:10px; width:300px; background:#000; font-size:25px; color:#FFFFFF; border:1px solid #FFF; } </style> </head> <body> <div id="carregando"></div> <center><img src="http://sadho.com/wp-content/uploads/2009/03/palolem-200x800.jpg" /></center> <li><a href="javascript: void(0);" onClick="Load('Teste1', 'conteudo', 'GET');">Página 1</a></li> <div style="border:2px solid #000000;" id='conteudo'></div> <li><a href="javascript: void(0);" onClick="Load('Teste1', 'conteudo2', 'GET');">Página 2</a></li> <div style="border:2px solid #000000;" id='conteudo2'></div> <li><a href="javascript: void(0);" onClick="Load('Teste3', 'conteudo3', 'GET');">Página 3</a></li> <div style="border:2px solid #000000;" id='conteudo3'></div> </body> </html>
Comment