Blog Tinux Net

php-ajax

Todas las publicaciones etiquetadas php-ajax por Blog Tinux Net
  • Publicado en

    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!';

?>