Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Navegación usando AJAX

Estas en el tema de Navegación usando AJAX en el foro de Frameworks JS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 10/11/2012, 06:44
Avatar de bNd170  
Fecha de Ingreso: agosto-2009
Ubicación: $this->setLocation('Valencia', 'Spain');
Mensajes: 365
Antigüedad: 12 años, 4 meses
Puntos: 13
Navegación usando AJAX

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:
Ver original
  1. $(function(){
  2.   $("a[rel='tab']").click(function(e){
  3.     //e.preventDefault();
  4.     /*
  5.     if uncomment the above line, html5 nonsupported browers won't change the url but will display the ajax content;
  6.     if commented, html5 nonsupported browers will reload the page to the specified link.
  7.     */
  8.  
  9.     //get the link location that was clicked
  10.     pageurl = $(this).attr('href');
  11.  
  12.     //to get the ajax content and display in div with id 'content'
  13.     $.ajax({url:pageurl+'?rel=tab',success: function(data){
  14.       $('#content').html(data);
  15.     }});
  16.  
  17.     //to change the browser URL to the given link location
  18.     if(pageurl!=window.location){
  19.       window.history.pushState({path:pageurl},'',pageurl);
  20.     }
  21.     //stop refreshing to the page given in
  22.     return false;
  23.   });
  24. });

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 :)
  #2 (permalink)  
Antiguo 12/11/2012, 17:49
 
Fecha de Ingreso: octubre-2012
Ubicación: Austria
Mensajes: 47
Antigüedad: 9 años, 3 meses
Puntos: 7
Respuesta: Navegación usando AJAX

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();
          }
        });
      })
    });
  }
  #3 (permalink)  
Antiguo 14/11/2012, 12:46
Avatar de bNd170  
Fecha de Ingreso: agosto-2009
Ubicación: $this->setLocation('Valencia', 'Spain');
Mensajes: 365
Antigüedad: 12 años, 4 meses
Puntos: 13
Respuesta: Navegación usando AJAX

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 :)

Etiquetas: ajax, funcion, html, usando
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 17:10.