 |
$.ajax en jQuery
AJAX es el arte de intercambiar datos con un servidor y actualizar partes de una página web, sin recargar la página completa.
AJAX = JavaScript y XML asíncronos, se trata de cargar datos en segundo plano y mostrarlos en la página web, sin volver a cargar toda la página.
Qué pasa con jQuery y AJAX?
jQuery proporciona varios métodos para la funcionalidad AJAX.
Con los métodos jQuery AJAX, puede solicitar texto, HTML, XML o JSON desde un servidor remoto utilizando HTTP Get y HTTP Post - ¡Y puede cargar los datos externos directamente en los elementos HTML seleccionados de su página web!
¡Sin jQuery, la codificación AJAX puede ser un poco complicada!
Escribir código AJAX normal puede ser un poco complicado, porque los diferentes navegadores tienen una sintaxis diferente para la implementación de AJAX. Esto significa que tendrá que escribir código adicional para probar diferentes navegadores. Sin embargo, el equipo de jQuery se ha encargado de esto por nosotros, para que podamos escribir la funcionalidad AJAX con una sola línea de código.
El método ajax () se utiliza para realizar una solicitud AJAX (HTTP asíncrono). Todos los métodos de jQuery AJAX utilizan el método ajax (). Este método se usa principalmente para solicitudes donde los otros métodos no se pueden usar.
Sintaxis
$.ajax({name:value, name:value, ... })
Los parámetros especifican uno o más pares de nombre / valor para la solicitud AJAX.
Posibles nombres / valores en la siguiente tabla:
| Nombre | Valor/Descripción |
| async | Un valor booleano que indica si la solicitud debe manejarse de forma asincrónica o no. El valor predeterminado es verdadero |
| beforeSend(xhr) | Una función para ejecutar antes de que se envíe la solicitud |
| cache | Un valor booleano que indica si el navegador debe almacenar en caché las páginas solicitadas. El valor predeterminado es verdadero |
| complete(xhr,status) | Una función que se ejecutará cuando finalice la solicitud (después de las funciones de éxito y error) |
| contentType | El tipo de contenido utilizado al enviar datos al servidor. El valor predeterminado es: "application / x-www-form-urlencoded" |
| context | Especifica el valor "this" para todas las funciones de devolución de llamada relacionadas con AJAX |
| data | Especifica los datos que se enviarán al servidor |
| dataFilter(data,type) | Una función que se utiliza para manejar los datos de respuesta sin procesar de XMLHttpRequest |
| dataType | El tipo de datos esperado de la respuesta del servidor. |
| error(xhr,status,error) | Una función para ejecutar si la solicitud falla. |
| global | Un valor booleano que especifica si se activan o no controladores de eventos AJAX globales para la solicitud. El valor predeterminado es verdadero |
| ifModified | Un valor booleano que especifica si una solicitud solo tiene éxito si la respuesta ha cambiado desde la última solicitud. El valor predeterminado es: falso. |
| jsonp | Una cadena que anula la función de devolución de llamada en una solicitud jsonp |
| jsonpCallback | Especifica un nombre para la función de devolución de llamada en una solicitud jsonp |
| password | Especifica una contraseña que se utilizará en una solicitud de autenticación de acceso HTTP. |
| processData | Un valor booleano que especifica si los datos enviados con la solicitud deben transformarse en una cadena de consulta. El valor predeterminado es verdadero |
| scriptCharset | Especifica el juego de caracteres para la solicitud |
| success(result,status,xhr) | Una función que se ejecutará cuando la solicitud sea exitosa |
| timeout | El tiempo de espera local (en milisegundos) para la solicitud |
| traditional | Un valor booleano que especifica si se debe utilizar o no el estilo tradicional de serialización de parámetros. |
| type | Especifica el tipo de solicitud. (GET o POST)) |
| url | Especifica la URL a la que enviar la solicitud. El valor predeterminado es la página actual |
| username | Especifica un nombre de usuario que se utilizará en una solicitud de autenticación de acceso HTTP |
| xhr | Una función utilizada para crear el objeto XMLHttpRequest |
El siguiente ejemplo carga el contenido del archivo "demo_test29.txt" en un <div>elemento específico :
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.ajax({url: "demo_test29.txt", success: function(result){
$("#div1").html(result);
}});
});
});
</script>
</head>
<body>
<div id="div1"><h2>Deje que jQuery AJAX cambie este texto</h2></div>
<button>Obtener contenido externo con AJAX</button>
</body>
</html>
Hasta ahora hemos visto que jQuery nos provee varias formas de recuperar y enviar datos al servidor utilizando ajax:
- Método load
- Funciones $.get y $.post
- $.getJSON
Existe otra función llamada $.ajax que es la más completa de todas, pero como desventaja es más compleja su empleo.
La sintaxis de la función $.ajax es:
ajax([objeto literal])
Retorna un objeto XMLHttpRequest que podemos eventualmente utilizarlo.
Con un ejemplo veremos las propiedades principales que podemos configurar en el parámetro a enviar.
Problema:Implementar una aplicación que calcule el cuadrado de un número que ingresamos por teclado. La operación se realiza en el servidor, le enviamos los datos mediante la función de jQuery $.ajax
pag29_1.html
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de jQuery</title>
<meta charset="UTF-8">
</head>
<body>
<form action="pagina1.php" method="post" id="formulario">
Ingrese nro:<input type="text" name="nro" id="nro" size="10"><br>
<input type="submit" value="Calcular el cuadrado" id="enviar">
<div id="resultados"></div>
</form>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="func29.js"></script>
</body>
</html>
func29.js
let x = $(document);
x.ready(inicializarEventos);
function inicializarEventos() {
let x = $("#enviar");
x.click(presionSubmit);
}
function presionSubmit() {
let v = $("#nro").val();
$.ajax({
async: true,
type: "POST",
dataType: "html",
contentType: "application/x-www-form-urlencoded",
url: "pag92.php",
data: "numero=" + v,
beforeSend: inicioEnvio,
success: llegadaDatos,
timeout: 4000,
error: problemas
});
return false;
}
function inicioEnvio() {
let x = $("#resultados");
x.html('<img src="cargando.gif">');
}
function llegadaDatos(datos) {
$("#resultados").text(datos);
}
function problemas() {
$("#resultados").text('Problemas en el servidor.');
}
pag29.php
<?php $cuadrado=$_REQUEST['numero'] * $_REQUEST['numero']; echo $cuadrado; ?>
Veamos que datos podemos enviarle a la función $.ajax:
function presionSubmit() {
let v = $("#nro").val();
$.ajax({
async: true,
type: "POST",
dataType: "html",
contentType: "application/x-www-form-urlencoded",
url: "pagina1.php",
data: "numero=" + v,
beforeSend: inicioEnvio,
success: llegadaDatos,
timeout: 4000,
error: problemas
});
return false;
}
Hemos inicializado las siguientes propiedades:
- async : Indica si la comunicación será asincrónica (true) o sincrónica (false)
- type : Indica el método que se envían los datos (pudiendo ser GET o POST)
- dataType : Indica el tipo de datos que se va a recuperar (pudiendo ser "html","xml","json","script")
- contentType : Indicamos como se empaquetan los datos para enviarlos al servidor (normalmente "application/x-www-form-urlencoded")
- url : Indicamos el nombre de la página que procesará la petición de datos.
- data : Indicamos los datos a enviar al servidor.
- beforeSend : Indicamos el nombre de la función que se ejecutará previo al envío de datos (en nuestro ejemplo mostramos el gif animado que indica que se inició el pedido de datos al servidor)
- success : Indicamos la función que se ejecuta cuando finalizó el envío de datos del servidor y además ocurrió todo en forma correcta (en nuestro ejemplo recuperamos el dato devuelto y lo mostramos en la página)
- timeout : El tiempo máximo a esperar por la petición de datos.
- error : El nombre de la función que se ejecuta si los datos no llegan del servidor.