学习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>');
自己作业自己做