Ajax y JavaScript con consulta a base de datos. Recuperar información en tiempo real de servidor (CU01216F)

Resumen: Entrega nº16 del curso "Tutorial básico del programador web: Ajax desde cero".
Codificación aprenderaprogramar.com: CU01216F

 

 

RECUPERAR INFORMACIÓN DESDE BASE DE DATOS CON AJAX

Supongamos que pretendemos recuperar información desde el servidor en segundo plano usando Ajax y que dicha información está en una base de datos. El ejemplo que vamos a utilizar es el mismo que hemos estudiado en entregas anteriores del curso, donde hemos visto distintas alternativas para almacenar la información (en un fichero de texto, en un fichero php, en un fichero xml, en un fichero json).

logo ajax

 

PARTIENDO DE DATOS EN UNA BASE DE DATOS

Recordemos los datos XML con que habíamos trabajado anteriormente, y veamos un ejemplo sencillo de cómo podría organizarse esa información en una base de datos. (El fichero XML y el diseño de base de datos se muestra más abajo).

Los datos consisten en un listado de países, y para cada uno de ellos se dispone información de nombre, capital, un texto descriptivo sobre la capital y una enumeración de los nombres de las ciudades importantes del país.

Nuestro objetivo es que dado un combobox (select html) se recupere la información del servidor y se muestren las ciudades que existan en la base de datos para el país que haya seleccionado el usuario.

Ya sabemos cómo recuperar el contenido de un archivo en formato texto. Para ello usamos la propiedad responseText del objeto XMLHttpRequest.

El texto de respuesta podemos obtenerlo como resultado de una computación (cálculo o proceso) del lado del servidor. La idea, de forma “general” es la siguiente:

El usuario define ciertos parámetros del lado del cliente -- > Invocamos una petición a servidor invocando una url a la que pasamos los parámetros por post o get -- > Del lado del servidor recuperamos la información necesaria, haciendo una consulta a base de datos o no -- > Una vez se tiene la información necesaria, devolvemos una cadena de texto que tras ser procesada dará lugar a que el usuario visualice una respuesta del lado del cliente.

Recordatorio: podemos obtener la cadena de texto resultado del proceso efectuado en el servidor con esta sintaxis:

var dbResponse = xmlhttp.responseText;

Los datos en formato XML que habíamos usado anteriormente y que tomamos como referencia son:

<?xml version="1.0" encoding="UTF-8"?>
<listadoPaises>
<pais>
    <nombre>España</nombre>
    <capital>Madrid</capital>
    <textoCapital>Madrid es un municipio y una ciudad de España. La localidad, con categoría…</textoCapital>
    <ciudadImportante>Madrid</ciudadImportante>
    <ciudadImportante>Barcelona</ciudadImportante>
    <ciudadImportante>Valencia</ciudadImportante>
    <ciudadImportante>Sevilla</ciudadImportante>
    <ciudadImportante>Zaragoza</ciudadImportante>
    <ciudadImportante>Málaga</ciudadImportante>
    <ciudadImportante>Murcia</ciudadImportante>        
</pais>
<pais>
    <nombre>México</nombre>
    <capital>México D.F.</capital>
    <textoCapital>La Ciudad de México, Distrito Federal o, en su forma abreviada, México, D.F., es… </textoCapital>
    <ciudadImportante>México D.F.</ciudadImportante>
    <ciudadImportante>Ecatepec</ciudadImportante>
    <ciudadImportante>Guadalajara</ciudadImportante>
    <ciudadImportante>Puebla</ciudadImportante>
    <ciudadImportante>Juárez</ciudadImportante>
    <ciudadImportante>Tijuana</ciudadImportante>
    <ciudadImportante>León</ciudadImportante>
    <ciudadImportante>Zapopan</ciudadImportante>    
</pais>
<pais>
    <nombre>Argentina</nombre>
    <capital>Buenos Aires</capital>
    <textoCapital>Buenos Aires, formalmente Ciudad Autónoma de Buenos Aires (CABA) ―también… </textoCapital>
    <ciudadImportante>Buenos Aires</ciudadImportante>
    <ciudadImportante>Córdoba</ciudadImportante>
    <ciudadImportante>Rosario</ciudadImportante>
    <ciudadImportante>La Plata</ciudadImportante>
    <ciudadImportante>Mar del Plata</ciudadImportante>
    <ciudadImportante>San Miguel de Tucumán</ciudadImportante>
    <ciudadImportante>Ciudad de Salta</ciudadImportante>
