Autor Tema: Ajax propiedades objeto XMLHttpRequest onreadystatechange, readyState CU01207F  (Leído 2365 veces)

Dimitar Stefanov

  • Experto
  • *****
  • Mensajes: 598
    • Ver Perfil
Buenas noches.

Aquí expongo una posible solución del ejercicio CU01207F del curso Ajax desde cero.

Citar
EJERCICIO

Tomando como punto de partida el código de ejemplo Ajax con el que estamos trabajando:

a) Modifica el código para que cuando se produzca una transmisión de información se muestre en una tabla el valor de todas las propiedades del objeto XMLHttpRequest.

Código HTML:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<title>Cursos aprende a programar</title>
<meta charset="utf-8">
<style type="text/css">
*{
font-family:sans-serif;
}
a:link{
text-decoration:none;
}
select{
font-size:18px;
}
div div{
color: blue; background-color:#F1FEC6;
font-size: 20px;
float:left; border: solid;
margin: 20px; padding:15px;
}
td, th{
border: solid;
}
</style>
<script>

function mostrarSugerencia(str){
var xmlhttp;
var contenidosAMostrar = '';
var paises = str;

xmlhttp=new XMLHttpRequest();

xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState==1){
var msg = "<td>Estado 1</td><td>conexión con servidor establecida. Indica que se ha abierto la conexión pero todavía no se ha enviado la petición (no se ha llamado a send)</td>";
document.getElementById('fila1').innerHTML = msg;
alert('Estado 1');
}
if(xmlhttp.readyState==2){
msg = "<td>Estado 2</td><td>recibida petición en servidor. Indica que el servidor ya ha recibido la petición (se ha llamado a send)</td>";
document.getElementById('fila2').innerHTML = msg;
alert('Estado 2');
}
if(xmlhttp.readyState==3){
msg = "<td>Estado 3</td><td>enviando información. Se está enviando la información por parte del servidor, todavía no se ha completado la recepción.</td>";
document.getElementById('fila3').innerHTML = msg;
alert('Estado 3');
}
if(xmlhttp.readyState==4){
msg = "<td>Estado 4</td><td>completado. Se ha recibido la información del servidor y está lista para operar con ella.</td>";
document.getElementById('fila4').innerHTML = msg;
alert('Estado 4');
}

}

xmlhttp.open("GET","CU01206F(01).php?pais="+str);
xmlhttp.send();
}

</script>
</head>
<body style="margin:20px;">
<h2>Elige un país:</h2>
<form action="">
 <select onchange="mostrarSugerencia(this.value)">
  <option value="none">Elige</option>
  <option value="spain">España</option>
  <option value="mexico">México</option>
  <option value="argentina">Argentina</option>
  <option value="colombia">Colombia</option>
</select>
</form>
<br/>
<p>Informacion sobre operacion en segundo plano con Ajax: <span style="color:brown;" id="txtInformacion"></span></p>
<div id="listaCiudades">
<table>
<tr>
<th style="border: solid;">
Estado
</th>
<th>
Descripción
</th>
</tr>
<tr id="fila1">
</tr>
<tr id="fila2">
</tr>
<tr id="fila3">
</tr>
<tr id="fila4">
</tr>
</table>
</div>
</body>
</html>

Código PHP:

Código: [Seleccionar]
<?php 



?>

Realmente no es importante lo que haya en el código PHP. Lo importante es que exista para que el Ajax se pueda conectar.

No sé si he entendido muy bien el cometido del ejercicio.

Gracias.
« Última modificación: 04 de Junio 2016, 23:44 por César Krall »

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Re:CU01207F XmlHttpRequest en Ajax
« Respuesta #1 en: 27 de Mayo 2016, 22:38 »
Hola dimiste.

Se refiere a que muestres el resultado que devuelven las propiedades del objeto XMLHttpRequest.

onreadystatechange, readyState, responseText, etc.

Saludos. ;D

Dimitar Stefanov

  • Experto
  • *****
  • Mensajes: 598
    • Ver Perfil
Buenas, Pedro.

Gracias por la aclaración. Ahora hago el ejercicio de nuevo. Ya decía yo que algo no había entendido, jejejeje


Saludos.

Dimitar Stefanov

  • Experto
  • *****
  • Mensajes: 598
    • Ver Perfil
Después de la sugerencia de mi compañero, Pedro, creo que el ejercicio deberá de quedar así:

Código HTML:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<title>Cursos aprende a programar</title>
<meta charset="utf-8">
<style type="text/css">
*{
font-family:sans-serif;
}
a:link{
text-decoration:none;
}
select{
font-size:18px;
}
div div{
color: blue; background-color:#F1FEC6;
font-size: 20px;
float:left; border: solid;
margin: 20px; padding:15px;
}
</style>
<script>

function mostrarSugerencia(str){
var xmlhttp;
var contenidosRecibidos = new Array();
var nodoMostrarResultados = document.getElementById('listaCiudades');
var contenidosAMostrar = '';

if(str.length==0){
document.getElementById("txtInformacion").innerHTML="";
nodoMostrarResultados.innerHTML = '';
return;
}

xmlhttp=new XMLHttpRequest();

xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState==4 && xmlhttp.status==200){
    contenidosRecibidos = xmlhttp.responseText.split(",");
    document.getElementById("txtInformacion").innerHTML=contenidosRecibidos[0];
    for(var i=1; i<contenidosRecibidos.length;i++){
    contenidosAMostrar = contenidosAMostrar+'<div id="ciudades'+i+'"> <a href="http://aprenderaprogramar.com" target="_blank">' + contenidosRecibidos[i]+ '</a></div>';
    }
    var msg = "<td>onreadystatechange</td><td>"+xmlhttp.onreadystatechange+"</td>";
    document.getElementById('fila1').innerHTML = msg;

    msg = "<td>readyState</td><td>"+xmlhttp.readyState+"</td>";
    document.getElementById('fila2').innerHTML = msg;

    msg = "<td>responseText</td><td>"+xmlhttp.responseText+"</td>";
    document.getElementById('fila3').innerHTML = msg;

    msg = "<td>status</td><td>"+xmlhttp.statusText+"</td>";
    document.getElementById('fila4').innerHTML = msg;

    nodoMostrarResultados.innerHTML = contenidosAMostrar;
}
}

