【示例】手把手教你构建一个简单的JavaWeb应用(会员注册唯一性检查，不带数据库)

Eclipse配置Tomcat

　　　首先在确保已经安装好Tomcat服务器后，打开eclipse配置Tomcat服务器（点开链接详解如何配置）

　　　服务器创建好之后可以双击下图指示的位置打开服务器设置

　　可以看到在红圈位置中，选择的是一个选项，就在当前的开发位置进行配置开发，Deploy path为wtpwebapps。所以我在当前文件夹下新建了名为wtpwebapps的文件夹，待会的项目就创建在此

新建CheckUser项目

　　只需要填好项目名称就好其他的不用改变，注意选择路径为E:eclipse-workspacewtpwebapps

　　接下在Project Explorer就可以看到当前的文件结构，主要用用到的就是Java Resource, WebContent

　　在Java Resourcesrc 下新建class文件填入代码，这里的代码就是服务器端处理代码

 1 import java.io.*;
 2 import javax.servlet.*;
 3 import javax.servlet.http.*;
 4 public class CheckUser extends HttpServlet {//创建servlet
 5     public void destroy()
 6     {
 7         super.destroy();
 8     }
 9     public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException,IOException
10     {
11         doPost(request,response);
12     }
13     public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException,IOException
14     {
15         response.setContentType("text/html");
16         PrintWriter out=response.getWriter();
17         String[]  logined= {"bts","army","admin"};//当前已经注册过的会员
18         String loginName=request.getParameter("loginName");//从request请求中得到填入的会员名字
19         String responseContext="true";//初始化返回值为true
20         for( String s:logined)  if(loginName.equals(s)) responseContext="false"; //遍历已注册会员，如果名字已存在则设置返回值为false
21         out.println(responseContext);//向前端输出值
22         out.flush();
23         out.close();
24     }
25     public void init() throws ServletException{}
26 }

接着开始编写index.html页面，主页页面保存在WebContent文件夹下，而不是WEB-INF

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>检查用户唯一性</title>
 6 </head>
 7 <script language="javascript">
 8 var xmlHttp;
 9 function creatXMLHttpRequest()
10 {
11     if(window.ActiveXObject){xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");}
12     else if(window.XMLHttpRequest){xmlHttp=new XMLHttpRequest();}
13 }
14 function beginCheck()
15 {
16     var tempLoginName=document.all.loginName.value;
17     if(tempLoginName=="") {alert("please input the name"); return;}
18     creatXMLHttpRequest();
19 xmlHttp.onreadystatechange=processor;
20     
21     xmlHttp.open("GET","CheckUser?loginName="+tempLoginName);
22     xmlHttp.send(null);
23     
24 }
25 function processor()
26 {
27     var responseContext;
28     if(xmlHttp.readyState==4){
29         if(xmlHttp.status==200)
30             {
31                 responseContext=xmlHttp.responseText;
32                 if(responseContext=="true") alert("valid");
33                 else alert("invaild");
34             }
35     }
36 }
37 </script>
38 <body>
39     <form name="form1" action="CheckUser" method="post">
40     <input name="loginName" type="text" id="loginName">
41     <input type="button" name="checkLoginName" value="有效性检查" onclick="beginCheck()">
42     </form>
43 </body>
44 </html>

在WEB-INF下新建文件web.xml对刚刚的项目进行配置，注意的就是<url-pattern>/CheckUser</url-pattern> 开头不能少/

 1 <?xml version="1.0" encoding="UTF-8"?>
 2 
 3 <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
 4 
 5   <servlet>
 6       <servlet-name>CheckUser</servlet-name>
 7       <servlet-class>CheckUser</servlet-class>
 8   </servlet>
 9   <servlet-mapping>
10       <servlet-name>CheckUser</servlet-name>
11       <url-pattern>/CheckUser</url-pattern> 
12   </servlet-mapping>
13 
14 </web-app>