Bueno les comento que hace poco empece con ajax y me gusta bastante. Asi que voy a tratar de ayudarles un poco a los que no entienden mucho.
La función de este script es que mientras el usuario completa los datos de un formulario, por ej registrar un usuario, ajax le comunique si el usuario está registrado o no sin tener que recargar la página.
Aca va el código:
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax para phperos</title>
<script language="javascript" type="text/javascript">
// creamos la funcion getXMLHTTPRequest que identifica al navegador y crea el objeto para la coneccion con ajax
function getXMLHTTPRequest() {
try {
req = new XMLHttpRequest();
} catch(err1) {
try {
req = new ActiveXObject("Msxml2.XMLHTTP");
} catch (err2) {
try {
req = new ActiveXObject("Microsoft.XMLHTTP");
} catch (err3) {
req = false;
}
}
}
return req;
}
//almacenamos la funcion getXMLHTTPRequest en la variable http para usarla en todo el script ajax
var http = getXMLHTTPRequest();
//la funcion enviarHTTP envia los datos al servidor
function enviarHTTP () {
var valor = document.getElementById("usuario").value; // es el valor del campo de texto
var rand = parseInt(Math.random()*99999999); //se usa para que la pagina no se cargue del cache del explorador, colocando un número aleatorio en la url nunca se usará la del cache
var query= "usuario=" + valor + "&rand=" + rand;
http.open ("GET", "ajax.php?" + query, true); // abrimos la coneccion indicando el método (GET), la url y si queremos una peticion asincrónica
http.onreadystatechange = respuestaHTTP; //cuando la respuesta del servidor cambie de estado llamamos a la funcion que creamos abajo que devuelve los datos del servidor
http.send(null); // se envia la petición
}
//cuando la respuesta del servidor este completa esta funcion muestra los datos devueltosservidor
function respuestaHTTP () {
if (http.readyState == 4) { // el numero 4 significa que la peticion ha sido completada
if (http.status == 200) { // el 200 significa que la petición fue completada correctamente
var respuesta_php = http.responseText; //almacenamos la respuesta del servidor en una variable
document.getElementById("div_usuario").innerHTML = respuesta_php; //insertamos el contenido que nos devolvió el servidor en el <div> de HTML
}
else
//si hay algun error lo muestra y detiene la petición
alert("Ha habido un problema al acceder al servidor: " + http.statusText);
setTimeout('Proceso()', 1000);
}
if (http.readyState < 4) {
//esto es para que muestre un mensaje mientras se realiza el proceso
document.getElementById("div_usuario").innerHTML = 'Cargando...';
}
}
</script>
</head>
<body>
<!-- La funcion ajax se activa con el evento onblur //-->
<input name="usuario" type="text" id="usuario" onblur="enviarHTTP ()" />
<!-- En esta capa sale la respuesta devuelta por ajax //-->
<div id="div_usuario" />
</body>
</html>
ajax.php<?php
//Aca vamos a "simular" una base de datos con un array
// la variable $_GET[usuario] es la que enviamos mediante ajax
// la respuesta que de php es la que se mostrará en la pagina html
$user=strtolower($_GET[usuario]);
$usuarios= array("martin","pepe","user","phperos","etc");
if(in_array($user,$usuarios)) {
echo "<font color=\"red\">El usuario <b>". $user ."</b> esta ocupado</font>";
}
elseif ($user=='') {
echo "";
}
else {
echo "<font color=\"green\">El usuario <b>". $user ."</b> esta disponible.</font>";
}
?>
Codigo base (by G2K): http://www.phperos.net/foro/index.php/topic,1687.msg13949.html#msg13949Generalmente en todo script AJAX estan estas 3 funciones:
function getXMLHTTPRequestEsta funcion no es necesario escribirla cada vez que realizamos un script, ya que se usa para todas las peticiones Ajax (por lo meno que yo sepa hasta ahora). Generalemente la mayoria de los progrmadores le ponen ese nombre, para respetar una especie de "norma".
function enviarHTTPEsta funcion si es más "personal" ya que cada uno la llama como quiere. Cumple la funcion de comenzar la comunicación con el servidor, enviar la petición, y llamar a la siguiente función que es la que muestra el resultado.
function respuestaHTTPSi la petición se realizo correctamente, recibe los datos del servidor y los muestra en donde queramos.
Con el tema del archivo
ajax.php, yo cree en él un array (para no estar con tantos líos y puedan ver el script con sólo copiar los archivos en el servidor) donde supuestamente sería la base de datos. Se comprueba si el texto introducido en el campo se encuentra en ese array.
En este tutorial mostre la respuesta de ajax devuelta como texto (
responseText), osea, la respuesta del servidor es dada como texto. La otra opción es usar
responceXML, la cual se utiliza cuando se realizan varias consultas simultaneas, para que la respuesta del servidor sea mas ordenada (con XML). Dentro de poco voy a tratar de hacer un tutorial sobre eso.
Bueno eso es todo, espero que halla servido, y que hallan entendido. Cualquier consulta con el script pregunten
Un saludo.
