• Ir al contenido
  • Ir a la navegación
  • Ir al buscador
 
Infoudo
ING English
Directorio WAP para móvil, Tablet, iPhone o Smartphone

Centro de Noticias de la Universidad de Oriente

Categorías

 

Inicio  |  Contacto  |  Posts  |  TIENDA PUBLISHOP  |  Sobre nosotros  |  Registro y Planes  |  Pagos  |  Donaciones

Ver Código QR de esta página

Campaña #AyudemosaYuli  |  Campaña #AyudemosaStephany.  |  ¿Interesado(a) en cursos y resolución de ejercicios de materias prácticas? Para más información, contáctenos por: WhatsApp y Telegram: 04266836955. Únete al grupo: SISTEMAS (UDOMO).

[»] **Musica para tu celular


+ Buscar en InfoUDO

 

Validación de la existencia de un nombre de usuario en forma asincrónica (AJAX)

 

domingo julio 10, 2016

Nombre del archivo:menu.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<h1>Menú de opciones</h1>
1 - <a href="creartabla.php">Creación de las tabla</a><br>
2 - <a href="altausuario.html">Alta de usuario</a><br>
</body>
</html>



Comentarios
El objetivo de este concepto es validar en forma asincrónica (mediante ajax) la existencia o no de un
nombre de usuario en el servidor. Esto ayuda a no tener que refrescar la página para verificar si el
nombre de usuario elegido está o no disponible.


Nombre del archivo:creartabla.php


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<?php
$conexion=mysql_connect("localhost","pepe","123456") or
    die("Problemas en la conexion");
mysql_select_db("codigofuenteya",$conexion) or
    die("Problemas en la selección de la base de datos");

$registros=mysql_query("drop table if exists usuarios",$conexion) or
  die("Problemas en el select:".mysql_error());

mysql_query("create table usuarios (
                            nombre varchar(40) primary key,
                            clave varchar(20)
                         )",$conexion) or
  die("Problemas :".mysql_error());


mysql_close($conexion);
?>
<p>Se creó la tabla -
<a href="menu.html">Retornar</a></p>
</body>
</html>



Comentarios
Creamos la tabla usuarios.



Nombre del archivo:altausuario.html


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="funciones.js"></script>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<form action="altausuario.php" method="post">
<fieldset id="formulario1">
<legend>Registro de nuevo usuario</legend>
<p><label for="nombre">Ingrese nombre de usuario:</label>
<input type="text" name="nombre" id="nombre" size="40">
  <span id="resultados"></span> </p>
<p><label for="clave1">Ingrese clave:</label> 
<input type="password" name="clave1" size="20"></p>
<p><label for="clave2">Repita su clave:</label>
<input type="password" name="clave2" size="20"></p>
<p><input type="submit" value="Confirmar"></p>
</fieldset>
</form>
</body>
</html>



Comentarios
Importamos el archivo que tiene las funciones JavaScript:
<script type="text/javascript" src="funciones.js"></script>
Disponemos un elemento span vacío donde se mostrará si está o no disponible el nombre de usuario
seleccionado por el visitante:
<p><label for="nombre">Ingrese nombre de usuario:</label>
<input type="text" name="nombre" id="nombre" size="40">
  <span id="resultados"></span> </p>
Nombre del archivo:estilos.css


input {
  padding:3px;
}
fieldset {
  width: 800px;
  font-family:arial;
  font-weight:bold;
  padding:10px;
}
#formulario1 label {
  float:left;
  width:250px;
  background:#ddd;
  text-align:right;
  margin-right:.5em;
  padding:.25em;
}
#formulario1 p {
  font-size:16px;
  font-weight:normal;
}





Nombre del archivo:funciones.js


addEvent(window,'load',inicializarEventos,false);

function inicializarEventos()
{
  var ref=document.getElementById('nombre');
  addEvent(ref,'blur',enviarNombre,false);
}

