Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: SnakeDrak en 11 Julio 2009, 22:32 pm


Título: Ajax, cambiar URL
Publicado por: SnakeDrak en 11 Julio 2009, 22:32 pm
Hola,

Tengo una web y al tener activado javascript y pulsar en los linls cargua contenidos dinámicos en un DIV, esto es muy fácil, el problema viene cuando quiero modificar la URL, si se pulsa en perfil me gustaría que apareciese laweb.tld/?perfil, no quiero que sea hash y tampoco quiero que se recargue la página, ¿sería posible de alguna manera?, si no se guarda en el historial ya buscaré alguna manera de guardarlo, pero necesito que la URL cambie, tal vez se me olvida algo de Ajax.

Saludos y gracias!

Título: Re: Ajax, cambiar URL
Publicado por: Alex_bro en 12 Julio 2009, 01:11 am
Yo creo que sin recargar no se puede, es mas casi seguro q no. Si no cualquiera podria poner la direccion de un banco en su web y tu sabes...

Título: Re: Ajax, cambiar URL
Publicado por: [u]nsigned en 12 Julio 2009, 01:15 am
Es que la url inidica la direccion del archivo actual, y si queres cambiar la url si o si tenes que cambiar de archivo(pagina).

Saludos

Título: Re: Ajax, cambiar URL
Publicado por: SnakeDrak en 12 Julio 2009, 01:36 am
Hola,

Pero entonces como se hace para diferenciar las secciones en una web AJAX, es decir.. si pulsas en la sección perfil y carga en un DIV la página del perfil.. si la URL no cambia, ¿cómo se diferencian las secciones?

P.D: Obviamente la web está adaptada para noscript, pero me gustaría que se cambiase la URL.

Saludos.

Título: Re: Ajax, cambiar URL
Publicado por: Alex_bro en 12 Julio 2009, 01:42 am
Pues pones un titulo al div para que no se desoriente el usuario... pero ya digo, no puedes cambiar la URL... Si pudieras podrias hacer que apareciera lacaixa.es por ejemplo jeje.
Es el problema que tiene el ajax abusivo, que dificulta por ejemplo, que un usuario pase a otro un url para mostrarle lo que esta viendo, ponerlo en favoritos, etc.

No veo la utilidad de hacer eso con secciones, utiliza ajax para cosas logicas, pero no para visualizar todo el contenido de la web.

Asegurate que funciona sin javascript, y recuerda que no se tarda tanto en cargar una pagina completa para las secciones... y es mucho mas orientativo. Si es por comodidad de disenio haz una plantilla para el header, otro para el footer, y solo tienes que cambiar el contenido e incluir estas 2 plantillas...

Un saludo.

Título: Re: Ajax, cambiar URL
Publicado por: SnakeDrak en 12 Julio 2009, 02:01 am
Hola,

Obviamente no es para toda la web, es para una mini sección dentro de otra sección que a su vez esta en otra mini sección ¡xD!

Bueno lo haré con hash porque es la única manera de hacerlo, lo que pasa que creo que los buscadores el hash no lo interpretan, pero bueno para esa mini sección que está dentro de una sección etc etc.. tampoco es que haga falta diferenciarlas xD.

Lo haré como http://www.backbase.com/demos/RSS/#aid=901%5B1%5D es un ejemplo, y el hash lo modificaré con javascript.

La web que estoy haciendo tiene 0 errores de XHTML 1.0 Strict y de CSS, además está adaptada o al menos en su mayoría para ciegos, sin tablas, puros DIV etc..

Saludos y gracias por la ayuda

Título: Re: Ajax, cambiar URL
Publicado por: [u]nsigned en 12 Julio 2009, 02:20 am
Ahhhh...ahora entiendo lo que queres cambiar del URL.

Eso se hace con los marcadores.

Código
  1. <a href="#var=1234">Link</a>

Y asi al final del url solo cambia lo que esta despues del '#', pero la pagina no se recarga, porque solo estas navegando hacia un marcador interno. Y luego con ajax puedes obtener el valor de #var acedendiendo al rul que llamo a la pagina php que procesa los datos(en caso de que usses php como lenguaje de servidor)

Saludos

Título: Re: Ajax, cambiar URL
Publicado por: SnakeDrak en 12 Julio 2009, 02:32 am
Hola,

