ajax在 jsp中的应用

 

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

分类： html/div+css/JS/Ajax/Flex 2011-02-13 12:45198人阅读 评论(5)收藏 举报

在注册用户等情况下会需要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>用户代码:&nbsp;

 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) + "&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>

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) + "&timestamp=" + 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应用上的对比！