+- Forum Pplware (http://forum.pplware.com)
+-- Fórum: Mais Tech (/forumdisplay.php?fid=11)
+--- Fórum: Programação e Web (/forumdisplay.php?fid=16)
+--- Tópico: Duvida de Ajax (/showthread.php?tid=2912)
Duvida de Ajax - Ribeiro - 24-07-2009 12:08
Boas pessoal!!
Estou com problemas em resolver uma situação em Ajax, se me pudessem dar umas dicas, agradecia.
O problema é o seguinte: estou a desenvolver um site e quero implementa-lo com Ajax, então o que fiz foi criar um “div id=main” na minha pagina html que se divide em “div id=left”, que contem um menu de links e “div id=right”.
A ideia passa por carregar, por exemplo num link e através de Ajax fazer com que a informação apareça no lado direito(e funciona). O senão é que apenas funciona se substituir os links por botões.
Alguém tem ideia como fazê-lo com links??
O código do ficheiro de Jscript(ajax.js):
Código:
var xmlHttpRequest = null;
//Função que cria o Objecto XmlHttpRequest
function criarObjectoXmlHttpRequest()
{
if (window.XMLHttpRequest)
{
xmlHttpRequest = new XMLHttpRequest()
}
else if (window.ActiveXObject)
{
xmlHttpRequest = new ActiveXObject("Microsft.XMLHTTP")
}
if (xmlHttpRequest == null)
alert("Erro ao criar o objecto XMLHttpRequest!");
}
//Efectua o pedido ao servidor da informação contida no ficheiro nosso_clube.html
function efectuarPedido()
{
criarObjectoXmlHttpRequest();
var url="nosso_clube.html";
xmlHttpRequest.open("GET", url, true);
xmlHttpRequest.onreadystatechange = actualizarPagina;
xmlHttpRequest.send(null);
}
//Actualiza o pagina html com a informação proveniente do servidor
function actualizarPagina()
{
if (xmlHttpRequest.readyState == 4)
{
var novaPagina = xmlHttpRequest.responseText;
document.getElementById("right").innerHTML = novaPagina;
}
}Código do ficheiro de html:
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="ajax.js"></script>
</head>
<body>
<div id="content">
<div id="back">
<div id="header">
<img src="simbolo.PNG"/>
</div>
<div id="main">
<div id="left">
<!-- <input type="button" value="Pedido" onClick="efectuarPedido()"/>-->
<a href="" onClick="efectuarPedido()">O nosso clube</a>
<a href="" onClick="efectuarPedido()">Equipa</a>
<!-- Nesta parte tenho mais links, mas são todos iguais aos de cima -->
</div>
<div id="right"> </div>
</div>
</div>
</div>
</body>
</html>Neste ultimo ficheiro decidi apagar algumas linhas que não são importantes para o problema em questão, de modo a simplificar ao máximo para quem esta a ver.
O ficheiro "nosso_clube.html", apenas contem um paragrafo (fiz o paragrafo só para testar). Outra situação em que irei "esbarrar" será na função "efectuarPedido", já que neste momento apenas esta feita para pedir ao servidor um url, mas a solução final terá de fazer pedidos a todos os html´s que estão no servidor consoante o link clicado. Mas irei ver isso mais lá para a frente.
Cumprimentos.
RE: Duvida de Ajax - Bruno Bernardino - 24-07-2009 12:26
O ideal mesmo é usar jQuery (com JSON para Ajax, em vez de plain text ou plain html), e teres alguma informação inicialmente (por causa dos crawlers).
Mas, respondendo simplesnnete à tua questão, tens duas opções:
Alterar
<code>
<a href="" onClick="efectuarPedido()">O nosso clube</a>
</code>
Para
<code>
<a href="#" onClick="efectuarPedido();">O nosso clube</a>
</code>
Ou
<code>
<a href="jvoid(0);" onClick="efectuarPedido();">O nosso clube</a>
</code>
e repetires o procedimento para outros links.
Outra nota: deverias considerar usar XHTML Strict para "limpar" ao máximo o código HTML e separar as coisas muito bem entre Server-side e Client-side, sendo que terias de ter muitos mais cuidados e o uso de jQuery (ou Mootools) seria quase obrigatório, porque caso contrário terias de escrever muitas linhas de javascript para tudo funcionar perfeitamente em todos os browsers
RE: Duvida de Ajax - Ribeiro - 24-07-2009 13:57
Obrigado Bruno por responderes simplesmente à minha questão (já testei e funciona), mas mais ainda pelas outras sugestões que fizeste (vou segui-las).
Tenho muito para pesquisar e apreender.
RE: Duvida de Ajax - ruicosta - 24-07-2009 15:02
Boa tarde,
Começo por te explicar, aquilo que respondi ao teu comentário:
Maos à obra:
Adicionar à nossa página o JQUERY - Download com esta linha:
Código:
<script type="text/javascript" src="jquery-1.3.2.min.js "></script>Desta forma, podemos utilizar esta leve e prática IDE. Passemos ao teste que ditará se está a funcionar ou não:
Código:
<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script>
$(document).ready(function(){
alert('está a funcionar!');
});
</script>
<head>
<body>
</body>
</html>Apareceu o alerta com a mensagem? Óptimo. Seguindo em frente.
Código pronto e a funcionar e comentado:
Código:
<html>
<head>
<script type="text/javascript" src="http://sorgalla.com/projects/jcarousel/lib/jquery-1.2.3.pack.js"></script>
<script>
$(document).ready(function(){
$("li a").click(function(){ //absorve o evento CLICK da Hiperligação que esta dentro da tag LI
var id = $(this).attr("id");
$.ajax({
method: "get",url: "conteudos.php",data: "pag=" + id,
success: function(html){ // se o houver sucesso na comunicação, o texto é guardado na variável html
$("#conteudo").html(html); //Coloca o conteúdo da variável no DIV com ID conteudo
}
});
return false; //Interrompe o funcionamento normal de um link, desde que o javascript esteja ligado
//caso contrário funciona o simples HTML
});
});
</script>
<head>
<body>
<div id="menu">
<ul>
<li><a href="conteudos.php?pag=1" id="1" title="Sapo">Link 1</a></li>
<li><a href="conteudos.php?pag=2" id="2" title="Google">Link 2</a></li>
</ul>
</div>
<div id="conteudo"></div>
</body>
</html>conteudos.php
Código:
<?php
$p = $_GET['pag'];
switch($p){
case "1";
echo "Link 1";
break;
case "2";
echo "Link 2";
break;
default;
echo "Texto por omissão";
}
?>Abraços e beijinhos