DWR反向Ajax技术

最新推荐文章于 2021-08-06 11:16:54 发布

平民-王子

最新推荐文章于 2021-08-06 11:16:54 发布

阅读量237

点赞数

CC 4.0 BY-SA版权

分类专栏： DWR 文章标签： DWR Ajax Servlet JavaScript JavaEE ViewUI

本文链接：https://blog.youkuaiyun.com/libinxuan520/article/details/83773235

DWR 专栏收录该内容

14 篇文章

订阅专栏

常规的Web应用和通常的Ajax应用都要满足“请求--响应”模型。在反向Ajax模型中，服务器的Java方法可以“直接修改”浏览器里的Web页面，改变Web页面中组件的状态，服务器可以主动将最新的信息发送给浏览器。。

使用反向Ajax，要修改两个地方来启动反向Ajax：

修改web.xml文件中的DwrServlet的配置，指定启动反向Ajax
修改HTML页面代码，指定该页面启动反向Ajax技术

先修改web.xml文件，在DWR核心Servlet中加一个属性pollAndComeEnabled = true

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" 
	xmlns="http://java.sun.com/xml/ns/javaee" 
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
	http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
  <servlet>
  <servlet-name>dwr-invoker</servlet-name>
  <servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
  <init-param>
     <param-name>debug</param-name>
     <param-value>true</param-value>
  </init-param>
  <!-- 启动反向Ajax -->
  <init-param>
      <param-name>pollAndCometEnabled</param-name>
      <param-value>true</param-value>
    </init-param>
  
</servlet>

<servlet-mapping>
  <servlet-name>dwr-invoker</servlet-name>
  <url-pattern>/dwr/*</url-pattern>
</servlet-mapping>

</web-app>

Java处理类

package com.lbx.dwr;

import java.util.Collection;

import org.directwebremoting.ScriptSession;
import org.directwebremoting.WebContext;
import org.directwebremoting.WebContextFactory;
import org.directwebremoting.proxy.dwr.Util;

public class DWRHelper {

	public void addMessage(String text) {
		System.out.println("客户端传来：" + text);

		WebContext wctx = WebContextFactory.get();
		String currentPage = wctx.getCurrentPage();
		System.out.println("currentPage:" + currentPage);

		// 通过scriptsession调用js函数，操作dom。就像我们给sessson中放置内容一样轻松。
		// 获得正在交互的浏览器上下文：ScriptSession,再得到工具Util
		Util utilThis = new Util(wctx.getScriptSession());
		utilThis.setValue("text", ""); // 操作客户端DOM模型！
		utilThis.addFunctionCall("ggg", "服务器数据！"); // 执行客户端的函数！

		// 获得正在访问chat.jsp所有的浏览器客户端.在服务器端直接调用操作所有客户端内容
		Collection<ScriptSession> sessions = wctx
				.getScriptSessionsByPage(currentPage);

		// 用户每点一次刷新就会生成新的scriptsession对象。
		// 所以，为了有效管理scriptsession，我们专门维护一个map.

		for (ScriptSession object : sessions) {
			System.out.println("ScriptSessionID:" + object.getId());
		}

		Util utilAll = new Util(sessions);
		// 调用一个客户端的js函数！
		utilAll.addFunctionCall("addChatMsg", text);
	}

}

dwr.xml文件的配置

<!DOCTYPE dwr PUBLIC
    "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN"
    "http://getahead.org/dwr/dwr20.dtd">

<dwr>
  <allow>
    <create creator="new" javascript="DWRHelper">
      <param name="class" value="com.lbx.dwr.DWRHelper"/>
    </create>
  <!-- 
    <create creator="new" javascript="Demo">
      <param name="class" value="com.cssxt.dwr.MyTestDwr"/>
    </create>
    
    <convert match="com.cssxt.dwr.Person" converter="bean"></convert> 
      javabean的转化 
    -->
     
  </allow>
</dwr>

客户端JSP代码

<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<%
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">
		<script type='text/javascript' src='dwr/util.js'></script>
		<script type='text/javascript' src='dwr/engine.js'></script>
		<script type='text/javascript' src='dwr/interface/DWRHelper.js'></script>
		<script type="text/javascript">
			    function sendMessage() {
			      DWRHelper.addMessage($("text").value);
			    }
			    function  addChatMsg(msg){
			    	var d2 = document.createElement("div");
			    	d2.innerHTML=msg;
			    	$("div1").appendChild(d2);
			    }
			    
			    function ggg(g){
			    	alert("ggg:"+g);
			    }
		</script>
	</head>

	<body onload="dwr.engine.setActiveReverseAjax(true);">
		聊天记录：
		<div id="div1">
		</div>

		我说：
		<input id="text" />
		<input type="button" value="Send" onclick="sendMessage()" />
		</p>

		<hr />
	</body>

</html>