AJAX sin jQuery (sin librerías)

Hola gente de programacionextrema.com, lamentablemente por otras responsabilidades hace mucho que no posteo algo útil en este sitio, así que después de mucho tiempo voy a crear un mini tutorial, en el cual voy a explicar cómo utilizar AJAX sin jQuery en Java Sccript (sin utilizar librerías).

Cómo hacer una petición AJAX sin jQuery en Java Script (sin librerías)

En ciertas ocasiones nos podemos encontrar con la necesidad de realizar una petición AJAX sin utilizar librerías externas para Java Script, como por ejemplo jQuery. A continuación les voy a mostrar un simple código que realiza una petición AJAX.

function ajax() {
  // De esta forma se obtiene la instancia del objeto XMLHttpRequest
  if(window.XMLHttpRequest) {
    connection = new XMLHttpRequest();
  }
  else if(window.ActiveXObject) {
    connection = new ActiveXObject("Microsoft.XMLHTTP");
  }

  var param = "Esto es una prueba AJAX sin jQuery";

  // Preparando la función de respuesta
  connection.onreadystatechange = response;

  // Realizando la petición HTTP con método POST
  connection.open('POST', 'test.php');
  connection.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  connection.send("param=" + param + "&nocache=" + Math.random());
}

function response() {
  if(connection.readyState == 4) {
    alert(connection.responseText);
  }
}
  
ajax();

La función ajax() va a ser la encargada de realizar la petición. Si miramos bien el código lo que hace es una petición POST al archivo “test.php” con el parámetro “param”.
Luego la función response se encarga de recibir la respuesta del servidor para mostrarla en un alert.

Para probarlo correctamente vamos a crear el archivo “test.php” con el siguiente contenido. Que básicamente recibe un parámetro “POST” y lo imprime con la función echo.

<?php
  echo $_POST['param'];
?>

Entonces si ejecutamos el código anterior se va a mostrar el mensaje “Esto es una prueba AJAX sin jQuery” mediante un alert.

Bueno gente, eso es todo lo que tienen que saber a la hora de realizar una petición AJAX con Java Script sin jQuery. Espero que les sea de gran utilidad y ante algún problema no duden en enviar un mensaje.