5

Como posso criar um site que utilize AJAX para o carregamento das páginas ?

Qual a melhor maneira de fazer isso sem que ocorram bugs e que sejam realmente funcionais?

Tenho planos de criar alguns sites que possuem um player de áudio, o qual não pode parar quando uma pessoa ir para outra página.

Site exemplo: http://www.nandolocutor.com/

Gostaria de criar um site semelhante a esse.

Na página seria algo semelhante a isso:

<body>
    <div class="meu-player">Aqui fica o player</div>
    <div class="meu-menu">Aqui fica o menu</div>
    <section>Aqui fica o conteúdo que é puxado via ajax e exibido</section>
</body>

Gostaria de receber exemplos funcionais (em código) de como fazer isso.

3
  • 1
    Você pode dividir o site em divs, sections ou qualquer outra tag, colocando o player de áudio em uma e carregando os conteúdos em outra, assim o player nunca parará de tocar.
    – ptkato
    Commented 15/07/2014 às 5:17
  • Obrigado @Patrick você poderia transformar seu comentário em resposta? você poderia também colocar em sua pergunta o código necessário para tal funcionalidade. Commented 15/07/2014 às 5:18
  • alguma restrição a frameworks? como angular ou knockout?
    – Caputo
    Commented 21/07/2014 às 20:21

2 Respostas 2

8

Você pode dividir o site em várias partes:

HTML

<head>
    <!-- Sempre importe as bibliotecas antes de tentar trabalhar com elas. -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
       // Checa se a página foi carregada para evitar aplicar os códigos antes de ter algum elemento não carregado. Pode-se usar também "$(function(){".
        $(document).ready(function(){
            $("#home").on("click", function(){
                $("main").empty(); //Limpa para poder colocar o conteúdo.
                $("main").load("home.html"); //Faz uma requisição http para o servidor.
            });
            $("#sobre").on("click", function(){
                $("main").empty();
                $("main").load("sobre.html");
            });
        });
    </script>
</head>
<body>
    <!-- No caso, o header é a parte fixa, que não muda. -->
    <header>
        <div>"Aqui fica o player de audio."</div>
        <ul>
            <li id="home">Home</li>
            <li id="sobre">Sobre</li>
        </ul>
    </header>
    <main>
        <!-- Aqui é onde o conteúdo vai ser carregado. -->
    </main>
</body>

Vale lembrar que isso só funciona se tiver um servidor, o navegador não permite fazer esse tipo de coisa diretamente no sistema de arquivos.

11
  • 3
    @AlexandreLopes window.history.pushState("objeto ou string", "Titulo", "/url"); Commented 15/07/2014 às 12:07
  • Olá @DiegoVieira obrigado pela atenciosidade! Ainda não consegui, está funcionando somente no meu computador, quando eu hospedo não funciona. Não sei o que pode ter causado isso. Vou hospedá-lo agora em uma hospedagem qualquer só para você ver como está. Commented 21/07/2014 às 19:57
  • @AlexandreLopes Verifique pelo console do navegador se está retornando algum erro, é bom caminho para descobrir o que está acontecendo. Commented 21/07/2014 às 20:00
  • Sim, possui um erro na linha 12: i.imgur.com/CFs9drt.png Commented 21/07/2014 às 20:08
  • Faça o seguinte, onde esta escrito href e title coloque assim, "href", "title" respectivamente, faltou adicionas as aspas. Commented 21/07/2014 às 20:17
7
+50

Para alterar a URL da página sem comprometer o conteúdo (refresh) basta usar o seguinte código.

Javascript

window.history.pushState("objeto ou string", "Titulo", "/url");

DEMO do código acima funcionando

HTML Adaptado com o código do @Patrick.

<head>
    <!-- Sempre importe as bibliotecas antes de tentar trabalhar com elas. -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
       // Checa se a página foi carregada para evitar aplicar os códigos antes de ter algum elemento não carregado. Pode-se usar também "$(function(){".
        $(document).ready(function(){
            $(".ajax").on("click", function(e){
                e.preventDefault(); //eliminamos o evento
                var path = $(this).attr("href"); //Pegamos o caminho
                var titulo = $(this).attr("title"); //pegamos o titulo da página
                document.title = titulo; // Alterar o titulo da página
                window.history.pushState("", titulo, path);   
                $("main").empty(); //Limpa para poder colocar o conteúdo.
                $("main").load(path); //Faz uma requisição http para o servidor.
            });
        });
    </script>
</head>
<body>
    <!-- No caso, o header é a parte fixa, que não muda. -->
    <header>
        <div>"Aqui fica o player de audio."</div>
        <ul>
            <li><a href="home.html" class="ajax" title="Meu site">Home</a></li>
            <li><a href="sobre.html" class="ajax" title="Meu site - Sobre">Sobre</a></li>
        </ul>
    </header>
    <main>
        <!-- Aqui é onde o conteúdo vai ser carregado. -->
    </main>
</body>

Para utilizar o parâmetro data- e recuperar o valor com JQuery você deve utilizar o $.data

Jquery

$(function(){
    var texto;

    //Recuperar do data-value
    texto = $('a.value').data('value');
    $('.resultado').append('<li>' + texto + '</li>');

    //Recuperar do data-titulo
    texto = $('a.titulo').data('titulo');
    $('.resultado').append('<li>' + texto + '</li>');

    //Recuperar do data-target
    texto = $('a.target').data('target');
    $('.resultado').append('<li>' + texto + '</li>');

    //Recuperar do data-meuVar
    texto = $('a.meuVar').data('meuvar');
    $('.resultado').append('<li>' + texto + '</li>');
});

Esse é meu HTML de exemplo

HTML

<a href="#" class="value" data-value="texto do data-value"></a>

<a href="#" class="titulo" data-titulo="texto do data-titulo"></a>

<a href="#" class="target" data-target="texto do data-target"></a>

<a href="#" class="meuVar" data-meuvar="texto do data-meuvar"></a>

<ul class="resultado"></ul>

Este código irá mostrar lista

  • texto do data-value
  • texto do data-titulo
  • texto do data-target
  • texto do data-meuvar

Você pode acompanhar o código funcionando nesta DEMO

13
  • 1
    @AlexandreLopes pode deixar Commented 15/07/2014 às 20:50
  • Eu testei e houve problemas. Abrindo no meu PC funciona legal, só que se eu hospeda-lo já não funciona. O que pode ser? Commented 15/07/2014 às 21:24
  • @AlexandreLopes, ligou o servidor?
    – ptkato
    Commented 20/07/2014 às 3:37
  • 1
    Disponha, todos estamos aqui para ajudar, acredito que a pontuação seja uma forma de agradecimento, tendo a melhor resposta ou não, eu estou feliz em solucionar seu problema. Boa sorte no projeto! Commented 21/07/2014 às 20:55
  • 1
    Isso acontece por que com essa estrutura você está carregando ele em uma div, você pode resolver isso de outra forma, todas as páginas contenham o menu e não apenas o texto. Commented 21/07/2014 às 21:10

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .