上QQ阅读APP看书，第一时间看更新
4.4 用AJAX提交数据给服务器
为改善用户体验，本书用实例代码讲述AJAX应用程序的基本核心，范例基于前面的思路，但是由于设计思想不同，使用技术不同，还是稍有改变。
4.4.1 客户端部分
考虑到用户一边输入，一边验证，当用户输入完毕也就验证完毕，这是多么令人愉快的事情——大大节省了用户时间。要做到这样，就需要在键盘事件上做一些处理，来看【范例4-10】的代码。
【范例4-10 AJAX检测用户名】
1. <html>
2. <head>
3. <title>AJAX 检查用户名</title>
4. </head>
5. <body>
6. 用户名：<input type="text"id="username" /><span id="usernameTip"></span>
7. <script src="eg.lib.js"></script>
8. </body>
9. </html>
10. <script>
11. //eg 对象已经在eg.lib.js 中定义
12. (function(){ //避免全局污染，将操作放在闭包里
13. var userName = eg.$("username");
//取得username 的DOM 对象，eg.$方法定义在eg.lib.js 中，详见第2 章的范例
14. var delay; //存储延迟执行的函数
15. var delay2ajax = function(){//AJAX 操作部分
16. eg.AJAX({TYPE:"GET", //AJAX 请求类型
17. URL:"4-11.asp? username="+userName.value，
//获取用户输入的值并构建AJAX 请求的URL
18. ISASYN:true //是否异步
19. }, function(data){ //定义AJAX 请求成功后的callback 回调函数
20. var json = new Function("return "+data)();
//使用简单的方式把JSON 格式的字符串文本转换成JavaScript 对象
21. var tip = ""; //存储提示信息
22. if(json.success){ //根据服务端定义的成功标志判断
23. tip = "√ 该用户名可以注册";
24. }else{
25. tip = "× 该用户名已存在";
26. }
27. eg.$("usernameTip").innerHTML = tip;
//在输入框旁边的标签输出服务端返回的信息
28. });
29. };
30. eg.addListener(userName, "keyup", function(){
//给userName 对象绑定一个onkeyup 事件，eg.addListener 方法定义在
eg.lib.js 中，详见第2 章的范例
31. clearTimeout(delay);
//如果用户在短时间内还输入，则清除要AJAX 的操作
32. delay = setTimeout(delay2ajax,800);
//重新等待用户输入，如果延迟了0.8 秒都还没有输入，则认为可以自动发起AJAX 检查
33. });
34. })();
35. </script>
【范例4-10】运行之后如图4-7所示，通过AJAX改造后，少了一个按钮，有更多的空间显示更多的内容，用户也有更多的时间做更多的事情，用更少的操作达到相同的目的。
图4-7 AJAX自动检查用户名
图4-7下方是Firebug工具，可以看到有两次输入，请求路径和参数不同，返回结果也是不同的。
4.4.2 服务端部分
【范例4-10】提交到服务端要做的处理请看代码【范例4-11】。
【范例4-11 AJAX检测用户名是否注册（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("{success:false}");
//如果找到同名用户则不能注册，构造成JSON 格式字符串并通过ASP 内置对象输出
16. }else{
17. Response.Write("{success:true}");
//如果没有同名用户则可以注册，构造成JSON 格式字符串并通过ASP 内置对象输出
18. }
19. %>
对比【范例4-11】和【范例4-9】可以发现，服务端的代码其实在非AJAX模式和AJAX模式下相差不是很大，AJAX在前端工作中越来越重要的原因就是它改变了前端的方式，但是对后端的改变不是很大。
技巧提示
本章范例用到的Web服务器名叫Netbox（大小为620KB），是一款旨在代替IIS的国产软件，安装很简单，一直单击Next按钮即可使用。