Tema: A vueltas con el Ajax
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 25/04/2014, 04:34
Avatar de replica
replica
 
Fecha de Ingreso: noviembre-2004
Mensajes: 68
Antigüedad: 19 años, 6 meses
Puntos: 2
A vueltas con el Ajax
Buenos días.

Estoy intentando ponerme al día con ajax, pero me cuesta aún la interacción entre este y php:

El ejemplo es muy sencillito y corto. Intento adivinar un número que debería generarme php de manera aleatoria (ya sé que este ejemplo se podría hacer totalmente con javascript, pero, como digo, intento descubrir los misterios del ajax).

Archivo Adivina.html
Código HTML: 
Ver original
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8" />
  5.         <title>Adivina el número</title>
  6.         <script type="text/javascript" src="ajax.js" defer></script>
  7.         <script type="text/javascript" src="codigo.js" defer></script>
  8.     </head>
  9.     <body>
  10.         <input type="number" name="numero" id="numero" />
  11.         <input type="button" id="boton" value="Inténtalo!" />
  12.  
  13.         <p id="resultado"></p>
  14.     </body>
  15. </html>

Archivo ajax.js
Código Javascript: 
Ver original
  1. var peticion_http;
  2.  
  3.             function cargaContenido(url, metodo, parametro, funcion) {
  4.                 peticion_http = inicializa_xhr();
  5.  
  6.                 if(peticion_http) {
  7.                 peticion_http.onreadystatechange = funcion;
  8.                 peticion_http.open(metodo, url, true);
  9.                 peticion_http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  10.                 peticion_http.send(parametro);
  11.                 //peticion_http.responseText;
  12.                 }
  13.             }
  14.  
  15.             function inicializa_xhr() {
  16.                 if(window.XMLHttpRequest) {
  17.                 return new XMLHttpRequest();
  18.                 }
  19.             else if(window.ActiveXObject) {
  20.                 return new ActiveXObject("Microsoft.XMLHTTP");
  21.                 }
  22.             }
  23.  
  24.             function muestraContenido() {
  25.                 if(peticion_http.readyState === 4) {
  26.                 if(peticion_http.status === 200)
  27.                 {
  28.                     return peticion_http.responseText;
  29.                 }
  30.                     else // Este else no me vale para nada, ya que status se pone a 200 antes que readyState se ponga a 4.
  31.                         alert("Esperando");
  32.             }
  33.             }

Archivo codigo.js
Código Javascript: 
Ver original
  1. window.addEventListener('load', iniciar, false);
  2.  
  3.     function iniciar()
  4.     {
  5.         document.getElementById('boton').addEventListener('click', enviar, false);
  6.     }
  7.  
  8.  
  9.     function enviar()
  10.     {
  11.         var cadena = document.getElementById('numero').id + "=" + document.getElementById('numero').value;
  12.         resultado = cargaContenido("adivina.php", 'POST', cadena, muestraContenido);
  13.         document.getElementById('resultado').textContent = resultado;
  14.     }

Archivo adivina.php
Código PHP: 
Ver original
  1. <?php
  2.  
  3.     $numero = $_POST['numero'];
  4.  
  5.     if (isset($aleatorio))
  6.     {
  7.         if ($numero === $aleatorio)
  8.         {
  9.             echo "Acertaste";
  10.         }
  11.         else if ($numero > $aleatorio)
  12.         {
  13.             echo "Te has pasado";
  14.         }
  15.         else
  16.             echo "Te quedas corto";
  17.     }
  18.     else
  19.         $aleatorio = rand(1, 20);
  20.  
  21.     //echo $aleatorio;
  22.  
  23. ?>

Imagino que el problema está en el archivo php, que no devuelvo correctamente el valor (aunque pensaba que ajax.responseText recogía el echo) o, si no, en la forma de recoger el valor en ajax, (la llamada a la función CargaContenido no me devuelve nada).

¿Alguien puede orientarme?

Gracias.