A vueltas con el Ajax

replica · #1 (**permalink**) 25/04/2014, 04:34

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<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Adivina el número</title>
        <script type="text/javascript" src="ajax.js" defer></script>
        <script type="text/javascript" src="codigo.js" defer></script>
    </head>
    <body>
        <input type="number" name="numero" id="numero" />
        <input type="button" id="boton" value="Inténtalo!" />
 
        <p id="resultado"></p>
    </body>
</html>

Archivo ajax.js

Código Javascript:

Ver originalvar peticion_http;
 
            function cargaContenido(url, metodo, parametro, funcion) {
                peticion_http = inicializa_xhr();
 
                if(peticion_http) {
                peticion_http.onreadystatechange = funcion;
                peticion_http.open(metodo, url, true);
                peticion_http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                peticion_http.send(parametro);
                //peticion_http.responseText;
                }
            }
 
            function inicializa_xhr() {
                if(window.XMLHttpRequest) {
                return new XMLHttpRequest();
                }
            else if(window.ActiveXObject) {
                return new ActiveXObject("Microsoft.XMLHTTP");
                }
            }
 
            function muestraContenido() {
                if(peticion_http.readyState === 4) {
                if(peticion_http.status === 200)
                {
                    return peticion_http.responseText;
                }
                    else // Este else no me vale para nada, ya que status se pone a 200 antes que readyState se ponga a 4.
                        alert("Esperando");
            }
            }

Archivo codigo.js

Código Javascript:

Ver originalwindow.addEventListener('load', iniciar, false);
 
    function iniciar()
    {
        document.getElementById('boton').addEventListener('click', enviar, false);
    }
 
 
    function enviar()
    {
        var cadena = document.getElementById('numero').id + "=" + document.getElementById('numero').value;
        resultado = cargaContenido("adivina.php", 'POST', cadena, muestraContenido);
        document.getElementById('resultado').textContent = resultado;
    }

Archivo adivina.php

Código PHP:

Ver original<?php
 
    $numero = $_POST['numero'];
 
    if (isset($aleatorio))
    {
        if ($numero === $aleatorio)
        {
            echo "Acertaste";
        }
        else if ($numero > $aleatorio)
        {
            echo "Te has pasado";
        }
        else
            echo "Te quedas corto";
    }
    else
        $aleatorio = rand(1, 20);
 
    //echo $aleatorio;
 
?>

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.

bathorz · #2 (**permalink**) 25/04/2014, 08:01

Genera el número aleatorio arriba, de lo contrario if no lo compara. Haz la prueba levantando directamente en el archivo php.

Código PHP:

Ver original$aleatorio = rand(1, 20);
$numero = 3;//$_POST['numero'];
 
if (isset($aleatorio)) {
  if ($numero === $aleatorio) {
    echo "Acertaste ";
  } else if ($numero > $aleatorio) {
    echo "Te has pasado ";
  } else {
    echo "Te quedas corto ";
  }
}

caricatos · #3 (**permalink**) 25/04/2014, 08:02

Hola:

No sé porqué complicas tanto la legibilidad...

Esto:

var cadena = document.getElementById('numero').id + "=";// + document.getElementById('numero').value;

Se resume con

var cadena = "numero="...

Y en php, cunado averiguas si existe la variable $aleatorio, evidentemente no existe (a no ser que exista más código que estés ocultando), así que simplemente se hace una asignación sin ninguna instrucción "echo"...

Saludos

replica · #4 (**permalink**) 26/04/2014, 02:27

Cita:

Iniciado por bathorz

Genera el número aleatorio arriba, de lo contrario if no lo compara. Haz la prueba levantando directamente en el archivo php.

Código PHP:

Ver original$aleatorio = rand(1, 20);
$numero = 3;//$_POST['numero'];
 
if (isset($aleatorio)) {
  if ($numero === $aleatorio) {
    echo "Acertaste ";
  } else if ($numero > $aleatorio) {
    echo "Te has pasado ";
  } else {
    echo "Te quedas corto ";
  }
}

Con esto, lo que parece es que el número aleatorio se genera cada vez que se llama a "Adivina.php", ¿no?

Entonces, ¿si quiero generar un número aleatorio la primera vez que entro, y conservarlo hasta que se adivine, debería de utilizar una cookie, sesión o localStorage?

Tampoco sé por qué comentas $_POST['numero']; Pensaba que esto debería de funcionar así.

replica · #5 (**permalink**) 26/04/2014, 02:42

Cita:

Iniciado por caricatos

Hola:

No sé porqué complicas tanto la legibilidad...

Esto:

