Buenas tardes.
Mediante la presente empiezo el curso de Ajax desde cero.
EJERCICIO
Tomando como punto de partida el código de ejemplo que hemos visto en esta entrega, realiza las modificaciones oportunas en los archivos php y html para:
a) Definir una url asociada a cada ciudad (usa la url de la ciudad en wikipedia, por ejemplo para la ciudad Medellín será https://es.wikipedia.org/wiki/Medell%C3%ADn)
b) Hacer que cuando se elige un país en el combobox, cada ciudad aparezca con el link a su url en wikipedia y que si se pulsa en ese link se abra una nueva ventana en el navegador mostrando la url correspondiente.
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 = '';
var paises = str;
var ciudades = new Array(2);
ciudades['spain'] = ["https://es.wikipedia.org/wiki/Madrid", "https://es.wikipedia.org/wiki/Barcelona","https://es.wikipedia.org/wiki/Valencia","https://es.wikipedia.org/wiki/Sevilla","https://es.wikipedia.org/wiki/Zaragoza","https://es.wikipedia.org/wiki/M%C3%A1laga","https://es.wikipedia.org/wiki/Murcia"];
ciudades['mexico'] = ["https://es.wikipedia.org/wiki/Ciudad_de_M%C3%A9xico","https://es.wikipedia.org/wiki/Ecatepec_de_Morelos","https://es.wikipedia.org/wiki/Guadalajara_%28M%C3%A9xico%29","https://es.wikipedia.org/wiki/Puebla","https://es.wikipedia.org/wiki/Ciudad_Ju%C3%A1rez","https://es.wikipedia.org/wiki/Tijuana","https://es.wikipedia.org/wiki/Le%C3%B3n_%28Guanajuato%29","https://es.wikipedia.org/wiki/Zapopan"];
ciudades['argentina'] = ["https://es.wikipedia.org/wiki/Buenos_Aires","https://es.wikipedia.org/wiki/Buenos_Aires","https://es.wikipedia.org/wiki/Rosario_%28Argentina%29","https://es.wikipedia.org/wiki/La_Plata","https://es.wikipedia.org/wiki/Mar_del_Plata","https://es.wikipedia.org/wiki/San_Miguel_de_Tucum%C3%A1n","https://es.wikipedia.org/wiki/Ciudad_de_Salta"];
ciudades['colombia'] = ["https://es.wikipedia.org/wiki/Bogot%C3%A1","https://es.wikipedia.org/wiki/Medell%C3%ADn","https://es.wikipedia.org/wiki/Cali","https://es.wikipedia.org/wiki/Barranquilla","https://es.wikipedia.org/wiki/Barranquilla","https://es.wikipedia.org/wiki/C%C3%BAcuta","https://es.wikipedia.org/wiki/Soledad_%28Atl%C3%A1ntico%29","https://es.wikipedia.org/wiki/Ibagu%C3%A9"];
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="'+ciudades[paises][(i-1)]+'" target="_blank">' + contenidosRecibidos[i]+ '</a></div>';
}
nodoMostrarResultados.innerHTML = contenidosAMostrar;
}
}
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"></div>
</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 devolverfor($i=0; $i<count($ciudad[$indicePais]); $i++){ $ciudadesRespuesta = $ciudadesRespuesta.",".$ciudad[$indicePais][$i];}echo $msg.$ciudadesRespuesta;//echo count($ciudad[1]);?>
Gracias.