Ajax, PhP y JavaScript. Juego Adivina el número con xml y Json Código ejecutable

[javaquery]

Me dice mal formado el aciertaNumeroJSON, cuando pulso en inicioJSON hace la peticion, pero luego en el inspector en la consola me dice mal formado. Estao viendo las comillas dobles y simples pero no doy con el error.

[pedro,,]

Buenas.

En chrome me funciona bien, pero en firefox no, así que he creado otra alternativa, que es crear directamente un formato JSON a traves de arrays, te dejo el php:

Código: [Seleccionar]

<?php
session_start();

if(isset($_GET['inicio'])){     //se ha indicado iniciar un nuevo juego
        $numeroAleatorio=rand(0,10);//seleccionamos un numero aleatorio entre 0 y 10
        $_SESSION['numeroOculto'] = $numeroAleatorio;
         
        $json['resp'] = array( 'inicio' => $_SESSION['numeroOculto']);       
}else{
    $numeroUsuario = $_GET['numero'];
    $numeroOculto=$_SESSION['numeroOculto'];
    
    if($numeroUsuario > $numeroOculto ){
        $json['resp'] = array(
                                'encontrado' => 'no',
                                'mensaje' => 'Has introducido un valor demasiado alto'
                              );
    }else {
        if($numeroUsuario < $numeroOculto ){
          $json['resp'] = array(
                                'encontrado' => 'no',
                                'mensaje' => 'Has introducido un valor demasiado bajo'
                              );
        }else{
          $json['resp'] = array(
                                'encontrado' => 'si',
                                'mensaje' => 'Exacto!'
                              );
        }    
    }
}
echo(json_encode($json)); 
?>
Saludos.

[javaquery]

Hola
Ya me funciona bien, ahora lo que me queda es crear la funcion checkAjaxJSON, ¿me puedes decir mas o menos como hacerla? lo intento y si no puedo , te pregunto.

Un saludo

[pedro,,]

Hola javimf.

Esta función será casi igual que inicioJSON(), lo que tendrías que hacer es analizar el objeto que creas con JSON.parse(), que esta vez en vez de contender "inicio: unNumero" contendrá dos propiedades, que serán "encontrado" y "mensaje", el valor de estas propiedad será el que tengas que mostrar en tu html.

Prueba y me cuentas.

Saludos.

[javaquery]

He hecho esto:

Código: [Seleccionar]

function checkAjaxJSON() {

    var xmlHttp = new XMLHttpRequest();
    var urlDestino = "aciertaNumeroJSON.php?inicio=hola";
    xmlHttp.onreadystatechange = function () {
        if (xmlHttp.readyState === 4 && xmlHttp.status === 200) {
            var respuesta = xmlHttp.responseText;
            console.log(respuesta, typeof respuesta);
            document.getElementById('encontrado').innerHTML = respuesta.querySelector('encontrado').textContent;
            document.getElementById('mensaje').innerHTML = respuesta.querySelector('mensaje').textContent;


        }

    };
    xmlHttp.open("GET", urlDestino, true);
    xmlHttp.send();

}
No funciona

[pedro,,]

Como te dije anteriormente, una vez guardas la respuesta en la variable respuesta, tendrías que crear un objeto JSON, como en la función inicioJSON()

Código: [Seleccionar]

var obj = JSON.parse(respuesta);
y luego :

Código: [Seleccionar]

document.getElementById('encontrado').innerHTML = obj.resp.encontrado;
            document.getElementById('mensaje').innerHTML = obj.resp.mensaje;


Saludos. 

[javaquery]

Asi:

Código: [Seleccionar]

function checkAjaxJSON() {

    var xmlHttp = new XMLHttpRequest();
    var urlDestino = "aciertaNumeroJSON.php?inicio=hola";
    xmlHttp.onreadystatechange = function () {
        if (xmlHttp.readyState === 4 && xmlHttp.status === 200) {
            var respuesta = xmlHttp.responseText;
            var obj = JSON.parse(respuesta);
            document.getElementById('encontrado').innerHTML = obj.respuesta.encontrado;
            document.getElementById('mensaje').innerHTML = obj.respuesta.mensaje;
        }

    };
    xmlHttp.open("GET", urlDestino, true);
    xmlHttp.send();

}


[pedro,,]

Te faltaría guardar en una variable el número que se ingrese por teclado y mandarlo junto con el enlace.

Saludos.

[javaquery]

Buenas
¿algo asi?

var numPropuesto = document.getElementById('numero').value;
    var urlDestino = 'aciertaNumeroXML.php?numero=' + numPropuesto;

asi me da un error de sintaxis:
contenido incorrecto tras un elemento XML del documento  aciertaNumeroXML.php:2:1
SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data
Un saludo

[pedro,,]

Recuerda que ahora la consulta tienes que hacerla a "aciertaNumeroJSON.php", por eso te está dando el error. Porque cuando recibes la respuesta del servidor esta llega en formato XML y JSON.parse() espera un string con formato JSON.

Saludos.

[javaquery]

Lo he cambiado:

Código: [Seleccionar]

