Operaciones AJAX
Operaciones AJAX
Operaciones AJAX es una lección gratuita de jQuery Academy en CoddyKit. Esta es la lección 1 de 1. 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 1 lecciones en total.
Introducción
Hola:
En esta lección aprenderemos a interactuar con el servidor remoto mediante los métodos AJAX de jQuery.
AJAX (Asynchronous Javascript And XML) es una tecnología que permite transferir datos con el servidor de forma asíncrona, sin actualizar la página web.
La experiencia del usuario mejora, especialmente porque los datos se pueden transferir sin actualizar la página.
Ejemplo de AJAX
En particular, las aplicaciones web más populares del mundo, como Facebook, Gmail y Youtube, utilizan la tecnología AJAX con frecuencia.
De hecho, en lugar de pensar en AJAX como una tecnología nueva, puede considerarlo un método que permite transferir datos de forma asíncrona entre el servidor y el cliente mediante Javascript.
Veamos un ejemplo de una función que utiliza AJAX.
Por ejemplo, está viendo un video en youtube.com y hace clic en el botón Me gusta. En este caso, nuestro evento de «Me gusta» se transmite a los servidores de youtube en segundo plano antes de que se actualice la página de youtube.
Este es un proceso que se lleva a cabo mediante una solicitud AJAX.
Ejemplo de AJAX
Hagamos un ejemplo de solicitudes AJAX.
A continuación se muestra el código de una solicitud GET realizada con AJAX a https://api.coddykit.com/api/coddy-test
Está hecha con Javascript vanilla y su sintaxis es un poco complicada, como puede observar.
<div id="result"></div>
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4
&& this.status == 200) {
//we are writing the AJAX request response
//to div element that has result id
var result = document.getElementById('result');
result.innerHTML = JSON.stringify(this.responseText);
}
};
xhttp.open("GET", "https://api.coddykit.com/api/coddy-test", true);
xhttp.send();
</script>Advertencia
Como dijimos antes, jQuery es una biblioteca de modificación del DOM que también proporciona métodos para facilitar las operaciones AJAX.
Método AJAX
Contamos con un método bastante sencillo para gestionar nuestras solicitudes AJAX con jQuery.
Con el método ajax() podemos utilizar fácilmente métodos HTTP habituales en la Web, como get, post o put.
La sintaxis del método Ajax es la siguiente.
$.ajax ({
url: 'remote URL'.
data: 'Data that we will send',
method: 'HTTP Method - Default GET',
success: 'Here, we should define function that work when Ajax get success result',
dataType: 'Interaction data type'
});
Hagamos un ejemplo
<div id="result"></div>
<script>
$.ajax ({
url: 'https://api.coddykit.com/api/coddy-test',
success: function(data){
$('#result').text(JSON.stringify(data));
}
});
</script>Ejemplo de Ajax
Solicitud Ajax get
Ahora mejoremos nuestro ejemplo.
En el ejemplo siguiente, se ha enviado una solicitud ajax a la URL (https://api.coddykit.com/api/coddy-test)
Si no se define ningún método HTTP, se realiza una solicitud GET de forma predeterminada.
const https = require('https');
function ajax(url) {
const callbacks = { success: [], fail: [], always: [] };
const req = https.get(url, (res) => {
let data = '';
res.on('data', chunk => data += chunk);
res.on('end', () => {
callbacks.success.forEach(cb => cb(data));
callbacks.always.forEach(cb => cb());
});
});
req.on('error', (err) => {
callbacks.fail.forEach(cb => cb(err));
callbacks.always.forEach(cb => cb());
});
return {
done: function(cb) { callbacks.success.push(cb); return this; },
fail: function(cb) { callbacks.fail.push(cb); return this; },
always: function(cb) { callbacks.always.push(cb); return this; }
};
}
var ajaxReq = ajax("https://api.coddykit.com/api/coddy-test")
.done(function() {
//success callback
/*
If our get request is sent to
the server with success (HTTP 2xx),
this function is called.
*/
})
.fail(function() {
/* This function works
if the AJAX request fails.
*/
})
.always(function() {
/*
This function works in all cases when
the AJAX request is
successful or unsuccessful.
*/
});método get
Método $.get() y solicitud GET
Podemos utilizar el método $.get() para enviar una solicitud HTTP GET a nuestros servidores.
Este método lo proporciona jQuery y nos permite enviar una solicitud GET escribiendo un código más conciso y sencillo que con Javascript vanilla.
Hagamos un ejemplo y observe lo reducido que es el código.
<div id="result"></div>
<script>
$.get("https://api.coddykit.com/api/coddy-test",
function(response) {
$('#result').text(JSON.stringify(response));
})
</script>Método Post
Método $.post() y solicitud Post
Podemos utilizar el método $.post() para enviar una solicitud HTTP Post a nuestros servidores.
Hagamos un ejemplo y observemos lo conciso que es el código.
Utilizaremos solicitudes post con frecuencia, especialmente al enviar formularios web al servidor.
<div id="result"></div>
<script>
$.post("https://api.coddykit.com/api/coddy-test",
//Please note that we can send data in body while we sending Post Request
{name:'Coddy', age: 3},
function(response) {
$('#result').text(JSON.stringify(response));
})
</script>Método Put
Solicitud Put
Podemos utilizar el método $.put() para enviar una solicitud HTTP Put a nuestros servidores.
Hagamos un ejemplo.
<div id="result"></div>
<script>
$.ajax({
method:'PUT',
url:"https://api.coddykit.com/api/coddy-test",
//Please note that we can send data in body while we sending Put Request
data: {name:'Coddy', age: 3},
success: function(response) {
$('#result').text(JSON.stringify(response));
}})
</script>Método Delete
Solicitud Delete
Podemos utilizar el método $.delete() para enviar una solicitud HTTP Delete a nuestros servidores.
Hagamos un ejemplo
<div id="result"></div>
<script>
$.ajax({
method:'DELETE',
url:"https://api.coddykit.com/api/coddy-test",
success: function(response) {
$('#result').text(JSON.stringify(response));
}})
</script>Enlace
Puede encontrar ejemplos y obtener información detallada sobre los métodos AJAX en el enlace siguiente.
Enhorabuena
Enhorabuena 🎉
En esta sección, hemos aprendido AJAX con jQuery.
Gracias por acompañarnos durante el curso jQuery para principiantes 🎉🎉🎉
Ahora puede realizar el examen y obtener un certificado del curso Tutorial de jQuery para principiantes 🚀🚀🚀
Preguntas frecuentes
¿La lección «Operaciones AJAX» es gratis?
Sí — el texto completo de «Operaciones 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 1 lecciones en total.
¿Qué aprenderé en «Operaciones AJAX»?
Operaciones AJAX 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 1.
¿Cuánto tiempo toma la lección «Operaciones 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.