Bueno, en resumen lo que hace ajax es actualizar una porcion de la pagina sin necesidad de recargar la pagina por completo, en el caso que te presento vamos a usar ajax para actualizar un div.
Principalmente vamos a usar tres archivos, yo incluyo un cuarto que es un gif de cargando... por si la peticion de los datos tarda mucho.
Primero viene el archivo que yo nombre como ajax.js, este se encarga de darle todas las instrucciones de recarga del div, no hay que tocar nada en este archivo
Código HTML:
// Vamos a presuponer que el usuario es una persona inteligente...
var isIE = false;
// Creamos una variable para el objeto XMLHttpRequest
var req;
// Creamos una funcion para cargar los datos en nuestro objeto.
// Logicamente, antes tenemos que crear el objeto.
// Vease que la sintaxis varia dependiendo de si usamos un navegador decente
// o Internet Explorer
function cargaXML(url) {
// Primero vamos a ver si la URL es una URL :)
if(url==''){
return;
}
// Usuario inteligente...
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
req.onreadystatechange = processReqChange;
req.open("GET", url, true);
req.send(null);
// ...y usuario de Internet Explorer Windows
} else if (window.ActiveXObject) {
isIE = true;
req = new ActiveXObject("Microsoft.XMLHTTP");
if (req) {
req.onreadystatechange = processReqChange;
req.open("GET", url, true);
req.send();
}
}
}
// Funcion que se llama cada vez que se dispara el evento onreadystatechange
// del objeto XMLHttpRequest
function processReqChange(){
var detalles = document.getElementById("detalles");
if(req.readyState == 4){
detalles.innerHTML = req.responseText;
} else {
detalles.innerHTML = '<img src="loading.gif" align="middle" /> Loading...';
}
}
Luego subo el archivo que venimos usando siempre
Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin título</title>
<style type="text/css">
<!--
.campo_apellidos { width: 131px;
border: 1px solid #FFB648;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
background-color: #FFFFCC;
}
-->
</style>
<script src="ajax.js" language="JavaScript"></script>
</head>
<body>
<form>
<select name="nombre" onchange="cargaXML(this.value)">
<?php
$sql = "SELECT id, nombre FROM id_usuarios";
$consulta_numero1 = mysql_query($sql,$conexion);
while(list($id, $nombre) = mysql_fetch_row($consulta_numero1)) {
?>
<option value="base.php?id=<?php echo $id ?>"><?php echo $nombre;?></option>
<?php } ?>
</select>
</form>
<br/>
<div class="campo_apellidos" id="detalles">
</div>
</body>
</html>
Atencion! en este archivo esta todo igual, lo unico que cambie el label tuyo por un div, lo IMPORTANTE es que el nombre del div permanezca tal cual como esta (detalles) eso es simplemente para que no tengas que cambiar el archivo ajax.js
otra cosa que cambie aqui es el value del <option> este value va a llamar a un archivo base.php (que coloco a continuacion) el cual se va a actualizar dentro del div con los datos que necesites.
Por ultimo coloco el archivo base.php
Código PHP:
$id = $_GET['id'];
//aqui hay que incluir el archivo de conexion a labase de datos
$sql = "SELECT apellido FROM id_usuarios WHERE id = '$id'";
$consulta = mysql_query($sql, $conexion);
while(list($apellido) = mysql_fetch_row($consulta)) {
echo $apellido;
}
Este archivo es el que hace la consulta a la base de datos y te muestra los datos que necesites yo por el momento lo hice para que muestre apellido, pero le podes agregar lo que necesites a la consulta, acordate de pasarle los datos al list cuando sea necesario.
Un ultimo comentario es que podes colocar (opcional) un archivo llamado loading.gif que se muestra cuando carga los datos del div, seria como un cargando....
bueno perdon por lo largo de la explicacion es que no se me ocurrio una forma mas facil de hacer lo que necesitas, de todas formas si tenes alguna duda con el codigo no dudes en pedirla.
saludos