<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>
<?phpsession_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);
?>
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);
}
var urlDestino = "aciertaNumeroXML.php?inicio=si";[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;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();
}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.';
}<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>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();
}<?phpsession_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);
?>
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();
}
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)";
$xml = str_replace(array("\n", "\r", "\t"), '', $xml);
$xml = trim(str_replace('"', "'", $xml));
$simpleXml = simplexml_load_string($xml);
echo(json_encode($simpleXml));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();
}
<?phpsession_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);
?>
<?phpsession_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
?>'{"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);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();
}<?phpsession_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)); ?>
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 :'(var obj = JSON.parse(respuesta);document.getElementById('encontrado').innerHTML = obj.resp.encontrado;
document.getElementById('mensaje').innerHTML = obj.resp.mensaje;
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();
}
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();
}
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 checkAJaxJsonfunction 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();
}
console.log("El número aleatorio que devuelve la consulta es: ", obj.inicio);porconsole.log("El número aleatorio que devuelve la consulta es: ", obj.resp.inicio);document.getElementById('encontrado').innerHTML = obj.resp.encontrado;
document.getElementById('mensaje').innerHTML = obj.resp.mensaje;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>' ;
}
}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();
}
marcador(obj.resp.encontrado);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();
}
var marcador = document.getElementById('marcador');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();
}
<div id="marcador"></div>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();
}