var cadena = document.getElementById('numero').id + "=";// + document.getElementById('numero').value;

Se resume con

var cadena = "numero="...

Y en php, cunado averiguas si existe la variable $aleatorio, evidentemente no existe (a no ser que exista más código que estés ocultando), así que simplemente se hace una asignación sin ninguna instrucción "echo"...

Saludos

Pues porque voy haciendo cambios en el código cuando algo no me funciona, y al parámetro que le estaba pasando a la función necesitaba el nombre que requiere el php para poder trabajar con el array $_POST (para mi caso, faltaba 'numero').

No sé, es un código rápido y tonto, y me vino así a la cabeza, y no le di mayor importancia. Cuando me pongo a repasar y debuggear el código siempre tengo algo que corregir.

Y no, no estoy ocultando ningún código. No se trata de ningún proyecto para una mega corporación. Sólo trato de averiguar cómo trabaja el php cuando se le llama desde ajax. Por lo que parece, no tiene ninguna memoria, y se vuelve a hacer todo desde 0. Posiblemente, al devolver el resultado desde php a ajax, debería de pasar el número aleatorio, para después, al volver a llamar al php, pasárselo otra vez como un parámetro post. Así no es necesario utilizar cookies.

Para devolver el resultado desde php a ajax sólo puedo utilizar echo? ¿No se puede utilizar un return?

¿Y si hago varios echos? ¿Se reciben todos? ¿O sólo el primero o el último?

Pues por eso voy haciendo pruebas.

En cualquier manual de ajax, lo que siempre veo es cómo se crea el objeto HttpRequest, la función open y send, pero no veo lo que puede hacer el php.

caricatos · #6 (**permalink**) 26/04/2014, 03:41

Hola:

Empezaremos por lo que evidentemente no entendiste...

el id de un elemento cuyo id="numero", será "número", evidentemente, así que poner
document.getElementById("numero").id
... es eqwuivalente a poner:
"numero"// evidentemente...

Sobre lo que puedes recoger con ajax es bastante simple, con responseText, obtienes texto plano, y en php puedes generarlo con todas las maneras de enviar datos a la consola en ese lenguaje: echo, print_r, print..., y mediante responseXML, obtienes un documento xml bien formado, que desde php puedes hacerlo con las distintas maneras de escribir datos, más la cabecera xml (header)

Saludos

bathorz · #7 (**permalink**) 26/04/2014, 09:12

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:

Ver originalwindow.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:

Ver originalAdivina 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:

