一、准备
1、 tomcat解压文件 目录下找到 webapps目录建立TestAjax文件夹
2、按照 tomcat中建立可运行项目 建立个级文件夹
二、代码
ajaxTeset.jsp
- <%@page@H_403_66@language="java"@H_403_66@contentType="text/html;charset=GBK"%>
- <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html>
- <head>
- <Meta@H_403_66@http-equiv="Content-Type"@H_403_66@content="text/html;charset=utf-8"/>
- <title>登录</title>
- <script@H_403_66@type="text/javascript">
- varreq;
- functionvalidate(){
- var@H_403_66@nameid=document.getElementById("userId");
- var@H_403_66@url="validate.jsp?id="+escape(nameid.value);
- if(window.XMLHttpRequest){
- @H_403_66@req=newXMLHttpRequest();
- }elseif(window.ActiveXObject){
- @H_403_66@req=newActiveXObject("Microsoft.XMLHTTP");
- }
- req.open("GET",url,true);
- @H_403_66@req.onreadystatechange=callback;
- req.send(null);
- }
- functioncallback(){
- if(@H_403_66@req.readyState==4){
- if(@H_403_66@req.status==200){
- var@H_403_66@msg=req.responseXML.getElementsByTagName("msg")[0];
- setMsg(msg.childNodes[0].nodeValue);
- }
- }
- }
- functionsetMsg(msg){
- @H_403_66@mdiv=document.getElementById("usermsg");
- if(@H_403_66@msg=="invalid"){
- @H_403_66@mdiv.innerHTML="不存在"
- }else{
- @H_403_66@mdiv.innerHTML="Valid"
- }
- }
- </script>
- </head>
- <body>
- <form@H_403_66@action=""@H_403_66@method="post">
- <div
- @H_403_66@style="border-color:#0FF;width:300px;height:200px;margin:0auto;text-align:center;margin-top:50px;">
- <div
- @H_403_66@style="border-color:#0FF;width:250px;height:50px;margin:0auto;text-align:center;margin-top:20px;">
- <div>
- <label>用户:</label><input@H_403_66@type="text"@H_403_66@name="user"@H_403_66@id="userId"@H_403_66@onblur="validate();"/>
- </div>
- <div@H_403_66@id="usermsg">
- </div>
- <div@H_403_66@style="margin-top:10px;margin-bottom:10px;">
- 密码:<input@H_403_66@type="password"@H_403_66@name="password"/>
- </div>
- <div>
- <input@H_403_66@style="margin-right:30px;"@H_403_66@type="submit"@H_403_66@value="登陆"/>
- </div>
- </div>
- <div></div>
- </div>
- </form>
- </body>
- </html>
<%@page language="java" contentType="text/html; charset=GBK"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <Meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>登录</title> <script type="text/javascript"> var req; function validate(){ var nameid = document.getElementById("userId"); var url="validate.jsp?id="+escape(nameid.value); if(window.XMLHttpRequest){ req=new XMLHttpRequest(); }else if(window.ActiveXObject){ req=new ActiveXObject("Microsoft.XMLHTTP"); } req.open("GET",true); req.onreadystatechange=callback; req.send(null); } function callback(){ if(req.readyState==4){ if(req.status==200){ var msg = req.responseXML.getElementsByTagName("msg")[0]; setMsg(msg.childNodes[0].nodeValue); } } } function setMsg(msg){ mdiv = document.getElementById("usermsg"); if(msg=="invalid"){ mdiv.innerHTML="不存在" }else{ mdiv.innerHTML="Valid" } } </script> </head> <body> <form action="" method="post"> <div style="border-color: #0FF; width: 300px; height: 200px; margin: 0 auto; text-align: center; margin-top: 50px;"> <div style="border-color: #0FF; width: 250px; height: 50px; margin: 0 auto; text-align: center; margin-top: 20px;"> <div> <label>用户:</label><input type="text" name="user" id="userId" onblur="validate();"/> </div> <div id="usermsg"> </div> <div style="margin-top: 10px; margin-bottom: 10px;"> 密码:<input type="password" name="password" /> </div> <div> <input style="margin-right: 30px;" type="submit" value="登陆" /> </div> </div> <div></div> </div> </form> </body> </html>
validate.jsp