- Un enlace que compruebe si un valor existe ya en una base de datos.
- Completar un campo de texto de búsqueda con valores sugeridos por nuestra web.
- Un chat web
- etc.
En este artículo vamos a describir como realizar una sencilla llamada AJAX a una fichero externo que ejecutará un proceso (una suma entre dos valores enviados mediante POST) y nos devolverá la salida correspondiente apoyándonos con la librería jQuery, que aunque no es necesario su uso, lo haremos sobre ella para aprovechar la potencia que nos proporciona. Se podría decir que es el típico Hola mundo en AJAX.
El código se compone de dos archivos: un archivo donde mostraremos los formularios con datos de entrada y otro con el archivo de procesamiento.
A continuación mostramos el código del fichero de entrada de datos (habrá que tener cuidado con escribir correctamente la ruta a la librería jQuery):
<html>
<head>
<title>Ejemplo sencillo de AJAX</title>
<script type="text/javascript" src="/js/jquery.js"></script>
<script>
function realizaProceso(valorCaja1, valorCaja2){
var parametros = {
"valorCaja1" : valorCaja1,
"valorCaja2" : valorCaja2
};
$.ajax({
data: parametros,
url: 'ejemplo_ajax_proceso.php',
type: 'post',
beforeSend: function () {
$("#resultado").html("Procesando, espere por favor...");
},
success: function (response) {
$("#resultado").html(response);
}
});
}
</script>
</head>
<body>
Introduce valor 1
<input type="text" name="caja_texto" id="valor1" value="0"/>
Introduce valor 2
<input type="text" name="caja_texto" id="valor2" value="0"/>
Realiza suma
<input type="button" href="javascript:;" onclick="realizaProceso($('#valor1').val(), $('#valor2').val());return false;" value="Calcula"/>
<br/>
Resultado: <span id="resultado">0</span>
</body>
</html>
En este código, utilizamos los id de las cajas de texto para pasarle sus valores a la función realizaProceso. En esta función recogemos los valores de entrada en un array parametros y enviamos mediante AJAX especificando el parámetro data (datos que mandamos), url (dirección del archivo de proceso) y type (POST o GET).
Por último vemos que tenemos dos eventos: beforeSend y success donde podemos indicar la acción a realizar mientras se procesan los datos y tras terminar de procesarlos (en este caso jugar con el contenido HTML del id resultado).
Ahora vemos el archivo de procesamiento de datos (ejemplo_ajax_proceso.php) que únicamente suma los datos recibidos por POST:
<?php $resultado = $_POST['valorCaja1'] + $_POST['valorCaja2']; echo $resultado; ?>
Comentarios