4.3 检查待注册的用户名是否存在
在使用AJAX提交数据给服务器之前，先看看传统页面的提交方式，即会刷新页面的form表单数据提交方式，通过对比来理解AJAX诞生的根本原因并体会它所带来的用户体验。
4.3.1 客户端进行检测
在早期程序中，很多都是没有经过AJAX验证的，比如在百度中用“inurl:(UserReg. asp)”这样的字符串来进行搜索，可以找到很多没有使用无刷新检测设计的网站，如图4-5所示为在百度上找到的新用户注册页面。
图4-5 手动检测用户名的设计方式
通过【范例4-8】和【范例4-9】来分析一下这种设计思路，【范例4-8】是传统网页提交的HTML代码，【范例4-9】是ASP服务端代码——用的也是类JavaScript的语法。
【范例4-8 传统网页提交】
1. <html>
2. <head>
3. <title>传统网页提交</title>
4. </head>
5. <body>
6. <form method="get" action="4-9.asp" target="_blank">
7. <input type="text" name="username" />
8. <input type="submit" value="手动检查用户名" />
9. </form>
10. </body>
11. </html>
【范例4-8】form标签中的target属性值“_blank”意思是“4-9.asp”页面将在新窗口打开。第7行的input是要输入用户名的输入框，name属性值username是后面【范例4-9】服务端代码获取用户输入的参数名。
4.3.2 服务器端获取数据
数据通过客户端浏览器发送到Web服务端之后，需要通过一系列的业务处理，最后才会返回处理结果给客户端浏览器，【范例4-9】就是ASP版本的服务端处理代码，ASP也支持用JavaScript作为服务端编程代码而且使用方便，在JavaScript流行之前，ASP服务端编程语言通常是VBScript语言。
【范例4-9 传统地检测用户名是否注册（ASP版）】
1. <%@language="javascript"%>
2. <% //<%是asp 服务器端运行代码的起始符号
3. //@language="javascript"表示本页面运行的服务器端默认语言设置为JavaScript
4. var names = ["z3f", "admin", "test", "anna", "cindy", "diana"]; //定义一个数组
模拟数据表示已经注册过的用户
5. //获取网址传递过来的参数username，在JavaScript 语法中是区分大小写的
6. var q = Request.QueryString("username"); //通过ASP 内置对象获取数据
7. var has = 0 //定义一个变量用来存储是否有输入的用户名
8. for (var i=0; i<names.length; i++){ //循环比对，一般项目中是查询数据库操作
9. if(names[i]==q ){ //如果用户名已存在就标记
10. has = 1; //保存起来
11. break; //退出循环
12. }
13. }
14. if(has == 1){
15. Response.Write(q+"已注册，请换其他用户名！"); //如果找到同名用户则不能注册，并通过ASP
内置对象输出
16. }else{
17. Response.Write(q+"还没有注册，恭喜你！"); //如果没有同名用户则可以注册，并通过
ASP 内置对象输出
18. }
19. %>
【范例4-8】和【范例4-9】在本地Web服务器下运行，单击“手动检查用户名”会弹出新窗口，如图4-6所示，部分浏览器会弹出新的标签页，效果相同。
图4-6 手动检查用户名
这就是一个改进版的传统检查用户名是否注册的程序，相对于56k拨号上网的时代而言，这是相当流行的设计，因为它可以手动传输一部分很少的关键数据给服务器检查，检查通过后服务端也返回极其简单的提示，大大减少了整页整页提交的漫长等待时间和流量。
时代的发展，科技的进步，人们生活质量的不断提高，对于各方面的感受要求就越发不满足于以前这种“手动模式”“弹窗模式”，于是在这种需求下推动了AJAX的萌芽。