`

DWR入门教程之提示性文字

    博客分类:
  • Ajax
阅读更多

DWR可以让您做个简单的文字提示功能了像这个
http://caterpillar.onlyfun.net/Gossip/index.html

把鼠标指到书的照片上,会显示提示文字,这些提示文字本身不是存在网页上的,而是在Server端,当鼠标指到书上时,会用Request object去抓,然后显示在框框中


不过!用DWR就可以很简单完成这个功能

先写个Java类别吧!Book.java如下:

package com.dwr;

import java.util.HashMap;
import java.util.Map;

public class Book {
	private Map<String, String> descriptionMap = new HashMap<String, String>();

	public Book() {
		String java = "Java SE 6 技術手冊 - 為「Java學習筆記」的下一版,正式成為技術手冊的成員之一,以一年多來的上課經驗,對各章節的內容作了擴充調整(例如物件導向、多執行緒等),新增JDBC介紹,並在最後一章介紹幾個Java SE 6的新特性。";
		String spring = "Spring 2.0 技術手冊 - 主要針對Spring 2.0 的新組態、新 AOP 支援等作說明、加強IoC的部份、介紹JDBC、form標籤等新功能,修正第一版的錯誤,並重作所有的範例,Web 的部份使用WTP重寫。";
		String ajax = "Ajax 實戰手冊 - Ajax in action 中文版,我的第一本譯作,雖說是翻譯,卻是我花最多時間的一本書籍,翻譯所投入的心力,實在不亞於自己撰寫書籍的心力,當然收獲也是很多的,尤其是藉由完成這本書的翻譯,對於Ajax 也有了更加深入的了解。";
		descriptionMap.put("java", java);
		descriptionMap.put("spring", spring);
		descriptionMap.put("ajax", ajax);
	}
	public String getDescription(String key) {
		return descriptionMap.get(key);
	}
}


一样的要开放这个Book对象,dwr.xml如下:

<!DOCTYPE dwr PUBLIC
    "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN"
    "http://www.getahead.ltd.uk/dwr/dwr10.dtd">

<dwr>
  <allow>
    <create creator="new" javascript="JDate">
      <param name="class" value="java.util.Date"/>
    </create>
    <create creator="new" javascript="Hello">
      <param name="class" value="com.dwr.HelloWorld"/>
    </create>
    <create javascript="Book" creator="new">
    	<param name="class" value="com.dwr.Book"></param>
    </create>
  </allow>
</dwr>



scope设定为application,表示这个Book对象在整个应用程序阶段都活着。

然后,客户端写个网页Book.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>Book</title>
<script type='text/javascript' src='dwr/interface/Book.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='book.js'></script>

</head>
<body>

<div id="ajax" onmouseover="getBookData(this);" onmouseout="clearData();">
	<a	href="http://www.gotop.com.tw/waweb2004/home/home.aspx?pg=HM010X&bn=AXP011800">
	<img style="border: 0px solid ; width: 80px; height: 110px; float: left;"
	alt="Ajax in action 中文版" title="Ajax in action 中文版"
	src="images/ajax_in_action_c.jpg" hspace="10" vspace="2"></a></div>
<div id="spring" onmouseover="getBookData(this);" onmouseout="clearData();">
  <a href="http://www.gotop.com.tw/waweb2004/home/home.aspx?pg=HM010X&bn=ACL021000"><img
	style="border: 0px solid ; width: 80px; height: 110px; float: left;"
	alt="Spring 技術手冊" title="Spring 技術手冊" src="images/Spring2Tech_S.jpg"
	hspace="10" vspace="2"></a></div>
<div id="java" onmouseover="getBookData(this);"
	onmouseout="clearData();"><a
	href="http://www.gotop.com.tw/waweb2004/home/home.aspx?pg=HM010X&bn=ACL020931"><small><img
	style="border: 0px solid ; width: 80px; height: 110px; float: left;"
	alt="Java 學習筆記" title="Java 學習筆記" src="images/JavaTech_Cover_Small.jpg"
	hspace="10" vspace="2"></small></a></div>

<br/>
<br/>
<br/>
<div id="info"></div>

</body>
</html>

 

重点在于onmouseoveronmouseout,鼠标移入与移出时会呼叫的函式,还有最下面的info,抓回来的书籍介绍会放到当中

book.js
如下,简单的很

function getBookData(ele){
	Book.getDescription(ele.id,setBookData);
}
function setBookData(description){
	DWRUtil.setValue('info',description);
}
function clearData(){
	DWRUtil.setValue('info','');
}

 

看一下画面好了这是鼠标移到 Ajax in action中文版 上的介绍画面


 DWR Book

源文件见附件,WAR格式打包。

 

  • dwrtest.rar (482.2 KB)
  • 描述: 是war包,但是由于war格式不让上传(?),所以再用rar格式包装一下
  • 下载次数: 71
分享到:
评论

相关推荐

    DWR入门教程之HelloWorld

    在本“DWR入门教程之HelloWorld”中,我们将逐步学习如何搭建一个简单的DWR应用,体验其基本功能。首先,我们需要了解以下关键组件: 1. **配置DWR**: 在Web应用程序的`web.xml`文件中,我们需要添加DWR的Servlet...

    dwr API dwr入门教程

    在DWR入门教程中,首先会介绍DWR的基本概念和工作原理。DWR的核心是将Java方法暴露给JavaScript,通过在服务器端创建一个称为"逆向Ajax"的通道,使得JavaScript能够调用远程服务器上的Java方法。这个过程涉及到几个...

    dwr学习教程3

    通过【DWR视频教程3】,你将系统学习到如何配置DWR,编写Java服务端代码,生成JavaScript客户端接口,以及在实际项目中如何有效地利用DWR提升Web应用的交互性和性能。无论是初学者还是有经验的开发者,都能从中...

    DWR入门教程及实例(含源代码)

    本教程“DWR入门教程及实例(含源代码)”旨在帮助初学者快速掌握DWR的基本概念和使用方法。教程内容可能包括以下几个核心知识点: 1. **DWR概述**:讲解DWR的基本理念,如何通过HTTP协议实现JavaScript与Java之间...

    DWR中文教程(教程实在不可多得)

    **DWR(Direct Web Remoting)...这个DWR中文教程涵盖了所有你需要知道的基础知识和实践技能,无论你是初学者还是有经验的开发者,都能从中受益。通过学习这个教程,你将能够熟练地运用DWR构建高效、互动的Web应用。

    dwr实例教程 很好的入门实例

    ### dwr实例教程知识点解析 #### 一、DWR简介及功能特点 DWR(Direct Web Remoting)是一种简化Ajax应用开发的技术框架。它能够使客户端的JavaScript代码直接调用服务器端的Java方法,实现数据的实时交互。与传统...

    软件工程DWR入门教程.docx

    软件工程 DWR 入门教程 DWR(Direct Web Remoting)是一种基于 Java 的远程方法调用技术,它允许在 Web 应用程序中将 Java 对象作为远程服务暴露给客户端,客户端可以通过 Ajax 调用这些服务。下面是 DWR 入门教程...

    DWR 视频教程 使用DWR开发AJAX For JavaEE

    在**“DWR 视频教程 使用DWR开发AJAX For JavaEE”**中,我们主要会学习以下几个关键知识点: 1. **DWR的基本概念**:理解DWR的核心功能,包括自动暴露Java对象到JavaScript,提供安全的跨域调用,以及对HTTP请求的...

    dwr中文教程简单易学,我们可以将其当做一本DWR的完整教程

    在DWR中文教程中,我们可以深入学习以下几个关键知识点: 1. **DWR概述**:理解DWR的基本概念和工作原理,包括其在Web应用中的角色,以及如何通过它来实现客户端和服务器端的交互。 2. **安装与配置**:学习如何在...

    DWR入门教程

    《DWR入门教程:服务器推送新手指南》 Direct Web Remoting (DWR) 是一种用于在Web应用程序中实现实时服务器推送技术的开源框架。它允许JavaScript与服务器端的Java对象进行交互,使得Web应用能够实时地更新客户端...

    dwr视频教程

    这个“dwr视频教程1”很可能是一系列教程中的第一部分,旨在帮助学习者理解和掌握DWR的基本概念和用法。 DWR的核心功能是提供一种安全、高效的方式,使得JavaScript可以调用服务器上的Java方法,就像是本地函数一样...

    Dwr入门操作手册Dwr

    Dwr入门操作手册Dwr入门操作手册Dwr入门操作手册Dwr入门操作手册Dwr入门操作手册Dwr入门操作手册Dwr入门操作手册Dwr入门操作手册Dwr入门操作手册Dwr入门操作手册Dwr入门操作手册Dwr入门操作手册Dwr入门操作手册Dwr...

    DWR中文版教程

    ### DWR中文版教程知识点概览 #### 一、DWR简介 **DWR**(Direct Web Remoting)是一种简化客户端JavaScript调用服务器端Java方法的技术。它为开发者提供了一个简单的框架,使得通过JavaScript调用服务器端Java代码...

    DWR入门教程之HelloWorld - 中文JAVA技术网.mht

    请先到 http://getahead.ltd.uk/dwr/ 下载 dwr.jar ,放到 WEB-INF/lib 下 … 负责处理客户端请求,并呼叫 Java 对象的是 DWRServlet , DWR 其实也有些 Model 2 的味道,只是 View 的这一层比较弱,因为放到客户端...

    DWR基础教程 开发案例

    **DWR基础教程 开发案例** DWR,全称Direct Web Remoting,是一个开源的Java库,用于在Web应用程序中实现Ajax(异步JavaScript和XML)功能。它简化了JavaScript和服务器端Java代码之间的交互,使得开发者能够在...

    DWR中文教程(外带DWR包)

    这个“DWR中文教程(外带DWR包)”为初学者提供了一个全面的入门指南,帮助理解并掌握DWR的基本概念和实际应用。 首先,我们来了解一下DWR的核心功能。DWR允许前端JavaScript代码直接调用后端服务器的Java方法,就...

Global site tag (gtag.js) - Google Analytics