Ejemplo basico del Uso de Ajax

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Simple AJAX - GET REQUEST</title>
  </head>
  <body>

    <button onclick="sendRequest()">

Hace la llamada a la funcion javascript del archivo script.js

      Send Ajax Request
    </button>

    <div id="container"></div>
<script src="script.js" type="text/javascript"></script>
  </body>
</html>

script.js:

function sendRequest() {

Creamos el Objeto que va a recibir los datos a través de AJAX

    var theObject = new XMLHttpRequest();

Verificamos que se ha enviado una petición

    theObject.open('POST', 'backend.php', true);

Indicamos que tipo de cabecera se ha enviado a través del navegador

    theObject.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

Vemos en cual es el State o Estado

    theObject.onreadystatechange = function() {
      if(theObject.readyState === 4 & theObject.status === 200) {

Si el Estado es Ok =200 y Enviado procedemos a insertar en el div con id container el Texto del Objeto

        document.getElementById('container').innerHTML = theObject.responseText;
      }
    }

Y lo enviamos

    theObject.send('username=Fazt&password=secret');
  }

Y el fichero que se ejecutara en el Backend: backend.php:

<?php

if(isset($_POST)) {
  echo $_POST['username'];
  echo '<br>';
  echo $_POST['password'];
}

  #echo 'Working!';

?>

Artículos Relacionados