在注册用户等情况下会需要Ajax进行异步验证用户是否存在,而这个验证信息在JAVA中可以放到JSP中,也可以放到servlet类中,而两者的差异就如果我们使用jsp和servlet做web应用的差异是相同的。由此也体现了jsp和servlet的关系,在《Servlet和JSP的关系以及此关系在Tomcat中的体现》有所阐述!在简单呈现和比对各自实现的代码前先对AJAX的技术知识做个复习小结!
Ajax的主干内容如下所示:
使用Ajax的主要过程包括1、创建XMLHttpRequest对象,2、设置回发函数,3、指定信息发送位置、提交的方式和异步与否,4、发送请求。javaScript代码如下所示:
1: <script type="text/javascript">
2: var XMLHttpRequestIns = null;
3:
4: function AjaxF() {
5: //创建Ajax核心对象并传递参数
6: CreateXMLHttpRequest();
7: //设置参数
8: XMLHttpRequestIns.onreadystatechange = handleStateChange;//设置回发函数
9: //获取内容的位置
10: XMLHttpRequestIns.open("GET", "XMLFile1.xml", true);
11: //发送
12: XMLHttpRequestIns.send(null);
13: }
14: function CreateXMLHttpRequest() {
15: if (window.ActiveObject) {
16: XMLHttpRequestIns = new ActiveXObject("Microsoft.XMLHTTP");
17: }
18: else if(window.XMLHttpRequest )
19: {
20: XMLHttpRequestIns = new XMLHttpRequest();
21: }
22: }
23: //对返回数据进行处理
24: function handleStateChange() {
25: if (XMLHttpRequestIns.readyState == 4) {
26:
27: if (XMLHttpRequestIns.status == 200) {
28: alert("服务器消息" + XMLHttpRequestIns.responseText);
29: }
30: }
31: }
32: </script>
有了这个基础和容易在java EE中使用Ajax调用jsp或servlet进行处理,但调用两者有些细微的差异,这个差异也源自jsp和servlet的关系!代码如下:
1、html代码: 主要是在input的onblur方法中指定验证方法,此标签后的span标签用于显示Ajax验证后返回的提示信息(存在与否)
1: <tr>
2: <td width="22%" height="29">
3: <div align="right">
4: <font color="#FF0000">*</font>用户代码:
5: </div>
6: </td>
7: <td width="78%">
8: <input name="userId" type="text" class="text1" id="userId"
9: size="10" maxlength="10" value="<%=userId %>" onblur
10: ="validate(this)"/><span id="userIdspan"></span>
11: </td>
12: </tr>
2、javaScript代码:这的重点就是掌握Ajax中创建XMLHttpRequest类的方法,指定处理次验证过程的jsp类或servlet类(此处是jsp类,见下面validate(field)中的url变量),再有就是回调函数的指定和编写,此处使用了匿名函数,但也将编写好的回调函数放到了下面以供参考。
1: <script type="text/javascript">
2: var xmlHttp;
3:
4: function createXMLHttpRequest() {
5: //表示当前浏览器不是ie,如firefox
6: if(window.XMLHttpRequest){
7: xmlHttp = new XMLHttpRequest();
8: }else if(window.ActiveXObject){
9: xmlHttp = new ActiveXObject("Microsoft.XMLHttp");
10: }
11: }
12:
13: function validate(field) {
14: if(trim(field.value).length != 0){
15: //创建XMLHttpRequest
16: createXMLHttpRequest();
17: var url = "user_validate.jsp?userId=" + trim(field.value) + "×tamp=" + new Date().getTime();
18: //alert(url);
19: xmlHttp.open("GET",url,true);
20:
21: //方法地址。处理完成后自动调用,回调。一定不要加括号,否则就变成调用了
22: //xmlHttp.onreadystatechange = callback;
23: xmlHttp.onreadystatechange = function() { //匿名函数
24: if(xmlHttp.readyState == 4){ //ajax引擎初始化成功
25: if(xmlHttp.status == 200) { //Http协议成功
26: document.getElementById("userIdspan").innerHTML = "<font color='red'>" + xmlHttp.responseText + "</font>";
27: }else {
28: alert("请求失败,错误码=" + xmlHttp.status);
29: }
30: }
31: };
32: //将参数发送到ajax引擎,不是执行
33: xmlHttp.send(null);
34: }else {
35: document.getElementById("userIdspan").innerHTML = "";
36: }
37: }
38:
39: function callback(){//此处是回调函数,但在此Ajax应用中为未调用此方法,而是采用了上面的匿名函数的方法
40: if(xmlHttp.readyState == 4){ //ajax引擎初始化成功
41: if(xmlHttp.status == 200) { //Http协议成功
42: document.getElementById("userIdspan").innerHTML = "<font color='red'>" + xmlHttp.responseText + "</font>";
43: }else {
44: alert("请求失败,错误码=" + xmlHttp.status);
45: }
46: }
47: }
48: </script>
3、上面validate(field)方法中变量url指定的验证过程的jsp或servlet类,此处使用列举的是jsp(user_validate.jsp)。
1: <%@ page language="java" contentType="text/html; charset=GB18030"
2: pageEncoding="GB18030"%>
3: <%@ page import="com.bjpowernode.drp.sysmgr.manager.*" %>
4: <%
5: String userId = request.getParameter("userId");
6: if(UserManager.getInstance().findUserById(userId) != null) {
7: out.println("用户代码已经存在!");
8: }
9: %>
4、3中用到的UserManager是具体从数据库中根据userId查询user的类,此处略去!
5、至此Ajax调用jsp处理验证的编码完成,如果是调用servlet来进行验证,则上文的变量url需指向servlet类,如下所示:
1: var url = "../servlet/UserValidateServlet?UsertId=" + trim(field.value) + "×tamp=" + new Date().getTime();//加个时间戳,是每次的url不同,防止缓存
6、在servlet中的验证过程比对上文中的第3步,代码如下所示:
1: public class UserValidateServlet extends HttpServlet {
2:
3: @Override
4: protected void service(HttpServletRequest request, HttpServletResponse response)
5: throws ServletException, IOException {
6: //设置contentType
7: response.setContentType("text/html; charset=GB18030");
8:
9: //获取代码
10: String userId=request.getParameter("usertId");
11: //执行查询,判断是否存在
12: if(UserManager.getInstance().findUserByUserId(userId)!=null){
13: //提示存在了此代码
14: response.getWriter().print("用户代码已经存在!");
15: }
16: }
17:
18: }
对比3和6可以发现除了指定contentType的方式不同外(jsp在@page命令中指定,servlet在response方法中指定),其他的没有区别。但要想使用此servlet来完成验证过程还需要像《Servlet和JSP的关系以及此关系在Tomcat中的体现》所提到的配置下web.xml文件。代码如下:
- <servlet>
<servlet-name>ClientIdValidateServlet</servlet-name>
<servlet-class>com.bjpowernode.drp.util.servlet.ClientIdValidateServlet</servlet-class>
</servlet>
- <servlet-mapping>
<servlet-name>ClientIdValidateServlet</servlet-name>
<url-pattern>/servlet/ClientIdValidateServlet</url-pattern>
</servlet-mapping>
通过上面的代码可以请到在java中使用Ajax和在一般网页中使用Ajax没有太大区别,其主要还是掌握好了
XMLHttmRequest的用法!此文也算是对jsp和servlet在Ajax应用上的对比!