Formulario hibrido AJAX + sinJS
Una de las utilidades que se le puede sacar al AJAX es el hecho de mandar un formulario al servidor sin la necesidad de recargar la página. Eso en pequeños experimentos o en páginas simples no tiene ninguna utilidad, pero podemos ver claros ejemplos de buenos usos en portales extensos donde la carga de toda la página puede representar el gasto de hasta un minuto dependiendo de la conexión.
Un ejemplo es la pantalla de entrada de AdSense de Google o bien el apartado de alta en la newsletter de Promsite. Ambos sistemas funcionan con y sin javascript activo.
A continuación os dejo un ejemplo, programado utilizando la librería pAJAX, donde podéis ver mediante un formulario que valida un usuario en el servidor sin necesidad de recargar página (al estilo login de AdSense) un posible buen uso de AJAX:
-
<?
-
if($REQUEST_METHOD == "POST"){
-
$ajax = $_POST[ajax];
-
$usuario = trim($_POST[usuario]);
-
$clave = trim($_POST[clave]);
-
-
$datos_usuario = (ereg("^[a-zA-Z0-9]*$",$usuario)&&($usuario!=""));
-
$datos_clave = (ereg("^[a-zA-Z0-9]*$",$clave)&&($clave!=""));
-
-
if($ajax == 1){
-
if(!$datos_usuario){ die("&code=2&msg=Error en los datos de usuario&"); }
-
if(!$datos_clave){ die("&code=2&msg=Error en los datos de contrase%F1a&"); }
-
-
$procesa = true;
-
}else{
-
if(!$datos_usuario){ $msg="Introduzca un nombre de usuario válido."; }
-
if(!$datos_clave){ $msg="La contraseña introducida no es válida."; }
-
-
if(!$datos_usuario||!$datos_clave){
-
$procesa = false;
-
}else{
-
$procesa = true;
-
$msg = "Se encuentra como usuario del sistema.";
-
}
-
}
-
-
-
if($procesa){
-
/*************************************************/
-
// Código de proceso de variables
-
/*************************************************/
-
}
-
-
if($ajax == 1){
-
echo "&code=1&msg=Se encuentra como usuario del sistema&";
-
}
-
}
-
?>
-
<title>ejemplo formulario ajax no obtrusivo</title>
-
<script type="text/javascript" src="loadVars.js"></script>
-
<script type="text/javascript">
-
enviar_datos = function(){
-
var usuario = document.formulario.usuario.value;
-
var clave = document.formulario.clave.value;
-
-
document.getElementById("msg_error").innerHTML = "Enviando datos del formulario, espere.";
-
document.getElementById("submit_btn").disabled = true;
-
-
// Creamos la conexión LoadVars.
-
var conexion = new LoadVars();
-
// definimos las variables
-
conexion.usuario = usuario;
-
conexion.clave = clave;
-
conexion.ajax = 1;
-
// definimos la función de callback
-
conexion.onLoad=function(){
-
if(this.code == 1){ //OK
-
document.getElementById("datos_form").innerHTML = "<div id=\"msg_error\">"+unescape(this.msg)+"</div>";
-
}else if(this.code == 2){ //ERROR
-
document.getElementById("msg_error").innerHTML = unescape(this.msg);
-
document.getElementById("submit_btn").disabled = false;
-
}
-
}
-
// Enviamos los datos al servidor
-
conexion.sendAndLoad(document.formulario.action,conexion,"POST");
-
-
return false; //PARA QUE NO HAGA EL SUBMIT
-
}
-
</script>
-
<style type="text/css">
-
#msg_error{
-
color:red;
-
margin:10px;
-
font-weight:bold;
-
}
-
</style>
-
</head>
-
<div id="datos_form">
-
<? if(!$procesa){ ?>
-
<form name="formulario" action="<?=$PHP_SELF?>" method="post" onsubmit="return enviar_datos();">
-
<label for="usuario">Usuario: </label><input type="text" name="usuario" id="usuario" /><br />
-
<label for="clave">Clave: </label><input type="text" name="clave" id="clave" /><br />
-
<input type="submit" value="Enviar datos!" id="submit_btn" />
-
</form>
-
<? } ?>
-
</div>
-
</body>
-
</html>
Podeis trastear con esto en la página de ejemplo
Comentarios
Deja un comentario