Sí, eso lo sabía pero quería hacerlo sin hash como dije al principio del tema porque los buscadores no toman en cuenta el hash ya que es parte del cliente.

Si uso php, y con parse_url puedo obtener el hash.

Saludos y muchas gracias por su ayuda

Título: Re: Ajax, cambiar URL
Publicado por: дٳŦ٭ en 13 Julio 2009, 20:23 pm
Cita de: [u]nsigned en 12 Julio 2009, 02:20 am
Ahhhh...ahora entiendo lo que queres cambiar del URL.

Eso se hace con los marcadores.

Código
  1. <a href="#var=1234">Link</a>

Y asi al final del url solo cambia lo que esta despues del '#', pero la pagina no se recarga, porque solo estas navegando hacia un marcador interno. Y luego con ajax puedes obtener el valor de #var acedendiendo al rul que llamo a la pagina php que procesa los datos(en caso de que usses php como lenguaje de servidor)

Saludos

Exacto, eso hace facebook.

Título: Re: Ajax, cambiar URL
Publicado por: [u]nsigned en 13 Julio 2009, 20:58 pm
Quien?  :huh:

Título: Re: Ajax, cambiar URL
Publicado por: дٳŦ٭ en 15 Julio 2009, 19:26 pm
Cita de: [u]nsigned en 13 Julio 2009, 20:58 pm
Quien?  :huh:

Facebook...

http://www.google.com.mx/search?q=facebook&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:es-ES:official&client=firefox-a

Título: Re: Ajax, cambiar URL
Publicado por: [u]nsigned en 15 Julio 2009, 19:39 pm
Cita de: дٳŦ٭ en 15 Julio 2009, 19:26 pm
Cita de: [u]nsigned en 13 Julio 2009, 20:58 pm
Quien?  :huh:

Facebook...

http://www.google.com.mx/search?q=facebook&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:es-ES:official&client=firefox-a

Ah..otra de esas redes sociales..no creo que sea tan grave no conocerla..no me gustan para nada.  ;D

Saludos

Título: Re: Ajax, cambiar URL
Publicado por: & eDu & en 16 Julio 2009, 16:34 pm
Tuenti creo que también usa algo parecido...

Título: Re: Ajax, cambiar URL
Publicado por: carlosvelez5 en 5 Diciembre 2011, 19:57 pm
Holaaa

mira pues te tengo la solución. con la función de history.replaceState y history.pushState de javascript. funciona en todos los navegadores menos en i.e, pero como alternativa para los navegadores que no soportan esta función podes implementarla con el hash.

aquí te dejo un ejemplo muy facil y práctico.

Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>PushState</title>
    <script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script><!-- Actualizar -->
    <script>
	$(document).ready(function() {
		// Para navegadores que soportan la función.
		if (typeof window.history.pushState == 'function') {
			pushstate();			
		}else{
			check(); hash();
		}
    });
	// Chequear si existe el hash.
	function check(){
		var direccion = ""+window.location+"";
		var nombre = direccion.split("#!");
		if(nombre.length > 1){
			var url = nombre[1]; 
			alert(url);
		}
	}
	
	function pushstate(){
		var links = $("a");
		// Evento al hacer click.
		links.live('click', function(event) {
			var url = $(this).attr('href');
			// Cambio el historial del navegador.
			history.pushState({ path: url }, url, url);
			// Muestro la nueva url
			alert(url);
			return false;
		});
		
		// Función para determinar cuando cambia la url de la página.
		$(window).bind('popstate', function(event) {
			var state = event.originalEvent.state;
			if (state) {
				// Mostrar url.
				alert(state.path);
			}
		});
	}
	
	function hash(){
		// Para i.e
		// Función para determinar cuando cambia el hash de la página.
		$(window).bind("hashchange",function(){
			var hash = ""+window.location.hash+"";
			hash = hash.replace("#!","")
			if(hash && hash != ""){
				alert(hash);
			}
		});	
		// Evento al hacer click.
		$("a").bind('click', function(e) {
			e.preventDefault();
			var url = $(this).attr('href');
			// Cambio el historial del navegador.
			window.location.hash = "#!"+url;
			//$(window).trigger("hashchange");
			return false
		});
	}
	
	</script>  
  </head>
  <body>
    <a href="page-help.html">help</a>
    <a href="other.html"> Otro link</a>
  </body>
</html>


Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines