Introducción a AJAX

AIX es un sueño de los desarrolladores, porque puede:

  • Actualizar la página web sin recargarla
  • Solicitar datos del servidor después de que la página se haya cargado
  • Recibir datos del servidor después de que la página se haya cargado
  • Enviar datos al servidor en segundo plano

Ejemplo de AJAX

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

Pruebe usted mismo

Explicación de ejemplo de AJAX

Página HTML

<!DOCTYPE html>
<html>
<body>
<div id="demo">
  <h2>Deje 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 procedente 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 simplemente combina:

  • Objeto XMLHttpRequest integrado en el navegador (solicitar datos desde el 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 de manera asíncrona 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. Ocurre 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 (como actualizar la página)