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?
Tema: Ajax propiedades objeto XMLHttpRequest onreadystatechange, readyState CU01207F (Leído 3490 veces)
RSS -
WAP2