Foros aprenderaprogramar.com
Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: javaquery en 10 de Diciembre 2016, 00:08
-
Buenas tengo que hacer este ejercicio:
1 En un proyecto PHP en NetBeans de nombre DAW_M06_PHP, crea dentro una nueva carpeta de nombre de nombre DAW_M06_T6_NUMERO. Dentro crea un nuevo documento HTML con el nombre “aciertaNumero.html” , un JavaScript un PHP con el nombre “aciertaNumeroXML.php” que contendrá el código PHP adjunto, y un nuevo PHP aciertaNumeroJSON.php que deberás programar.
2 Programa en “aciertaNumero.js” las funciones necesarias para que al clicar encima de #inicioXML:
2.1 se envíe una petición AJAX a aciertaNumeroXML.php con el parámetro: inicio=si
Aqui los codigos
CODIGO aciertaNumero.html
<body>
<div id="inicioXML">INICIO XML</div>
<div id="inicioJSON">INICIO JSON</div>
<input type="text" id="numero" />
<div id="checkAjaxXML"> CHECK AJAX XML</div>
<div id="checkAjaxJSON"> CHECK AJAX JSON</div>
<div id="encontrado"></div>
<div id="mensaje"></div>
</body>
CODIGO aciertaNumeroXML.php
<?php
session_start();
@header("Content-type: text/xml");
$xml = '<?xml version="1.0" encoding="utf-8"?>' . "\n";
$xml .= '<resp>' . "\n"; //inciamos el XML
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;
$xml .= "<inicio>".$_SESSION['numeroOculto']."</inicio>" . "\n";//retornamos el numero generado
}else{
$numeroUsuario = $_GET['numero'];
$numeroOculto=$_SESSION['numeroOculto'];
if($numeroUsuario > $numeroOculto ){
$xml .= "<encontrado>no</encontrado>" . "\n";
$xml .= "<mensaje>Has introducido un valor demasiado alto"."s</mensaje>" . "\n";
}else {
if($numeroUsuario < $numeroOculto ){
$xml .= "<encontrado>no</encontrado>" . "\n";
$xml .= "<mensaje>Has introducido un valor demasiado bajo"."</mensaje>" . "\n";
}else{
$xml .= "<encontrado>si</encontrado>" . "\n";
$xml .= "<mensaje>Exacto!</mensaje>" . "\n";
}
}
}
//finalizamos la estructura XML
$xml .= '</resp>' . "\n";
//insertamos la respuesta XML
echo($xml);
?>
Código que he hecho de aciertaNumero.js
function consultaAjax() {
var xmlHttp = new XMLHttpRequest();
var si = document.getElementById("inicioXML").value;
var urlDestino = "aciertaNumeroXML.php?inicio="+si;
xmlHttp.open("GET", urlDestino, true);
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState ==4){
funcionResp(xmlHttp);
}
};
xmlHttp.send(null);
}
-
Holq javimf.
Si tu duda es e punto 2.1, la siguiente línea debería quedar así:
var urlDestino = "aciertaNumeroXML.php?inicio=si";
Saludos. ;D
-
Hola
Lo he probado pero en el inspector de cofigo me dice funcionResp is not defined, ¿esta funcion donde tengo que definirla?
-
¿Podrías poner el enunciado entero?
Porque en realidad no se que pretendes que haga la función "funcionResp()".
En este condicional
[if(xmlHttp.readyState ==4){
funcionResp(xmlHttp);
}/code]
Deberías recoger aprovechar para coger la respuesta que te devuelva tu código php.
[code]contenidosRecibidos = xmlhttp.responseText;
y luego actuar con ella como creas conveniente, como te dije, si puedes aclarar mejor que se debe hacer con ella, será más fácil ayudarte, porque el enunciado solo dice que enviar por ajax, pero no que hacer con lo que podamos recibir.
Saludos. ;D
-
Este es el enunciado entero del ejercicio, los ejercicios se dividen por partes por ejemplo 2 , 2.1 , 2.2 ..ect
1 En un proyecto PHP en NetBeans de nombre DAW_M06_PHP, crea dentro una nueva carpeta de nombre de nombre DAW_M06_T6_NUMERO. Dentro crea un nuevo documento HTML con el nombre “aciertaNumero.html” , un JavaScript un PHP con el nombre “aciertaNumeroXML.php” que contendrá el código PHP adjunto, y un nuevo PHP aciertaNumeroJSON.php que deberás programar.
2 Programa en “aciertaNumero.js” las funciones necesarias para que al clicar encima de #inicioXML:
2.1 se envíe una petición AJAX a aciertaNumeroXML.php con el parámetro: inicio=si
2.2 extrae el número aleatório de la respuesta generada por PHP y muéstralo por consola.
2.3 Muestra un mensaje en el DIV #mensaje avisando que se ha generado un nuevo número.
3 Programa en “aciertaNumero.js” las funciones necesarias para que al clicar encima de #checkAjaxXML:
3.1 se envíe una petición AJAX a aciertaNumeroXML.php con el parámetro: numero=valor introducido dentro del input #numero
3.2 extrae de la respuesta generada por PHP, si se ha encontrado el valor y el mensaje retornado por el servidor.
3.3 Muestra el mensaje en el DIV #mensaje y el valor de encontrado dentro del DIV #encontrado.
4 Crea un archivo de nombre aciertaNumeroJSON.php que realice las mismas funcioes que aciertaNumeroXML.php pero retornando una estructura JSON y añade las funciones Javascript para realicar las consultas de inicio y check correspondientes. Es decir:
4.1 al clicar encima del DIV #inicioJSON se debe enviar una petición AJAX a aciertaNumeroJSON.php para que genere un número aleatório y lo retorne dentro de una estructura JSON. Al recibir la respuesta se ha de mostrar el número por consola y mostrar un mensaje en #mensaje avisando que se ha generado un nuevo número.
4.2 Al clicar encima del DIV #checkAjaxJSON se debe enviar una petición AJAX a aciertaNumeroJSON.php recibiendo el valor del input #numero para retornar en formato JSON los parámetros “encontrado” y “mensaje” indicando si se ha encontrado y un mensaje que se deberán mostrar en los DIV #encontrado y #mensaje
5 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.
Un saludo y gracias
-
Para el punto 2, el código JavaScript quedaría de la siguiente forma:
window.onload = function() {
document.getElementById('inicioXML').addEventListener('click', consultaAjax);
}
function consultaAjax() {
var xmlHttp = new XMLHttpRequest();
var urlDestino = "aciertaNumeroXML.php?inicio=si";
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
console.log(xmlHttp.responseText);
document.getElementById('mensaje').innerHTML = 'Se ha generado un nuevo número.';
}
};
xmlHttp.open("GET", urlDestino, true);
xmlHttp.send();
}
y si lo que quieres es que muestre por consola solo el número y no las etiquetas xml cambia el if por este:
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
var respuesta = xmlHttp.responseXML;
var numero = respuesta.getElementsByTagName('inicio')[0].textContent;
console.log(numero);
document.getElementById('mensaje').innerHTML = 'Se ha generado un nuevo número.';
}
El código del archivo aciertaNumeroXML.php es el que pusiste?, lo digo porque tiene algún error, además de que da igual de que envíes 'inicio=si' o igual a cualquier otro texto.
Saludos.
-
He preguntado lo del codigo php que tiene errores aver que me dicen
un saludo :D
-
Bueno, el único error era que faltaba una comilla en la cuarta línea después del "=".
Y ahora probando el código, veo que en el php lo único que importa es que exista "$_GET['inicio']" para poner en marcha el juego.
Así que no hagas mucho caso sobre mi comentario sobre el error, que te lo dije antes de probar el código.
Saludos. ;D
-
Me dijeron que el codigo en principio esta bien, otra cosa en el inspector me da un error
TypeError: document.getElementById(...) is null
Que tengo que hacer para que me muestre el numero introducido, porque en el inspector no lo veo, yo lo relleno y hago clic en INICIO XML, pero no me lo muestra
-
Te dejo los códigos donde yo estoy haciendo las pruebas y me dices.
aciertaNumero.html
<html>
<head>
<title>Ejemplo aprenderaprogramar.com</title>
<meta charset="utf-8">
<script src="aciertaNumero.js"></script>
</head>
<body>
<div id="inicioXML">INICIO XML</div>
<div id="inicioJSON">INICIO JSON</div>
<input type="text" id="numero" />
<div id="checkAjaxXML"> CHECK AJAX XML</div>
<div id="checkAjaxJSON"> CHECK AJAX JSON</div>
<div id="encontrado"></div>
<div id="mensaje"></div>
</body>
</html>
aciertaNumero.js
window.onload = function() {
document.getElementById('inicioXML').addEventListener('click', consultaAjax);
document.getElementById('checkAjaxXML').addEventListener('click', checkAjaxXML);
}
function consultaAjax() {
var xmlHttp = new XMLHttpRequest();
var urlDestino = "aciertaNumeroXML.php?inicio=hola";
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.';
}
};
xmlHttp.open("GET", urlDestino, true);
xmlHttp.send();
}
aciertaNumeroXML.php
<?php
session_start();
@header("Content-type: text/xml");
$xml = '<?xml version="1.0" encoding="utf-8"?>' . "\n";
$xml .= '<resp>' . "\n"; //inciamos el XML
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;
$xml .= "<inicio>".$_SESSION['numeroOculto']."</inicio>" . "\n";//retornamos el numero generado
}else{
$numeroUsuario = $_GET['numero'];
$numeroOculto=$_SESSION['numeroOculto'];
if($numeroUsuario > $numeroOculto ){
$xml .= "<encontrado>no</encontrado>" . "\n";
$xml .= "<mensaje>Has introducido un valor demasiado alto"."s</mensaje>" . "\n";
}else {
if($numeroUsuario < $numeroOculto ){
$xml .= "<encontrado>no</encontrado>" . "\n";
$xml .= "<mensaje>Has introducido un valor demasiado bajo"."</mensaje>" . "\n";
}else{
$xml .= "<encontrado>si</encontrado>" . "\n";
$xml .= "<mensaje>Exacto!</mensaje>" . "\n";
}
}
}
//finalizamos la estructura XML
$xml .= '</resp>' . "\n";
//insertamos la respuesta XML
echo($xml);
?>
-
Hola, luego lo miro cuando llegue a casa
Un saludo
thanks ;D
-
Hola, esta linea es la que me da error en el codigo.
document.getElementById('checkAjaxXML').addEventListener('click', checkAjaxXML);
Aunque logico ya que no esta definida la variable checkAjaxXML
El profesor dijo que el php esta bien y dijo esto:"Importante es que inicialmente se envíe la petición ajax con GET con el parámetro inicio=si, para que entre en el primer if del PHP, genere el número aleatorio y lo guarde en la variable de SESSION"
Mi HTML lo tengo asi , difiere con el tuyo en que esta la llamada a la funcion consultaAjax()
<body>
<div>TODO write content</div>
<div id="inicioXML" onclick="consultaAjax();">INICIO XML</div>
<div id="inicioJSON">INICIO JSON</div>
<input type="text" id="numero" />
<div id="checkAjaxXML"> CHECK AJAX XML</div>
<div id="checkAjaxJSON"> CHECK AJAX JSON</div>
<div id="encontrado"></div>
<div id="mensaje"></div>
</body>
Entonces en principio el ejercicio 2 esta completo,¿no?
-
El error, como dices es lógico al no coincidir los id.
Si prefieres usar el "onclick" directamente en el html, con que no uses el "window.onload" será suficiente.
El apartado 2 está completo.
-
Buenas
¿como seria el ejercicio 3?
un saludo ;D
-
Lo intentaste? :o
Lo tenía del otro día pero no se porqué se me olvido ponerlo en el código de javascript.
Te dejo la función que hay que añadir nada mas, y solo tienes que llamarla.
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.querySelector('encontrado').textContent;
document.getElementById('mensaje').innerHTML = respuesta.querySelector('mensaje').textContent;
}
};
xmlHttp.open("GET", urlDestino, true);
xmlHttp.send();
}
Saludos. ;D
-
tenia hecho el 3.1 pero el 3.2 no entendia muy bien que habia que hacer, voy a ver si me pongo con el 4, si tengo duda te pregunto.
Gracias
-
Buenas
Estoy con el ejercicio 4, se supone que como pide una peticion AJAX a aciertaNumeroJSON.php para que genere un numero aleatorio , esta parte ?es igual que la del primer ejercicio hasta antes de la funcion con if? y lo que dice que lo retorne dentro dentro de una estrcutura JSON, eso cambia.
Por ahora llevo esto hecho
window.onload = function () {
document.getElementById("incioXML").addEventListener("click", consultaAjax);
document.getElementById("checkAjaxXML").addEventListener('click', checkAjaxXML);
document.getElementById("inicioJSON").addEventListener("click", inicioJSON);
}
function inicioJSON(){
var xmlHttp= new XMLHttpRequest();
var urlDestino = "aciertaNumeroJSON.php)";
estoy viendo los apuntes y no entiendo muy bien lo de recibir la respuesta en formato JSON
un saludo
-
Hola javimf
Yo lo que entiendo en el punto 4 es que necesitas un nuevo archivo php que haga lo mismo que aciertaNumeroXML.php, pero en este caso en vez de devolver algo en formato XML lo devuelva en formato JSON.
Podrías aprovechar el mismo código de aciertaNumeroXML.php para aciertaNumeroJSON.php y la parte final en vez de devolver el contnido de la variable $xml dejarlo así:
$xml = str_replace(array("\n", "\r", "\t"), '', $xml);
$xml = trim(str_replace('"', "'", $xml));
$simpleXml = simplexml_load_string($xml);
echo(json_encode($simpleXml));
Luego la parte ajax sería muy parecida a la usada en el anterior punto del ejercicio, pero cuando recojas los datos de la consulta, tendrás que usar responseText en vez de responseXML.
Prueba y nos cuenta.
Saludos. ;D
-
En el js he hecho esto, he hecho lo mismo que en el anterior cambiando por el responseText
function inicioJSON() {
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;
console.log(respuesta);
document.getElementById('mensaje').innerHTML = "Se ha generado un nuevo numero";
}
};
xmlHttp.open("GET", urlDestino, true);
xmlHttp.send();
}
Cuando me dices que aproveche el codigo de aciertaNumeroXML.php para el aciertaNumeroJSON.php y que cambie solo la parte final que devuelve la variable xml , aque parte te refieres
este es el codigo de aciertaNumeroXML.php
<?php
session_start();
@header("Content-type: text/xml");
$xml = '<?xml version="1.0" encoding="utf-8"?>' . "\n";
$xml .= '<resp>' . "\n"; //inciamos el XML
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;
$xml .= "<inicio>".$_SESSION['numeroOculto']."</inicio>" . "\n";//retornamos el numero generado
}else{
$numeroUsuario = $_GET['numero'];
$numeroOculto=$_SESSION['numeroOculto'];
if($numeroUsuario > $numeroOculto ){
$xml .= "<encontrado>no</encontrado>" . "\n";
$xml .= "<mensaje>Has introducido un valor demasiado alto"."s</mensaje>" . "\n";
}else {
if($numeroUsuario < $numeroOculto ){
$xml .= "<encontrado>no</encontrado>" . "\n";
$xml .= "<mensaje>Has introducido un valor demasiado bajo"."</mensaje>" . "\n";
}else{
$xml .= "<encontrado>si</encontrado>" . "\n";
$xml .= "<mensaje>Exacto!</mensaje>" . "\n";
}
}
}
//finalizamos la estructura XML
$xml .= '</resp>' . "\n";
//insertamos la respuesta XML
echo($xml);
?>
-
El archivo aciertaNumeroJSON.php quedaría así:
<?php
session_start();
@header("Content-type: text/xml");
$xml = '<?xml version="1.0" encoding="utf-8"?>' . "\n";
$xml .= '<resp>' . "\n"; //inciamos el XML
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;
$xml .= "<inicio>".$_SESSION['numeroOculto']."</inicio>" . "\n";//retornamos el numero generado
}else{
$numeroUsuario = $_GET['numero'];
$numeroOculto=$_SESSION['numeroOculto'];
if($numeroUsuario > $numeroOculto ){
$xml .= "<encontrado>no</encontrado>" . "\n";
$xml .= "<mensaje>Has introducido un valor demasiado alto"."s</mensaje>" . "\n";
}else {
if($numeroUsuario < $numeroOculto ){
$xml .= "<encontrado>no</encontrado>" . "\n";
$xml .= "<mensaje>Has introducido un valor demasiado bajo"."</mensaje>" . "\n";
}else{
$xml .= "<encontrado>si</encontrado>" . "\n";
$xml .= "<mensaje>Exacto!</mensaje>" . "\n";
}
}
}
//finalizamos la estructura XML
$xml .= '</resp>' . "\n";
$xml = str_replace(array("\n", "\r", "\t"), '', $xml); // removes newlines, returns and tabs
$xml = trim(str_replace('"', "'", $xml)); // cambia comillas dobles por comillas simples si las hubiese
$simpleXml = simplexml_load_string($xml); // crea un objeto xml de un string
echo(json_encode($simpleXml)); // crea un string con formato JSON
?>
Y en la función inicioJSON, al recibir un string de este estilo:
'{"inicio":"9"}'Lo mejor a mi gusto es convertirlo en un objeto JSON con la siguiente línea:
var obj = JSON.parse(respuesta);Y después mostrar su contenido por consola como en el ejercicio anterior, de la siguiente forma:
console.log("El número aleatorio que devuelve la consulta es: ", obj.inicio);
la función quedaría así:
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();
}
;D
-
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.
-
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:
<?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.
-
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
-
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. ;D
-
He hecho esto:
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 :'(
-
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()
var obj = JSON.parse(respuesta);
y luego :
document.getElementById('encontrado').innerHTML = obj.resp.encontrado;
document.getElementById('mensaje').innerHTML = obj.resp.mensaje;
Saludos. ;D
-
Asi:
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();
}
-
Te faltaría guardar en una variable el número que se ingrese por teclado y mandarlo junto con el enlace.
Saludos. ;D
-
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
-
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. ;D
-
Lo he cambiado:
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();
}
-
ya te funciona?
-
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
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
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();
}
-
A mí me funciona correctamente.
Que navegador estás usando?
Si introduces un número y pulsas sobre "checkAJaxJson", hace algo?
-
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
-
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:
console.log("El número aleatorio que devuelve la consulta es: ", obj.inicio);por
console.log("El número aleatorio que devuelve la consulta es: ", obj.resp.inicio);
y en checkAjaxJSON()
document.getElementById('encontrado').innerHTML = obj.resp.encontrado;
document.getElementById('mensaje').innerHTML = obj.resp.mensaje;
.
-
Mcnifico , funcionando.
Gracias ;D
-
Pues si puedes pega el código de los cinco archivos por si a alguien le interesa, que no tenga que leer todo :o
Saludos. ;D
-
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.
-
Te dejo una posible solución pos quieres realizar el ejercicio sobre ella
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. ;D
-
He copiado la funcion, pero no se como hacer las llamadas desde las demas funciones, desde que funciones hay que llamarla
-
Haz la llamada antes de salir del bloque if(xmlHttp.ready...{}.
Saludos. ;D
-
asi?
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();
}
-
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. ;D
-
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
-
Desde la función checkAjaxJSON():
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. ;D
-
Pero el marcador(obj.resp.encontrado); donde lo tengo que situar dentro de checkAjaxson
lo he puesto asi
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();
}
-
Sí.
Donde lo pusiste está bien.
¿te funciona?
-
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
-
Eso es porque no has creado ningún elemento "html" con "id="marcador"".
La primera línea de la función marcador es esta:
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. ;D
-
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
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();
}
-
Buenas javimf.
Lo he probado añadiendo esta línea al código html:
<div id="marcador"></div>
y con estas funciones y me funciona correctamente.
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();
}
;D
-
Buenas
funciona perfectamente ;D
gracias y que te hayan traido muchos regalos los reyes
-
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.
-
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