一、准备

1、 tomcat解压文件 目录下找到 webapps目录建立TestAjax文件夹

2、按照 tomcat中建立可运行项目 建立个级文件夹

3、在RWQAjax文件夹内建立如下jsp文件

二、代码

ajaxTeset.jsp

 

Html代码 【ajax】初学可运行示例   _ajax 【ajax】初学可运行示例   _ajax_02
  1. <%@page language="java" contentType="text/html; charset=GBK"%>  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  3. <html>  
  4. <head>  
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  6. <title>登录</title>  
  7.   
  8. <script type="text/javascript">  
  9.  var req;   
  10. function validate(){   
  11.  var  nameid = document.getElementById("userId");   
  12.  var url="validate.jsp?id="+escape(nameid.value);   
  13.  if(window.XMLHttpRequest){   
  14.    req=new XMLHttpRequest();   
  15. }else if(window.ActiveXObject){   
  16.     req=new ActiveXObject("Microsoft.XMLHTTP");   
  17. }   
  18. req.open("GET",url,true);   
  19. req.onreadystatechange=callback;   
  20. req.send(null);   
  21. }   
  22.   
  23. function callback(){   
  24. if(req.readyState==4){   
  25.   if(req.status==200){   
  26.   var msg = req.responseXML.getElementsByTagName("msg")[0];   
  27.   setMsg(msg.childNodes[0].nodeValue);   
  28. }   
  29. }   
  30. }   
  31. function setMsg(msg){   
  32.  mdiv = document.getElementById("usermsg");   
  33.  if(msg=="invalid"){   
  34.  mdiv.innerHTML="不存在"  
  35.  }else{   
  36.  mdiv.innerHTML="Valid"  
  37. }   
  38. }   
  39. </script>  
  40. </head>  
  41. <body>  
  42.     <form action="" method="post">  
  43.         <div  
  44.             style="border-color: #0FF; width: 300px; height: 200px; margin: 0 auto; text-align: center; margin-top: 50px;">  
  45.             <div  
  46.                 style="border-color: #0FF; width: 250px; height: 50px; margin: 0 auto; text-align: center; margin-top: 20px;">  
  47.                 <div>  
  48.                     <label>用户：</label><input type="text" name="user" id="userId" onblur="validate();"/>  
  49.                 </div>  
  50.                 <div  id="usermsg">  
  51.                    
  52.                 </div>  
  53.                 <div style="margin-top: 10px; margin-bottom: 10px;">  
  54.                     密码：<input type="password" name="password" />  
  55.                 </div>  
  56.                 <div>  
  57.                     <input style="margin-right: 30px;" type="submit" value="登陆" />  
  58.                 </div>  
  59.             </div>  
  60.             <div></div>  
  61.         </div>  
  62.     </form>  
  63. </body>  
  64. </html>  

validate.jsp