1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
2 <html>
3 <head>
4 <script type="text/javascript">
5 /* 标准AJAX模板 */
6 //使用 false 作为判定条件，它表示还没有创建 XMLHttpRequest 对象
7 var http_request=false;
8 //创建XMLHttpRequest对象方法
9 function send_request(){
10 http_request=false;
11 //火狐
12 if(window.XMLHttpRequest){
13 http_request=new XMLHttpRequest();
14 if(http_request.overrideMimeType){
15 http_request.overrideMimeType('text/xml');
16 }
17 }else if(window.ActiveXObject){//IE
18 try{
19 http_request=new ActiveXObject("Msxml2.XMLHTTP");
20 }catch(e){
21 try{
22 http_request=new ActiveXObject("Microsoft.XMLHTTP");
23 }catch(e2){}
24 }
25 }
26
27 if(!http_request){//检查 request 是否仍然为 false（如果一切顺利就不会是 false)
28 window.alert("Err Create XMLHttpRequest!");
29 }
30
31 }
32
33 //与服务器交互
34 function sendReg(url)
35 {
36 //创建AJAX引擎
37 send_request();
38 //设定回调函数
39 //服务器响应完毕以后会自动调用回调函数一次
40 http_request.onreadystatechange = requestReg;
41 //与服务器连接
42 //1.提交方式（get/post）
43 //2.提交路径(url)
44 //3.是否异步
45 http_request.open("get",url,true);
46 //使用get方法不缓存
47 http_request.setRequestHeader("If-Modified-Since","0");
48 //提交请求
49 //get null
50 http_request.send(null);
51 }
52
53 //事件函数
54 function test()
55 {
56 //获得文本框的数据
57 var text = document.getElementById("text").value;
58 //get
59 //定义当前访问服务器URL
60 var url = "reg?text=" + text;
61 //使用UTF-8的编码将字符串进行解码
62 url = encodeURI(url);
63 //与服务器交互
64 sendReg(url);
65 }
66 //定义回调函数
67 function requestReg()
68 {
69 //判断就绪状态
70 if(http_request.readyState == 4)
71 {
72 //判断响应状态
73 if(http_request.status == 200)
74 {
75 //获得服务器响应的数据
76 var res = http_request.responseText;
77 //注意这里是通过在servlet中用out.println("****");所传输的数据，你也可以用XML的格式来发送，那就为var res = http_request.responseXML;然后可以使用res.getElementsByTagName等DOM的解析方法来解析；这个可以到网上查到相关资料
78
79 //alert(res);
80 if(res == "true")
81 {
82 document.getElementById("result").innerHTML = "<font color='red'>此用户名已经被注册了</font>";
83 document.getElementById("submit").disabled = true;
84 }
85 else
86 {
87 document.getElementById("result").innerHTML = "<font color='blue'>此用户名没有被注册</font>";
88 document.getElementById("submit").disabled = false;
89 }
90 }
91 }
92 }
93
94 </script>
95 </head>
96
97 <body style="test-align:center" onload="add()">
98 <table align="center" cellspacing="0" width="500" border="0">
99 <tr>
100 <td width="100">用 户 名</td>
101 <td width="200"><input type="text" id="text" onblur="test()"/></td>
102 <td width="200" id="result"></td>
103 </tr>
104 <tr align="center">
105 <td colspan="2"><input type="button" value="注册" id="submit" disabled="disabled"/></td>
106 <td></td>
107 </tr>
108 </table>
109 </body>
110 </html>
AJAX
