Navegación usando AJAX

[bNd170]

Estoy sumergido en un proyecto, es una web bastante sencilla y debido a su sencillez, el cliente me ha hecho una serie de peticiones, entre ellas que le añada dinamismo al producto final.

Bien, dicho esto iré al tema en cuestión, hace ya tiempo que se habla del famoso Web 2.0, con todas las nuevas tecnologías asicronicas y demás el mercado de la web se ha vuelto más competitivo y hoy en dia no basta con hacer una web solida, estable, funcional y segura, hay que darle una interfaz llamativa al usuario.

Grandes redes sociales como por ejemplo tuenti.com usan un sistema de navegación por AJAX o similar cambiando la URL y el historial del navegador al mismo tiempo que modifican el contenido de la web a su antojo.

Me he estado informando sobre el tema y he visto un par de códigos que en principio no he conseguido hacer funcionar al 100%, pero como buen autodidacta me gusta entender lo que uso para no solo copiar y pegar si no poder entender y modificar en un futuro.

He visto códigos tales como éste con la famosa función de HTML5 pushState();

Código Javascript:

$(function(){
  $("a[rel='tab']").click(function(e){
    //e.preventDefault();
    /*
    if uncomment the above line, html5 nonsupported browers won't change the url but will display the ajax content;
    if commented, html5 nonsupported browers will reload the page to the specified link.
    */
 
    //get the link location that was clicked
    pageurl = $(this).attr('href');
 
    //to get the ajax content and display in div with id 'content'
    $.ajax({url:pageurl+'?rel=tab',success: function(data){
      $('#content').html(data);
    }});
 
    //to change the browser URL to the given link location
    if(pageurl!=window.location){
      window.history.pushState({path:pageurl},'',pageurl);
    }
    //stop refreshing to the page given in
    return false;
  });
});
 

Pero no termino de comprender del todo que es lo que hace esta función, he leído algo de documentación al respecto pero se me da mejor aprender trasteando :P

La parte de jQuery obviadla ya que sé perfectamente que hace y cómo actúa.

Si alguien pudiese explicarme o ponerme un ejemplo más practico sería de agradecer :)

[oliverf2]

Bueno mi pagina web esta basada en una navegacion x ajax, te paso el pluggin que utilizo para ello ( muy sencillo y seguro q es muy mejorable, pero funciona )

Código:

  jQuery.fn.contenido = function(contenido){

    this.each(function(){
      var elemento = $(this);
      elemento.on("click",function(e){
        pagina = contenido
        e.preventDefault();
        $.ajax({
          url: contenido,
          type:"GET",
          data:({
            lang:lang
          }),
          success: function(datos){
            $("#ct").html(datos);
          },
          beforeSend: function(){
            $("#cargando").fadeIn(1);
          },
          complete: function(){
            $("#cargando").fadeOut();
          }
        });
      })
    });
  }

[bNd170]

Esa función cambia contenido de una etiqueta, pero no hay nada sobre cambio de URL, es decir, lo que necesito.

Gracias de todas formas por la aportación pero no es lo que estaba buscando :)