← Tutoriais

[AJAX] Função simples para carregar conteúdo

Lida 3157 vezes

Offline

=IceBurn= 
Membro
Mensagens 897 Gostos 3
Feedback +3

Troféus totais: 32
Trófeus: (Ver todos)
Windows User Level 6 Linux User Mobile User Super Combination Combination Topic Starter Poll Voter Poll Starter Level 5

Embora tenha andado super ocupado ultimamente, hoje arranjei um tempinho para postar mais um pequeno tutorial.
Desta vez não sobre PHP mas sim ao que vulgarmente conhecemos como AJAX.

Como este é um campo cada vez mais "na moda" tive que aperfeiçoar rápidamente os meu conhecimentos na matéria, de maneira que preparei um tutorial muito simples, ideal para quem está a começar e quer aprender.

O seu objectivo é carregar uma página sem obrigar o navegador a fazer reload e mesmo para quem não pesca nada de programação, vão ver como é simples.

Então vamos precisar de 3 ficheiros, o principal onde vamos carregar o conteudo a que iremos chamar de index.html e o ficheiro que vai servir como a fonte do conteudo a incluir, ao qual vamos chamar conteudo.html .
O terceiro ficheiro será portanto o ficheiro que conterá a função necessária a que iremos chamar de ajax.js .

Para dar um efeito mais "nice" vamos tambem necessitar de uma imagem. Podem encontrar imagens porreiras neste site: http://www.ajaxload.info/

Vamos então aos ficheiros necessários:

 :arrow: index.html
Código: [Seleccione]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt" >
<head>
 <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
 <title>Tutorial AJAX</title>
 <script type="text/javascript" src="./ajax.js"></script>
</head>
 <body>
   
  <p>
   <a href="#" onclick="return ajax_carregar_pagina('conteudo.html', 'processar');">Carregar a página conteudo.html</a>
  </p>
   
  <div id="processar"></div>
   
 </body>
</html>
______________________________________________________________________________________________________________________________

 
 :arrow: conteudo.html
Código: [Seleccione]
Bem vindo ao mundo AJAX, a revolução WEB 2.0 :)

 :arrow: ajax.js
Código: [Seleccione]
/**************************************
* Funçao: ajax_carregar_pagina()
* =IceBurn= [www.jrfreelancer.com]
* 05-JUN-2007
***************************************/

//-- CONFIGURAR ASPECTO DO LOADER --------//
var loader  = '<p><img style="vertical-align: middle; border: none;" src="./loading.gif" alt=""/> A carregar...</p>';
//----------------------------------------//

function ajax_carregar_pagina(pagina, divid) {
 try {
   xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
 }  
catch (e) {
  alert("Erro: Não foi possivel carregar a página");
 }
       
 document.getElementById(divid).innerHTML = loader;
 scroll(0,0);
       
 xmlhttp.onreadystatechange = function(){
    if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200)) {
     document.getElementById(divid).innerHTML = xmlhttp.responseText;
    }
 }
 
 xmlhttp.open("GET", pagina);
 xmlhttp.send(null);
 return false;
}
______________________________________________________________________________________________________________________________


Guardem tudo e acedam ao index.html
Não se esqueçam da imagem, neste caso o nome da  imagem é loading.gif

Espero que tenham gostado e lamento a minha explicação tão vaga, mas o tempo foge... alem disso penso não é nada que não se perceba facilmente.  :wink:
Offline

frsantos 
Membro
Mensagens 1458 Gostos 0
Troféus totais: 35
Trófeus: (Ver todos)
Linux User Mobile User Apple User Level 6 Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Poll Starter

muito bom obrigado IceBurn :wink:
Offline

asturmas 
Administrador
Mensagens 19734 Gostos 49
Feedback +2

Troféus totais: 39
Trófeus: (Ver todos)
Mobile User Windows User Super Combination Combination Topic Starter 100 Poll Votes 50 Poll Votes 10 Poll Votes Poll Voter Poll Starter

Uma demo era fixe sff
Offline

bfms 
Equipa
Mensagens 1769 Gostos 40
Feedback +1

Troféus totais: 35
Trófeus: (Ver todos)
Search Level 6 Apple User Super Combination Combination Topic Starter 50 Poll Votes 10 Poll Votes Poll Voter Poll Starter

Citação de: "asturmas"
Uma demo era fixe sff

Faz o que diz no tutorial e tens o teu próprio demo... lol
Em relação ao tutorial em si, muito bom! Há que começar a usar cada vez mais AJAX nos sites :P
Offline

=IceBurn= 
Membro
Mensagens 897 Gostos 3
Feedback +3

Troféus totais: 32
Trófeus: (Ver todos)
Windows User Level 6 Linux User Mobile User Super Combination Combination Topic Starter Poll Voter Poll Starter Level 5

Agrada-me saber que gostaram.
Um aspecto muito importante que me esqueci de referir é que podem
carregar as páginas que quiserem, eu neste caso falei apenas numa (conteudo.htm), mas podem incluir quantas páginas quiserem, uma de cada vez (para cada DIV), claro lol.

Para tal basta criarem os links, por exemplo:
Código: [Seleccione]
<p>
   
  <a href="#" onclick="return ajax_carregar_pagina('conteudo.html', 'processar');">Carregar a página conteudo.html</a>
 
  <a href="#" onclick="return ajax_carregar_pagina('pagina1.html', 'processar');">Carregar a página pagina1.html</a>
   
  <a href="#" onclick="return ajax_carregar_pagina('pagina2.html', 'processar');">Carregar a página pagina2.html</a>
   
  <a href="#" onclick="return ajax_carregar_pagina('pagina3.html', 'processar');">Carregar a página pagina3.html</a>

</p>
_________________________________________________________________________________________________________________________

Claro que se assim não fosse tambem não tinha grande utilidade.

Portanto, o importante é criarem sempre a página a incluir, obviamente que isto é um exemplo bastante simples, daqui podem partir para esquemas mais avançados.

Importante tambem é lembrarem-se que um dos factores fundamentais  está nesta parte do código:
Código: [Seleccione]
<div id="processar"></div>
É aqui que as páginas são carregadas, portanto o segundo parametro da função é a ID da div. Podem utilizar quantas DIV's quiserem com os nomes que quiserem, tem é de referir no link o nome da div e a respectiva página a carregar.

Atenção que os ficheiros neste tutorial estão todos na mesma pasta.

Asturmas, em relação à demo sugiro o que o bfms disse, não por má vontade da minha parte, mas sim porque desse modo já estás a aprender.  :wink:
Offline

tiovivi 
Membro
Mensagens 865 Gostos 0
Troféus totais: 27
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1 500 Posts

isto está básico (muito bem explicado msm p/ noobs);

gostei e inclusivé vou usar aqui no site da empresa...

obrigado  8)  8)