Colocar Resposta 
 
Avaliação do Tópico:
  • 1 votos - 5 Média
  • 1
  • 2
  • 3
  • 4
  • 5
Duvida de Ajax
24-07-2009, 12:08 (Esta mensagem foi modificada pela última vez a: 24-07-2009 12:09 por Ribeiro.)
Mensagem: #1
Duvida de Ajax
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
Procurar todas as mensagens deste utilizador
Citar esta mensagem numa resposta
24-07-2009, 12:26
Mensagem: #2
RE: Duvida de Ajax
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

BrunoBernardino.com
Visitar Website de este utilizador Procurar todas as mensagens deste utilizador
Citar esta mensagem numa resposta
24-07-2009, 13:57
Mensagem: #3
RE: Duvida de Ajax
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.
Procurar todas as mensagens deste utilizador
Citar esta mensagem numa resposta
24-07-2009, 15:02 (Esta mensagem foi modificada pela última vez a: 24-07-2009 15:03 por ruicosta.)
Mensagem: #4
RE: Duvida de Ajax
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
Procurar todas as mensagens deste utilizador
Citar esta mensagem numa resposta
Colocar Resposta 


Saltar Fórum:


Utilizadores a ver este tópico: 1 Visitante(s)