ajax异步核心内容示例:实现页面中异步验证账号是否已存在

时间:2021-05-28 20:52:02

异步,相对于同步,在以前没有异步的时候,当用户填写一个表单必须将必须的信息填完才能提交,然后表单数据到达服务器端检验,如果发现填写有错误的地方,就会告诉用户,你哪没填写,哪格式不对,或者帐户名已存在等等,然后用户就得重新检查表单,再提交,再出错,这样,用户的体验就会极差,所以,就诞生了异步操作。

ajax是处理异步的一种方式,还可以使用iframe。这里介绍一下ajax的使用。这里用java语言写服务器端语言,也可用php等。

以验证账号是否已存在为例:

------------------------------------------------------------------------------------------------------------------------------------------------------------

这是jsp页面代码(可直接用于html):

ajax异步核心内容示例:实现页面中异步验证账号是否已存在


核心是这三句:

var request = new XMLHttpRequest();

request.open(method,url,async);//async 默认为true,表示使用异步

//request.setHeader("Content-type",application/x-www-form-urlencoded);//若method是post则需要这句,否则会发生错误

request.send(String parameter); //若method为get,参数可为空


在ie5和ie6中可能不支持直接创建XMLHttpRequest对象,可加入一下if语句

ajax异步核心内容示例:实现页面中异步验证账号是否已存在

然后在account输入框中添加一个焦点移出事件(光标从该区域中移开)触发上面的hasRegister函数

ajax异步核心内容示例:实现页面中异步验证账号是否已存在

就是后边的   onblur="accountFormat()"其中hasRegister()就在该函数里面,这样做的目的是先在客户机中使用正则表达式检验账号格式,如果正确再调用hasRegister函数,减轻服务器负担。

ajax异步核心内容示例:实现页面中异步验证账号是否已存在

这里我建议大家直接将account参数传到hasRegister中,减少客户机的负担。

------------------------------------------------------------------------------------------------------------------------------------------------------------------

这是服务器端代码:

ajax异步核心内容示例:实现页面中异步验证账号是否已存在

当然,别忘了在web.xml中配置

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------

运行结果:

ajax异步核心内容示例:实现页面中异步验证账号是否已存在

ajax异步核心内容示例:实现页面中异步验证账号是否已存在

还有小清新登陆uiajax异步核心内容示例:实现页面中异步验证账号是否已存在

ajax异步核心内容示例:实现页面中异步验证账号是否已存在

参考http://blog.csdn.net/rushkid02/article/details/7515058 侵删ajax异步核心内容示例:实现页面中异步验证账号是否已存在