var conexion1;
function enviarNombre()
{
  conexion1=crearXMLHttpRequest();
  conexion1.onreadystatechange = procesarEventos;
  conexion1.open('POST','verificarnombre.php', true);
  conexion1.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
  conexion1.send(retornarDatos()); 
}

function retornarDatos()
{
  var cad='';
  var nom=document.getElementById('nombre').value;
  cad='nombre='+encodeURIComponent(nom);
  return cad;
}


function procesarEventos()
{
  var resultados = document.getElementById("resultados");
  if(conexion1.readyState == 4)
  {
    resultados.innerHTML = conexion1.responseText;
    if (conexion1.responseText=='Nombre no disponible')
      resultados.style.backgroundColor='#f00';
    else
      resultados.style.backgroundColor='#ff0';

  }
  else
  {
    resultados.innerHTML = 'Procesando...';
  }
}







//***************************************
//Funciones comunes a todos los problemas
//***************************************
function addEvent(elemento,nomevento,funcion,captura)
{
  if (elemento.attachEvent)
  {
    elemento.attachEvent('on'+nomevento,funcion);
    return true;
  }
  else 
    if (elemento.addEventListener)
    {
      elemento.addEventListener(nomevento,funcion,captura);
      return true;
    }
    else
      return false;
}

function crearXMLHttpRequest()
{
  var xmlHttp=null;
  if (window.ActiveXObject)
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  else
    if (window.XMLHttpRequest)
      xmlHttp = new XMLHttpRequest();
  return xmlHttp;
}




Comentarios
Inmediatamente luego que se cargó por completo la página se ejecuta la función addEvent:
addEvent(window,'load',inicializarEventos,false);

La función inicializarEventos obtiene la referencia del elemento input donde se carga el nombre y
registra el evento blur (se dispara cuando pierde el foco el control):
function inicializarEventos()
{
  var ref=document.getElementById('nombre');
  addEvent(ref,'blur',enviarNombre,false);
}

La función enviarNombre se ejecuta cuando pierde el foco el control donde el visitante ingresa
el nombre de usuario seleccionado, en este momento creamos un objeto XMLHttpRequest y pasamos
mediante el método POS el nombre de usuario que acaba de ingresar:
var conexion1;
function enviarNombre() 
{
  conexion1=crearXMLHttpRequest();
  conexion1.onreadystatechange = procesarEventos;
  conexion1.open('POST','verificarnombre.php', true);
  conexion1.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
  conexion1.send(retornarDatos());  
}

Por último la función procesarEventos actualiza el control span con el resultado
devuelto por el servidor:
function procesarEventos()
{
  var resultados = document.getElementById("resultados");
  if(conexion1.readyState == 4)
  {
    resultados.innerHTML = conexion1.responseText;
	if (conexion1.responseText=='Nombre no disponible')
	  resultados.style.backgroundColor='#f00';
	else
	  resultados.style.backgroundColor='#ff0';

  } 
  else 
  {
    resultados.innerHTML = 'Procesando...';
  }
}
Nombre del archivo:verificarnombre.php


<?php
header('Content-Type: text/html; charset=ISO-8859-1');

$conexion=mysql_connect("localhost","pepe","123456") or
    die("Problemas en la conexion");
mysql_select_db("codigofuenteya",$conexion) or
    die("Problemas en la selección de la base de datos");
$registro=mysql_query("select nombre from usuarios where nombre='$_REQUEST[nombre]'",$conexion) or
  die("Error:".mysql_error());
 if (mysql_fetch_array($registro))
   echo 'Nombre no disponible';
  else
   echo 'Nombre disponible';
mysql_close($conexion);
?>




Comentarios
Devuelve un string: 
'Nombre no disponible' o 'Nombre disponible'
Nombre del archivo:altausuario.php


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<?php

$conexion=mysql_connect("localhost","pepe","123456") or
    die("Problemas en la conexion");
