Função simples e prática para carregar páginas em AJAX

o3-AJAX

Tanto o Mozilla Firefox como o Internet Explorer às vezes fazem com que uma página enviada via AJAX não seja carregada adequadamente.
Aqui temos um exemplo simples que corrige estas falhas, e faz com que arquivos como flash, e scripts sejam carregados sem erros, para isso iremos utilizar a tecnologia do jQuery, e usar o API do Google, para que seja carregado mais rapidamente:

1º – colocamos nas tags HEAD da nossa index  os APIs para JQuery, Ajax, etc…

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

2º criamos  o seguinte script:

<script type="text/javascript" >
function abreURL(url,metodo,onde){
   if(metodo=='POST'){
      // metodo post
       $.post(url, function(data) {
      // página do carregador (loading)
       $("#carregador").show();
       $( "#"+onde).load(url);
      });
   }
   else if(metodo=='GET'){
      // metodo get
      $.get(url, function(data) {
     // página do carregador (loading)
      $("#carregador").show();
     $( "#"+onde).load(url);
    });
  }
}
</script>

3º Agora criamos na HTML o link que irá passar a função do AJAX e enviar a página e suas e se tiver também, as requisições junto:

<a onclick="abreURL('pagina_nova.php?id=10','GET','conteudo')" href="#">
Abrir na div conteúdo
</a>

4º depois criamos na nossa index a div que irá receber a página e os parâmetros:

<div id="conteudo">
<div id="carregador">Carregando...</div>
Aqui irá carregar a pagina nova e os dados do banco de id=10.</div>

Pronto.

Após colocar estas construções, seu site já estará navegando via Ajax.

Baixe este exemplo:
Modelo AJAX com jQuery

Deixe um Comentário

O seu endereço de email não será publicado Campos obrigatórios são marcados *

*

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>