Introducción a AJAX

Tabla de contenido

    Mostrar tabla de contenidos

AJAX es el sueño de un desarrollador, porque puedes:

  • 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 de AJAX

Deja que AJAX cambie este texto



Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<div id="demo">
<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>

<script>
function loadDoc() {
  const xhttp = new XMLHttpRequest();
  xhttp.onload = function() {
    document.getElementById("demo").innerHTML =
    this.responseText;
  }
  xhttp.open("GET", "ajax_info.txt");
  xhttp.send();
}
</script>

</body>
</html>

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 .

El <div> La sección se utiliza para mostrar información de un servidor.

El llama a una función (si se hace clic en él).

La función solicita datos de una web servidor y lo 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=Un JavaScript un sincrónico XML.

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 utilizar 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 plano 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 detrás de escena. Esto significa que es posible actualizar partes de una página web sin tener que recargar toda la página.

Cómo funciona AJAX

  • 1. Ocurre 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 se lee mediante JavaScript.

  • 7. JavaScript realiza la acción adecuada (como la actualización de la página)

Navegadores modernos (API de recuperación)

Los navegadores modernos pueden utilizar Fetch API en lugar del objeto XMLHttpRequest.

La interfaz Fetch API permite que el navegador web realice solicitudes HTTP a servidores web.

Si utiliza el objeto XMLHttpRequest, Fetch puede hacer lo mismo de una manera más sencilla.