AJAX Introducción
AJAX es el sueño de un desarrollador, porque puede:
- Leer datos de un servidor web, después de que se haya cargado la página
- Actualizar una página web sin recargar la página
- Enviar datos a un servidor web - en segundo plano
Ejemplo AJAX
Let AJAX change this text
Ejemplo de AJAX explicado
Página HTML
<!DOCTYPE html>
<html>
<body>
<div id="demo">
<h2>Let AJAX change this text</h2>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>
</body>
</html>
La página HTML contiene una sección <div> y un <button>.
La sección <div> se utiliza para mostrar información de un servidor.
El <button> llama a una función (si se hace clic en él).
La función solicita datos de un servidor web y los muestra:
Función cargarDoc()
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}
¿Qué es AJAX?
AJAX = J avaScript asincrónico y X ML .
AJAX no es un lenguaje de programación.
AJAX solo usa una combinación de:
- Un objeto integrado en el navegador
XMLHttpRequest(para solicitar datos de un servidor web) - JavaScript y HTML DOM (para mostrar o usar los datos)
AJAX es un nombre engañoso. Las aplicaciones AJAX pueden usar XML para transportar datos, pero es igualmente común transportar datos como texto sin formato o texto JSON.
AJAX permite que las páginas web se actualicen de forma asíncrona mediante el intercambio de datos con un servidor web en segundo plano. Esto significa que es posible actualizar partes de una página web sin recargar toda la página.
Cómo funciona AJAX
- 1. Se produce un evento en una página web (se carga la página, se hace clic en un botón)
- 2. JavaScript crea un objeto XMLHttpRequest
- 3. El objeto XMLHttpRequest envía una solicitud a un servidor web
- 4. El servidor procesa la solicitud
- 5. El servidor envía una respuesta a la página web.
- 6. La respuesta es leída por JavaScript
- 7. JavaScript realiza la acción adecuada (como la actualización de la página)
Navegadores modernos (Fetch API)
Los navegadores modernos pueden usar la API Fetch en lugar del objeto XMLHttpRequest.
La interfaz Fetch API permite que el navegador web realice solicitudes HTTP a los servidores web.
Si usa el objeto XMLHttpRequest, Fetch puede hacer lo mismo de una manera más simple.