Quitándome el miedo con Ajax

Bueno hasta el no había necesitado utilizar Ajax (Asynchronous JavaScript And XML) para nada. Tenía una especie de sensación que me recorría todo el cuerpo cada vez que pensaba en ponerme con ello y siempre acababa dejándolo para otro día.

Hoy por fin, por mis santos co***** me ha apetecido y me he puesto al lío.

He comenzado buscando información acerca de su estructura y funcionamiento, algo que ya me había mirado con anterioridad.
Y he generado un código, por lo que he visto, bastante estandar.

Vamos a validar un nick de usuario, que no se encuentre repetido.
El ejemplo es bastante simple, consta de un formulario con un campo de texto que pide un nick y un botón que al pulsarlo comprueba si se encuentra en uso.


Comenzamos creando el objeto necesario para tal menester.
Para ello vamos a desarrollar una función.

/* función constructora del objeto request */
function createXMLHttpRequest() {
if (window.ActiveXObject) { /* si es interné explóre */
return new ActiveXObject("Microsoft.XMLHTTP");
} else if (window.XMLHttpRequest) { /* si no es interné explóre */
return new XMLHttpRequest();
}else{ /* mal comenzamos si no permite crear el objeto */
alert('No existe la posibilidad de AJAX');
}
}

/* generamos la variable por eso de tenerla global */
var xmlHttp;

/* creamos la función que coprobará si el nick ya existe o no */
function comprueba_nick(){
/* generamosla dirección a la que vamos a enviar los datos a validar, en este caso es la página validar.php en la que deberemos tener un código que nos devuelva si es un nick que se encuentra en uso o no. Por ejemplo: 'Nick Disponible' / 'Nick en Uso' */
var nick=document.getElementById("nick").value;
var url = "validar.php?nick="+ escape(nick);
/* creamos el objeto desde nuestra función constructora */
xmlHttp = createXMLHttpRequest();
/* enviamos una llamada a la dirección y le especificamos que queremos la respuesta por GET, también admite por POST y PUT */
xmlHttp.open("GET", url);
/* comprobamos que nos llegan los datos para ello, hemos creado una función llamada Completado */
xmlHttp.onreadystatechange = Completado;
/* ya hemos terminado, cerramos el chiringuito */
xmlHttp.send(null);
}

/* la función Completado nos informa cuando el estado de la petición se ha completado. Existen cinco estados posibles: 0 (sin iniciar), 1 (cargando), 2 (cargado), 3 (en proceso), 4 (completado)
function Completado() {
if (xmlHttp.readyState == 4) {
/* se ha completado, ahora vamos a informar de que el nick es correcto, cargamos un div mismamente con la respuesta, o podemos sustituir el código por un alert(xmlHttp.responseText); */
document.getElementById("cnick").innerHTML=xmlHttp.responseText;
}
}

El formulario html sería algo así, quito los <>
Validando un Nick con AJAX:

input id="nick" name="nick" type="text">
div name="cnick">/div>

input id="manolete" value="Comprobar" onclick="comprueba_nick();" type="button"> El archivo PHP, no lo pongo, pero debería de tener una estructura, para este caso, similar a esto:
/* comprobamos que piden datos
conectamos a la base de datos
buscamos un nick que sea igual
si lo encontramos respondemos con un echo mismamente 'Nick en Uso'
si no lo encontramos respondemos 'Nick Disponible' */


Resumiendo quedaría algo así (quito el <> /script> que me da problemas el blog):

script language="JavaScript" type="text/javascript">/font>

function createXMLHttpRequest() {
if (window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP");
} else if (window.XMLHttpRequest) {
return new XMLHttpRequest();
}else{
alert('No existe la posibilidad de AJAX');
}
}

var xmlHttp;

function comprueba_nick(){

var nick=document.getElementById("nick").value;
var url = "validar.php?nick="+ escape(nick);

xmlHttp = createXMLHttpRequest();

xmlHttp.open("GET", url);

xmlHttp.onreadystatechange = Completado;

xmlHttp.send(null);
}

function Completado() {
if (xmlHttp.readyState == 4) {
document.getElementById("cnick").innerHTML=xmlHttp.responseText;
}
}
/script>

Validando un Nick con AJAX:

input id="nick" name="nick" type="text">
div name="cnick"> /div>

input id="manolete" value="Comprobar" onclick="comprueba_nick();" type="button">

Ahora que sabes todo esto intenta crear una llamada en ajax para insertar el usuario sin recargar la página :D

Bueno, tras aprender los conceptos básicos del tema (aprendo muy deprisa) , me he metido con una librería enfocada a multitud de tareas con javascript, la librería se llama Jquery y no tiene mala pinta. También he oído que existe una tal Prototype, pero de momento me quedo con esta.
Tras leer la Documentación Ajax Jquery he creado un código bastante simple para la parráfada anterior, mejor que lo comprobéis con vuestros propios ojos ... xD
Si no tienes mucha idea mejor que te lo tomes con mucha calma.

/* te descargas la librería, la posicionas donde te salga, yo la he puesto en la misma ubicación del documento. Para incorporala a la página con la siguiente instrucción es más que suficiente (recuerda adapta la ruta a donde la posiciones) */
script src="jquery.js"> /script>

/* no voy a explicar gran cosa ya que en la documentación viene bastante clarito, lástima del inglés xD
El símbolo $ indica la creación de eventos y demás para dicha librería. La nomenclatura utilizada es muy parecida a la de CSS. El método .bind nos permite crear un evento al objeto al que hacemos mención, en este caso, al botón manolete. Indicamos en que tipo de evento va a saltar, 'Click', y que queremos que hacer, yo he creado la función directamente ahí :D
lo que hace esa función/bloque_de_acciones es cargar mediante el evento .load una página, la librería se encarga de crear el objeto y recibir los datos ... etc ... etc ... Por lo que cuando se clicke en el botón html tendremos el mismo resultado que antes, se cargará en la capa cnick la respuesta obtenida*/

$("#manolete").bind('click', function(){ $("#cnick").load("validar.php?nick="+$("#nick").attr("value"))});
/script>

En fin quedaría algo así, fíjate bien ya que he quitado el onClick del botón manolete, puesto que lo hacemos desde Jquery.

title>Validar un usuario con Ajax#
script src="jquery.js">/script>
script>
$("#manolete").bind('click', function(){ $("#cnick").load("validar.php?nick="+$("#nick").attr("value"))});
/script>



Validando un Nick con AJAX:

input id="nick" name="nick" type="text">
div name="cnick">/div>

input id="manolete" value="Comprobar" type="button">