最近刚开始学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就会收不到前端发送的数据（utl不正确）。
4.最后运行出来结果如下：
4.1
4.2
ps:程序运行中和运行结果会有一些调试的代码，请大家自行忽略。
时间： 2024-03-21 06:05:37