Ver originalif (!$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;

replica · #8 (**permalink**) 27/04/2014, 07:39

Cita:

Iniciado por caricatos

Hola:

Empezaremos por lo que evidentemente no entendiste...

el id de un elemento cuyo id="numero", será "número", evidentemente, así que poner
document.getElementById("numero").id
... es eqwuivalente a poner:
"numero"// evidentemente...

No soy tonto ni soy novato, tengo muchísima experiencia programando en otros entornos, y sé perfectamente lo que dijiste, así que esos términos, por favor, no te los admito. Guárdatelos, como moderador, para los "moscones" que sólo hacen que copiar y pegar código ajeno, porque no es mi caso.

Estoy muy acostumbrado a hacer eso, porque hago otras construcciones donde la id de la etiqueta html viene con una variable (porque hago más de un campo, simplemente), así que es una construcción totalmente lógica.

Cita:

Iniciado por caricatos

Sobre lo que puedes recoger con ajax es bastante simple, con responseText, obtienes texto plano, y en php puedes generarlo con todas las maneras de enviar datos a la consola en ese lenguaje: echo, print_r, print..., y mediante responseXML, obtienes un documento xml bien formado, que desde php puedes hacerlo con las distintas maneras de escribir datos, más la cabecera xml (header)

Saludos

Esto sí que te lo agradezco muchísimo. Pero sigo sospechando que cuando acaba la ejecución de php se pierden todos los datos almacenados en las variables, y no sé cuál es la forma correcta de trabajar con ello, cuando no quiero que se pierdan.

Voy a probar a devolver esos datos por ajax, que ahí se deberían de mantener siempre en memoria, ya que la ejecución de javascript no debería de perderse hasta que se cierra la pestaña del navegador.

caricatos · #9 (**permalink**) 27/04/2014, 10:05

Hola:

Cita:

Iniciado por replica

... y sé perfectamente lo que dijiste, así que esos términos, por favor, no te los admito. Guárdatelos, como moderador, para los "moscones" que sólo hacen que copiar y pegar código ajeno, porque no es mi caso.

...

No entiendo lo que quieres decir, cuando yo simplemente hice un copy and paste...

Tampoco comprendo que comentes mi status de moderador, cuando mi respuesta ha sido como usuario llano... no te confundas...

Sobre la respuesta php, podemos mover el tema a ese foro, pero al respecto, php no guarda variables a no ser que lo programes por ejemplo con variables de sesión, y solo va a procesar lo que le pidas...

Saludos

marlanga · #10 (**permalink**) 27/04/2014, 12:30

Tienes que tener muy claro una cosa: La diferencia que hay entre un lenguaje de servidor (PHP) y un lenguage del cliente (javascript).

El lenguaje del servidor se encarga de ejecutar una tarea en el servidor, lo que le permite por ejemplo usar un abse de datos para manejar información persistente. Para los principiantes, se podría decir que el lenguaje de servidor se encarga de generar el HTML con el contenido que se le enviará al navegador del cliente.

Por otro lado está javascript, que es un lenguaje de programación esitlo script. ¿Qué significa ésto? Que es un lenguaje interpretado: Es un código en texto plano que se ejecuta en tiempo real, conforme lo va "leyendo" el navegador. Y ésa es la clave: El navegador lo ejecuta, así que javascript no tiene NADA QUE VER con el lenguaje de servidor, php en este caso, que estes utilizando. Repito. NO HAY RELACIÓN NINGUNA ENTRE JAVASCRPT y PHP.

PHP puede devolver páginas con HTML y javascript dentro, pero a PHP le da igual, par él, sólo es texto plano.

Javascript es un lenguaje del lado del cliente pensado para hacer páginas dinámicas: Un código que se ejecuta en el navegador y que puede acceder a todos los elementos HTML de la página, y eventos dispares como los del teclado, ratón, load de imágenes, etc, con el objetivo de ejecutar alguna acción interesante. Aunque ahora CSS le está quitando mucho trabajo, antes javascript se usaba para hacer menus desplegables, rollover de imágenes cuando pones el ratón encima, validaciones sencillas de formularios antes de enviarlos, etc.

Y ¿Qué es AJAX? Ajax no es más que la forma de realizar una llamada HTTP asíncrona al servidor, sin necesidad de recargar la página completamente, mediante instrucciones javascript ¿Qué quiere decir eso? Que no necesitas refrescar la página (con todas las ventajas que ello implica). Por ejemplo, estás viendo un video en youtube, y quieres darle a "me gusta". Antes tenías que recargar la página completamente tras enviar el formulario al servidor de youtube, con lo que si estabas viendo el video, te lo cortaba y tenías que empezar de nuevo cuando el navegador cargue de nuevo la página.

Con ajax y javasxcript ya no. Tu estás viendo el video, aprietas "me gusta", y javascript lanzará una llamada http al servidor enviando los datos necesarios para que youtube sepa a qué video meterle un voto positivo. El cliente ni se entera, seguirá viendo tranquilamente el video porque la llamada AJAX se hace en segundo plano, sin molestar. Cuando ésta responda, javascript puede leer lo que el servidor ha respondido, y actuar en consecuencia.

Su casos de uso son miles, el límite es tu imaginación. O la imaginación del tipo que escribió el libro que estás leyendo para aprender. Interesa que leas también sobre JSON, ya que ajax y json son muy amigos. Y JSON no es más que un formato de cadenas strings que sirve para representar casi caulqueir objeto "javascript" como si fuera una cadena. Si vienes de java, JSON sirve para "serializar" objetos. PHP tiene json_decode y json_encode que serializan objetos y arrays PHP en forma de cadenas json, y javascript tiene dos funciones JSON.stringify y JSON.parse para hacer lo mismo respectivamente.

Y ahora centrándonos en tu juego: El número aleatorio una de dos: O lo metes en sessión, en la misma página donde muestras el formulario que usas para jugar, o la metes en un campo HIDDEN del formulario, por ejemplo "solucion", asi que la página llamada por ajax comprobará si el campo "numero" es igual al campo "solucion", ambos le llegan por POST. Ésto hace que el el valor de la solucion pueda ser "vista" por el jugador que sepa usar una consola de desarrollador, pero como dices, sólo es para practicar .

replica · #11 (**permalink**) 27/04/2014, 23:41

Gracias, marlanga.

Tenía muy claro lo de lenguaje de cliente y de servidor, no era ese el problema que tenía.
Y también sabía de las facilidades que daba ajax para evitar cargar las páginas.

Te tomo el dato sobre Json, que sobre esto nunca me había informado, y supongo que ahora me será necesario.

Sobre el juego, sí, había pensado en poner un input oculto y meter la información que devuelve el php.

Muchas gracias!