• 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: Teléfono: +58 (412) - 8226575. WhatsApp y Telegram: +58 (426) - 6836955 o escriba al correo: [email protected]. Únete al grupo: SISTEMAS (UDOMO).

[»] **Musica para tu celular

WEB TRANSLATOR

LINK for English Language

Use this link for translate into English


+ Buscar en InfoUDO

 

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

Tweet
 

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
Apps Infoudo
Apps Infoudo ¡Descarga el icono directo en el menú de tu equipo!
[»] 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

Ver Todas Las Páginas Relacionadas

« 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/tuinfou Síguenos en Twitter @infoudomonagas
Síguenos en WhatsApp INFO UDO Síguenos en YouTube youtube.com/@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 Tiktok @sergioalemanoficial Síguenos en Tiktok @sergioalemanfans
Síguenos en Telegram t.me/SergioAlemanOficial Síguenos en YouTube youtube.com/@sergioaleman
Síguenos en Facebook facebook.com/boludooficial Síguenos en Twitter @bolUDOoficial Síguenos en Instagram @boludooficial Síguenos en Telegram t.me/Boludooficial
Síguenos en WhatsApp BolUDOoficial Síguenos en YouTube youtube.com/@boludo.oficial

Mis cuentas sociales

FB
Twitter
Pinterest
Instagram
Canales RSS con las últimas publicaciones
Otras  |  Linktree

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


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 ©2023 Infoudo. Todos los derechos reservados. Diseñado, desarrollado, administrado y mantenido por Sergio Alemán Mi perfil en GitHub


SUBIR