Configuración eficaz de solicitudes AJAX
Explore las opciones integrales de .ajax(), incluidos los tipos de datos, las cabeceras, la caché y los tiempos de espera, para ajustar sus solicitudes asíncronas a distintos escenarios.
Configuración eficaz de solicitudes AJAX es una lección gratuita de jQuery Academy en CoddyKit. Esta es la lección 1 de 3. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de jQuery Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de jQuery Academy incluye 3 lecciones en total.
Libere el potencial de .ajax()
El método $.ajax() de jQuery es su opción principal para realizar solicitudes HTTP con el máximo control. A diferencia de métodos más sencillos como $.get() o $.post(), $.ajax() le permite ajustar cada aspecto de la solicitud.
En esta lección se exploran sus completas opciones, desde la configuración de los tipos de datos hasta la gestión de la caché y los tiempos de espera, para crear aplicaciones asíncronas sólidas y eficientes.
Estructura básica de .ajax()
En esencia, $.ajax() recibe un objeto de pares clave-valor que representa las opciones de configuración. La solicitud más básica solo necesita una url.
Así podría obtener datos de una API:
$.ajax({
url: "https://jsonplaceholder.typicode.com/posts/1"
}).done(function(data) {
console.log("Fetched data:", data.title);
});URL y método (type)
La opción url especifica el endpoint de la solicitud. La opción type (o method en versiones más recientes de jQuery) define el método HTTP, como GET, POST, PUT o DELETE.
url: la URL de destino de la solicitud.type: el método HTTP (por ejemplo, "GET", "POST").
$.ajax({
url: "/api/users",
type: "POST"
});Envío de datos con `data`
Use la opción data para enviar información junto con la solicitud. En las solicitudes GET, los datos se añaden a la URL como parámetros de consulta. En las solicitudes POST, se envían en el cuerpo de la solicitud.
Puede pasar un objeto simple y jQuery lo serializará por usted.
$.ajax({
url: "/api/save-item",
type: "POST",
data: {
id: 123,
name: "New Gadget"
}
});Respuesta esperada: `dataType`
La opción dataType indica a jQuery qué tipo de datos espera recibir del servidor (por ejemplo, "json", "xml", "html", "text"). Esto ayuda a jQuery a analizar correctamente la respuesta.
Si no se especifica, jQuery intenta deducirlo a partir del tipo MIME de la respuesta.
$.ajax({
url: "/api/products",
dataType: "json"
});Encabezados personalizados: `headers`
La opción headers permite establecer encabezados HTTP personalizados para la solicitud. Esto es fundamental para tareas como la autenticación (por ejemplo, al enviar una clave de API) o la especificación de tipos de contenido.
Pase un objeto cuyas claves sean nombres de encabezados y cuyos valores sean sus contenidos.
$.ajax({
url: "/api/secure-data",
headers: {
"Authorization": "Bearer your_token",
"X-Requested-With": "XMLHttpRequest"
}
});Control de la caché: `cache`
Los navegadores suelen almacenar en caché las solicitudes GET para acelerar las cargas posteriores. Aunque resulta útil, a veces necesita obtener datos actualizados cada vez.
Establezca cache: false para impedir que el navegador almacene la respuesta en caché y garantizar que la solicitud obtenga siempre la información más reciente del servidor.
$.ajax({
url: "/api/dynamic-content",
cache: false
});Límites de la solicitud: `timeout`
Las solicitudes de larga duración pueden perjudicar la experiencia del usuario. La opción timeout permite especificar un tiempo máximo (en milisegundos) para completar la solicitud.
Si la solicitud no termina dentro de ese tiempo, se cancelará y se activará el callback .fail().
$.ajax({
url: "/api/slow-report",
timeout: 8000 // 8 seconds
});En directo: configuración avanzada de AJAX
Veamos un ejemplo completo que combina varias opciones de $.ajax(). Esta solicitud obtiene un elemento de una lista de tareas, especifica que espera JSON, añade un encabezado personalizado, desactiva la caché y establece un tiempo de espera.
Ejécutelo para ver cómo se actualiza el párrafo de salida.
<!DOCTYPE html>
<html>
<head>
<title>AJAX Config Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<h3>Check Console & Output:</h3>
<p id="output">Fetching data...</p>
<script>
$(document).ready(function() {
$.ajax({
url: "https://jsonplaceholder.typicode.com/todos/1",
type: "GET",
dataType: "json",
headers: {
"X-App-ID": "CoddyKit-Demo"
},
cache: false,
timeout: 7000 // 7 seconds
})
.done(function(data) {
$("#output").html(
"<b>Todo fetched!</b><br>ID: " + data.id +
"<br>Title: " + data.title
);
console.log("Success:", data);
})
.fail(function(jqXHR, textStatus, errorThrown) {
$("#output").html(
"<b>Request failed!</b><br>Status: " + textStatus +
"<br>Error: " + errorThrown
);
console.error("Error:", textStatus, errorThrown);
})
.always(function() {
console.log("Request completed.");
});
});
</script>
</body>
</html>Comprobación de la configuración de AJAX
Imagine que está creando una función para enviar un comentario nuevo de un usuario a /api/comments. Debe ser una solicitud POST, incluir commentText y userId, y esperar recibir un objeto JSON. Además, para garantizar que el comentario esté siempre actualizado, quiere impedir que el navegador lo almacene en caché.
¿Qué opciones de $.ajax() de las siguientes son esenciales para este caso concreto?
Repaso: dominio de la configuración de AJAX
¡Ha aprendido a configurar el método $.ajax() de jQuery!
- Aprendió a especificar la
urly eltypeHTTP. - A enviar datos mediante la opción
data. - A definir el formato esperado de la respuesta con
dataType. - A añadir
headersHTTP personalizados para casos de uso avanzados. - A controlar la caché del navegador con
cache. - A establecer límites para solicitudes lentas mediante
timeout.
Estas potentes opciones permiten crear interacciones asíncronas altamente personalizadas y fiables en sus aplicaciones web.
Aprende JavaScript con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 22
- Lecciones
- 48
Preguntas frecuentes
¿La lección «Configuración eficaz de solicitudes AJAX» es gratis?
Sí — el texto completo de «Configuración eficaz de solicitudes AJAX» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de jQuery Academy, actualiza a CoddyKit PRO. El curso de jQuery Academy incluye 3 lecciones en total.
¿Qué aprenderé en «Configuración eficaz de solicitudes AJAX»?
Explore las opciones integrales de .ajax(), incluidos los tipos de datos, las cabeceras, la caché y los tiempos de espera, para ajustar sus solicitudes asíncronas a distintos escenarios. Practicas jQuery Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar jQuery Academy?
No se requiere experiencia previa. jQuery Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 3.
¿Cuánto tiempo toma la lección «Configuración eficaz de solicitudes AJAX»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de jQuery Academy?
Sí. Cada lección de jQuery Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Configuración eficaz de solicitudes AJAX
- Gestión de errores y respuestas correctas de AJAX
- AJAX entre dominios (CORS/JSONP)