contador de usuarios inscritos con ajax

lexus · #1 (**permalink**) 22/09/2011, 09:54

hola.

me gustaria tener en mi comunidad social.. un contador de usuarios registrados..
acutalmente estoy teniendo mas o menos 5 registros por cada 10 segundos en el portal
y me gustaria que se mostrara un contador de usuarios registrados cambiando constantemente, tal y como lo hace www.badoo.com en su pagina principal.

me imagino que es con ajax y con lenguaje de servidor para hacer la consulta
uso asp y mysql, alguein sabe como hacer esto ?

gracias.

javiDP · #2 (**permalink**) 22/09/2011, 15:39

Simplemente defines la funcion ajax con la url en la que el metodo del servidor ASP consulta a la base de datos y este te devuelve como respuesta el numero, y luego ese numero lo pones en el contador que tengas.

Luego basta con hacer un setTimeOut(funcionAjax, tiempo) dentro del success para que se repita cada x segundos.

Un saludo!

lexus · #3 (**permalink**) 22/09/2011, 15:46

hola gracias por la respuesta,
la verdad no tengo ni idea de ajax.
podrias darme un ejemplo. de un ajax qeu se refresque constantemente o algun codigo que no genere sobrecarga en mi servidor .
solo para eso

gracias.

javiDP · #4 (**permalink**) 22/09/2011, 17:36

Hay muchos tutoriales de ajax por la red, te recomiendo que te leas alguno.

Igualmente te dejo un ejemplo adaptado a tu caso:

Código Javascript:

Ver original<script type="text/javascript">
function peticionAjax(urlPeticion) {
    var res = '';
    var ajax = false;
    try {
        ajax = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
        try {
            ajax = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (E) {
            ajax = false;
        }
    }
    if (!ajax && typeof XMLHttpRequest != 'undefined') {
        ajax = new XMLHttpRequest();
    }
    var url = urlPeticion;
    ajax.open("POST", url, false);
    ajax.setRequestHeader('Content-Type',
            'application/x-www-form-urlencoded; charset=UTF-8');
    ajax.onreadystatechange = function() {
        if (ajax.readyState == 4) {
            var res = ajax.responseText;
            var xhr_data = res.substring(res.indexOf('<etiquetaElementoXML>'), res.indexOf('</etiquetaElementoXML>'));
            xhr_data = xhr_data.substring(xhr_data.indexOf('>'), xhr_data.indexOf('</'));
            if (!isNaN(xhr_data)) {
                document.getElementById('idContador').value=xhr_data;
            }
            setTimeout( function() { peticionAjax(url);}, 5000);
        }
    }
    ajax.send();
}
setTimeout(function() { peticionAjax(urlPeticion); }, 1000);
</script>

En el parametro urlPeticion debes poner la direccion donde vas a llamar al servidor para que te responda con el numero de registros que hay.

etiquetaElementoXML es la etiqueta donde vas a enmascarar el numero de registros dentro del xml que devuelve el servidor.

idContador es el id de por ejemplo un cuadro de texto donde vas a mostrar el numero de registros.

La peticion hace lo siguiente:

Realiza la peticion, coge la etiqueta xml donde esta el numero de registros y luego el numero dentro de esta etiqueta, comprueba que es un numero valido y lo pone en idContador. Luego hace una peticion nueva a los 5 segundos (5000 milisegundos). Asi hasta que el cliente cierre o cambie la pagina.

El xml que responde el servidor podria ser asi:
<?xml version="1.0"?>
<numeroRegistros>
<etiquetaElementoXML>1000</etiquetaElementoXML>
</numeroRegistros>

Basicamente no necesitas mas que modificar la url del servidor, como quieres llamar a la etiqueta XML y el id del campo donde vayas a mostrar el numero de registros.

Depende de donde coloques el script, quizas necesites añadirlo como funcion al onLoad de tu body, o bien al final de la pagina.

Un saludo!

lexus · #5 (**permalink**) 23/09/2011, 06:43

excelente muchisimas gracias por tu colaboracion,
voy a ponerlo en practica,
me haz sido de gran ayuda con tu ejemplo.

lexus · #6 (**permalink**) 23/09/2011, 07:17

hola intente de esta forma pero no logro ver nada en pantalla que sera qeu estoy haciendo mal..
esta pagina la llamo principal.asp

Código HTML:

Ver original<html xmlns="[URL]http://www.w3.org/1999/xhtml[/URL]">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<script type="text/javascript">
function peticionAjax(urlPeticion) {
var res = '';
var ajax = false;
try {
ajax = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
ajax = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
ajax = false;
}
}
if (!ajax && typeof XMLHttpRequest != 'undefined') {
ajax = new XMLHttpRequest();
}
var url = urlPeticion;
ajax.open("POST", url, false);
ajax.setRequestHeader('Content-Type',
'application/x-www-form-urlencoded; charset=UTF-8');
ajax.onreadystatechange = function() {
if (ajax.readyState == 4) {
var res = ajax.responseText;
var xhr_data = res.substring(res.indexOf('<etiquetaElementoXML>'), res.indexOf('</etiquetaElementoXML>'));
xhr_data = xhr_data.substring(xhr_data.indexOf('>'), xhr_data.indexOf('</'));
if (!isNaN(xhr_data)) {
document.getElementById('idContador').value=xhr_data;
}
setTimeout( function() { peticionAjax(url);}, 5000);
}
}
ajax.send();
}
setTimeout(function() { peticionAjax("contador.asp?nocache=<%=now()%>"); }, 5000);
</script>
</head>
<body><div id="idContador"></div>
</body>
</html>

esta pagina la llamo contador.asp

Código HTML:

Ver original<?xml version="1.0"?>
<numeroRegistros>
<etiquetaElementoXML>6</etiquetaElementoXML>
</numeroRegistros>

javiDP · #7 (**permalink**) 23/09/2011, 17:03

No a ver, principal.asp no es el xml.

En principal.asp debes tratar la peticion que se ha hecho desde ajax, devolviendole como resultado el xml (una cadena de texto con el xml y los atributos de xml de la respuesta por ejemplo)

La cosa iria asi:

Cliente abre la pagina->Se ejecuta el AJAX->manda la peticion a principal.asp
->principal.asp consulta la base de datos, genera el xml y pone en los atributos de la respuesta que es un xml->devuelve como respuesta a la peticion el xml->AJAX trata el xml de respuesta, introduce el valor en la pagina (donde tengas lo que va mostrar la cantidad de usuarios registrados) y a los 5 segundos vuelve a mandar otra peticion a principal.asp (asi infinitamente hasta que se cierre/cambie la pagina que contiene el AJAX).

Si no tienes conocimientos en AJAX, te recomiendo que leas tutoriales para familiarizarte y hacer pequeños ejemplos practicos antes de hacer todo esto.

Un saludo!