Ajax - 基础教程第八章例子学习一

最新推荐文章于 2024-11-01 06:10:33 发布

lin49940

最新推荐文章于 2024-11-01 06:10:33 发布

阅读量1k

点赞数

分类专栏： AJAX学习笔记文章标签： ajax stylesheet include file search jsp

本文链接：https://blog.csdn.net/lin49940/article/details/1771693

版权

AJAX学习笔记专栏收录该内容

28 篇文章 0 订阅

订阅专栏

这是本人的原创,转载先通知下

这是个综合的例子，作者起名为 Ajax DashBoard。在这个DashBoard 中,主要提供4个版块, 天气预报版块, 股票行情版块, 新闻组件版块, 搜索版块。

现在中用到的工具有Taconite（在sourceforge可以下载到）和dom-drag库（这个js好啊，可以实现页面中的窗口鼠标拖动，简单易用）。

项目所需包主要是axis1.2.1，

包括 axis.jar, axis-ant.jar, commons-discovery.jar, commons-loggin, jaxrpc.jar, log4j.jar, saaj.jar, wsdl4j.jar, 私人加多两个，activation.jar, mail.jar( 这两是j2ee1.4的东西)

jstl 1.1的，

包括 jstl.jar , standard.jar。

其他 jdom.jar， taconite.jar。

JDK1.5。

一。主要页面 ajaxDashboard.jsp

代码清单8-1 ajaxDashboard.jsp

<% @page contentType = " text/html " %>
<% @page pageEncoding = " UTF-8 " %>

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
< html >

< head >
     < title > Ajax Dashboard </ title >
     < script type ="text/javascript" src ="js/autocomplete.js" ></ script >
     < script type ="text/javascript" src ="js/dom-drag.js" ></ script >
     < script type ="text/javascript" src ="js/common.js" ></ script >
     < script type ="text/javascript" src ="js/weatherForecast.js" ></ script >
     < script type ="text/javascript" src ="js/stockQuote.js" ></ script >
     < script type ="text/javascript" src ="js/news.js" ></ script >
     < script type ="text/javascript" src ="js/search.js" ></ script >
     < script type ="text/javascript" src ="js/taconite/taconite-client.js" ></ script >
     < script type ="text/javascript" src ="js/taconite/taconite-parser.js" ></ script >
     < link type ="text/css" rel ="stylesheet" title ="style" href ="../css/styles.css" />

</ head >

< body >

<% @ include file = " weather/weatherForecast.jsp " %>

<% @ include file = " stockQuote/stockQuote.jsp " %>

<% @ include file = " news/newsItems.jsp " %>

<% @ include file = " search/search.jsp " %>

< script type ="text/javascript" src ="js/ajaxDashboard.js" ></ script >

< div style ="position:absolute;overflow:auto;display:none;background-color:white"
                                                                id ="popup" >
</ div >

</ body >

</ html >

这个是搜索版块的自动填充的js

这个是实现组件鼠标拖动的js
<script type="text/javascript" src="js/dom-drag.js"></script>

这个是公共的js，主要是让个版块的内容显示或隐藏，实现所谓的最大化，最小化
<script type="text/javascript" src="js/common.js"></script>

天气预报版块的js
<script type="text/javascript" src="js/weatherForecast.js"></script>

股票行情版本的js
<script type="text/javascript" src="js/stockQuote.js"></script>

新闻版本的js
<script type="text/javascript" src="js/news.js"></script>

搜索版本的js
<script type="text/javascript" src="js/search.js"></script>

    下面两个是taconite的js
    <script type="text/javascript" src="js/taconite/taconite-client.js"></script>
    <script type="text/javascript" src="js/taconite/taconite-parser.js"></script>

样式表
<link type="text/css" rel="stylesheet" title="style" href="../css/styles.css" />

在body中

<%@ include file="weather/weatherForecast.jsp" %>

<%@ include file="stockQuote/stockQuote.jsp" %>

<%@ include file="news/newsItems.jsp" %>

<%@ include file="search/search.jsp" %>

这include的四个jsp分别是4个版块的jsp页面，把他们各自写在一个页面中便于维护，添加和删除组件。

这个是一个在加载页面时必须运行的JS，大部分的代码是实现版块的鼠标拖动功能，还有运行4个版块必须的初始化函数。

代码清单8-1a ajaxDashbord.js

function initDomDrag(handleID, rootID) {
     var handle = document.getElementById(handleID);
     var root = document.getElementById(rootID);
    Drag.init(handle, root);
}

// weather forecast
initDomDrag( " handle " , " root " );

// stock quotes
initDomDrag( " stockQuoteHandle " , " stockQuoteRoot " );

// headline news
initDomDrag( " newsItemsHandle " , " newsItemsRoot " );

// search
initDomDrag( " searchHandle " , " searchRoot " );

// start auto updating
handleZipCodeChange();
startUpdateStockQuoteInterval();
startUpdateNewsItemsInterval();

// set up autocomplete
AutocompleteManager.registerHandler( new AutocompleteHandler( " searchTerm "
                                                        , " Search " , 275 , 3 ));

下一部分是天气预报版块的说明

http://blog.csdn.net/lin49940/archive/2007/09/04/1771841.aspx