Myeclipse+AJAX+Servlet

最近刚开始学AJAX的知识，这里介绍一个简单的Myeclipse+AJAX+Servlet项目。

此项目包含3个文件：index.jsp、check.java。还有一个需要配置的文件是：web.xml，此文件在/Webroot/WEB-INF目录下，在建立工程的时候选中一个复选框就会有此文件。

此项目的完成步骤：

1.建立index.jsp文件，输入以下代码：

 1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
 2 <%
 3 String path = request.getContextPath();
 4 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
 5 %>
 6 
 7 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 8 <html>
 9   <head>
10     <base href="<%=basePath%>">
11     
12     <title>My JSP 'index.jsp' starting page</title>
13     <meta http-equiv="pragma" content="no-cache">
14     <meta http-equiv="cache-control" content="no-cache">
15     <meta http-equiv="expires" content="0">    
16     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
17     <meta http-equiv="description" content="This is my page">
18     
19     <link rel="stylesheet" type="text/css" href="styles.css">
20     
21         <script>  
22 var xmlHttpReq;  
23 //创建一个XmlHttpRequest对象  
24 function createXmlHttpRequest()  
25 {  
26     window.alert("进入到createXmlHttpRequest()函数");
27     if(window.XMLHttpRequest)  
28     {  
29        xmlHttpReq = new XMLHttpRequest();//非IE浏览器  
30     }else  
31     {  
32        xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");//IE浏览器  
33     }  
34 }  
35 //检测用户名是否已经被注册  
36 function checkUser()  
37 {  
38 window.alert("进入到checkUser()函数");
39 var username = document.getElementById("user").value;  
40 if(username=="")  
41 {  
42     alert("用户名必须填写！");  
43     return false;  
44 }  
45 //首先创建对象  
46 createXmlHttpRequest();  
47 //指明准备状态改变时回调的函数名  
48 xmlHttpReq.onreadystatechange=handle;  
49 //尝试以异步的get方式访问某个URL  
50 //请求服务器端的一个servlet 
51 //var url = "/web06/Servlet/" 
52 var url = "./servlet/Check?username="+username;//+Math.random(); 
53 window.alert(username); 
54 xmlHttpReq.open("get",url,true);  
55 //向服务器发送请求  
56 xmlHttpReq.send(); 
57 window.alert("已经发送数据");  
58 }  
59 //状态发生改变时回调的函数  
60 function handle()  
61 {  
62 //准备状态为4 
63 window.alert("进入到handle()函数"); 
64     if(xmlHttpReq.readyState==4)  
65     { 
66     window.alert("响应已完成；您可以获取并使用服务器的响应了。");  
67     //响应状态码为200，代表一切正常  
68        if(xmlHttpReq.status==200)  
69        {  
70               window.alert("交易成功 "); 
71            var res = xmlHttpReq.responseText;  
72            var result = document.getElementById("result");  
73            result.innerHTML = "<font color=red>"+res+"</font>";  
74        }  
75     }  
76 }  
77 </script>  
78   </head>
79   
80   <body>
81       <center><h1>表单注册</h1></center>  
82 <hr>  
83 姓名:  
84 <input type="text" id="user">  
85 <input type="button" value="检测用户名" onclick="checkUser()">  
86 <span id="result"></span>  
87   </body>
88   </body>
89 </html>

2.建立Check.java文件，此文件所属的packet名称为com.wepull.servlet，代码如下：

 1 package com.wepull.servlet;
 2 
 3 import java.io.IOException;  
 4 import javax.servlet.ServletException;  
 5 import javax.servlet.http.HttpServlet;  
 6 import javax.servlet.http.HttpServletRequest;  
 7 import javax.servlet.http.HttpServletResponse;  
 8 //@WebServlet (name="Check",urlPatterns={"/diaocha.do"})
 9 public class Check extends HttpServlet {  
10      
11     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {  
12        //解决返回中文乱码问题
13         //response.getWriter().println("str");  
14         response.setCharacterEncoding("utf-8");
15         
16        String user = request.getParameter("username");  
17        response.getWriter().println(user);
18        response.getWriter().println(request);
19        System.out.println(user+"传过来是null");
20        System.out.println(request);
21       System.out.println(user+"传过来是null");
22        //解决接收中文乱码问题  
23        //user = new String(user.getBytes("iso-8859-1"),"utf-8"); 
24        if(user == "")
25        {
26            System.out.println("user is nullD!!!"); 
27        }
28        else
29        {
30        System.out.println(user); 
31        
32        String msg = null;  
33        if("jing".equals(user))  
34        {  
35            msg = "用户名已经被占用!";  
36        }else  
37        {  
38            msg = "用户名可以使用!";  
39        }  
40        response.getWriter().println(msg);  
41        }
42         
43     }       
44     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {  
45        doGet(request,response);  
46     }                
47 }

3.修改web.xml文件

修改前：

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
  <display-name>web08</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>
</web-app>

修改后：

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
  <display-name>web08</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>
  <servlet>
        <servlet-name>Check</servlet-name>
        <servlet-class>com.wepull.servlet.Check</servlet-class>
    </servlet>
    <servlet-mapping>
    <servlet-name>Check</servlet-name>
    <url-pattern>/servlet/Check</url-pattern>
    </servlet-mapping> 
</web-app>

其中web08是我的项目名称。

重要提醒（因为这个错误我Debug了好几天。。。）

var url = "./servlet/Check?username="+username;//+Math.random();

一定要注意""中的第一个字符 " ." ，否则Servlet就会收不到前端发送的数据（url不正确）。

4.最后运行出来结果如下：

4.1

4.2

ps:程序运行中和运行结果会有一些调试的代码，请大家自行忽略。