Pequeño ejemplo de AJAX y PHP

Estoy seguro que muchos han leí­Â­do y/o escuchado hablar sobre AJAX, el cual es algo viejo, pero relativamente recien descubierto. Mas de alguno (o la mayori­a) ha lei­do sus conceptos y demas; en este Tutorial no me enfocare a explicar los principios de esta metodologi­a de desarrollo Web. Para los que prefieren leer alguna introduccion pueden ir aqui­ (Por cierto en la red existen muchi­simos arti­culos sobre esta metodologi­a o bien si lo prefieren existen muy buenos libros recomendables).
Bien pasemos a lo que nos interesa, que es programar ejemplos en AJAX con ayuda de PHP.

La llamada AJAX

En principio se crea una funcion Multi-Browser, (para los que se preguntan por que multi-browser es simplemente que Microsoft tercamente sigue sin apegarse a los estandares). Pero bueno esa es otra historia.

var xml = {
	pag:
	function(url,id,func) {
		var pag=false;
		if ( window.XMLHttpRequest ) {
			pag = new XMLHttpRequest()
		}
		else if (window.ActiveXObject) {
			try{
				pag = new ActiveXObject("Msxml2.XMLHTTP")
			}
			catch(e) {
				try {
					pag = new ActiveXObject("Microsoft.XMLHTTP")
				}
				catch(e){ }
			}
		}
		else
			return false;
		return pag
	}
}

Una vez creada la llamada AJAX, veamos el primer ejemplo, el cual es enviar datos de un formulario a un arhcivo PHP y obtener respuesta de manera asincrona.

function sendData( nombre_, edad_ )
{
	var capa=document.getElementById(”datos”);

	var nombre = document.getElementById(nombre_).value;
	var edad = document.getElementById(edad_).value;

	// Creo el objeto AJAX

	// Coloco el mensaje “Cargando…” en la capa
	capa.innerHTML=”Enviando datos al servidor…”;

	send = “nombre=”+nombre+”&edad=”+edad;

	pag=xml.pag();
	pag.onreadystatechange=function()
	{
		if (pag.readyState==4)
		{
			// Cargo la respuesta del archivo llamado…

			capa.innerHTML=pag.responseText;
		}
	};

	pag.open(”POST”,”ajax_ej1.php”,true);
	pag.setRequestHeader(”Content-Type”,”application/x-www-form-urlencoded”);
	pag.send(send);
}

Esta funcion lo que hace es recibir los valores del formulario, procesarlos, y enviarlos al script de lado servidor, de manera asi­ncrona.

El Script de lado servidor (Escrito en PHP, llamado ajax_ej1.php) Recibe los datos, y los procesa dependiendo de la condicion y envia respuesta, la cual es tomada por la funcion anteriormente descrita y a su vez, esta imprime el resultado en la capa (div) “datos”.

Veamos el Script PHP

<?php
	$nombre = $_POST["nombre"];
	$edad = $_POST["edad"];

	if ($edad >= 18)
	{
		echo “Hola “.$nombre.”, Eres Bienvenido.”;
	}
	else
	{
		echo “Lo siento “.$nombre.” No puedes entrar.”;
	}
?>

Para cualquier duda, aclaracion, o cri­tica no duden en enviarme un E-mail, con gusto lo respondere.

Ahora si quieren descargar el ejemplo lo pueden hacer dando clic aqui­, o bien si lo quieren ver funcionando den clic aca.

Tal ves algunos cuantos se dieron cuenta sobre el potencial que tiene este ejemplo para practicas reales, para los que no se dieron cuenta, con unas cuantas modificaciones se puede usar, por ejemplo, para altas de clientes (En un sistema empresarial), solo agregas unos cuantos campos al formulario y los pasas como parametros a la funcion JavaScript, y listo.

Gracias a nocrox, por la llamada AJAX.

Start Slide Show with PicLens Lite