Skip to content

Latest commit

 

History

History
168 lines (127 loc) · 5.58 KB

2011-03-30-navegacao-sem-refresh-carregando-conteudo-ajax-em-div.md

File metadata and controls

168 lines (127 loc) · 5.58 KB
Raw
id title date author layout guid permalink dsq_thread_id categories tags
416
Navegação sem refresh – carregando conteúdo com ajax em div
2011-03-30 06:45:28 +0000
William Bruno
post
/ajax/navegacao-sem-refresh-carregando-conteudo-ajax-em-div/
2100773012
AJAX
navegação

Não gosto de escrever sobre isso, mas me sinto obrigado.

Eu pessoalmente evito ao máximo usar navegação por ajax, por uma série de problemas causados por isso.

AJAX é uma metodologia muito interessante, não é uma outra linguagem nova, é apenas um conceito que usa um objeto da linguagem javascript.

Aqui, para facilitar o que quero expôr, já que esse artigo é apenas introdução para o próximo, vou utilizar o Framework jQuery, que também não é uma outra linguagem, é apenas, digamos assim uma ‘ferramenta’ escrita sob a linguagem javascript.

index.html

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
  <script type="text/javascript">
  $(document).ready(function(){
    $("#menu a").click(function( e ){
      e.preventDefault();
      var href = $( this ).attr('href');
      $("#content").load( href +" #content");
    });
  });
  </script>
</head>
<body>
  <ul id="menu">
    <li><a href="index.html">Home</a></li>
    <li><a href="fotos.html">Fotos</a></li>
    <li><a href="contato.html">Contato</a></li>
  </ul><!-- /menu -->
  <div id="content">
    <h1>Bem Vindo!</h1>
    <p>Essa eh a home desse nome pseudo-site.</p>
  </div><!-- /content -->
</body>
</html>

Nossa index, contém todo o código jQuery que vamos precisar para carregar o conteúdo na nossa div#content.

Para usar a lib jQuery, preciso obrigatoriamente linkar no meu documento a declaração e definição dela, por isso a linha:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

Logo depois, aguardo o DOM carregar, pois preciso que os meus elementos existam, para conseguir atrelar eventos e rotinas neles.

$(document).ready(function(){

E então, uso o seletor jQuery, para me retornar um array de objetos, dos links do meu menu, e aplico uma função no evento onclick de cada um deles:

$("#menu a").click(function( e ){

Uma das belezas do jQuery é essa: esconder por trás dos panos os loops. Existem vários elementos ai, porém não estamos vendo como a lib atrela a função elemento a elemento, daí temos essa mágica.

Notem que eu invoco um argumento ali e, os métodos jQuery, já retornam o objeto global window.event de forma crossbrowser. Com esse objeto, podemos descobrir coisas interessantes da função que disparamos. Algumas propriedades, .keyCode, .target..

e.preventDefault();

Uso o método .preventDefault(), para impedir o comportamento default da tag , que é enviar a requisição pro navegador, este enviar para o servidor, e então acontece o refresh…

var href = $( this ).attr('href');

Guardo em uma variavel de escopo local (cada objeto , possui um href para ele), o valor do atributo .href da tag 

$("#content").load( href +" #content");

Agora sim, finalmente faço o ajax.

Usei o método .load(), para aproveitar a simplificidade dele. Veja que logo depois do arquivo (href), indico um ID para esse método.

Com isso, consigo ter páginas internas assim:

contato.html

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

</head>
<body>
  <ul id="menu">
    <li><a href="index.html">Home</a></li>
    <li><a href="fotos.html">Fotos</a></li>
    <li><a href="contato.html">Contato</a></li>
  </ul><!-- /menu -->
  <div id="content">
    <h1>Contato</h1>
    <form action="" method="post">
      <label>Nome: <input type="text" name="nome" /></label>
      <label>E-mail: <input type="text" name="email" /></label>

      <label><input type="submit" name="ok" value="OK" /></label>
    </form>
  </div><!-- /content -->
</body>
</html>

Graças ao segundo parâmetro do .load(), o jQuery vai fazer um parser do .responseText, e vai jogar dentro do div#content da index.html, apenas o conteudo da div#content do contato.html.

fotos.html

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

</head>
<body>
  <ul id="menu">
    <li><a href="index.html">Home</a></li>
    <li><a href="fotos.html">Fotos</a></li>
    <li><a href="contato.html">Contato</a></li>
  </ul><!-- /menu -->
  <div id="content">
    <h1>Fotos</h1>


    <a href="index.html">Voltar</a>
  </div><!-- /content -->
</body>
</html>

Dessa forma, se desativar o suporte a javascript do navegador, o site funciona. O menu te leva para a respectiva página com refresh e tudo mais. Pois não fiz baseado em javascript. Adicionei o javascript por cima de algo que já funcionava. Essa é a maneira correta de desenvolver.

Caso você esteja tendo problemas com plugins js nas páginas internas

Devido ao grande número de comentários, e pessoas relatando problemas com códigos javascript, que não funcionam, depois que a página interna foi carregada com ajax, usando o código acima. Eu fiz o seguinte post:

Usando lightbox em página carregada com ajax.

Fiz com lightbox no exemplo, porém a dica se aplica a qualquer plugin que vc precisar.

Leia, entenda e resolva seu problema.