A vueltas con el Ajax

[bathorz]

Asignar un valor y comentar $_POST['numero'] para una prueba, nada más.
El número aleatorio se generaba cada vez, correcto. Ahora ya no.
Conservar el valor lo he hecho en el php, puedes buscar otro modo.

Esta es una forma entre tantas de hacerlo funcionar. Luego afinas, corriges, cambias a gusto.

Código Javascript:

window.onload = function() {
 
        function ajax(url, datos) {
          var oAjax;
          if (window.XMLHttpRequest) {
            oAjax = new XMLHttpRequest();
          } else {
            oAjax = new ActiveXObject("Microsoft.XMLHTTP");
          }
          oAjax.open("POST", url, true);
          oAjax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
          oAjax.send(datos);
 
          oAjax.onreadystatechange = function() {
            if (oAjax.readyState === 4 && oAjax.status === 200) {
              rta.innerHTML = oAjax.responseText;
            }
          };
        }
 
        var rta = document.getElementById("rta");
        var boton = document.getElementById('boton');
 
        boton.addEventListener('click', function(e) {
          var cadena = 'numero=' + document.getElementById('numero').value;
          ajax('adivina.php', cadena);
        });
 
      };
 

Código HTML:

Adivina entre 1 y 10
    <input type="number" name="numero" id="numero" />
    <button id="boton">boton</button>
    <div id="rta">Rta.</div>
 

adivina.php

Código PHP:

if (!$numero) {
  $numero = $_POST['numero'];
  $aleatorio = rand(1, 10);
}
 
$html = $numero;
switch (true) {
  case ($numero == ''):
    echo " Falta número ";
    exit;
  case ($numero == $aleatorio):
    $html .= " Acertaste ";
    break;
  case ($numero > $aleatorio):
    $html .= " Te has pasado ";
    break;
  default:
    $html .= " Te quedas corto ";
    break;
}
$html .= $aleatorio;
echo $html;