Forum Pplware

Versão Completa: Duvida de Ajax
Está de momento a ver uma versão reduzida do nosso conteúdo. Ver versão completa com o formato adequado.
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. Smile
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 Smile
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.
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";
}


?>
Qualquer dúvida ou comentário agradeço.

Abraços e beijinhos
URL's de Referência