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

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:

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

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');

Oscar perez

Arquitecto especialista en gestion de proyectos si necesitas desarrollar algun proyecto en Bogota contactame en el 3006825874 o visita mi pagina en www.arquitectobogota.tk