¿Qué es AJAX?
AJAX es el sueño de un desarrollador, porque puede:
- Leer datos de un servidor web: después de que se haya cargado una página web
- 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() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
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 XMLHttpRequest integrado en el navegador (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)
Tutorial completo de AJAX
Esta ha sido una breve descripción de AJAX.
Para obtener un tutorial completo de AJAX, vaya a W3Schools AJAX Tutorial .
Para obtener más ejemplos de AJAX, vaya a Ejemplos de AJAX de W3Schools .