Cum se incarci paginile sitului partial, cu jQuery

Ajax & jQuery

Am gasit codul asta pe unul din siturile mai vechi, pe care nu-l mai folosesc de mult timp. L-am testat si, deoarece inca mai functioneaza, m-am gandit ca e bine sa-l public aici, pentru webmasterii care, eventual, vor dori sa-l foloseasca. Inainte de toate, ce face acest cod? ... probabil veti intreba. Ei bine (folosit corect) va incarca, la un click pe un oarecare link de pe pagina ce-l contine, continutul unui anumit element din pagina link-ului pe care ati facut click, INSA in pagina deja deschisa, fara a reincarca deci toata pagina. Este util deoarece va spori viteza de navigare a vizitatorilor sitului si deasemenea va salva banda alocata contului de gazduire web al sitului respectiv.
Voi explica pas cu pas, pentru o mai buna intelegere:

• se dau doua pagini web ale ACELUIASI sit, pagina1.html si respectiv pagina2.html
• pagina1.html contine un link catre a doua pagina, pagina2.html
• ambele pagini contin un DIV sau orice alt element (span, table etc) cu ID-ul ajax-jquery (vezi codul), ce contine, de exemplu, 111111 in prima pagina si 222222 in cea de-a doua
• Adaugati scriptul jquery (gazduit de Google, pentru a salva banda, sau de jquery.com) si codul de mai jos in head-ul paginilor si....
• de fiecare data cand veti page click pe link-ul catre pagina2.html (de pe pagina1.html), in DIV-ul ajax-jquery se va incarca continutul aceluiasi DIV de pe pagina2.html - mai exact, in locul lui 111111 va aparea 222222 fara a se fi incarcat toata pagina

Codul trebuie introdus inainte de head. Menu-linkuri este id-ul div-ului ce contine link-ul catre pagina2.html.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js?ver=1.8.0" type="text/javascript"></script>
<script charset="utf-8" type="text/javascript">
jQuery(document).ready(function(){
jQuery('#menu-linkuri a').live('click', function(e){
e.preventDefault();
var link = jQuery(this).attr('href');
jQuery('#ajax-jquery').html('');
jQuery('#ajax-jquery').load(link+' #ajax-jquery');

});
});
</script>