常见的用户注册是用户输入用户名，后台程序检测数据库中用户名是否重复而做出注册的成功与失败之提示（当用户注册重名时将返回重新注册），或者稍微人性化一点就是在用户名文本框后添加一个检测按钮，让用户检测后再做注册。
以上操作，对于用户体验方面来说是比较“差劲”的，一个很好的用户体验就是：当用户输入完注册用户名后，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"--> <% name=request.querystring("name") Set rs = Server.CreateObject ("ADODB.Recordset") sql = "Select * from u_ser where u_name='"&name&"'" rs.Open sql,conn,1,1 if rs.eof and rs.bof then response.write("true") else response.write("false") end if rs.close set rs=nothing call CloseDatabase %> |
如何将异步获取的信息显示在当前页呢
|
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> 上。
其余表单页面就不详叙了
打包文件下载(右键选择另存为，下载后修改文件后缀名为rar，解压打开)：
http://www.cnbruce.com/test/ajax/ajax.htm
继续完成 AJAX应用之注册用户即时检测日志评论中一些朋友的建议，做如下的功能添加：
1，日志检测显示中文体提示
方法：采用utf-8文件编码格式解决字符的传递
2，根据提示，若用户名已被注册，则禁用提交表单，仅当检测该用户名可注册时还原提交按钮的功能。
方法：判断test1.innerHTML的值，从而决定提交表单submit的disabled属性
|
if (test1.innerHTML=="已被注册"){ document.form1.submit.disabled=true} else{ document.form1.submit.disabled=false } |
调试地址： http://www.cnbruce.com/test/ajax/t1.htm
打包文件下载（右键链接选择目标另存为，下载后修改后缀名为rar并进行解压）：
http://www.cnbruce.com/test/ajax/ajax.htm
另外，有关innerHTML的知识参看：
http://www.cnbruce.com/blog/showlog.asp?cat_id=5&log_id=458
这里还有份更完美的方案
http://www.klstudio.com/post/92.html
原文地址：https://blog.csdn.net/lee576/article/details/2029955
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。