Carregando páginas com Ajax

por Raphael Sáb Jan 28, 2012 7:32 pm

Bom, com certeza umas das coisas que eu mais odeio é o iFrame. Mas e quando precisamos carregar uma página dentro da outra sem recarregar? Bom, aí você vai ter duas opções, que é o iFrame from hell, e o Ajax.

Neste tutorial vou usar o Prototype, pois to tentando largar o JQuery, e ela é uma framework tão boa quanto.

Agora chega de conversar, é hora de trabalhar! (Rimou >_>)

Para começarmos, crie um novo arquivo (avá) html (index.html) com o esqueleto básico e uma div#main. Linke o prototype (avá) e adicione a seguimente Js:

Código pr0x by Raphael

function load(address, params){ // Address=Arquivo; Params=Parâmetros GET/POST
    new Ajax.Request(address, { // Instancia uma nova requisição Ajax
         encoding: 'windows-1252', // Define a encoding (charset) da requisição
         method: 'POST', // Método - GET ou POST (vide formulários)
         parameters: params, // Parâmetros adicionais a serem enviados pelo método definido em .method
         onSuccess: function(transport) { // Caso esteja tudo Ok
             $('main').innerHTML = transport.responseText // Define o conteúdo com a resposta
         }
    })
};

Adicione um link com o formato <a href=#'teste.html\', {});'>Texto</a>, crie um outro arquivo (teste.html) e coloque qualquer coisa nele.

Provavelmente seu index.html vai estar assim:

Código:: <!DOCTYPE html> <html lang="en"> <head> <title>Esqueleto HTML</title> <meta http-equiv="content-type" content="text/html; charset=windows-1252" /> <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript"> function load(address, params){ new Ajax.Request(address, { encoding: 'windows-1252', method: 'POST', parameters: params, onSuccess: function(transport) { $('main').innerHTML = transport.responseText } }) } </script> </head> <body> <a href="#" onclick="load('teste.txt', {});">Carregar</a> <div id="main"> Antes de Carregar </div> </body> </html>

Com os dois arquivos no jeito, é só clicar no link e voilà, tudo nos conformes =)

Agora vamos tratar de outros dois galhos dessa árvore: formulários &amp; PHP.

O PHP é simples, tu muda teste.html pra teste .php. Para usar <em>query string </em>é basicamente colocar as variáveis dentro do parâmetro <em>params.</em>

Ex.:

Código::  <a href="home.php?action=sexshop&item=1046&submit">Carregar</a>  <a onclick="load('home.php', {action: 'sexshop', item: 1046, submit: ''});" href="#">Carregar</a>  <a onclick="load('loader.php', {page: 'home.php', action: 'sexshop', item: 1046, submit: ''});" href="#">Carregar</a>

Já nos formulários, eu fiz uma função pra isso

Código:: function frmSubmit(form, action){ fields=$(form).serialize().toQueryParams() load(action, fields) }

Uso:

Código:: <form action="#" onsubmit="frmSubmit(this, 'sexshop.php'); return false;"> ..... </form>

Bom, o tutorial ficou bem simples, fiz ele aproveitando que um amigo tinha pedido, mas mesmo assim espero que gostem.

Não vai ter como eu upar demo porque eu perdi a senha do FTP do meu blog, então.. Fica pra próxima :)

Até logo mafagafos!

por **Nietore** Sáb Jan 28, 2012 7:45 pm

Nunca tinha ouvido falar desse Prototype, pode ser parecido com JQuery, mas Protorype é desatualizado!
Se um dia eu chegar a usar esse código vou fazer no JQuery!

Gostei, e hoje em dia é mt usada essa função, bom pra formulários de cadastro, e login.

Ele deixou o site do Prototype mas vou deixar o download pra fácilitar +
Download

Salve a página com a extensão '.js'

Mt bom Raphael vlw Successful