Introducción a AJAX

AJAX es el sueño de los desarrolladores, porque puedes:

  • Actualizar la página sin recargar
  • Solicitar datos del servidor después de que la página se cargue
  • Recibir datos del servidor después de que la página se cargue
  • Enviar datos al servidor en segundo plano

Ejemplo de AJAX

Haz clic en el siguiente botón para que Ajax cambie este texto:

Prueba por tu cuenta

Explicación de ejemplo de AJAX

Página HTML

<!DOCTYPE html>
<html>
<body>
<div id="demo">
  <h2>Deja que AJAX cambie este texto</h2>
  <button type="button" onclick="loadDoc()">Cambiar texto</button>
</div>
</body>
</html>

Esta página HTML contiene un <div> y un <button>.

<div> Se utiliza para mostrar información del servidor.

<button> Llamar a la función (cuando se haga clic).

Esta función solicita datos del servidor web y los muestra:

Function loadDoc()
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 = Asynchronous JvaScript And XML.

AJAX no es un lenguaje de programación.

AJAX es simplemente una combinación de:

  • Objeto XMLHttpRequest integrado en el navegador (solicitar datos del servidor web)
  • JavaScript y HTML DOM (mostrar o usar datos)

Ajax es un nombre engañoso. Las aplicaciones Ajax pueden usar XML para transmitir datos, pero también es común transmitir datos como texto puro o texto JSON.

Ajax permite actualizar asincrónicamente la página web intercambiando datos con el servidor web detrás de la escena. Esto significa que se puede actualizar parte de la página web sin recargar toda la página.

¿Cómo funciona AJAX?

AJAX
  1. Se produce un evento en la página web (carga de página, clic en un botón)
  2. El objeto XMLHttpRequest se crea por JavaScript
  3. El objeto XMLHttpRequest envía solicitudes al servidor web
  4. El servidor procesa la solicitud
  5. El servidor envía la respuesta de vuelta a la página web
  6. Respuesta leída por JavaScript
  7. Acción correcta ejecutada por JavaScript (por ejemplo, actualización de la página)