Solució exercici-nom

De wikiserver
Dreceres ràpides: navegació, cerca
<!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=iso-8859-1" />
        <title>Ejercicio 13 - Comprobar disponibilidad del login</title>

        <script type="text/javascript">
            var READY_STATE_COMPLETE = 4;
            var peticion_http = null;

            function inicializa_xhr() {
                if (window.XMLHttpRequest) {
                    return new XMLHttpRequest();
                } else if (window.ActiveXObject) {
                    return new ActiveXObject("Microsoft.XMLHTTP");
                }
            }

            function comprobar() {
                var login = document.getElementById("login").value;
                peticion_http = inicializa_xhr();
                if (peticion_http) {
                    peticion_http.onreadystatechange = procesaRespuesta;
                    peticion_http.open("POST", "comprobardisponibilidad.php", true);

                    peticion_http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                    peticion_http.send("login=" + login + "&nocache=" + Math.random());
                }
            }

            function procesaRespuesta() {
                if (peticion_http.readyState == READY_STATE_COMPLETE) {
                    if (peticion_http.status == 200) {
                        var login = document.getElementById("login").value;
                        if (peticion_http.responseText == "si") {
                            document.getElementById("disponibilidad").innerHTML = "El nombre elegido [" + login + "] está disponible";
                        }
                        else {
                            document.getElementById("disponibilidad").innerHTML = "NO está disponible el nombre elegido [" + login + "]";
                        }
                    }
                }
            }

            window.onload = function () {
                document.getElementById("comprobar").onclick = comprobar;
            }

        </script>
    </head>

    <body>
        <h1>Comprobar disponibilidad del login</h1>
        <form>
            <label for="login">Nombre de usuario:</label>
            <input type="text" name="login" id="login" />
            <a id="comprobar" href="#">Comprobar disponibilidad...</a>
        </form>

        <div id="disponibilidad"></div>

    </body>
</html>


fitxer comprobardisponibilidad.php

<?php
// Generar un número aleatorio
srand((double)microtime()*1000000);
$numeroAleatorio = rand(0, 10);

// Simular un falso retardo por la red y el servidor (entre 0 y 3 segundos)
sleep($numeroAleatorio % 3);

// El script devuelve alatoriamente 'si' o 'no' para que la aplicación
// cliente pueda comprobar los dos casos
echo ($numeroAleatorio % 2 == 0)? "si" : "no";
?>