Autor Tema: Ejemplo sencillo básico en Ajax XMLHttpRequest() onreadystatechange CU01206F (Leído 3680 veces)

Dimitar Stefanov · « **en:** 25 de Mayo 2016, 14:31 »

Buenas tardes.

Mediante la presente empiezo el curso de Ajax desde cero.

Citar

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:

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 = '';
			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:

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=0; $i<count($ciudad[$indicePais]); $i++){
    $ciudadesRespuesta = $ciudadesRespuesta.",".$ciudad[$indicePais][$i];
}

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

Gracias.

pedro,, · « **Respuesta #1 en:** 27 de Mayo 2016, 22:14 »

Hola dimiste.

Veo que sigues exprimiendo conocimientos nuevos.

El ejercicio está correcto, solo comentar el buen uso que hiciste del array multidimensional creado en JavaScript.

Saludos y ánimos para el nuevo reo.

César Krall · « **Respuesta #2 en:** 04 de Junio 2016, 23:43 »

Hola!

A mí también me parece buen código como comenta pedro pero hay una cosa del diseño que me ha llamado la atención. Ajax se usa para obtener información dinámicamente pero tal y como has definido el diseño no toda la información se recupera desde fuera sino que las urls las tienes definidas en JavaScript

Me he dado cuenta al compararlo con https://www.aprenderaprogramar.com/foros/index.php?topic=4198.0

No sé si has dividido la información por algún motivo

Saludos!!

Dimitar Stefanov · « **Respuesta #3 en:** 06 de Junio 2016, 10:51 »

Buenos días compañeros.

Gracias por vuestro tiempo y por corregirme el ejercicio. Estuve una semana fuera y no podría conectarme. Ahora estoy de vuelta

Pedro, utilicé el array multidimensional porque fue lo primero que se me ocurrió. Además, haberlo visto en el curso PHP desde cero, lo tenía recien visto y me acorde de su uso.

César, cómo podría hacerlo sin haber definido las urls? Quizás hay otra manera pero como aún voy por la octava entrega del curso Ajax desde cero. No se me ocurre otra manera.

Saludos

Dimitar Stefanov · « **Respuesta #4 en:** 06 de Junio 2016, 12:24 »

Buenas, de nuevo

Ahora entendí lo que me querías decir César. Después de leer detenidamente el código del enlace que me facilitaste vi como lo había hecho Pedro.

En vez de poner los enlaces en el código HTML los puso en el código PHP y así se produce la llamada desde el servidor y no con una llamada externa como me indicas tú.

Gracias

PD: No he dividido la información por ningún motivo, sino que simplemente se ha me había ocurrido así de primeras. Supongo que al estar tantien tiempo programando con JavaScript lo ví más fácil. Espero que cuando coja más práctica con el objeto "XmlHttpRequest" me sentiré igual de seguro programar con él que con JavaScript. Que "XmlHttpRequest" también es JavaScript pero ya me entendréis

César Krall · « **Respuesta #5 en:** 15 de Junio 2016, 22:05 »

Hola! Como bien has visto, se trata simplemente de decidir dónde tienes la información dependiendo de si los datos van a cambiar dinámicamente o no. Si por ejemplo debe haber cambios según lo que vaya haciendo el usuario o no, etc. Siempre hay que pensar qué puede ser preferible, unas veces será preferible usar JavaScript y otras Ajax u otras herramientas.

Saludos!

Dimitar Stefanov · « **Respuesta #6 en:** 16 de Junio 2016, 11:04 »

Toda la razón del mundo. Todo gira sobre qué es lo queremos hacer, de qué manera, cómo sería más cómodo para el usuario y más intuitivo.

Saludos

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias:

Autor Tema: Ejemplo sencillo básico en Ajax XMLHttpRequest() onreadystatechange CU01206F (Leído 3680 veces)

Dimitar Stefanov

Ejemplo sencillo básico en Ajax XMLHttpRequest() onreadystatechange CU01206F

pedro,,

Re:CU01206F ejemplo sencillo básico en Ajax

César Krall

Re:Ejemplo sencillo básico en Ajax XMLHttpRequest() onreadystatechange CU01206F

Dimitar Stefanov

Re:Ejemplo sencillo básico en Ajax XMLHttpRequest() onreadystatechange CU01206F

Dimitar Stefanov

Re:Ejemplo sencillo básico en Ajax XMLHttpRequest() onreadystatechange CU01206F

César Krall

Re:Ejemplo sencillo básico en Ajax XMLHttpRequest() onreadystatechange CU01206F

Dimitar Stefanov

Re:Ejemplo sencillo básico en Ajax XMLHttpRequest() onreadystatechange CU01206F

Preguntas y respuestas