JavaScript中使用ajax技术验证用户名

学习JavaScript中,希望能解答一下这个问题。

表单输入一个用户名,在输入框失去焦点后,使用ajax技术获取服务器端的“names.xml”文件,查找已经注册过的用户名,如果与当前输入用户名相同,提示用户名已经被注册。
以下是xml文件内容,即已注册用户名。

<?xml version="1.0" encoding="GBK"?>
<reguser>
   <user>
       <name>tom</name>
       <age>18</age>
  </user
  <user>
      <name>jerry</name>
      <age>20</age>
  </user>
</reguser>

平时使用response来获取服务端的响应数据;对于XML数据需要使用responseXML来获取。

客户端获取到的responseXML有着和document类似的获取标签元素对象的方法

从而可以从存在标签的响应数据中获取到被包裹在内的值

<body>
    <!-- XML:用于存储和传输数据,关注数据的内容 HTML:用于展示数据,关注数据的外观 -->
    <button id="btn">发送请求</button>
    <div id="container"></div>
    <script>
        var btn = document.getElementById('btn');
        var container = document.getElementById('container');
        btn.onclick = function() {
            var xhr = new XMLHttpRequest();
            xhr.open('get', '/names.xml');
            xhr.send();
            xhr.onload = function() {
                // xhr.responseXML来获取服务器端返回的XML数据
                var xmlDocument = xhr.responseXML;
 
                // xmlDocument获取到的XML存在同html中类似的方法
                var reguser= xmlDocument.getElementsByTagName('reguser')[0].innerHTML;
                container.innerHTML = reguser;
            }
        }
    </script>
</body>

服务端需要配置响应头的内容类型为xml类型,然后将xml内容响应给客户端


app.get('/names.xml', (req, res) => {
    // 设置响应头告诉客户端返回的是xml数据
    res.header('content-type', '/names.xml');
 
    res.send('<user><name>tom</name><age>18</age></user>');

自己作业自己做