Siedrix

En este video donde entrevistan(minuto 5:26) a John Resig(creador de jQuery) le preguntan cual es uno de los errores más grandes al crear una aplicación web, explica como deberíamos de tener todo funcionando y después programar el javascript para generar sobre la aplicación para generar una mejor experiencia de usuario.

Entonces trataremos de mezclar esta ideología junto con lo que aprendimos en el post de ayer para manipular una url. Primero que nada tenemos nuestra aplicación sencilla para ver 3 imágenes, nada fancy ni complejo, lo podemos checar aquí.

Lo que nos interesara es cambiar los href de nuestras ligas para tener llamadas por ajax y tener urls agradables que permitan recargar la pagina con la información que queremos una vez que entremos de nuevo.
El primer paso es cambiar el href de una a. eso lo hacemos de manera sencilla con:

	$('a').each(function(){
		var thisUrl = $(this).attr('href').replace(baseUrl, '').replace('/log','handlers');
		$(this).attr('href', '#' + $(this).attr('href').replace(baseUrl, '').replace('/log','handlers'));
});

Donde tomamos todas las ligas(a’s) en la pagina, y les cambiamos el atributo href en la línea 3 de nuestro código, lo que sucede en la línea 2 es que le quitamos la url básica de nuestra aplicación y después le cambiamos que apunte del directorio logs al directorio handlers donde hemos agregado nuestros ajax call backs.
Una vez que esto esté funcionando agregara a nuestas Urls el #hash para poder recordar que pasa. Loi que necesitamos es ahora agregar al evento click la llamada de ajax. Dentro de nuestro each pondremos el siguiente código

		$(this).click(function(){
			$.ajax({
				type: 'POST',
				url: baseUrl + thisUrl,
				data: "url=1",
				success: function(answer){eval(answer);}
			});
		});

Al hacer esto, todas nuestras ligas en la página ya tendrán la funcionalidad que deseamos. Por lo cual tendremos la funcionalidad de javascript lista sobre la funcionalidad anterior.
Lo que falta ahora es checar si exite un hash al momento de cargar la aplicación y esto lo realizaremos con:

	hash = location.hash.replace('#','');
	if(hash){
		console.log(hash);
		$.ajax({
			type: 'POST',
			url: baseUrl + hash,
			data: "url=1",
			success: function(answer){eval(answer);}
		});
	}

Y podemos checar como funciona la aplicación en este link, que es el mismo link que teníamos anterior mente con el GET ajax = true. Pueden bajar el ejemplo en esta liga.

Related posts:

1. Manipulando URLs con javascript.
2. Agregando historia a javascript
3. Integrando OAuth login in a tu Aplicacion de PHP