Ver Mensaje Individual
  #7 (permalink)  
Antiguo 17/07/2006, 15:24
joaquin_win
 
Fecha de Ingreso: julio-2005
Mensajes: 127
Antigüedad: 19 años, 4 meses
Puntos: 0
Aquí te coloco el código, lo probé en firefox.

Código HTML:
 <script type="text/javascript">
function httpRequest() {
	var req = false;
	try {
	// para Firefox, Safari, IE7, etc.
	req = new XMLHttpRequest();
	} catch (e) {
		try {
		// IE últimas versiones.
		req = new ActiveXObject('MSXML2.XMLHTTP');
		} catch (e) {
			try {
			// IE primeras veriones.
			req = new ActiveXObject('Microsoft.XMLHTTP');
			} catch (e) {
			// No se puedo crear
			return false;
			}
		}
	}
	return req;
}

function validaId() {
	var idInput = document.getElementById("id");
	var peticion = httpRequest();
	if(peticion) {
		peticion.open("GET", "valida.php?id="+idInput.value, true);
		var r = peticion;
		peticion.onreadystatechange = function() {
			if (r.readyState == 4) {
				var v = document.getElementById("validar");
				v.innerHTML = peticion.responseText;
			}
		}
		peticion.send(null);
	} else alert("No se pudo realizar la revisión...");
	return false;
}
</script>
<div id="todo">
	Indica el id: <input type="text" name="id" id="id" />
	<a href="#" onclick="return validaId();">Validar el id</a>
	<div id="validar">ghfg</div>
</div> 
En resumidas cuentas te explico:
1) Al pulsar el link se llama a la función validaId()
Esta función lo que hace es obtener del cuadro de texto el id que indicó el usuario y se lo pasa por el método GET al script (valida.php) que valida el id, el mío nada más hacía:
Código HTML:
echo "hola ".$_GET['id'];
2) Eso es todo.

Lo interesante de esto (ajax) es la construcción del objeto xmlHttpRequest (solicitud HTTP) que te permite hacer peticiones al servidor sin necesidad de recargar la página, en este caso se hace una llamada a valida.php?id=#### dónde ### es el id indicado por el usuario:
Código:
var idInput = document.getElementById("id");
...
peticion.open("GET", "valida.php?id="+idInput.value, true);
(El tercer parámetro true significa que haces una petición asíncrona).

Por último, el manejo de la respuesta se hace con la siguiente asignación:
Código:
peticion.onreadystatechange = function() {
			if (r.readyState == 4) {
				var v = document.getElementById("validar");
				v.innerHTML = peticion.responseText;
			}
		}
La respuesta viene junto a un código (que no tiene nada que ver con los codigos HTTP), cuando el código es 4 quiere decir que la respuesta fue recibida, en dicho caso le asigno a al div con id "validar" el texto que me llegó en la respuesta.

Para que toda la mágia de ajax se desate es necesario enviar la solicitud:
Código HTML:
peticion.send(null);
Eso es muy básicamente lo que ajax te permite hacer... A este script le faltan hacer chequeos como por ejemplo que el campo tenga algo escrito, y que sea sólo numérico por ejemplo.

Saludos.