Ajax con jQuery: el método load()

jQuery ofrece bastantes funcionalidades Ajax que nos pueden facilitar mucho la tarea de enviar y recoger peticiones asíncronas al servidor. Quizá la sentencia más simple de JQuery para cargar contenido mediante Ajax es load(). Este post trata de ofrecer una explicación sencilla de este comando, así como de unos cuantos ejemplos sencillos pero representativos de su uso.

Sintaxis:

load(url,parametros,callback)

Inicia una solicitud Ajax a la URL especificada con parámetros opcionales. Se puede especificar una función de callback que puede ser invocada cuando la solicitud se completa. El texto de respuesta reemplaza el contenido de todos los elementos coincidentes.

Argumentos:

  • url: La URL a la que la solicitud es enviada.
  • parámetros: Un objeto cuyas propiedades son serializadas en una serie de parámetros codificados correctamente y que se pasan a la solicitud. Se utiliza si se especifica, que la petición se hace utilizando el método POST. Se omite si se utiliza el método GET.
  • callback: Una función invocada después de que la solicitud ha sido procesada.

Por ejemplo

$("#contenido").load("archivo.html");

Cargaría el contenido de "archivo.html" en el div "contenido". Un ejemplo un poco más elaborado y completo podría ser el siguiente:

<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>JQuery Ajax</title>
  <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
  <script type="text/javascript">

  $(document).ready(function() {
$(".boton").click(function(event) {
$("#caja").load('carga.html',aviso());
});
});
function aviso(){
alert('La solicitud ha sido procesada');
}
</script>
</head>
<body>
<p><input name="bt1" type="button" value="CARGA CONTENIDO" class="boton"/></p>
<div id="caja" style="padding:5px;border:1px solid #CCC;">
</div>
</body>
</html>

Ver ejemplo en funcionamiento » »

Aunque fácil de usar, este comando tiene algunos matices importantes. Por ejemplo, cuando se alimenta el argumento "parámetros" la solicitud se realiza mediante el método HTTP POST, de lo contrario, se realiza mediante una petición GET. Si queremos realizar una solicitud GET con los parámetros, podemos incluirlos en la URL. En este último caso deberemos asegurarnos de que la url esté correctamente codificada.

En el siguiente ejemplo utilizamos el valor del atributo "value" de tres botones para pasarle a un archivo .php la acción que desearíamos ejecutar. El archivo que invoca mediante Ajax el archivo .php sería:

<?php
if($_POST['acc']=='EDITAR'){
	// ACCIONES DE EDICION
	echo 'LA ACCION SOLICITADA ES EDITAR';
}elseif($_POST['acc']=='NUEVO'){
	// ACCIONES DE CREACION
	echo 'LA ACCION SOLICITADA ES NUEVO';
}else{
	// ACCIONES DE ELIMINACION
	echo 'LA ACCION SOLICITADA ES BORRAR';
}
?>

Y el archivo "solicitud.php" se encargaría de recoger los parámetros por POST y asignar las acciones pertinentes:

<?php
if($_POST['acc']=='EDITAR'){
	// ACCIONES DE EDICION
	echo 'LA ACCION SOLICITADA ES EDITAR';
}elseif($_POST['acc']=='NUEVO'){
	// ACCIONES DE CREACION
	echo 'LA ACCION SOLICITADA ES NUEVO';
}else{
	// ACCIONES DE ELIMINACION
	echo 'LA ACCION SOLICITADA ES BORRAR';
}
?>

Ver ejemplo en funcionamiento » »

La mayoría de veces utilizaremos el comando load() para inyectar el contenido completo de la respuesta, pero puede ocurrir que deseemos filtrar la respuesta. jQuery nos permite especificar un selector en la URL para filtrar los elementos que van a ser inyectados. Por ejemplo:

$('#contenido').load('recurso.html #bloque_1')

La respuesta contenida en el div "bloque_1" del fichero "recurso.html", será cargada en el div "contenido".

En el siguiente ejemplo se cargan unicamente los enlaces contenidos en el fichero "carga_filtrada.html".

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>JQuery Ajax
<script type="text/javascript" src="jquery-1.3.2.min.js">
<script type="text/javascript">
$(document).ready(function() {
	$(".boton").click(function(event) {
			  $("#caja").load('carga_filtrada.html a');
	});
});
</script>
<style type="text/css">
a {display:block;}
</style>
</head>
<body>
<p>
<input class="boton" name="bt1" type="button" value="CARGA CONTENIDO" /></p>
<div id="caja" style="padding:5px;border:1px solid #CCC;"></div>
</div>
</body>
</html>

Y el fichero "carga_filtrada.html" sería:

<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum sed diam nonumy eirmod tempor invidunt ut labor. Stet clita kasd gubergren consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua</p>
<ul>
	<li><a href="http://facebook.com/">Facebook</a></li>
	<li><a href="http://www.flickr.com/">Flickr</a></li>
	<li><a href="http://www.netvibes.com/">Netvibes</a></li>
	<li><a href="http://twitter.com">Twitter</a></li>
</ul>

Ver ejemplo en funcionamiento » »