Verificar un dato en una base de datos mysql con ajax

Cuando se tiene un formulario y se tienen que verificar ciertos datos antes de enviar al mismo, resulta util realizarlo mediante ajax, para que , de esta forma, se ahorre tiempo y recursos tanto al usuario como al servidor.

Para poder validar un campo se necesita solo de un archivo de verificación, en este caso mediante php se validan los datos en la base de datos mysql y en el archivo html  (php) se logra la comunicacion mediante javascript.

En el formulario se tiene el siguiente form:

<label>Campo a verificar "usuario"</label> <input type="text" name="user" id="user" onfocus="volver();" value=""/> <div name="status_usr" id="status_usr" style="display:block; cursor:hand; text-align:right;" mce_style="display:block; cursor:hand; text-align:right;"></div>

en el mismo archivo al inicio del mismo:

<?php $urlmain = "http://miwebsite.com/"; $val_or = "<img src="".$urlmain."imagenes/inter.png".$urlmain."imagenes/inter.png" onclick='verificar();' title='Verificar disponibilidad'>     "; ?> <!--Verificar usuario--> <mce:script language="javascript" type="text/javascript"><!-- var url = "<?=$urlmain?>obtenerdatosmysql.php?param="; function handleHttpResponse() { if (http.readyState == 4) { results = http.responseText; var status_usr = document.getElementById("status_usr"); status_usr.innerHTML = results; } } function volver() { xx = "<?=$val_or?>"; var status_usr = document.getElementById("status_usr"); status_usr.innerHTML = xx; } function verificar() { var usrValue = document.getElementById("user").value; http.open("GET", url + escape(usrValue), true); http.onreadystatechange = handleHttpResponse; http.send(null); } function getHTTPObject() { var xmlhttp; if (!xmlhttp && typeof XMLHttpRequest != 'undefined') { try { xmlhttp = new XMLHttpRequest(); } catch (e) { xmlhttp = false; } } return xmlhttp; } var http = getHTTPObject(); // --></mce:script> <!--Fin de verificar usuario-->

en este codigo javascript tenemos 4 funciones:

handleHttpResponse.-  verifica el estado del servidor de acuerdo a estos parametros:

• readyState Almacena el estado del requerimiento hecho al servidor, pudiendo ser:
  • 0 No inicializado (el método open no a sido llamado)
  • 1 Cargando (se llamó al método open)
  • 2 Cargado (se llamó al método send y ya tenemos la cabecera de la petición HTTP y el status)
  • 3 Interactivo (la propiedad responseText tiene datos parciales)
  • 4 Completado (la propiedad responseText tiene todos los datos pedidos al servidor)

Por lo que al ser completada la conexión al servidor se procesa el script y escribe el resultado de la misma en el div status_usr.

volver.- volver se ejecuta onfocus, en este caso escribe en el div status_usr el contenido de $val_or (carga una imagen que sirve a modo de boton y que ejecuta la funcion verificar.

verificar.- envia la solicitud al archivo obtenerdatosmysql.php al cual anexa el valor de la variable que pasara via GET.

getHTTPObject.- crea el objeto XMLHttp que necesitamos para usar AJAX.

bien ahora solo falra el archivo que procesara la info de la base de datos:

<?php // *****************************configuracion de la base de datos y conexion de la misma************************************ $config = array(); $config["sql_host"] = "localhost"; $config["sql_user"] = "usuario"; $config["sql_pass"] = "contraseña"; $config["sql_database"] = "base_de_datos"; $sql_link = mysql_connect($config['sql_host'], $config['sql_user'], $config['sql_pass']) or die(mysql_error($sql_link)); mysql_select_db($config['sql_database'],$sql_link); $user = $_GET[param]; if (eregi(" ", $user) == 1){ echo "<label style="display:inline; color:red" mce_style="display:inline; color:red">No se permiten espacios</label>     <br>"; }else{ $q = "SELECT count(id_usuario) FROM `usuarios` WHERE usuario = '{$user}'"; $result = mysql_query($q, $sql_link) or oiError(mysql_error($sql_link)); $snd_tot = mysql_result($result,0,0); mysql_free_result($result); if($user == ""){ echo "<label style="display:inline; color:red" mce_style="display:inline; color:red">Campo vacío</label>     <br>"; }elseif($snd_tot >= 1){ echo "<label style="display:inline; color:red" mce_style="display:inline; color:red">No disponible</label>     <br>"; }else{ echo "<label style="display:inline; color:green" mce_style="display:inline; color:green">disponible</label>     <br>"; } } ?>

El archivo php nos define el mensaje que se mostrará en el div status_usr, por lo que nos da la libertad de poder ser tan creativos como queramos, en este caso verifica que no existan espacios y que no este vacio el campo a verificar.

Eso es todo, cualquier duda en los comentarios, Gracias :)