jsp ajax 数据库Demo

转自：http://blog.csdn.net/rushkid02/article/details/7515058

下面介绍JSP前台表单内容通过Ajax异步提交到后台Servlet进行校验（校验方式多种，包括提取数据库信息，校验用户名是否重复等），异步在JSP表单页面显示校验结果信息的基本过程。

一、说明：

1.由于本文只限于介绍JSP+Servlet+Ajax运用的基本流程，重点不在于后台数据库的访问和校验内容，因此省略Servlet对数据库的访问。

二、基本流程：

1. JSP页面login.jsp提供一个表单“form”，表单中有两个“text”类型的输入框，其中我们将用第一个输入框来做实验。

在第一个输入框中（输入用户名），通过onblur=validate();，当用户光标离开输入框时，触发JS函数validate() ，函数validate()在Ajax.js文件中声明。

1. <%@page contentType="text/html" pageEncoding="UTF-8"%>
2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
3. "http://www.w3.org/TR/html4/loose.dtd">
4. <html>
5. <head>
6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
7. <script type="javascript" src="Ajax.js"></script>
8. </head>
9. <body>
10. <h1>Test Ajax</h1><p>
11. <form action="" method="get" name="form">
12. <br>
13. 输入用户名：
14. <input type="text" size="10" maxlength="8" id="userName" name="name" onblur="validate()">
15. <span id="info"></span>
16. <br>
17. 输入商品名：
18. <input type="text" size="10" maxlength="8" >
19. </form>
20. </body>
21. </html>

2、Ajax.js文件声明了一系列函数，用于完成向表单与servlet的中接处理。

2.1、函数validate()要点：

2.1.1、通过document.getElementById(String id)获取表单中有特定id值的输入框的值，即获取用户输入的用户名。

2.1.2、声明一个变量url，存放要访问的servlet:"validate.do?id=" + escape(idField.value)，问号？后面表示在url后添加一个值，这个值在validate.do这个servlet中可以通过request.getParameter("id")来获取。

1. var url = "validate.do?id=" + escape(idField.value);

2.1.3、 通过if()语句以兼容IE，Firefox等多个浏览器版本的方式创建一个XMLHttpRequest对象。

1. if(window.XMLHttpRequest) {
2. //IE7, Firefox, Opera支持
3. req = new XMLHttpRequest();
4. }else if(window.ActiveXObject) {
5. //IE5,IE6支持
6. req = new ActiveXObject("Microsoft.XMLHTTP");
7. }

2.1.4、调用XMLHttpRequest对象函数open()准备向servlet发送请求（此时只是“准备发送”，并没有发送）

1. req.open("GET", url, true);

2.1.5、 调用XMLHttpRequest对象函数send(param)向servlet发送请求。param参数的值null（关于send()方法使用请另外查阅）

1. req.send(null);

2.1.6、调用一个触发事件onreadystatechange，每当 readyState 改变时，onreadystatechange 函数就会被执行。readyState有5个可能值：0：请求未初始化（在调用open()之前）；1：请求已经提出（调用send()之前）；2：请求已经发送（这里通常可以从响应得到内容头部）；3：请求处理中（响应中通常有部分数据可用，但是服务器还没有完成响应）；4：请求已经完成（可以访问服务器响应并使用它）

1. req.onreadystatechange = callback;

2.2、function callback()要点：

2.2.1    XMLHttpRequest.status = 200表示服务器已经成功响应。

通过XMLHttpRequest.responseText获取servlet端的getPrintWriter().write()输出的响应。得到的值是 一个String类型数据。

1. var check = req.responseText;

2.3、通过show()函数输出结果到标签标记的位置。

完整的Ajax.js文件：

