En esta entrada dejo unos ejemplos sencillos de uso de las tecnologías AJAX para recordar su uso.
El primero muestra aspectos básicos, el segundo rescata de una base de datos sqlite información mediante llamadas GET AJAX.
Es necesario refrescar que AJAX, acrónimo de Asynchronous JavaScript And XML (JavaScript asíncrono y XML), es una técnica de desarrollo web para crear aplicaciones interactivas o RIA (Rich Internet Applications).
Estas aplicaciones se ejecutan en el cliente, es decir, en el navegador de los usuarios mientras se mantiene la comunicación asíncrona con el servidor en segundo plano. De esta forma es posible realizar cambios sobre las páginas sin necesidad de recargarlas, mejorando la interactividad, velocidad y usabilidad en las aplicaciones.
<!-- Ejemplo AJAX asincrono que carga un fichero en un div !-->
<html>
<head>
<script type="text/javascript">
function Ejecutarajax(){
var conexion;
if (window.XMLHttpRequest) {
conexion=new XMLHttpRequest();
}else
{
//Para navegadores antiguos.
conexion=new ActiveXObject("Microsoft.XMLHTTP");
}
conexion.onreadystatechange=function(){
//* Codigos de readyState
// 0: La petición no se ha iniciado.
// 1: Conexión con el servidor establecida
// 2: Petición recibida
// 3: Procesando petición
// 4: Petición finalizada y respuesta
//* Códigos de Status
// 200. Todo ha funcionado
// 404. Página no encontrada.
if(conexion.readyState==4 && conexion.status==200){
document.getElementById("micapa").innerHTML=conexion.responseText;
}
}
conexion.open("GET","Mifichero.txt",true);
// Otro ejemplo llamando a un php con parametro
// xmlhttp.open("GET","mipagina.php?c="+mivariable,true);
conexion.send();
}
</script>
</head>
<body>
<div id="micapa"></div>
<button type="button" onclick="Ejecutarajax()">Ejecutar</button>
</body>
</html>
Este otro ejemplo rescata datos de la base mediante AJAX y SQlite, existe una pagina PHP asociada.
<html>
<head>
<script type="text/javascript">
function muestraciudad(str){
var xmlhttp;
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// codigo para IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("ciudad").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","db.php?c="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form action="">
<select name="ciudades" onchange="muestraciudad(this.value)">
<option value="">Selecciona una ciudad</option>
<option value="Palencia">Palencia</option>
<option value="Valladolid">Valladolid</option>
<option value="Segovia">Segovia</option>
<option value="Soria">Soria</option>
</select>
</form>
<div id="ciudad">La informacion de la ciudad aparecera aqui</div>
</body>
</html>
Y para la página de la base de datos db.php
<?php
// Conexion contra la base de datos
//echo $_GET['c'];
$conexion = sqlite_open('ciudades.db');
$consulta = "SELECT * FROM ciudades;";
$resultado = sqlite_query($conexion,$consulta);
while($fila = sqlite_fetch_array($resultado)){
if($fila['nombre'] == $_GET['c']){
echo $fila['nombre'];
echo ' - ';
echo $fila['lugarinteres'];
echo ' - ';
echo $fila['prefijo'];
echo ' - ';
echo $fila['habitantes'];
echo ' - ';
echo $fila['poblacion'];
echo ' - ';
echo $fila['pais'];
echo ' - ';
}
}
sqlite_close($conexion);
?>
