Saltar la navegación

3.2.- Función $.ajax() en jQuery.

Interrogación en verde.
kropekk_pl (Pixabay License)

La principal función para realizar peticiones AJAX en jQuery es $.ajax(). Ésta es una función de bajo nivel, lo que quiere decir que disponemos de la posibilidad de configurar, prácticamente todos los parámetros de la petición AJAX, y será, por tanto, equivalente a los métodos clásicos que usamos en la programación tradicional.

La sintaxis de uso es: $.ajax(opciones)

En principio, esta instrucción parece muy simple, pero el número de opciones disponibles, es relativamente extenso. Ésta es la estructura básica:

$.ajax({
     url: [URL],
     type: [GET/POST],
     success: [function callback exito(data)],
     error: [function callback error],
     complete: [function callback error],
     ifModified: [bool comprobar E-Tag],
     data: [mapa datos GET/POST],
     async: [bool que indica sincronía/asincronia]
});

Veamos algunas propiedades de la función $.ajax() de jQuery:

Propiedades de la función $.ajax() de jQuery.
Nombre Tipo Descripción
url String La URL a la que se le hace la petición AJAX.
type String El método HTTP a utilizar para enviar los datos: POST o GET. Si se omite se usa GET por defecto.
data Object Un objeto en el que se especifican parámetros que se enviarán en la solicitud. Si es de tipo GET, los parámetros irán en la URL. Si es POST, los datos se enviarán en las cabeceras. Es muy útil usar la función serialize(), para construir la cadena de datos.
dataType String Indica el tipo de datos que se espera que se devuelvan en la respuesta: XML, HTML, JSON, script,text (valor por defecto en el caso de omitir dataType).
success Function Función que será llamada, si la respuesta a la solicitud terminó con éxito.
error Function Función que será llamada, si la respuesta a la solicitud devolvió algún tipo de error.
complete Function Función que será llamada, cuando la solicitud fue completada.

Veamos un ejemplo, que ya hicimos pero utilizando el objeto XMLHttpRequest, pero ahora utilizando el método ajax de jQuery.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>DWEC07.- Ejemplo jQuery método ajax</title>
		<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
		<script type="text/javascript">
			$( () => {
				$.ajax({
					url: 'http://localhost/fecha.php',
					type: 'GET',
					async: true,
					success: (respuesta) => {
						$("#resultados").text(respuesta);
						$("#estado").toggleClass('cargada');
						$("#estado").text("Cargada.");
					}
				});
			});
		</script>
		<style>
			#resultados {
				background: yellow;
			}
			.cargando {
				background: red;
			}
			.cargada {
				background: green;
			}
		</style>
	</head>
	<body>
		<p>
			A continuación se cargarán por AJAX los datos recibidos en la solicitud ASINCRONA:
		</p>
		<p>
			Esta solicitud tardará 2 segundos aproximadamente, que es el tiempo de ejecución de la página PHP en el servidor
		</p>
		<p>
			Contenedor resultados:
			<div id="resultados"></div>
		</p>
		<p>
			Estado de las solicitudes:
			<div id="estado"></div>
		</p>
	</body>
</html>