</pais>
<pais>
    <nombre>Colombia</nombre>
    <capital>Bogotá</capital>
    <textoCapital>Bogotá, oficialmente Bogotá, Distrito Capital, abreviado Bogotá, D. C. es la… </textoCapital>
    <ciudadImportante>Bogotá</ciudadImportante>
    <ciudadImportante>Medellín</ciudadImportante>
    <ciudadImportante>Cali</ciudadImportante>
    <ciudadImportante>Barranquilla</ciudadImportante>
    <ciudadImportante>Cartagena</ciudadImportante>
    <ciudadImportante>Cúcuta</ciudadImportante>
    <ciudadImportante>Soledad</ciudadImportante>
    <ciudadImportante>Ibagué</ciudadImportante>
</pais>
</listadoPaises>

 

 

Para dar lugar a la recuperación de información en el servidor a partir de una base de datos vamos a crear una pequeña base de datos con la información organizada como indicamos a continuación.

Nosotros vamos a usar una base de datos MySql y como lenguaje de lado del servidor PHP, pero realmente puedes hacerlo con cualquier base de datos y cualquier lenguaje de lado del servidor. No vamos a explicar cómo crear la base de datos porque es algo que se supone un conocimiento previo necesario. Si no sabes cómo crear una base de datos de este tipo consulta el curso “Tutorial básico del programador web: PHP desde cero”.

Nuestro diseño y contenido de base de datos va a ser el siguiente (usamos sólo dos tablas. Ten en cuenta que el diseño podría haberse hecho de otra manera, esto es solo un ejemplo):

 

Tabla: paises

id

nombrePais

capital

textoCapital

1

España

Madrid

Madrid es un municipio y una ciudad de España. La localidad, con categoría histórica de villa, es la capital del país y de la Comunidad de Madrid. También conocida como la Villa y Corte, es la ciudad más poblada de España, con 3.165.235 habitantes. Como capital del Estado, Madrid alberga las sedes del gobierno, las Cortes Generales, ministerios, instituciones y organismos asociados, así como la residencia oficial de los reyes de España y del presidente del Gobierno. En el plano económico, es la cuarta ciudad más rica de Europa, tras Londres, París y Moscú.

2

México

México D.F.

La Ciudad de México, Distrito Federal o, en su forma abreviada, México, D.F., es la capital y sede de los poderes federales de los Estados Unidos Mexicanos. Se trata de una de las 32 entidades federativas que forman parte de México; como tal, no es parte integral de ninguna de las otras 31 (denominados estados), pero a la vez pertenece a toda la unión. Es el núcleo urbano más grande del país, y también el principal centro político, académico, económico, de moda, financiero, empresarial y cultural. Catalogada como ciudad global, es uno de los centros financieros y culturales más importantes de América y del mundo. Su población es de alrededor de 8,8 millones de habitantes.

3

Argentina

Buenos Aires

Buenos Aires, formalmente Ciudad Autónoma de Buenos Aires (CABA) ―también llamada Capital Federal por ser sede del gobierno federal, es una de las veinticuatro entidades federales y capital de la República Argentina. Está situada en la región centro-este del país. La población de la ciudad se estima en 2.890.151 habitantes, y la de su aglomeración urbana, el Aglomerado Gran Buenos Aires, en 14.391.538 habitantes, siendo la mayor área urbana del país, la segunda de Sudamérica, Hispanoamérica y del hemisferio sur, y una de las 20 mayores ciudades del mundo.

4

Colombia

Bogotá

Bogotá, oficialmente Bogotá, Distrito Capital, abreviado Bogotá, D. C. es la capital de la República de Colombia y del departamento de Cundinamarca. Está administrada como Distrito Capital, y goza de autonomía de gestión. Está ubicada en el centro de Colombia, en la región natural conocida como la sabana de Bogotá. Según las últimas estimaciones, Bogotá tiene una población de 7.878.783 habitantes. Tiene una longitud de 33 km de sur a norte, y 16 km de oriente a occidente. Como capital, alberga los organismos de mayor jerarquía de la rama ejecutiva, legislativa y judicial.

 

 

Tabla: ciudades_importantes

id

idPais

ciudadImportante

1

1

Madrid

2

1

Barcelona

3

1

Valencia

4

1

Sevilla

5

1

Zaragoza

6

1

Málaga

7

1

Murcia

8

2

México D.F.

9

2

Ecatepec

10

2

Guadalajara

11

2

Puebla

12

2

Juárez

13

2

Tijuana

14

2

León

15

2

Zapopan

16

3

Buenos Aires

17

3

Córdoba

18

3

Rosario

19

3

La Plata

20

3

Mar del Plata

21

3

San Miguel de Tucumán

22

3

Ciudad de Salta