1. var req;
2. function validate() {
3. //获取表单提交的内容
4. var idField = document.getElementById("userName");
5. //访问validate.do这个servlet，同时把获取的表单内容idField加入url字符串，以便传递给validate.do
6. var url = "validate.do?id=" + escape(idField.value);
7. //创建一个XMLHttpRequest对象req
8. if(window.XMLHttpRequest) {
9. //IE7, Firefox, Opera支持
10. req = new XMLHttpRequest();
11. }else if(window.ActiveXObject) {
12. //IE5,IE6支持
13. req = new ActiveXObject("Microsoft.XMLHTTP");
14. }
15. /*
16. open(String method,String url, boolean )函数有3个参数
17. method参数指定向servlet发送请求所使用的方法，有GET,POST等
18. boolean值指定是否异步，true为使用，false为不使用。
19. 我们使用异步才能体会到Ajax强大的异步功能。
20. */
21. req.open("GET", url, true);
22. //onreadystatechange属性存有处理服务器响应的函数,有5个取值分别代表不同状态
23. req.onreadystatechange = callback;
24. //send函数发送请求
25. req.send(null);
26. }
27. function callback() {
28. if(req.readyState == 4 && req.status == 200) {
29. var check = req.responseText;
30. show (check);
31. }
32. }
33. function show(str) {
34. if(str == "OK") {
35. var show = "<font color='green'>恭喜！！用户名可用！</font>";
36. document.getElementById("info").innerHTML = show;
37. }
38. else if( str == "NO") {
39. var show = "<font color='red'>对不起，用户名不可用！！请重新输入！</font>";
40. document.getElementById("info").innerHTML = show;
41. }
42. }

三、servlet处理：

重点1：通过以下几行代码设置浏览器不进行Ajax处理页面的缓存（如果出现缓存，将导致一些不可预知的麻烦）

1. response.setContentType("text/html");
2. response.setHeader("Cache-Control", "no-store");
3. response.setHeader("Pragma", "no-cache");
4. response.setDateHeader("Expires", 0);

重点2：通过request.getParameter()来获取Ajax传递的参数。

1. String name = request.getParameter("id");

重点3：通过response.getWriter().write()向Ajax输出参数，在Ajax一端通过var check = XMLHttpRequest.responseText获取参数值。

1. if(name.equals("1")) {
2. out.write("OK");
3. }
4. else {
5. out.write("NO");
6. }

完整的servlet代码：

1. package com.model;
2. import java.io.IOException;
3. import java.io.PrintWriter;
4. import javax.servlet.ServletException;
5. import javax.servlet.http.HttpServlet;
6. import javax.servlet.http.HttpServletRequest;
7. import javax.servlet.http.HttpServletResponse;
8. public class DoAjaxServlet extends HttpServlet {
9. protected void processRequest(HttpServletRequest request, HttpServletResponse response)
10. throws ServletException, IOException {
11. response.setContentType("text/html;charset=UTF-8");
12. PrintWriter out = response.getWriter();
13. try {
14. response.setContentType("text/html");
15. response.setHeader("Cache-Control", "no-store");
16. response.setHeader("Pragma", "no-cache");
17. response.setDateHeader("Expires", 0);
18. String name = request.getParameter("id");
19. if(name.equals("1")) {
20. out.write("OK");
21. }
22. else {
23. out.write("NO");
24. }
25. } finally {
26. out.close();
27. }
28. }
29. @Override
30. protected void doGet(HttpServletRequest request, HttpServletResponse response)
31. throws ServletException, IOException {
32. processRequest(request, response);
33. }
34. @Override
35. protected void doPost(HttpServletRequest request, HttpServletResponse response)
36. throws ServletException, IOException {
37. processRequest(request, response);
38. }
39. @Override
40. public String getServletInfo() {
41. return "Short description";
42. }
43. }

最后，记得在web.xml配置文件中配置这个servlet:

1. <servlet>
2. <servlet-name>DoAjaxServlet</servlet-name>
3. <servlet-class>com.model.DoAjaxServlet</servlet-class>
4. </servlet>
5. <servlet-mapping>
6. <servlet-name>DoAjaxServlet</servlet-name>
7. <url-pattern>/validate.do</url-pattern>
8. </servlet-mapping>