xmlhttp.open("GET"," CU01207F(01).php?pais="+str);
xmlhttp.send();
}

</script>
</head>
<body style="margin:20px;">
<h2>Elige un país:</h2>
<form action="">
 <select onchange="mostrarSugerencia(this.value)">
  <option value="none">Elige</option>
  <option value="spain">España</option>
  <option value="mexico">México</option>
  <option value="argentina">Argentina</option>
  <option value="colombia">Colombia</option>
</select>
</form>
<br/>
<p>Informacion sobre operacion en segundo plano con Ajax: <span style="color:brown;" id="txtInformacion"></span></p>
<div id="listaCiudades"></div>
<table>
<tr>
<th style="border: solid;">
Estado
</th>
<th>
Descripción
</th>
</tr>
<tr id="fila1">
</tr>
<tr id="fila2">
</tr>
<tr id="fila3">
</tr>
<tr id="fila4">
</tr>
</table>
</body>
</html>

Código PHP:

Código: [Seleccionar]
<meta charset = "utf-8"/>
<?php // Datos

$pais[0]="spain"
$pais[1]="mexico"
$pais[2]="argentina"
$pais[3]="colombia";

$ciudad[0][0]="Madrid"
$ciudad[0][1]="Barcelona"
$ciudad[0][2]="Valencia"
$ciudad[0][3]="Sevilla";
$ciudad[0][4]="Zaragoza"
$ciudad[0][5]="Málaga"
$ciudad[0][6]="Murcia";
$ciudad[1][0]="México D.F."
$ciudad[1][1]="Ecatepec"
$ciudad[1][2]="Guadalajara"
$ciudad[1][3]="Puebla";
$ciudad[1][4]="Juárez"
$ciudad[1][5]="Tijuana"
$ciudad[1][6]="León"
$ciudad[1][7]="Zapopan";
$ciudad[2][0]="Buenos Aires"
$ciudad[2][1]="Córdoba"
$ciudad[2][2]="Rosario"
$ciudad[2][3]="La Plata";
$ciudad[2][4]="Mar del Plata"
$ciudad[2][5]="San Miguel de Tucumán"
$ciudad[2][6]="Ciudad de Salta";
$ciudad[3][0]="Bogotá"
$ciudad[3][1]="Medellín"
$ciudad[3][2]="Cali"
$ciudad[3][3]="Barranquilla";
$ciudad[3][4]="Cartagena"
$ciudad[3][5]="Cúcuta"
$ciudad[3][6]="Soledad"
$ciudad[3][7]="Ibagué";
 
// Rescatamos el parámetro pais que nos llega mediante la url que invoca xmlhttp
$paisRecibido=$_REQUEST["pais"]; 
$ciudadesDevueltas="";
$existePais false;

for(
$i=0;$i<count($pais);$i++){     
if($paisRecibido == $pais[$i]){
$indicePais $i
$existePais=true;

}

$msg 'El pais recibido por get en segundo plano es '.$paisRecibido;
if(
$existePais){
$msg $msg' y tiene indice '.$indicePais;
}

$ciudadesRespuesta "";

//  Creamos el array a devolver
for($i=$indicePais$i<count($ciudad[$indicePais]); $i++){
    
$ciudadesRespuesta $ciudadesRespuesta.",".$ciudad[$indicePais][$i];
}

echo 
$msg.$ciudadesRespuesta;
//echo count($ciudad[1]);
?>

Es algo así, Pedro?

César Krall

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2074
  • No vales por lo que dices, sino por lo que haces
    • Ver Perfil
    • aprenderaprogramar.com
Hola!

Supongo que Pedro igual no ha visto tu respuesta.

Sí, el ejercicio iba enfocado a eso que has hecho. Lo único que te diría es que mejores la presentación, por ejemplo añadirle bordes y márgenes a la tabla para que se vea mejor.

Veo aquí una cosa rara en xmlhttp.open("GET"," CU01207F(01).php?pais="+str);

¿Por qué hay un espacio en blanco antes del nombre del archivo CU01207F(01).php?

Saludos!
Responsable de departamento de producción aprenderaprogramar.com

Dimitar Stefanov

  • Experto
  • *****
  • Mensajes: 598
    • Ver Perfil
Buenos días, César.

Gracias por corregirme el ejercicio tú también :)

Al principio no había entendido muy bien el cometido del ejercicio. Después de la aclaración del compañero Pedro lo comprendí.

Sí, tienes razón, en tema de diseño soy un nefasto. A parte de que nunca me ha gustado el tema del diseño, porque nunca te queda como quieres y además en cada navegador o dispositivo se ve diferente (menos mal que existen liberías de estilo como bootstrap), me gusta mucho más el campo de la programación (la parte de la funcionalidad del código).

El espacio entre el nombre del archivo y las paréntesis que abre es por descuido, por nada más.

Saludos :)

 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".