Introducción
AJAX es un acrónimo de la frase JavaScript y XML asincrónicos Es una técnica para crear aplicaciones web dinámicas e interactivas. Esta tecnología permite a los desarrolladores actualizar diferentes partes de una página web sin tener que recargarla por completo. AJAX es una combinación de varias tecnologías web que trabajan en conjunto para ofrecer una mejor experiencia de usuario.
¿Cómo funciona AJAX?
AJAX funciona con una idea sencilla: Comunicación asincrónica con el servidor. Esto significa que el navegador puede enviar solicitudes al servidor y recibir respuestas sin tener que recargar toda la página.
Los componentes principales de AJAX
- HTML y CSS: Para mostrar la estructura y el diseño de una página web.
- JavaScript: Para gestionar las interacciones de los usuarios y enviar solicitudes.
- XMLHttpRequest o API de obtención: Para enviar y recibir datos hacia/desde el servidor.
- Datos JSON o XML: El formato de datos que el servidor envía al navegador.
- Servidor y base de datos: Donde se procesan los datos y se preparan las respuestas.
Pasos del funcionamiento de AJAX
- Interacción del usuario: el usuario realiza una acción, como hacer clic en un botón o seleccionar una opción.
- Crear una solicitud: JavaScript crea un objeto XMLHttpRequest o utiliza la API Fetch para enviar la solicitud.
- Enviar solicitud: La solicitud se envía al servidor de forma asincrónica.
- Procesamiento en el servidor: el servidor recibe la solicitud, la procesa y prepara la respuesta adecuada (como datos en formato JSON o HTML).
- Recibir respuesta: el navegador recibe la respuesta del servidor y la pasa a JavaScript.
- Actualización de página: JavaScript procesa los datos recibidos y actualiza parte de la página sin recargarla.
Ejemplo de código AJAX simple
// ایجاد شیء XMLHttpRequest
let xhr = new XMLHttpRequest();
// باز کردن درخواست
xhr.open("GET", "data.json", true);
// تنظیم پاسخ
xhr.onload = function() {
if (xhr.status === 200) {
let data = JSON.parse(xhr.responseText);
console.log(data); // نمایش داده در کنسول
}
};
// ارسال درخواست
xhr.send();Formatos de datos en AJAX
JSON
JSON es el formato de datos más común en AJAX. Es ligero, legible y se puede convertir fácilmente a un objeto JavaScript.
{
"name": "Ali",
"age": 25,
"city": "Tehran"
}XML
En el pasado, XML era uno de los principales formatos en AJAX, pero su uso ha disminuido hoy en día debido a su complejidad y gran carga.
<name>Ali</name>
<age>25</age>
<city>Tehran</city>HTML
A veces, los datos se envían desde el servidor en formato HTML, como parte de una tabla o formulario.
Métodos para presentar una solicitud
CONSEGUIR
xhr.open("GET", "data.json", true);
xhr.send();CORREO
xhr.open("POST", "submit.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("name=Ali&age=25");Uso de la API Fetch
fetch('data.json')
.then(response => response.json())
.then(data => {
console.log(data);
})
.catch(error => {
console.error('Error:', error);
});Resultado
AJAX es una tecnología clave en el desarrollo web que permite a los desarrolladores crear aplicaciones más rápidas, fluidas e interactivas. A pesar de sus numerosas ventajas, conocer sus desafíos y las mejores prácticas para su uso puede ayudar a los desarrolladores a diseñar aplicaciones más eficientes. En definitiva, AJAX se ha convertido en un componente fundamental del desarrollo web moderno, ofreciendo una mejor experiencia de usuario y reduciendo la carga del servidor.
