表单输入一个用户名,在输入框失去焦点后,使用ajax技术获取服务器端的“names.xml”文件,查找已经注册过的用户名,如果与当前输入用户名相同,提示用户名已经被注册。
时间: 2024-05-05 19:20:49 浏览: 9
好的,以下是实现该功能的代码示例:
HTML部分:
```html
<form>
<label for="username">用户名:</label>
<input type="text" id="username" name="username">
<span id="username_check"></span>
</form>
```
JavaScript部分:
```javascript
// 获取用户名输入框
var input_username = document.getElementById('username');
// 获取提示信息元素
var username_check = document.getElementById('username_check');
// 给用户名输入框绑定失去焦点事件
input_username.addEventListener('blur', function() {
// 获取当前输入的用户名
var username = input_username.value.trim();
// 创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
// 发送GET请求,获取names.xml文件
xhr.open('GET', 'names.xml', true);
xhr.send();
// 处理响应结果
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 获取XML文档对象
var xmlDoc = xhr.responseXML;
// 获取所有的<name>元素
var names = xmlDoc.getElementsByTagName('name');
// 遍历<name>元素,查找是否有与当前输入用户名相同的
for (var i = 0; i < names.length; i++) {
if (names[i].childNodes[0].nodeValue === username) {
// 如果找到了相同的用户名,提示已经被注册
username_check.innerHTML = '该用户名已经被注册!';
return;
}
}
// 如果没有找到相同的用户名,提示可以使用
username_check.innerHTML = '该用户名可以使用!';
}
};
});
```
在上面的代码中,我们给用户名输入框绑定了失去焦点事件,当输入框失去焦点时,会通过ajax技术发送GET请求,获取服务器端的"names.xml"文件。然后在响应结果中,遍历XML文档中的所有<name>元素,查找是否有与当前输入用户名相同的。如果找到了相同的用户名,就提示已经被注册;否则就提示可以使用。