Código fuente Ya.

Puede ejecutar la o las páginas para probar el concepto inmediatamente.

 

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

El concepto trata sobre:css,php,mysql,dhtml,ajax
Autor:

Retornar

Nombre del archivo:menu.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

Comentarios
Creamos la tabla usuarios.
Nombre del archivo:altausuario.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

Nombre del archivo:funciones.js

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

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

Retornar



Código Fuente Ya - 2015