DWR用法配置及DWR与jQuery结合兼容问题解决

首先简单的说说我对DWR与jQuery的区别看法，DWR是一个用于改善web页面与Java类交互的远程服务器端Ajax开源框架，可以在页面上通过js直接调用后台代码，返回结果；jQuery是一个js框架，主要是对javascript进行了封装和扩展，更好的兼容各个浏览器。我觉得它们最大的区别在于DWR是可以直接调用service层，而jQuery需要通过action层才能调用service层（我没试过jQuery Ajax直接调用service，我想应该不可以吧）。再说说DWR与jQuery的兼容性问题，因为DWR与jQuery都使用 $ 符号，所以在页面上会引起冲突，导致报错，在网上也搜索了一下DWR与jQuery兼容解决方法，试了修改DWR中的util.js中的源码，把下面代码的$符号修改，结果好像DWR不行了（可能这样修改应该是可以的，没有过多的去研究）

var $;
if (!$) {
  $ = dwr.util.byId;
}

后面又在js中加入

jQuery.noConflict();

这是jQuery放弃使用$符号使用权，结果还是不行（这样应该也是可以的，前面是我jQuery加载路径没搞好，后面搞好了就没去研究了）。

下面开始说DWR配置及用法吧，我这里用的是struts2+spring+hibernate框架集合的，简单练习可以不添加框架。

首先现在DWR的架包，放入项目lib目录下，编写dwr.xml文件放在WEB-INF下面，跟web.xml放在一块

dwr.xml：

<!DOCTYPE dwr PUBLIC
    "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN"
    "http://www.getahead.ltd.uk/dwr/dwr10.dtd">
<dwr>
	<allow>
		<!-- 基于spring配置，因为我这里用了spring框架（userService必须是在spring配置存在的） -->
		<create creator="spring" javascript="UserService">
			<param name="beanName" value="userService"/>
		</create>
		<!-- 纯java类配置，没用框架就用这个纯class的 --><!-- 
		<create creator="new" javascript="ServiceBean" >
   			<param name="class" value="com.service.UserService"></param>
		</create>	 -->
	</allow>
</dwr>

修改web.xml文件，把下面代码放入web.xml文件中：

<!-- dwr config -->
	<servlet>
  		<servlet-name>dwr-invoker</servlet-name>  		
  		<servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>
  		<init-param>
     		<param-name>debug</param-name>
     		<param-value>true</param-value>
 		</init-param>
 		<init-param>   
			<param-name>crossDomainSessionSecurity</param-name>   
			<param-value>false</param-value>   
        </init-param> 		
	</servlet>
	<servlet-mapping>
  		<servlet-name>dwr-invoker</servlet-name>
  		<url-pattern>/dwr/*</url-pattern>
	</servlet-mapping>

编写service层代码和dao代码，这里就不粘贴了

java代码：

	public String findByName(String name){
		try{
			List<User> list=this.getHibernateTemplate().find("from User where name=?",name);
			if(list.size()>0){
				return "<div id='msgDiv' style='display: inline;color: red;'>× 账号已存在</div>";
			}else{
				return "<div id='msgDiv' style='display: inline;color: green;'>√ OK</div>";
			}
		}catch(Exception e){
			return "<div id='msgDiv' style='display: inline;color: red;'> error </div>";
		}
	}

jsp页面：上面我说的jQuery路径没搞对，就是没加绝对路径，还有就是jQuery一点要放在dwr后面

<%=request.getContextPath()%>

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="/struts-tags" prefix="s"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.jsp' starting page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<script type='text/javascript' src='dwr/interface/UserService.js'></script>
	<script type='text/javascript' src='dwr/engine.js'></script>
	<script type='text/javascript' src='dwr/util.js'></script>
	
	<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-1.7.2.min.js"></script>   
  </head>
  <script type="text/javascript">
  		
		//jQuery(document).ready(function($){
		//把这段代码放在这里（在这里面依旧可以用$）;
		//});
  		function login(){
  			location.href="login.jsp";
  		}
  		function checkName(){
  			var name=jQuery("#name").val()
  			if(name!="" && name!=null){
  				UserService.findByName(name,callBakResult);
  			}
  		}
  		function callBakResult(data){
  			//alert(data);
  			if(data!=null){
  				jQuery("#msgDiv").remove();
  				jQuery("#dv").append(data);
 
  			}else{
  				alert("xxx");
  			}
  		}
  </script>
  <body>
    This is toReg JSP page. <br>
    <s:form action="userAction!reg" method="post">
    <table  align="center">
    	<tr align="center">
    		<td>
    			<div id="dv" style="display: inline;">
    				账号：<input type="text" id="name" name="user.name" value='<s:property value="user.name"/>' onblur="checkName()"/>
    			</div>
    		</td>
    	</tr>
		<tr align="center">
    		<td>密码：<input type="text" id="pwd" name="user.pwd" value='<s:property value="user.pwd"/>'/></td>
    	</tr>
    	<tr align="center">
    		<td>
    			<input type="submit" value='注册'/> <input type="button" onclick="login()" value='去登录'/>
    			<div><s:property value="msg"/></div>
    		</td>
    	</tr>
    </table>
    </s:form>
  </body>
</html>

显示结果：

因为我的jsp页面时放在WEB-INF目录下面的，jQuery必须要放在WEB-INF外面，否则页面加载不到，页面加载jQuery路径必须是绝对路径，还有就是jQuery路径必须放在dwr路径后面，这样就不用修改dwr源码，和让jQuery放弃 $ 符号使用权了，但是在js中jQuery不能这样用 $("#id") ，只能这样用 jQuery("#id"),这样就很好的避免了jQuery与dwr的冲突了。

DWR用法配置及DWR与jQuery结合兼容问题解决

相关文章