Cargar HTML externo con jQuery

Todos/as hemos leído el Tutorial de AJAX. Siempre tuve ganas de poder usar el ejemplo en un proyecto, pero nunca lo he intentado usar por ser intrusivo. Pero el otro día leyendo la documentación de jQuery me encontré con una cosa.

En este tip os voy a mostrar qué fácil es cargar documentos externos HTML con jQuery de forma no intrusiva.

Empezaremos creando una página HTML con un menú de navegación. Una lista normal a la que pondremos como identificador: "nav"

Código :

<ul id="nav">
   <li><a href="uno.htm">Enlace Uno</a></li>
   <li><a href="dos.htm">Enlace Dos</a></li>
   <li><a href="link.htm">Otro link</a></li>
   <li><a href="1337.htm">1337</a></li>
   <li><a href="creacionismo.htm">iDIotas</a></li>
</ul>

Y un contenedor donde cargaremos el HTML externo en este caso un div con id show:

Código :

<div id="show"></div>

Pero este código HTML es suficiente para que funcione, hace falta jQuery. Lo primero que hacemos es bajarnos la última versión de aquí (comprimido) y lo colocamos en nuestra página entre las etiquetas head así:

Código :

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>

Falta colocar el script que hará funcione, entre etiquetas <script> que es este:

Código :

<script type="text/javascript">
$(document).ready(function(){
   $("#nav a").each(function(){
      var href = $(this).attr("href");
      $(this).attr({ href: "#"});
      $(this).click(function(){
         $("#show").load(href);
      });
   });
});
</script>

La "magia" del código está en $("#show").load(href);. Funciona parecido al include() de PHP. Primero seleccionamos el lugar donde se cargará el contenido y luego el contenido a cargar. (Aquí la documentación de jQuery). En nuestro caso, al hacer click en los elementos a que estén incluidos en #nav, #show se cargará las páginas a las que enlazan éstas.

Aquí el ejemplo funcionando.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.