function checkAjaxJSON() {

    var xmlHttp = new XMLHttpRequest();
    var numPropuesto = document.getElementById('numero').value;
    var urlDestino = 'aciertaNumeroJSON.php?numero=' + numPropuesto;
    xmlHttp.onreadystatechange = function () {
        if (xmlHttp.readyState === 4 && xmlHttp.status === 200) {
            var respuesta = xmlHttp.responseText;
            var obj = JSON.parse(respuesta);
            document.getElementById('encontrado').innerHTML = obj.respuesta.encontrado;
            document.getElementById('mensaje').innerHTML = obj.respuesta.mensaje;
        }

    };
    xmlHttp.open("GET", urlDestino, true);
    xmlHttp.send();

}



[pedro,,]

ya te funciona?

[javaquery]

No me funciona
Pero me dao cuenta que la funcion anterior , me avisa que se ha generado un nuemo numero pero no lo muestra por consola, la funcion es esta

Código: [Seleccionar]

function inicioJSON() {
    var xmlHttp = new XMLHttpRequest();
    var urlDestino = "aciertaNumeroJSON.php?inicio=hola";
    xmlHttp.onreadystatechange = function () {
        if (xmlHttp.readyState === 4 && xmlHttp.status === 200) {
            var respuesta = xmlHttp.responseText;
            console.log(respuesta, typeof respuesta);
            var obj = JSON.parse(respuesta);
            console.log(obj, typeof obj);
            console.log("El número aleatorio que devuelve la consulta es: ", obj.inicio);
            document.getElementById('mensaje').innerHTML = "Se ha generado un nuevo numero";
        }
    };
    xmlHttp.open("GET", urlDestino, true);
    xmlHttp.send();
}

y la funcion checkAJaxJson

Código: [Seleccionar]

function checkAjaxJSON() {

    var xmlHttp = new XMLHttpRequest();
    var numPropuesto = document.getElementById('numero').value;
    var urlDestino = 'aciertaNumeroJSON.php?numero=' + numPropuesto;
    xmlHttp.onreadystatechange = function () {
        if (xmlHttp.readyState === 4 && xmlHttp.status === 200) {
            var respuesta = xmlHttp.responseText;
            var obj = JSON.parse(respuesta);
            document.getElementById('encontrado').innerHTML = obj.respuesta.encontrado;
            document.getElementById('mensaje').innerHTML = obj.respuesta.mensaje;
        }

    };
    xmlHttp.open("GET", urlDestino, true);
    xmlHttp.send();

}



[pedro,,]

A mí me funciona correctamente.

Que navegador estás usando?

Si introduces un número y pulsas sobre "checkAJaxJson", hace algo?

[javaquery]

utilizo firefox , si introdujo un numero y pulso en CHECK AJAX JSON no hace nada, y en el inspector de codigo da este error, SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data. He probado con crhome y tampoco funciona y da error en el inspector de codigo

Un saludo

[pedro,,]

El error es porque está intentando leer una propiedad del objeto "obj" que no existe, porque "obj" no tiene ninguna propiedad que se llame "respuesta", sino "resp".

En la función inicioJSON() tienes que cambiar:

Código: [Seleccionar]

console.log("El número aleatorio que devuelve la consulta es: ", obj.inicio);por

Código: [Seleccionar]

console.log("El número aleatorio que devuelve la consulta es: ", obj.resp.inicio);
y en checkAjaxJSON()

Código: [Seleccionar]

document.getElementById('encontrado').innerHTML = obj.resp.encontrado;
            document.getElementById('mensaje').innerHTML = obj.resp.mensaje;
.

[javaquery]

Mcnifico , funcionando.

Gracias

[pedro,,]

Pues si puedes pega el código de los cinco archivos por si a alguien le interesa, que no tenga que leer todo

Saludos.

[javaquery]

Todavia no he terminado, me queda otro ejercicio el ultimo..jaja

Añade un marcador con un máximo de fallos que vaya modificándose cada vez que el usuario falle y muestre un mensaje si se han realizado todos los fallos o todos los aciertos. Para controlar los fallos puedes utilizar una variable global JavaScript.

[pedro,,]

Te dejo una posible solución pos quieres realizar el ejercicio sobre ella

Código: [Seleccionar]

function marcador(acertado) {
var marcador = document.getElementById('marcador');
if(document.getElementById('fallos')){
var contadorFallos = document.getElementById('fallos');
var errores = contadorFallos.textContent;
if(acertado == 'si' ) {
contadorFallos.innerHTML = 'Ha tenido ' + errores + ' errores.';
} else {
contadorFallos.innerHTML = ++errores;
}
} else {
marcador.innerHTML = 'Errores: <span id="fallos">0</span>' ;
}
}
Esta función tendrás que llamarla desde las demás funciones, si la llamas desde la función  inicioJSON() o desde consultaAjaxXML(), hazlo sin pasar ningún parámetro.
Cuando la llames desde checkAjaxJSON(), pásale como parámetro obj.resp.encontrado, esta llamada la tendrás que hacer dentro de la función xmlHttp.onreadystatechange, lo que hace principalmente esta función es contar errores y sin usar ninguna variable con ámbito global, la parte que falta la dejo en tus manos.

Saludos.