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

[javaquery]

He copiado la funcion, pero no se como hacer las llamadas desde las demas funciones, desde que funciones hay que llamarla

[pedro,,]

Haz la llamada antes de salir del bloque if(xmlHttp.ready...{}.

Saludos.

[javaquery]

asi?

Código: [Seleccionar]

function consultaAjax() {
    var xmlHttp = new XMLHttpRequest();
    var urlDestino = "aciertaNumeroXML.php?inicio=si";//envio peticion AJAX con el parametro//
    xmlHttp.onreadystatechange = function () {
        if (xmlHttp.readyState === 4 && xmlHttp.status === 200) {
            var respuesta = xmlHttp.responseXML;
            console.log(respuesta);
            var numero = respuesta.getElementsByTagName('inicio')[0].textContent;
            console.log(numero);
            document.getElementById('mensaje').innerHTML = 'Se ha generado un nuevo número.';
            marcador();
       
        }
    };

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



[pedro,,]

Si, desde las dos funciones donde inicias el juego, valdría con eso, desde las funciones check, recuerda que tienes que pasar como parámetro si se acertó o no.

Saludos.

[javaquery]

Buenas y feliz año

Estoy atrancado en este ejercicio, me comentastes que le pasara como parametro si se acerto o no, pero como lo hago

[pedro,,]

Desde la función  checkAjaxJSON():

Código: [Seleccionar]

marcador(obj.resp.encontrado);
y desde la otra función, la que chequea el xml, ahora mismo no tengo el código a mano, pero tendrías que mandar el mismo dato que  se muestra por pantalla, el que dice si se acertó o no.

Saludos y feliz año.

[javaquery]

Pero el  marcador(obj.resp.encontrado); donde lo tengo que situar dentro de checkAjaxson

lo he puesto asi

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.resp.encontrado;
            document.getElementById('mensaje').innerHTML = obj.resp.mensaje;
            marcador(obj.resp.encontrado);
        }

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

}



[pedro,,]

Sí.

Donde lo pusiste está bien.

¿te funciona?

[javaquery]

No , porque me queda la funcion checkAjaxXML que en esa no he cambiado nada. De todas maneras al ejecutar checkAjaxJSON me da error, TypeError: marcador is null aunque si funciona y acierta el numero

[pedro,,]

Eso es porque no has creado ningún elemento "html" con "id="marcador"".

La primera línea de la función marcador es esta:

Código: [Seleccionar]

var marcador = document.getElementById('marcador');
Y el error que te salta es en la última línea de esa función cuando intentas acceder a la propiedad "innerHTML" de "null".

Saludos.

[javaquery]

Buenas
He creado el div id = "marcador" , en el HTML, pero cuando hago la comprobacion de la funcion checkAjaxJSON me sigue dando el mismo error del null, y debajo me pone.
checkAjaxJSON/xmlHttp.onreadystatechange

creo que el error esta en esa funcion, este es el codigo de 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.resp.encontrado;
            document.getElementById('mensaje').innerHTML = obj.resp.mensaje;
            marcador(obj.resp.encontrado);
        }

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

}


[pedro,,]

Buenas javimf.

Lo he probado añadiendo esta línea al código html:

Código: [Seleccionar]

<div id="marcador"></div>
y con estas funciones y me funciona correctamente.

Código: [Seleccionar]

window.onload = function() {
document.getElementById('inicioXML').addEventListener('click', consultaAjaxXML);
document.getElementById('checkAjaxXML').addEventListener('click', checkAjaxXML);
document.getElementById('inicioJSON').addEventListener('click', consultaAjaxJSON);
document.getElementById('checkAjaxJSON').addEventListener('click', checkAjaxJSON);
}
function marcador(acertado, inicio) {
var marcador = document.getElementById('marcador');
if(document.getElementById('fallos')){
var contadorFallos = document.getElementById('fallos');
var errores = contadorFallos.textContent;
if(acertado == 'si' ) {
marcador.removeChild(contadorFallos);
marcador.innerHTML = 'Ha tenido ' + errores + ' errores.';
} else {
contadorFallos.innerHTML = ++errores;
}
} else {
marcador.innerHTML = 'Errores: <span id="fallos">0</span>' ;
}
}

function consultaAjaxJSON() {
var xmlHttp = new XMLHttpRequest();   
var urlDestino = "aciertaNumeroJSON.php?inicio=si";
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.resp.inicio);
document.getElementById('mensaje').innerHTML = "Se ha generado un nuevo numero";
marcador();
}
};

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

}

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.resp.encontrado;
document.getElementById('mensaje').innerHTML = obj.resp.mensaje;
marcador(obj.resp.encontrado);
}
};

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

function consultaAjaxXML() {
var xmlHttp = new XMLHttpRequest();   
var urlDestino = "aciertaNumeroXML.php?inicio=si";
xmlHttp.onreadystatechange = function(){   
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
var respuesta = xmlHttp.responseXML;
console.log(respuesta);
var numero = respuesta.getElementsByTagName('inicio')[0].textContent;
console.log(numero);
document.getElementById('mensaje').innerHTML = 'Se ha generado un nuevo número.';
marcador();
}
};

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

function checkAjaxXML() {
var xmlHttp = new XMLHttpRequest();   
var numPropuesto = document.getElementById('numero').value;
var urlDestino = 'aciertaNumeroXML.php?numero=' + numPropuesto;
xmlHttp.onreadystatechange = function(){   
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
var respuesta = xmlHttp.responseXML;
console.log(respuesta);
document.getElementById('encontrado').innerHTML = respuesta.getElementsByTagName('encontrado')[0].textContent;
document.getElementById('mensaje').innerHTML = respuesta.querySelector('mensaje').textContent;
marcador(respuesta.getElementsByTagName('encontrado')[0].textContent);
}
};

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

[javaquery]

Buenas

funciona perfectamente
 
gracias y que te hayan traido muchos regalos los reyes

[javaquery]

Tengo un problema, pero la verdad no lo entiendo. La practica la tengo que entrega , entonces la ruta donde tengo la archivos es esta:
C:\xampp\htdocs\DAW_M06_PHP\DAW_M06_T6_NUMERO
dentro de esa carpeta tengo todos los archivos html, php y js. pero cuando copio esa carpeta en mi equipo y ejecuto el html, me da un error la consola.
ReferenceError: consultaAjaxXML is not defined

No lo entiendo porque el fichero esta copiado exactamente igual.

[javaquery]

Creo que ya se cual es el problema cuando ejecuto en local el ejercicio la ruta es esta:
file:///C:/Users/javi/Desktop/DAW_M06_ACT_06_Javier%20Martin/htdocs/DAW_M06_PHP/DAW_M06_T6_NUMERO/aciertaNumero.html
Esta leyendo desde local sin hacer caso al xammp y al puerto 8089

En cambio si lo ejecuto desde NetBeans esta es la ruta.
http://localhost:8089/DAW_M06_PHP/DAW_M06_T6_NUMERO/aciertaNumero.html
aqui si lee desde red y llega la peticion a xammp y con el puerto 8089