Además de explicaros como cargar contenido dinámico, vamos a enseñaros también la función slideDown para mostrar el contenido cargado y darle un aspecto bastante elegante.

Bueno para empezar necesitamos crear un elemento donde vamos a mostrar los datos obtenidos vía AJAX. En el ejemplo tenemos index.html que es quien recibe los datos, de los archivos contenido.html y contenido_anim.html

En vez de cargar el contenido dinámico una vez hayamos cargado la página, vamos a cargarlos con un botón, de esta forma:

<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

	$('#boton_cargar').click(function() {
		$.ajax({
			url: 'contenido.html',
			success: function(data) {
				$('#div_dinamico').html(data);
			}
		});
	});

	$('#boton_cargar_anim').click(function() {
		$.ajax({
			url: 'contenido_anim.html',
			success: function(data) {
				$('#div_dinamico_anim').html(data);
				$('#div_dinamico_anim div').slideDown(1000);
			}
		});
	});

});
</script>

Vamos a explicar un poco la función ajax que se encarga de leer los datos externos:

$.ajax({
	url: 'contenido.html',
	success: function(data) {
		$('#div_dinamico').html(data);
	}
});

Conectamos con contenido.html, que es el archivo externo que vamos a leer, para mostrar su contenido en nuestro sitio web.

Si todo ha funcionado correctamente, el archivo contenido.html existe y carga correctamente, recibiremos una variable data con el contenido del archivo externo.

Una vez que recibimos los datos, con la función html() que sirve para cambiar el contenido html de un elemento, cambiamos el contenido html del elemento div_dinamico que es el que hemos creado para mostrar los datos. Y aquí os mostramos el botón que utilizamos para cargar los datos y el elemento que muestra los datos:

<input name="boton_cargar" id="boton_cargar" type="button" value="Cargar contenido" />

<div name="div_dinamico" id="div_dinamico" class="div_dinamico"></div>

En el otro ejemplo, hacemos exactamente lo mismo, pero mostramos el contenido en un div invisible con display:none y despues lo cambiamos a display:block con la función slideDown para darle un efecto elegante.

$.ajax({
	url: 'contenido_anim.html',
	success: function(data) {
		$('#div_dinamico_anim').html(data);
		$('#div_dinamico_anim div').slideDown(1000);
	}
});

• Ejemplo