Função simples e prática para carregar páginas em 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

