Autor Tema: Ajax con respuesta XML comprobar en un archivo si dato login usuario existe (Leído 2974 veces)

VictorDevelop · « **en:** 16 de Junio 2017, 08:55 »

Buenos dias. Tengo una pagina en la que se introdoce un nombre y debe responder si es nombre esta disponible y en caso de no estarlo mostrar unas sugerencias,y aqui es donde falla, que estan en un fichero xml.

Esta es la pagina html:

Código: [Seleccionar]

<!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 14 - Comprobar disponibilidad del login y mostrar alternativas</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", "compruebaDisponibilidadEjer14.xml",
            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;
                var documento_xml = peticion_http.responseXML;
                var nombresUsados = documento_xml.getElementsByTagName("login");
                var raiz = documento_xml.getElementsByTagName("respuesta")[0];
                var disponible = raiz.getElementsByTagName("disponible")[0].firstChild.nodeValue;
                if (disponible == "si") {
                    document.getElementById("disponibilidad").innerHTML = "El nombre elegido [" + login + "] está disponible";
                }
                else {
                    var mensaje = "NO está disponible el nombre elegido [" + login + "]. Puedes probar con las siguientes alternativas.";
                    var alternativas = raiz.getElementsByTagName("alternativas")[0];
                    var logins = alternativas.getElementsByTagName("login");
                    mensaje += "<ul>";
                    for (var i = 0; i < logins.length; i++) {
                        mensaje += "<li><a href=\"#\"onclick=\"selecciona('" + logins[i].firstChild.nodeValue + "'); return false\">" + logins[i].firstChild.nodeValue + "<\/a><\/li>";
                    }
                    mensaje += "<\/ul>";
                    document.getElementById("disponibilidad").innerHTML = mensaje;
                }
            }
        }
    }
        function selecciona(login) {
            var cuadroLogin = document.getElementById("login");
            cuadroLogin.value = login;
        }
 
        window.onload = function () {
            document.getElementById("comprobar").onclick = comprobar;
        }
</script>
</head>
<body>
    <h1>Comprobar disponibilidad del login y mostrar alternativas</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>

Y este el fichero XML

Código: [Seleccionar]

?xml version="1.0" encoding="utf-8" ?>
 <xml>
  <login>Paco</login>
  <respuesta>
    <disponible>si</disponible>
  </respuesta>
  <respuesta>
    <disponible>no</disponible>
    <alternativas>
      <login>Juan</login>
      <login>Pedro</login>
      <login>Jorge</login>
    </alternativas>
  </respuesta>
</xml>

Ogramar · « **Respuesta #1 en:** 27 de Junio 2017, 19:45 »

Buenas VictorDevelop

Puede haber varios problemas, el primero de ellos indica

Error de lectura XML: mal formado
Número de línea 1, columna 1: compruebaDisponibilidadEjer14.xml:1:1
TypeError: documento_xml is null[Saber más]

ya que en la línea ?xml version="1.0" encoding="utf-8" ?>

falta el < de apertura

Además la construcción del documento html no parece ser correcta, tal y como lo tienes definido no parece posible que se distinga entre cuándo un nombre está disponible y cuándo no lo está

Al hacer

var disponible = raiz.getElementsByTagName("disponible")[0].firstChild.nodeValue;

if (disponible == "si") {

Lo que estás haciendo es extraer el contenido de la primera etiqueta <disponible>, y como este contenido es si, te responde siempre que está disponible

En este curso tienes explicaciones con ejemplos quizás lo preferible es repasar todo esto primero para repasar conceptos y lógica: http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=83&Itemid=212

Salu2

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias: