Comecei a estudar essa semana. Minha dúvida é a seguinte:
Tenho um div na página que quero que carregue uma página quando clico no link da mesma, antes de carregar a página deverá aparecer um preloader.
Tentei fzr aqui mas está dando erro, podem me ajudar?
<!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=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript" language="javascript">
function Ajax() {
var ajax = false;
if(window.XMLHttpRequest) {
ajax = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
ajax = new ActiveXObject("Microsoft.XMLHTTP");
}
try {
ajax = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
try {
ajax = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {}
}
}
function getPages() {
var campo_resultado = document.getElementById("box");
var ajax = new Ajax();
ajax.open("GET","pagina2.html",true);
campo_resultado.innerHTML=carregando();
ajax.onreadystatechange = function () {
if (ajax.readystate == 4) {
if (ajax.status == 200) {
var no = ajax.responseText;
campo_resultado.innerHTML = no;
}
}
}
ajax.send(null);
}
function carregando() {
var msg = "<img src='ajax_preloader.gif'>Carregando....";
return msg;
}
</script>
</head>
<body>
<a href="#" onclick="getPages();">Link</a>
<div id="box"></div>
</body>
</html>Fiz uma modificações e na div ele retorna undefined
<!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=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript" language="javascript">
var Ajax=false;
function AjaxRequest() {
Ajax = false;
if (window.XMLHttpRequest) {
Ajax = new XMLHttpRequest;
}
else if (window.ActiveXObject) {
try {
Ajax = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
Ajax = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
}
function carregando() {
if (Ajax.readystate == 4) {
if (Ajax.status == 200) {
var no = ajax.responseText;
campo_resultado.innerHTML = no;
var msg = "<img src='ajax_preloader.gif'>Carregando....";
return msg;
}
}
}
function getPages() {
var campo_resultado = document.getElementById("box");
ajax = new AjaxRequest();
if (!Ajax) {
alert('Não foi possível iniciar o AJAX');
return;
}
ajax.onreadystatechange = carregando;
Ajax.open('GET','pagina2.html',true);
campo_resultado.innerHTML=carregando();
ajax.send(null);
}
</script>
</head>
<body>
<a href="#" onclick="getPages();">Link</a>
<div id="box"></div>
</body>
</html>Tem alguém ai????
Bom acho q consegui o que queria...
Só tenho mais uma dúvida, o loading... não dá pra perceber muito bem no IE e no FF passa rapidinho tbm, no Opera dá pra ver de boa, eu queria saber se isso ocorre pq a página a ser carregada na div não é grande, por tanto não demora o carregamento, ou é pq os dados ficam gravados no cache??? Se for pelo cache, como fzr pra que isso não aconteça?
O script:
<script type="text/javascript" language="javascript">
function openAjax() {
var endereco;
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;
}
function ajaxGet(endereco,retorno) {
if(document.getElementById) {
var exibeResultado = document.getElementById('produtos_des');
exibeResultado.style.display='';
var ajax = openAjax();
ajax.open("GET",endereco,true);
ajax.onreadystatechange = function() {
if(ajax.readyState == 2 || ajax.readyState == 3) {
exibeResultado.innerHTML = "<div id='carregando'><img src='images/ajax_preloader.gif' alt='Carregando' />Loading....</div>";
} else {
if(ajax.readyState == 4) {
if(ajax.status == 200) {
var resultado = ajax.responseText;
resultado = resultado.replace(/\+/g," ");
resultado = unescape(resultado);
exibeResultado.innerHTML = resultado;
} else {
exibeResultado.innerHTML = "Ocorreu um erro. Tente novamente mais tarde. ";
}
}
}
}
ajax.send(null);
}
}
</script>
E o link <a style="cursor:pointer;" onclick="ajaxGet('condicionador.html','retorno')">