mysql_select_db("codigofuenteya",$conexion) or
    die("Problemas en la selección de la base de datos");

$registro=mysql_query("select nombre from usuarios where nombre='$_REQUEST[nombre]'", $conexion)
         or die("Error:".mysql_error());
if ($reg=mysql_fetch_array($registro))
{
  echo "nombre existente";
}
else
{
  if ($_REQUEST['clave1']==$_REQUEST['clave2'] & strlen($_REQUEST['clave1'])>0)
  {
    mysql_query("insert into usuarios(nombre,clave) values
       ('$_REQUEST[nombre]','$_REQUEST[clave1]')", $conexion)
         or die("Error:".mysql_error());
    echo "Datos registrados";
  }         
  else
    echo "Datos incorrectos";         
}
mysql_close($conexion);
?>
<a href="menu.html">Retornar</a>

</body></html>







— @INFOUDO.OFICIAL

— Síguenos en Facebook@INFOUDO.OFICIAL

Categorías: #Ajax, #


[0] Atrás | Directorio
« Inicio
[»] Las mejores Apps para tu celular
[»] Imágenes Gratis


Comenta o lee lo que otros opinan

COMPÁRTELO:

Indica que te gusta y comparte

Me Gusta :)Facebook Tuiteame :)Twitter .WhatsApp .Telegram . LinkedIn

También te puede interesar:

Pizarra interactiva multiusuario
De JSON a PHP (utilizando la función json_decode)
De JSON a JavaScript (utilizando utilizando la función parse)
De JavaScript a JSON (utilizando la función stringify del objeto JSON)
De PHP a JSON (utilizando la función json_encode)
Recuperar datos del servidor en formato JSON
Qué es JSON?
Encuenta con AJAX
Autocompletar un control de tipo text
Mostrar un tooltip con datos recuperados del servidor en forma asincrónica


« Mostrar el calendario de la fecha actual en php  |  Tutorial C++ »
 
Apps Infoudo
 
Buscador:
Powered by Google:


Web móvil
Imágenes
La Web

 

Síguenos por RSS


Puedes leerlos mediante el navegador Firefox, lectores de noticias en la computadora o el móvil o usando el servicio de Feedburner de Google para recibir las notificaciones por correo electrónico.
RSS - Suscribirse usando Feedburner de Google

email Recibir las nuevas publicaciones de Infoudo por email

Atom


»Ir a URL
.....
Registra Gratis Tu Negocio
....
Sugerir un nuevo sitio WAP

...
¡Bloguea Ya!

..
Registro de Profesionales(Abogados, escritores, doctores, licenciados, ingenieros, etc.)
.
Soporte

Síguenos en las redes sociales

Síguenos en Facebook facebook.com/INFOUDO.OFICIAL Síguenos en Twitter @infoudomon Síguenos en Instagram @infoudooficial Síguenos en Telegram t.me/Infoudooficial
Síguenos en Facebook facebook.com/SergioAlemanFans Síguenos en Twitter @SergioAleman1 Síguenos en Instagram @sergioalemanfans Síguenos en WhatsApp wa.me/qr/Y7Q232VLZPR5O1
Síguenos en Facebook facebook.com/boludooficial Síguenos en Twitter @bolUDOoficial Síguenos en Instagram @boludooficial Síguenos en Telegram t.me/Boludooficial

Móvil: (0426 683 6955) - E-mail: [email protected] - [email protected] - WhatsApp: +58 (0426) 683.69.55


Copyscape
Volver arriba

Protocolo  |  Mapa del Sitio  |  Report Abuse - DMCA  |  Términos y Condiciones  |  Ayuda  |  Privacidad de Datos  |  Política de Cookies  |  Reportar un bug  |  Licencia: CC BY-NC-ND 3.0

Copyright ©2022 Infoudo. Todos los derechos reservados. Diseñado y Desarrollado por Sergio Alemán Mi perfil en GitHub


SUBIR