Ajax 用户名验证是否存在

106088550

106088550

2016-02-19 11:32

给自己一点时间接受自己,爱自己,趁着下午茶的时间来学习图老师推荐的Ajax 用户名验证是否存在,过去的都会过去,迎接崭新的开始,释放更美好的自己。
客户端收集表单信息。
使用XMLHttpRequest对象提交到服务器。
服务器完成验证的逻辑,返回结果信息。
浏览器端根据服务器返回的信息对用户做出一定的提示。
不过由于我的空间不支持任何服务器段语言,所以把本应在服务器的逻辑搬到了浏览器,由JavaScript来做,服务器只负责提供一个用户名的列表。最后的效果如下,试着输入test,cainiao8这些用户名,都会显示已注册。
JavaScript代码分析
首先,当文档载入完毕的时候,给表格设置change事件的响应函数ajaxValidate,代码如下:
程序代码
addEventSimple(window,'load',function(){
var test = document.getElementById('username');
addEventSimple(test,'change',ajaxValidate);
}
这样,当用户名文本框内的值改变之后,就会调用ajaxValidate函数,其代码如下:
程序代码
function ajaxValidate(){
var options = {
url:'ajax/ajaxUsernames.xml',
listener:callback,
method:'GET'
}
var request = createRequest(options);
request.send(null);
}
它会使用之前介绍的createRequest函数初始化一个XMLHttpRequest对象,并且将它发送到服务器,请求ajaxUsernames.xml文件。
最后就是callback函数了:
程序代码
代码如下:

function callback(){
var xmlDoc = this.responseXML;
var root = xmlDoc.getElementsByTagName('root')[0];
var nodes = root.getElementsByTagName("username");
var currentNode = null;
var username = document.getElementById('username').value;
for(var i = 0; i nodes.length; i++) {
currentNode = nodes[i];
if(username == currentNode.childNodes[0].nodeValue){
document.getElementById('test').innerHTML = '对不起!'+username+'已经被注册。';
return;
}
}
document.getElementById('test').innerHTML = '用户名' + username +'可以使用!';
}

callback函数在已经存在的用户名搜索当前用户输入的名字,判断是否已经存在。
展开更多 50%)
分享

猜你喜欢

Ajax 用户名验证是否存在

Web开发
Ajax 用户名验证是否存在

Ajax表单验证用户名是否存在

Web开发
Ajax表单验证用户名是否存在

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

ajax实现无刷新验证用户名是否存在

Web开发
ajax实现无刷新验证用户名是否存在

Ajax——异步检查用户名是否存在示例

Web开发
Ajax——异步检查用户名是否存在示例

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

Ajax简单应用,检测用户名是否存在

Web开发
Ajax简单应用,检测用户名是否存在

jquery ajax 检测用户注册时用户名是否存在

Web开发
jquery ajax 检测用户注册时用户名是否存在

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

javascript判断中文的正则

javascript判断中文的正则

IOS手势操作(拖动、捏合、旋转、点按、长按、轻扫、自定义)

IOS手势操作(拖动、捏合、旋转、点按、长按、轻扫、自定义)
下拉加载更多内容 ↓