Se denomina AJAX (Asynchronous JavaScript And XML) a la técnica de programación que permite a las aplicaciones web establecer una comunicación cliente-servidor de forma asíncrona sin necesidad de recargar la página web cada vez se solicite la información (lo cual evita además una transferencia de información innecesaria).
El método load() es la forma más simple de obtener datos de un servidor y escribir el resultado devuelto en un contenedor (como por ejemplo en un <div>).
index1.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>InformaticaPC | AJAX con JQuery I</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
body { background-color:lightyellow;font-family:Arial;font-size:10pt; }
#codigo { text-align:center; }
#log { color:yellow;background-color:red;margin-bottom:10px; }
#resultado { background-color:lightgray; }
</style>
<script type="text/javascript" src="../lib/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
// Dar el foco al recuadro del código
$("#codigo").focus();
// Al hacer clic en el botón
$("#buscar").click(function()
{
// Construir la URL con el código introducido (observa que se
// usa 'val()' para obtener el valor del cuadro de texto
var url = "ajax1.php?codigo=" + $("#codigo").val();
// Mostrar la URL en el log
$("#log").text( "URL: [" + url + "]" );
// Cargamos el resultado HTML obtenido en el div
$("#resultado").load(url);
});
});
</script>
</head>
<body>
<div id="log"> </div>
<p>Introduce un código del 1 al 3:</p>
<label for="codigo">Código:</label>
<input type="text" name="codigo" id="codigo" size="2" maxlength="2" value="" />
<input type="button" name="buscar" id="buscar" value="Buscar" /><p />
<div id="resultado"> </div>
</body>
</html>
ajax1.php:
<?php
if( !empty($_GET) && isset($_GET['codigo']) )
{
switch( $_GET['codigo'] )
{
case 1:
echo "<b>Nombre</b>: Pedro Manrique Sosa<br /><b>Cuota</b>: 20€";
break;
case 2:
echo "<b>Nombre</b>: Raquel Vera Déniz<br /><b>Cuota</b>: 22€";
break;
case 3:
echo "Nombre</b>: Antonio Ronda Cuadrado<br /><b>Cuota</b>: 30€";
break;
default:
echo "Código no encontrado";
}
}
else
{
echo "Acceso no autorizado";
}
?>
Como ya sabrás los datos de un formulario HTML se pueden enviar utilizando los métodos GET (los datos se envían en la propia URL) o POST (más seguro y recomendable), siendo procesados luego por un lenguaje del lado del servidor (como PHP).
Para ello es importante que ambos lenguajes usen el mismo método para el envío y la recepción, lo cual es también aplicable si la comunicación se realiza mediante AJAX.
Para establecer dicha comunicación con AJAX en JQuery disponemos de los métodos get() y post(), en los cuales indicaremos como parámetros el nombre del archivo que recibirá los datos en el servidor web, los datos a enviar (indicando los mismos nombres de variables esperados por el servidor) y una función que recibirá el resultado de la petición.
Veamos un ejemplo.
index2.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>InformaticaPC | AJAX con JQuery II</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
body { background-color:lightyellow;font-family:Arial;font-size:10pt; }
#codigo { text-align:center; }
#log { color:yellow;background-color:red;margin-bottom:10px; }
#resultado { background-color:lightgray; }
</style>
<script type="text/javascript" src="../lib/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
// Dar el foco al recuadro del código
$("#codigo").focus();
// -----------------------------
// Al hacer clic en el botón para buscar mediante GET
$("#buscarGET").click(function()
{
var codigo = getCodigo();
// Enviar la petición mediante GET
$.get( "ajax-get.php", {codigo : $("#codigo").val()}, mostrarDatos );
});
// -----------------------------
// Al hacer clic en el botón para buscar mediante POST
$("#buscarPOST").click(function()
{
var codigo = getCodigo();
// Enviar la petición mediante POST
$.post( "ajax-post.php", {codigo : $("#codigo").val()}, mostrarDatos );
});
});
// -----------------------------
// Obtener el valor del recuadro del código, lo muestre en el log y lo devuelve
function getCodigo()
{
// Observa que se usa 'val()' para obtener el 'value' de un cuadro de texto
var codigo = $("#codigo").val();
$("#log").text( "Código a buscar: [" + codigo + "]" );
return codigo;
}
// -----------------------------
// Muestra los datos recibidos
function mostrarDatos( datos ) {
$("#resultado").html(datos);
}
</script>
</head>
<body>
<div id="log"> </div>
<p>Introduce un código del 1 al 3:</p>
<label for="codigo">Código:</label>
<input type="text" name="codigo" id="codigo" size="2" maxlength="2" value="" />
<input type="button" name="buscarGET" id="buscarGET" value="Buscar mediante GET" />
<input type="button" name="buscarPOST" id="buscarPOST" value="Buscar mediante POST" /><p />
<div id="resultado"> </div>
</body>
</html>
ajax-get.php:
<?php
if( !empty($_GET) && isset($_GET['codigo']) )
{
switch( $_GET['codigo'] )
{
case 1:
echo "Pedro Manrique Sosa - 20€";
break;
case 2:
echo "Raquel Vera Déniz - 22€";
break;
case 3:
echo "Antonio Ronda Cuadrado - 30€";
break;
default:
echo "Código no encontrado";
}
}
else
{
echo "Acceso no autorizado";
}
?>
ajax-post.php:
<?php
if( !empty($_POST) && isset($_POST['codigo']) )
{
switch( $_POST['codigo'] )
{
case 1:
echo "Pedro Manrique Sosa - 20€";
break;
case 2:
echo "Raquel Vera Déniz - 22€";
break;
case 3:
echo "Antonio Ronda Cuadrado - 30€";
break;
default:
echo "Código no encontrado";
}
}
else
{
echo "Acceso no autorizado";
}
?>
Otra forma de realizar la petición (un poco más compleja pero también más completa) es utilizando el método ajax() de JQuery, algunos de cuyos parámetros son (hemos subrayado los más usados):
- accepts: indica al servidor el tipo de respuesta que se aceptará.
- async: permite indicar si la petición se realiza de síncrona o asíncrona (por defecto).
- beforeSend: función que se ejecutará antes de enviarse la petición.
- complete: función que se ejecutará cuando se haya completado la petición (después de procesarse las funciones definidas mediante los parámetros success y error).
- contentType: se recomienda dejar el usado por defecto (application/x-www-form-urlencoded; charset=UTF-8)
- crossDomain: permite establecer una comunicación entre dominios diferentes.
- data: los datos a enviar al servidor.
- dataType: permite indicar el tipo de dato que esperamos recibir del servidor (xml, html, json, script...).
- error: función a ejecutar en caso de que se produzca algún error.
- password: contraseña (en caso de que se requiera autenticación HTTP).
- success: función a ejecutar cuando la petición haya tenido éxito.
- timeout: permite indicar el tiempo de espera (en milisegundos) permitido para que se complete la petición.
- type: permite indicar si la petición se realizará mediante el método GET o POST.
- url: URL a la que será enviada la petición.
- username: nombre de usuario (en caso de que se requiera autenticación HTTP).
Consulta el enlace facilitado al final para obtener más información.
Y ahora veamos un ejemplo.
index3.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>InformaticaPC | AJAX con JQuery III</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
body { background-color:lightyellow;font-family:Arial;font-size:10pt; }
#codigo { text-align:center; }
#log { color:yellow;background-color:red;margin-bottom:10px; }
#resultado { background-color:lightgray;margin-top:10px; }
</style>
<script type="text/javascript" src="../lib/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
// Dar el foco al recuadro del código
$("#codigo").focus();
// -----------------------------
// Al hacer clic en el botón para buscar
$("#buscar").click(function()
{
var codigo = $("#codigo").val();
$("#log").text( "Código a buscar: [" + codigo + "]" );
// Enviar la petición mediante POST
$.ajax({
async: true,
type: "POST",
dataType: "html",
contentType: "application/x-www-form-urlencoded; charset=UTF-8",
url: "ajax3.php",
data: "codigo="+codigo,
beforeSend: antesEnvio,
success: mostrarDatos,
timeout: 4000,
error: errorEnvio
});
});
});
// -----------------------------
// Antes de enviar los datos
function antesEnvio() {
$("#log").text("Se procesa la función 'antesEnvio()' antes de enviarse los datos...");
}
// -----------------------------
// En caso de error
function errorEnvio() {
$("#log").text("Ha ocurrido un error!");
}
// -----------------------------
// Muestra los datos recibidos
function mostrarDatos( datos ) {
$("#resultado").html(datos);
}
</script>
</head>
<body>
<div id="log"> </div>
<p>Introduce un código del 1 al 3:</p>
<label for="codigo">Código:</label>
<input type="text" name="codigo" id="codigo" size="2" maxlength="2" value="" />
<input type="button" name="buscar" id="buscar" value="Buscar" />
<div id="resultado"> </div>
</body>
</html>
ajax3.php:
<?php
if( !empty($_POST) && isset($_POST['codigo']) )
{
switch( $_POST['codigo'] )
{
case 1:
echo "Pedro Manrique Sosa - 20€";
break;
case 2:
echo "Raquel Vera Déniz - 22€";
break;
case 3:
echo "Antonio Ronda Cuadrado - 30€";
break;
default:
echo "Código no encontrado";
}
}
else
{
echo "Acceso no autorizado";
}
?>
