Ajax 用户名验证是否存在

 更新时间:2008年12月27日 23:34:36   作者:  
做一个表单验证里面最简单的例子,检查用户名是否存在,使用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函数在已经存在的用户名搜索当前用户输入的名字,判断是否已经存在。

相关文章

  • 你的jquery ajax无效和你的jquery引入路径有关

    你的jquery ajax无效和你的jquery引入路径有关

    当你发现你的jquery ajax无效的时候,不妨使用 fire bug调试一下,这时你会发现,提示"$"无效,为什么会有这种提示呢?可能是你引入jquery.js的路径有问题
    2013-06-06
  • 利用iframe实现ajax跨域通信的实现原理(图解)

    利用iframe实现ajax跨域通信的实现原理(图解)

    一般情况下都是用在同一域下的ajax请求;但是如果请求是发生在不同的域下,请求就无法执行,并且会抛出异常提示不允许跨域请求,接下来介绍利用iframe实现ajax跨域通信感兴趣的朋友可以了解下,或许对你学习ajax跨域有所帮助
    2013-02-02
  • ajax跨域请求js拒绝访问的解决方法

    ajax跨域请求js拒绝访问的解决方法

    这篇文章主要介绍了ajax跨域请求js拒绝访问的解决方法,需要的朋友可以参考下
    2014-05-05
  • ajax实现修改功能

    ajax实现修改功能

    本文主要介绍了ajax实现修改功能的相关资料,具有很好的参考价值。下面跟着小编一起来看下吧
    2017-04-04
  • 一个Ajax类

    一个Ajax类

    一个Ajax类...
    2006-12-12
  • Ajax核心XMLHTTP组件资料

    Ajax核心XMLHTTP组件资料

    javascript下常用的xmlhttp组件和相关技术资料小结,方便了解ajax原理
    2008-06-06
  • Ajax请求成功后return无法接收到返回值的问题及解决方案

    Ajax请求成功后return无法接收到返回值的问题及解决方案

    项目中需要频繁的用到ajax请求,所以就想用一个方法将整个请求封装起来,直接调用方法传递参数,然后返回请求结果就可以了,这篇文章主要介绍了ajax请求成功后return无法接收到返回值,需要的朋友可以参考下
    2023-10-10
  • laravel ajax curd 搜索登录判断功能的实现

    laravel ajax curd 搜索登录判断功能的实现

    这篇文章主要介绍了laravel ajax curd 搜索登录判断功能的实现,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-04-04
  • 谈谈你对aja的理解(一、二)

    谈谈你对aja的理解(一、二)

    Ajax是Asynchronous Javascript And XML的缩写,其作用通过Ajax可以使用Javascript语句来调用XMLHttpRequest对象,直接与服务器进行通讯,可以在不重载页面的情况下与服务器交换数据。
    2015-10-10
  • MUi框架ajax请求WebService接口实例

    MUi框架ajax请求WebService接口实例

    下面小编就为大家分享一篇MUi框架ajax请求WebService接口实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-01-01

最新评论