23

4

Bogotá

24

4

Medellín

25

4

Cali

26

4

Barranquilla

27

4

Cartagena

28

4

Cúcuta

29

4

Soledad

30

4

Ibagué

 

 

CREAR LAS TABLAS DE LA BASE DE DATOS

Antes de seguir avanzando crea la base de datos (o utiliza alguna de la que ya dispongas) en el servidor. Crea también las tablas que hemos descrito. Anota los datos necesarios para la conexión (nombre del servidor, nombre de base de datos, usuario y password).

 

 

CÓDIGO DE EJEMPLO DEL LADO DEL SERVIDOR

La lógica que vamos a seguir es la siguiente. Crearemos un archivo php con un código tal que reciba los parámetros necesarios vía POST enviados con Ajax, y en función de los parámetros recibidos realice una consulta a la base de datos.

La consulta que vamos a realizar es: “Obtener de la tabla ciudades_importantes todos los valores de nombres de ciudad cuyo idPais sea el mismo que corresponde al país que recibimos como parámetro y cuyo id se encontrará en la tabla paises”.

Esto es una consulta simple SQL. La consulta se puede escribir de distintas maneras. Por ejemplo supongamos que se quieren obtener las ciudades importantes recibiendo como parámetro Argentina:

Ejemplo 1

Ejemplo 2

Ejemplo 3

SELECT ciudades_importantes.`ciudadImportante`

FROM `ciudades_importantes` , `paises`

WHERE ciudades_importantes.idPais = paises.id

AND nombrePais = 'Argentina'

SELECT a.`ciudadImportante`

FROM `ciudades_importantes` AS a, `paises` AS b

WHERE a.idPais = b.id

AND nombrePais = 'Argentina'

SELECT a.`ciudadImportante`

FROM `ciudades_importantes` AS a

JOIN `paises` AS b ON a.idPais = b.id

WHERE b.nombrePais = 'Argentina'

 

 

Nota: dependiendo de la base de datos y versión pueden ser necesarias o no las comillas simples. También tener en cuenta que no es lo mismo la comilla simple plana ( '  ) que la inclinada ( ` )

En nuestro caso hemos de crear un archivo del lado del servidor que reciba un parámetro, realice la consulta a la base de datos y devuelva una cadena de texto con el resultado deseado.

Vamos a resolver esto creando un archivo denominado ajaxCU01216F.php con el siguiente contenido:

<meta charset="utf-8"/>
 <?php
// Rescatamos el parámetro que nos llega mediante la url que invoca xmlhttp
$pais=$_POST["pais"];
$resultadoConsulta = '';
$msg = 'El pais recibido en segundo plano ahora es '.$pais;
if ($pais) {
    $link = mysqli_connect("aquiNombreServidor", "aquiUsuario", "aquiPassword");
    mysqli_select_db($link, "prueba1");
    $tildes = $link->query("SET NAMES 'utf8'"); //Para que se muestren las tildes correctamente
    $result = mysqli_query($link, "SELECT a.ciudadImportante
                FROM ciudades_importantes AS a, paises AS b
                WHERE a.idPais = b.id
                AND nombrePais = '".$pais."'");

while ($fila = mysqli_fetch_array($result)){
$resultadoConsulta .= ','.$fila['ciudadImportante'];
}

//Devolvemmos la cadena de respuesta
echo $msg.$resultadoConsulta;

mysqli_free_result($result);
mysqli_close($link);
} else {
    echo 'No se han recibido datos';
}
?>

 

 

Ahora definiremos nuestro archivo CU01216F.html donde vamos a tener el combobox donde el usuario puede seleccionar la ciudad y mediante Ajax enviamos el país elegido para recuperar las ciudades gracias al proceso del lado del servidor con el que interaccionamos con la base de datos.

<!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 paisElegido='';
if (str=='spain') {paisElegido='España';}
else if (str=='mexico') {paisElegido='México';}
else if (str=='argentina') {paisElegido='Argentina';}
else if (str=='colombia') {paisElegido='Colombia';}
else {paisElegido='none';}

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">' + contenidosRecibidos[i]+ '</a></div>';
    }
    nodoMostrarResultados.innerHTML = contenidosAMostrar;
    }
}
var cadenaParametros = 'pais='+encodeURIComponent(paisElegido);
xmlhttp.open('POST', 'ajaxCU01216F.php'); // Método post y url invocada
xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); // Establecer cabeceras de petición
xmlhttp.send(cadenaParametros); // Envio de parámetros usando POST
}
</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 POST y Ajax: <span style="color:brown;" id="txtInformacion"></span></p>
<div id="listaCiudades"> </div>
</body>
</html>

 

 

