常见的用户注册是用户输入用户名,后台程序检测数据库中用户名是否重复而做出注册的成功与失败之提示(当用户注册重名时将返回重新注册),或者稍微人性化一点就是在用户名文本框后添加一个检测按钮,让用户检测后再做注册。
以上操作,对于用户体验方面来说是比较“差劲”的,一个很好的用户体验就是:当用户输入完注册用户名后,Web系统应能即时检查并即时显示,并在检查和显示的同时不影响当前页面的操作。这也就是“异步获取数据”的要求,而这正是AJAX的强项
比如如下的示例就能展现AJAX的该功能:
http://www.cnbruce.com/test/ajax/t1.htm
当输入已经存在的用户名(如cnbruce、cnrose)时页面将显示重名不能注册(false),否则将显示可以注册(true),这为用户的注册提供了快速的参考,用户体验至上。
那么下面就来说说是如何来实现这样的功能的。
其实通过如上的t1.htm的源代码,各位就可以看到AJAX的精髓
首先是定义XMLHttp对象
var xmlHttp = false; try { xmlHttp = new ActiveXObject(“Msxml2.XMLHTTP”); } catch (e) { try { xmlHttp = new ActiveXObject(“Microsoft.XMLHTTP”); } catch (e2) { xmlHttp = false; } } if (!xmlHttp && typeof XMLHttpRequest != ‘undefined’) { xmlHttp = new XMLHttpRequest(); } |
关于这部分内容的说明请看:
http://www.cnbruce.com/blog/showlog.asp?cat_id=34&log_id=987
接着是自定义函数
function callServer() { var u_name = document.getElementById(“u_name”).value; if ((u_name == null) || (u_name == “”)) return; var url = “cu.asp?name=” + escape(u_name); xmlHttp.open(“GET”, url, true); xmlHttp.onreadystatechange = updatePage; xmlHttp.send(null); } |
该函数的主要功能就是异步获得cu.asp的内容,在此前将先提取当前页表单元素“u_name”即用户名文本框zhogn 的值,通过cu.asp其后的参数及赋值而得到了不同的结果(true or false)。
那么这里要说的即是cu.asp,他的主要功能就是接受URL参数name的值做内容显示,该内容最终被t1.htm异步获取。
<!–cu.asp的源码示例–> <!–#include file=”conn.asp”–> |
如何将异步获取的信息显示在当前页呢
function updatePage() { if (xmlHttp.readyState < 4) { test1.innerHTML=”loading…”; } if (xmlHttp.readyState == 4) { var response = xmlHttp.responseText; test1.innerHTML=response; } } |
其中xmlHttp.readyState中的readyState表示服务器在处理请求时的进展状况,其值分别有0-4,各有其说明情况,具体请参看:
http://www.cnbruce.com/blog/showlog.asp?cat_id=34&log_id=718
使用DHTML中的innerHTML可显示信息在定义的 <span id=”test1″>是否能注册</span> 上。
其余表单页面就不详叙了
打包文件下载(下载后将后缀 .cnbruce 修改为 .rar):
http://www.cnbruce.com/test/ajax/ajax.cnbruce
以上就是【AJAX应用之注册用户即时检测】的全部内容了,欢迎留言评论进行交流!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,请使用WINRAR解压,如遇到无法解压的请联系管理员!
8. 精力有限,不少源码未能详细测试(解密),不能分辨部分源码是病毒还是误报,所以没有进行任何修改,大家使用前请进行甄别
丞旭猿论坛
暂无评论内容