$(document).ready(function() { // Esto es para esperar a que el html este cargado.
$("a.prueba").on("click", function(e) {
e.preventDefault(); // Previene el comportamiento por defecto del link (Ir a href)
var a = $(this); // El objeto que se ha clickado. "a", transformado a jQuery object $(..)
var url = a.attr("href"); // Atributo href de "a" -> El link
// Llamamos por ajax al servidor
$.ajax({
url: url,
success: function (data) {
// Ponemos la respuesta del servidor en un div. (Solo si es html o jsonp o un simple string) y no deberia incluir cabeceras.
if (data)
$("#where").append($(data));
}
});
});
});
<a href="...." class="prueba">click meh</a>
<div id="where"></div>
Y si, javascript se ejecuta en el cliente, especificamente en el explorador, y realiza una llamada a tu servidor (ajax) de forma asincrona, para que cuando los datos esten listos (que provinenen del servidor), ejecutes otro trozo de codigo javascript en el cliente, y el usuario no tenga que refrescar la pagina.
Refrescar la pagina al fin y al cabo es otro Request/Response, solo que este lo ejecuta el explorador de forma integra y al fin y al cabo es mas coñazo para el usuario, (No siempre!).
Si vas a hacer paginas con mucho ajax, te recomendaria que usaras tambien jQuery History, para que al darle para alante y para atras en la historia del explorador el usuario no diga : LJ@KJ$@(*5h@$!