Si has seguido los pasos indicados, debes ser capaz de elegir opciones del combobox desplegable y visualizar resultados por pantalla. Por ejemplo, si eliges la opción “Argentina”, el resultado esperado será que por pantalla se visualice:

Informacion sobre operacion en segundo plano con Ajax: El pais recibido por get en segundo plano es argentina

Rosario                La Plata                Mar del Plata                    San Miguel de Tucumán              Ciudad de Salta

 

ajax ejemplo basico

 

Nota: la imagen es sólo aproximada, no se corresponde exactamente con el código anterior.

Si cambias la selección del país por otro país, debes observar un refresco “casi instantáneo” de modo que se modifica el texto y las ciudades que se muestran, viéndose en cada caso las correspondientes al país seleccionado.

Cada vez que seleccionamos un país, hay una comunicación con el servidor en segundo plano y la información recibida del servidor la utilizamos para hacer cambios en la página web sin necesidad de hacer una recarga tradicional.

Este resultado es idéntico al que hemos obtenido en entregas anteriores del curso donde hemos usado otras formas de recuperación de información como uso de archivos XML ó JSON. La diferencia está en que ahora estamos recuperando los datos de servidor desde una base de datos realizando una consulta a base de datos en segundo plano. La velocidad de respuesta que obtengamos al tener que realizar una consulta a base de datos puede ser inferior que por ejemplo recuperando desde un archivo XML ó JSON, aunque depende de la complejidad de la consulta, volumen de datos en los archivos y otros factores. Si la consulta a base de datos está bien diseñada y el servidor responde adecuadamente el retraso no debe ser significativo.

Si prestas atención al código del archivo HTML que hemos empleado, es muy similar al que hemos usado en ejemplos anteriores. En este caso la diferencia principal está en cómo obtenemos la respuesta del lado del servidor. La lógica para obtener esta respuesta está definida en el archivo php invocado en esta línea:

xmlhttp.open('POST', 'ajaxCU01216F.php');

 

 

EJERCICIO

Modifica el código que hemos usado como ejemplo para cumplir con el siguiente propósito:

a) Devolver como respuesta una cadena en formato JSON generada del lado del servidor.

b) Parsear la respuesta recibida del servidor para, ahora del lado del cliente, crear un objeto JavaScript usando JSON.parse.

c) Obtener resultados análogos a los que hemos obtenido, es decir, cuando se seleccione un país deberán mostrarse las ciudades importantes de ese país.

La diferencia entre el ejemplo que hemos visto y el de este ejercicio estará en qué se devuelve del lado del servidor y cómo se trata. En el ejemplo que hemos visto se devuelve una cadena de elementos separados por comas y se trata separándola, mientras que en este ejercicio debes devolver una cadena de texto con formato JSON y tratarla con notación de objetos.

Para comprobar si tus respuestas son correctas puedes consultar en los foros aprenderaprogramar.com.

 

 

 

 

 

 

Para acceder a la información general sobre este curso y al listado completo de entregas pulsa en este link:  Ver curso completo.

Para  hacer un comentario o consulta utiliza los foros aprenderaprogramar.com, abiertos a cualquier persona independientemente de su nivel de conocimiento.

¿Puedo yo aprender?

Seas o no del área informática, si quieres aprender a programar te ofrecemos una solución guiada y personalizada: realizar un curso tutorizado on-line. Con este tipo de curso, podrás aprender a programar de forma ágil y amena.

Acceder a detalles y precios de los cursos tutorizados on-line

Política sobre cookies

Utilizamos cookies propias y de terceros para ofrecerte una mejor experiencia y servicio, de acuerdo a tus hábitos de navegación.

Si continúas navegando, consideramos que aceptas su uso. Puedes obtener más información en nuestra Política de Cookies.

En Facebook!

Ahora puedes seguirnos en Facebook. Noticias, novedades y mucho más ¡Te esperamos!

RANKING APR2+

Ranking de lenguajes y entornos de programación aprenderaprogramar.com
 

MARZO - ABRIL 2017

1. Java / J2EE
2. Entornos Oracle
3. JavaScript, jQuery
4. .NET, C#
5. Entornos SQL Server
6. HTML, CSS
7. Php, MySql
8. Android, iOS


Acceder a detalles sobre el ranking de programación aprenderaprogramar.com

FOROS APR2+

Pregunta, responde, consulta, lee, intercambia...

Participa!!! Entra en los foros aprenderaprogramar.com.

             Copyright 2006-2017 aprenderaprogramar.com                La web abierta a cualquier persona interesada en la programación