Duda nombre usuario AJAX
Publicado por Ignacio (1 intervención) el 16/10/2011 12:18:39
Hola,
Estoy haciendo un formulario para dar de alta a un nuevo usuario. Y a la hora de escoger el nombre de usuario quiero utilizar AJAX, he creado un script que simplemente realiza una consulta sobre la base de datos para comrpobar si esta disponible o no. Si está disponible devuelve un si mediante un echo y si es no pues devuelve un no, luego es recogido y mediante un if(peticon_http.responseText== "si") realizo la comprobación. Pero cuando esta libre no me muestra que lo está, aunque el valor que devuelve es un "si"(ya que he puesto un alert para comprobar que devolvía lo que esperaba)...Y ya estoy medio loco porque no consigo saber cual es mi error.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
</head>
<script type="text/javascript"> /*PARA AJAX*/
var READY_STATE_COMPLETE=4;
var peticion_http = null;
window.onload = function(){
document.getElementById('comprobar').onclick = valida;
}
function inicializa_xhr() {
if(window.XMLHttpRequest) {
return new XMLHttpRequest();
}
else if(window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP");
}
}
function crea_query_string() {
var login = document.getElementById("login");
return "login=" + encodeURIComponent(login.value);
}
function valida() {
peticion_http = inicializa_xhr();
if(peticion_http) {
peticion_http.onreadystatechange = procesaRespuesta;
peticion_http.open("POST", "http://localhost:8888/pruebas/comprobacion_ajax.php", true);
peticion_http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
var query_string = crea_query_string();
peticion_http.send(query_string);
}
}
function procesaRespuesta() {
if(peticion_http.readyState == READY_STATE_COMPLETE) {
if(peticion_http.status == 200) {
var login = document.getElementById("login").value;
//document.getElementById("disponibilidad").innerHTML = peticion_http.responseText;
var dispo=document.getElementById("disponibilidad");
if(peticion_http.responseText == "si"){
dispo.innerHTML = "El nombre de usuario " +login+ "está disponible";
dispo.style.backgroundColor = '#FFFF99';
setTimeout(limpiaDisponibilidad, 300);
}
else{
dispo.innerHTML = "El nombre de usuario " +login+ " no está disponible"
dispo.style.backgroundColor = '#FFFF99';
setTimeout(limpiaDisponibilidad, 300);
}
alert(peticion_http.responseText);
}
}
}
function limpiaDisponibilidad(){
var dispo = document.getElementById('disponibilidad');
dispo.style.backgroundColor = '#FAFAFA';
}
</script>
<body>
<form name="registro" action="Autenticacion_nuevoUsuario.php" enctype="multipart/form-data" method="post" onsubmit="return jcap();">
<table>
<tr>
<td>
<label for="nombre">Login:</label>
</td>
<td colspan="2">
<INPUT type="text" name="login" id="login" maxlength="50">
<!--<span class="requerido">Este valor es requerido.</span>-->
<a id="comprobar" href="#">Disponibilidad...</a>
</td>
</tr>
<tr>
<td colspan="2">
<div id="disponibilidad"></div>
</td>
</tr>
</table>
</form>
</body>
</html>
comprobacion_ajax.php
<?php
/*
* To change this template, choose Tools | Templates
* and open the template in the editor.
*
*
*/
require_once('conexion.php');//esto es para conectar a la B.D.
require_once('funciones.php');
$nombre = $_POST['login'];
//$disponible;
$conexion = conectar_db();
$resultado=mysql_query("select password from usuarios where nombre = '$nombre'",$conexion);
$numeroFilas=mysql_num_rows($resultado);
if($numeroFilas){
//$disponible="no";
echo "no";
}
else{
// $disponible="si";
echo "si";
}
//echo "$disponible";
?>
Estoy haciendo un formulario para dar de alta a un nuevo usuario. Y a la hora de escoger el nombre de usuario quiero utilizar AJAX, he creado un script que simplemente realiza una consulta sobre la base de datos para comrpobar si esta disponible o no. Si está disponible devuelve un si mediante un echo y si es no pues devuelve un no, luego es recogido y mediante un if(peticon_http.responseText== "si") realizo la comprobación. Pero cuando esta libre no me muestra que lo está, aunque el valor que devuelve es un "si"(ya que he puesto un alert para comprobar que devolvía lo que esperaba)...Y ya estoy medio loco porque no consigo saber cual es mi error.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
</head>
<script type="text/javascript"> /*PARA AJAX*/
var READY_STATE_COMPLETE=4;
var peticion_http = null;
window.onload = function(){
document.getElementById('comprobar').onclick = valida;
}
function inicializa_xhr() {
if(window.XMLHttpRequest) {
return new XMLHttpRequest();
}
else if(window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP");
}
}
function crea_query_string() {
var login = document.getElementById("login");
return "login=" + encodeURIComponent(login.value);
}
function valida() {
peticion_http = inicializa_xhr();
if(peticion_http) {
peticion_http.onreadystatechange = procesaRespuesta;
peticion_http.open("POST", "http://localhost:8888/pruebas/comprobacion_ajax.php", true);
peticion_http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
var query_string = crea_query_string();
peticion_http.send(query_string);
}
}
function procesaRespuesta() {
if(peticion_http.readyState == READY_STATE_COMPLETE) {
if(peticion_http.status == 200) {
var login = document.getElementById("login").value;
//document.getElementById("disponibilidad").innerHTML = peticion_http.responseText;
var dispo=document.getElementById("disponibilidad");
if(peticion_http.responseText == "si"){
dispo.innerHTML = "El nombre de usuario " +login+ "está disponible";
dispo.style.backgroundColor = '#FFFF99';
setTimeout(limpiaDisponibilidad, 300);
}
else{
dispo.innerHTML = "El nombre de usuario " +login+ " no está disponible"
dispo.style.backgroundColor = '#FFFF99';
setTimeout(limpiaDisponibilidad, 300);
}
alert(peticion_http.responseText);
}
}
}
function limpiaDisponibilidad(){
var dispo = document.getElementById('disponibilidad');
dispo.style.backgroundColor = '#FAFAFA';
}
</script>
<body>
<form name="registro" action="Autenticacion_nuevoUsuario.php" enctype="multipart/form-data" method="post" onsubmit="return jcap();">
<table>
<tr>
<td>
<label for="nombre">Login:</label>
</td>
<td colspan="2">
<INPUT type="text" name="login" id="login" maxlength="50">
<!--<span class="requerido">Este valor es requerido.</span>-->
<a id="comprobar" href="#">Disponibilidad...</a>
</td>
</tr>
<tr>
<td colspan="2">
<div id="disponibilidad"></div>
</td>
</tr>
</table>
</form>
</body>
</html>
comprobacion_ajax.php
<?php
/*
* To change this template, choose Tools | Templates
* and open the template in the editor.
*
*
*/
require_once('conexion.php');//esto es para conectar a la B.D.
require_once('funciones.php');
$nombre = $_POST['login'];
//$disponible;
$conexion = conectar_db();
$resultado=mysql_query("select password from usuarios where nombre = '$nombre'",$conexion);
$numeroFilas=mysql_num_rows($resultado);
if($numeroFilas){
//$disponible="no";
echo "no";
}
else{
// $disponible="si";
echo "si";
}
//echo "$disponible";
?>
Valora esta pregunta
0