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: Dimitar Stefanov en 25 de Mayo 2016, 20:35
-
Buenas noches.
Aquí expongo una posible solución del ejercicio CU01207F del curso Ajax desde cero.
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:
<!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:
<?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.
-
Hola dimiste.
Se refiere a que muestres el resultado que devuelven las propiedades del objeto XMLHttpRequest.
onreadystatechange, readyState, responseText, etc.
Saludos. ;D
-
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.
-
Después de la sugerencia de mi compañero, Pedro, creo que el ejercicio deberá de quedar así:
Código HTML:
<!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:
<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?
-
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!
-
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 :)