Mashup简介

本项目通过Mashup技术整合Google地图与实时天气信息,实现了用户点击地图任意位置即可获取该地天气的功能。采用MVC架构,利用AJAX技术实现实时数据更新。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Mashup的英文定义为:“ web application hybrid, a website or web application that combines content from more than one source.” 其中文翻译为“web应用的聚合,将来自一个或多个信息源的内容进行聚合的web站点或web应用。”

Mashup是web2.0技术的典型代表。在web1.0时代,每个web站点是相互隔离的,用户访问web站点仅能得到来自本站点的信息;采用mashup技术,来自不同站点的信息通过统一的结构化数据接口实现了聚合,从而实现了更加便捷、直观且丰富的用户体验。

Mashup是一种轻量级的web开发技术,它大大降低了web开发门槛。采用mashup,即使是没有任何编程经验的普通网民也可以轻松开发自己的web应用。这充分体现了web2.0的理念:通过向用户提供统一的platform,充分调动用户的创造力,用户是web2.0的核心。

对于mashup来说,platform便是各种各样的API。目前越来越多的公司开放了自己的API,这已经成为一种趋势。当普通用户通过这些API构造自己的mashup的同时,新的API又被创造出来,从而形成一个生态系统,由于拥有最广泛的用户群和较低的门槛,这个生态系统比现存任何一个生态系统生长的都要快。

AJAX是mashup与生俱来的伙伴,现有的很多API,都是通过AJAX的方式提供出来的,例如Google MAP API。而且为大多数mashup项目,都是要求不能刷新页面的,所以实际开发中经常要使用到AJAX技术。

2.         项目简介

天气与人们的生活息息相关,该项目通过mashup技术融合了地图和天气信息,给用户提供一种便捷的天气查询方式。项目结合了地图的直观性和天气数据的实时性,用户可以方便的点击地图上任何地点,获取当前的天气状况。

项目中的地图采用的是Google地图中文版,天气数据来自国外的一个专业天气预报站点(http://weather.weatherbug.com/)。从天气预报站点获取RSS2.0格式的数据,通过后台处理转换成JSON格式的数据,然后利用Google 地图提供的API将天气信息呈现在地图上,方便用户直观查看。


页面截图

3.         实现方法

本项目采用MVC架构,模式层获取天气数据并转换成JSON格式,表示层利用Google地图提供的API获取地理信息并显示天气数据,控制层通过Servlet实现模式层和表示层的连接。

在模式层中,数据主要通过http://A5338764333.api.wxbug.net/ 这个地址获取,获取的数据是一个扩展的RSS2.0格式的xml文档,格式参见附录。如下图所示:页面由Google地图和天气信息两部分构成,通过点击地图上的任何位置可获得该位置的经纬度信息,并将此信息以AJAX的形式传输到服务器,服务器获取扩展的RSS2.0格式天气预报数据,通过解析RSS2.0获得需要天气数据,并将其转化为JSON格式,提供给表示层显示,该层主要用java实现,详见源代码中的RSSReader.java。控制层获取页面的信息,并传给模式层,然后再取得模式层的数据传回给页面显示,代码参见DataProcess.java.

       表示层完成地理位置信息的获取和天气信息的显示这两个功能。当输入页面URL时,load()函数完成Google地图的加载,并把地图的click事件的关联关联到getData()函数。当点击具体地理位置时getData()函数响应click事件,获得经纬度数据,通过控制层将数据传给服务器,获取天气数据,数据由showData()函数处理后显示到页面。该过程主要使用AJAX技术,异步访问后台获取数据。

    系统三层架构,实现了表示与模式的分离,底层主要用java实现,表现层主要用Javascript实现,数据结构为JSON,结构化较强,便于实现和灵活扩充。

4.         运行环境

服务器需求:JDK1.5+Tomcat5.5

客户端:IE或者FireFox

由于该项目需要Sevlet容器Tomcat的支持,目前没有找到相关的可以使用的空间,项目只能提供war格式的发布包weather.war(附件),通过将该包置于Tomcat的webapps目录下,就可以启用该服务。在浏览器中输入http://<%IP地址%>/weather即可访问该网页。

<script type="text/javascript"></script>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值