下面是一个ajax的简单例子，这个例子主要是模拟一下在各大网站或论坛使用的注册时检测用户名是否被占用的问题，当注册用户名被占用，在不刷新页面的情况下给出“该用户名被占用，请另选一个用户名”的提示，没有被占用就给出“该用户名可以注册”的提示。

 

按照如下的步骤进行：

1、编写一个html页面，在这个页面中有一个表单，但我们的表单没有提交按钮，当用户填写了“用户名”之后，在用户名之后会自动显示该用户名是否被占用。下面是该html页面的完整代码：register.html

 

Xml代码

  1. <html>  

  2.   <head>  

  3.       <script language="javascript">  

  4.         var xmlHttp = null ;   

  5.        function showHint(str) {   

  6.          if (str.length==0) {    

  7.            document.getElementById("txtHint").innerHTML="";   

  8.            return;   

  9.          }   

  10.          xmlHttp = GetXmlHttpObject();   

  11.          if (xmlHttp==null) {   

  12.            alert ("您的浏览器不支持AJAX!");   

  13.            return;   

  14.          }    

  15.          xmlHttp.onreadystatechange = stateChanged;   

  16.          xmlHttp.open("GET",'gethint.jsp?search=' + str,true);   

  17.          xmlHttp.send(null);   

  18.        }   

  19.   

  20.        function stateChanged() {   

  21.          if (xmlHttp.readyState==4) {    

  22.            document.getElementById("txtHint").innerHTML = xmlHttp.responseText;    

  23.           }   

  24.        }   

  25.   

  26.        function GetXmlHttpObject() {   

  27.          try {   

  28.            //Firefox, Opera 8.0+, Safari   

  29.            xmlHttp = new XMLHttpRequest();   

  30.          } catch (e) {   

  31.            //Internet Explorer   

  32.            try {   

  33.              xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");   

  34.            } catch (e) {   

  35.              xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");   

  36.            }   

  37.          }   

  38.          return xmlHttp;   

  39.        }   

  40.      </script>  

  41.    </head>  

  42.       

  43.   <body>  

  44.      <form>    

  45.        用户名:   

  46.          <input type="text" id="txt1" onkeyup="showHint(this.value)">  

  47.          **： <span id="txtHint"></span></p>    

  48.      </form>  

  49.    </body>  

  50. </html>  

2、编写一个jsp页面，该jsp页面负责处理对用户名是否被占用的检测，在这里为了简单起见，因为只是模拟一 下这个过程，所以没有使用数据库，没有从数据库中去检测用户名，而是使用一个数组，预先在数组中定义一些用户名（要连接数据库原理都一样，就只要查询一遍数据库）。其代码如下：gethint.jsp

Java代码

  1. <%@ page contentType="text/html;charset=gbk"%>   

  2.   

  3. <%   

  4. String[] a = new String[31] ;   

  5. a[0]="ylj" ;   

  6. a[1]="hnylj" ;   

  7. a[2]="wjh" ;   

  8. a[3]="yang" ;   

  9. a[4]="sheng" ;   

  10. a[5]="chen" ;   

  11. a[6]="zhang" ;   

  12. a[7]="ming" ;   

  13. a[8]="liming" ;   

  14. a[9]="wuhua" ;   

  15. a[10]="liuning" ;   

  16. a[11]="xietingfeng" ;   

  17. a[12]="zhangbozhi" ;   

  18. a[13]="renxian" ;    

  19. a[14]="liudehua" ;   

  20. a[15]="chenhui" ;   

  21. a[16]="zhangxiao" ;   

  22. a[17]="wangjin" ;   

  23. a[18]="wujing" ;   

  24. a[19]="lihua" ;   

  25. a[20]="yiyang" ;   

  26. a[21]="yindong" ;   

  27. a[22]="huangxiaohua" ;   

  28. a[23]="fanxiao" ;   

  29. a[24]="sugao" ;   

  30. a[25]="hejiong" ;   

  31. a[26]="lixiang" ;   

  32. a[27]="xiaobao" ;   

  33. a[28]="baozhen" ;   

  34. a[29]="liuhuan" ;   

  35. a[30]="zhangyang" ;   

  36.   

  37. String q = request.getParameter("search") ;   

  38. String hint1 = null ;   

  39. String hint2 = null ;   

  40.   

  41. if (q.length()>0) {   

  42.   for (int i=0;i<a.length;i++) {   

  43.     if (!q.equals(a[i])) {   

  44.         hint1 = "该用户名可以注册" ;   

  45.     } else {   

  46.           hint2 = "该用户名被占用，请另选一个用户名" ;   

  47.      }   

  48.   }   

  49. }   

  50. if (hint2!=null)    

  51.   out.println(hint2) ;   

  52. else  

  53.   out.println(hint1) ;   

  54. %>  

3、在tomcat的webapp目录下建立一个ajax文件夹，在该文件夹下再建立一个WEB-INF文件夹，在这个WEB-INF文件夹下再建立一个web.xml文件，这个文件可以怎么都不配，只需一个schema声明，其代码如下：

 

Xml代码

  1. <?xml version="1.0" encoding="ISO-8859-1"?>  

  2. <web-app xmlns="http://java.sun.com/xml/ns/javaee"  

  3.    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  

  4.    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"  

  5.    version="2.5">  

  6.   

  7. </web-app>  

4、将上面编写好的ajax.html文件和time.jsp文件复制到ajax目录下，然后启动tomcat，打开浏览器，在浏览器的地址栏输入：http://localhost:8080/ajax/register.html 即可看到一个表单页面，当我们在填写“用户名”时，在表单后面将自动显示出该用户名是否被占用的信息。

这个例子程序非常地简单，只是模拟一下这个过程。