AJAX Introducción
AJAX es el sueño de un desarrollador, porque puede:
- Actualizar una página web sin recargar la página
- Solicitar datos de un servidor: después de que se haya cargado la página
- Recibir datos de un servidor: después de que se haya cargado la página
- Enviar datos a un servidor - en segundo plano
Pruébelo usted mismo Ejemplos en cada capítulo
En cada capítulo, puede editar los ejemplos en línea y hacer clic en un botón para ver el resultado.
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();
}
El archivo "ajax_info.txt" utilizado en el ejemplo anterior es un archivo de texto simple y se ve así:
<h1>AJAX</h1>
<p>AJAX is not a programming language.</p>
<p>AJAX is a
technique for accessing web servers from a web page.</p>
<p>AJAX stands for
Asynchronous JavaScript And XML.</p>
¿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)