Ajax技术概要复习及使用Ajax调用jsp或servlet进行异步验证

技术2025-06-06 18

在注册用户等情况下会需要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的关系！代码如下： .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }

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> .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }

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) + "&timestamp=" + 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> .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }

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: %> .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }

4、3中用到的UserManager是具体从数据库中根据userId查询user的类，此处略去！

5、至此Ajax调用jsp处理验证的编码完成，如果是调用servlet来进行验证，则上文的变量url需指向servlet类，如下所示：

1: var url = "../servlet/UserValidateServlet?UsertId=" + trim(field.value) + "&timestamp=" + new Date().getTime();//加个时间戳，是每次的url不同，防止缓存 .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }

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: } .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }

对比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应用上的对比！

最新回复(0)