« anterior próximo »
Páginas: [1]

Autor Tema: Ajax: ejemplo código sencillo básico objeto XMLHttpRequest GET con PHP CU01206F#  (Leído 4623 veces)

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Ajax: ejemplo código sencillo básico objeto XMLHttpRequest GET con PHP CU01206F#
« en: 14 de Marzo 2016, 19:09 »
Hola. Solución propuestas al ejercicio CU01206F del curso básico de programación web: 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 = '';

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://aprendehtml.byethost3.com/Ajax/CU01206F/datosCU01206F.php">' + contenidosRecibidos[i]+ '</a></div>';
}
nodoMostrarResultados.innerHTML = contenidosAMostrar;
}
}

xmlhttp.open("GET"," datosCU01206F.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>
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é";
 $enlaceCiudad[0][0]="https://es.wikipedia.org/wiki/Madrid"; 
 $enlaceCiudad[0][1]="https://es.wikipedia.org/wiki/Barcelona";
 $enlaceCiudad[0][2]="https://es.wikipedia.org/wiki/Valencia"; 
 $enlaceCiudad[0][3]="https://es.wikipedia.org/wiki/Sevilla";
 $enlaceCiudad[0][4]="https://es.wikipedia.org/wiki/Zaragoza"; 
 $enlaceCiudad[0][5]="https://es.wikipedia.org/wiki/Málaga";
 $enlaceCiudad[0][6]="https://es.wikipedia.org/wiki/Murcia";
 $enlaceCiudad[1][0]="https://es.wikipedia.org/wiki/Ciudad_de_M%C3%A9xico";
 $enlaceCiudad[1][1]="https://es.wikipedia.org/wiki/Ecatepec_de_Morelos";
 $enlaceCiudad[1][2]="https://es.wikipedia.org/wiki/Guadalajara_(M%C3%A9xico)";
 $enlaceCiudad[1][3]="https://es.wikipedia.org/wiki/Puebla";
 $enlaceCiudad[1][4]="https://es.wikipedia.org/wiki/Ciudad_Ju%C3%A1rez";
 $enlaceCiudad[1][5]="https://es.wikipedia.org/wiki/Tijuana";
 $enlaceCiudad[1][6]="https://es.wikipedia.org/wiki/Le%C3%B3n_(Guanajuato)";
 $enlaceCiudad[1][7]="https://es.wikipedia.org/wiki/Zapopan";
 $enlaceCiudad[2][0]="https://es.wikipedia.org/wiki/Buenos_Aires";
 $enlaceCiudad[2][1]="https://es.wikipedia.org/wiki/Ciudad_de_C%C3%B3rdoba_(Argentina)";
 $enlaceCiudad[2][2]="https://es.wikipedia.org/wiki/Rosario_(Argentina)";
 $enlaceCiudad[2][3]="https://es.wikipedia.org/wiki/La_Plata";
 $enlaceCiudad[2][4]="https://es.wikipedia.org/wiki/Mar_del_Plata"; 
 $enlaceCiudad[2][5]="https://es.wikipedia.org/wiki/San_Miguel_de_Tucum%C3%A1n";
 $enlaceCiudad[2][6]="https://es.wikipedia.org/wiki/Ciudad_de_Salta";
 $enlaceCiudad[3][0]="https://es.wikipedia.org/wiki/Bogot%C3%A1";
 $enlaceCiudad[3][1]="https://es.wikipedia.org/wiki/Medell%C3%ADn";
 $enlaceCiudad[3][2]="https://es.wikipedia.org/wiki/Cali";
 $enlaceCiudad[3][3]="https://es.wikipedia.org/wiki/Barranquilla";
 $enlaceCiudad[3][4]="https://es.wikipedia.org/wiki/Cartagena_de_Indias";
 $enlaceCiudad[3][5]="https://es.wikipedia.org/wiki/C%C3%BAcuta";
 $enlaceCiudad[3][6]="https://es.wikipedia.org/wiki/Soledad_(Atl%C3%A1ntico)";
 $enlaceCiudad[3][7]="https://es.wikipedia.org/wiki/Ibagu%C3%A9";
 // 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 .= ",".'<a target="_blank" href="'. $enlaceCiudad[$indicePais][$i] . '">' . $ciudad[$indicePais][$i] . '</a>';
 }
echo $msg.$ciudadesRespuesta;
?>
http://aprendehtml.byethost3.com/Ajax/CU01206F/cursoAjaxCU01206F.html

Saludos.
« Última modificación: 29 de Julio 2020, 20:14 por Ogramar »
En línea

Mario R. Rancel

  • Administrador
  • Experto
  • ********
  • APR2.COM
  • Mensajes: 1978
    • Ver Perfil
Re:Ajax: ejemplo código sencillo básico objeto XMLHttpRequest GET con PHP CU01206F
« Respuesta #1 en: 17 de Marzo 2016, 08:39 »
Buenos días Pedro el código hace correctamente lo que pedía el ejercicio

Hay una línea ¿mal definida?:

Código: [Seleccionar]
contenidosAMostrar = contenidosAMostrar+'<div id="ciudades'+i+'"> <a href="http://aprendehtml.byethost3.com/Ajax/CU01206F/datosCU01206F.php">' + contenidosRecibidos[i]+ '</a></div>';
Aquí parece que basta con:

Código: [Seleccionar]
contenidosAMostrar = contenidosAMostrar+'<div id="ciudades'+i+'">' + contenidosRecibidos[i]+ '</div>';
No sé si incluiste eso con algún motivo específico o si se quedó porque el código inicial de ejemplo incluía el mismo enlace para todas las ciudades.

De cualquier manera, en caso de incluir una ruta en tu propio servidor (sobre tu propio sistema de archivos) siempre se recomienda usar rutas relativas en lugar de rutas absolutas. La ruta absoluta es la ruta completa (tal cual la escribirías en un navegador) mientras que la ruta relativa se basa en el directorio donde tienes el archivo. En este caso si el archivo php está en el mismo directorio que el archivo html la ruta relativa sería simplemente el nombre del archivo. Se habla de esto en https://www.aprenderaprogramar.com/foros/index.php?topic=390.0


En esta línea hay un espacio antes del comienzo del nombre de archivo:
xmlhttp.open("GET"," datosCU01206F.php?pais="+str);

Te recomiendo eliminar ese espacio porque podría traer problemas (podría).

Saludos
En línea

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Re:Ajax: ejemplo código sencillo básico objeto XMLHttpRequest GET con PHP CU01206F
« Respuesta #2 en: 17 de Marzo 2016, 20:38 »
Hola Mario.

En realidad esa parte del código es algo que se me pasó por alto quitar.

Gracias por la corrección.

En línea

miziloner

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 1
    • Ver Perfil
Ajax: ejemplo código sencillo básico objeto XMLHttpRequest GET con PHP CU01206F
« Respuesta #3 en: 13 de Marzo 2017, 20:30 »
alguien es tan amable de explicarme como puedo subir al servidor los archivos?
tengo poca experiencia en desarrollo web y me gustaria comenzar con este ejemplo
En línea

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Re:Ajax: ejemplo código sencillo básico objeto XMLHttpRequest GET con PHP CU01206F
« Respuesta #4 en: 14 de Marzo 2017, 12:59 »
En línea
Páginas: [1]
« anterior próximo »
 

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".