利用Ajax技术实现天气预报(警报)的实时更新

利用Ajax技术实现天气预报(警报)的实时更新


2024年6月21日发(作者:)

维普资讯

中国农业气象(Chinese Journal of Agrometeorology)2008,29(3):344—346 

利用Ajax技术实现天气预报(警报)的实时更新。 

张延龙 ,王建兰。,孙 倩。,刘兴允 

(1.山东大学,山东济南250012;2.临沂市气象局;3.临沂机场有限公司) 

摘要:目前气象网站中天气预报(警报)内容的更新需要手动刷新,远远不能满足人们对气象信息的及时性需求,为更好地服务于社会经济 

的发展,本文提出了采用Ajax无刷新技术实现气象网站中天气预报(警报)内容的局部实时更新的方法,并对主要的实现程序进行介绍。 

关键词:Ajax;气象网站;天气预报(警报);XmlHttpRequest 

Actualization of Real-time Renewal of Weather Forecast/Warning Based 

on Aj ax Technique 

ZHANG Yan-long ’ ,WANG Jian-lan ,SUN Qian ,LIU Xing-yun 

(1.Shandong University,Jinan 250012,China;2.Linyi Meteorological Bureau;3.Linyi Airport Limited Company) 

Abstract:At present the renewal of contents of the weather forecast/warning in the meteorological websites needed to be renovated manually, 

which couldn't satisfy the demands for timely meteorological information.The actualization of the part real—time renewal for the contents of the 

weather forecast/warning in the meteorological websites based on the Ajax Non—renovation Technique was proposed.The main realization proce- 

dures were introduced. 

Key words:Ajax;Meteorological website;Weather forecast/warning;XmlHt pRequest 

20世纪90年代以来,在以全球变暖为主要特征的气 

候变化背景下,干旱、洪涝、暴雨(雪)、雷电、冰雹、大风、 

大雾、霾、沙尘、高温热浪、低温冷害等灾害每年都有不同 

程度的发生,对人民群众生命财产安全、经济社会发展和 

生态环境保护均带来严重威胁…。气象网站是目前常见 

的信息传播工具,为了最大限度地减少气象灾害造成的 

人员伤亡和财产损失,更好地为经济社会的发展服务,要 

求气象网站必须把灾害性天气预报(警报)及时地发布出 

都要返回一个完整的HTML页面。由于浏览器每次都 

要浪费时间和带宽去重新读取服务器返回的整个页面, 

从而降低了Web应用程序的执行速度。Web服务器为 

了服务更多的用户,对用户浏览器的响应是无状态的, 

即收到用户浏览器的服务请求后,一般情况下Web服 

务器上不再存放用户的相关信息,因为保存用户信息有 

可能严重影响Web服务器的工作效率。 

浏览器端 服务器端 

去。但是,目前气象网站在获取最新天气预报(警报)信 

息的过程中,只能靠用户的手动更新,这远远不能满足气 

象服务实时送达的要求;为了在第一时间把气象预报(警 

报)信息发布出去,本文提出了一种利用Ajax无刷新技术 

实现天气预报(警报)内容局部实时更新的方法。 

图1 目前的气象网站模型 

未来网站的设计越来越讲究人性化,网页中的信息 

需要实时更新,如果使用<meta http—equiv=”refresh” 

content=”100”></meta>的方法进行整个页面的刷 

1新网站模型的提出 

目前的气象网站大多采用B/S交互方式进行气象 

服务,浏览器与服务器之间的通信是同步进行的。在浏 

览器端通过用户界面触发一个Http请求到达Web服务 

新实现自动更新网站中的内容,会使得整个屏幕不断闪 

烁刷新,降低了用户的满意度。因此,为了解决整页刷 

器,服务器对其进行处理(如接收数据处理等),之后再 

访问其它数据库系统,最后返回一个新的HTML页面到 

浏览器端,其模型结构如图1所示。特别是每当服务器 

处理浏览器提交新的请求时,用户只能空闲等待,屏幕 

显示一片空白,即使从服务器得到一个很简单的数据, 

新带来的页面抖动、效率低下等问题,除了编码优化和 

服务器调优之外,还可以采用动态更新页面的局部而非 

整页刷新的方法。 

根据目前的气象Web模型及组成技术,本文提出 

采用Ajax无刷新技术的新气象网站模型如图2所示。 

·收稿日期:2007·12-26 

基金项目:山东省气象局重点课题(2007shqxzO1) 

作者简介:张延龙(1976一),山东枣庄人,软件工程硕士,主要从事气象服务工作。E-mail:lytqyb@126.corn 

维普资讯

第3期 张延龙等:利用Ajax技术实现天气预报(警报)的实时更新 。345· 

浏览器端 

服务器端 

JavaScript调用 

用户界 

Web 数据库 

回 

服务器 一l服务器 

图2 采用Ajax技术的气象网站模型 

2 Ajax中的关键技术 

在Web2.0阶段,Ajax并不是一门新的语言或技 

术,它实际上是多种技术的综合运用。Ajax包括以下内 

容:使用XHTML和CSS实现标准化的界面呈现,使用 

DOM实现动态的显示和交互,使用XML和XSTL进行 

数据的交换与处理,使用xmlHttpRequest对象实现与服 

务器的异步数据通信,使用Javascript将XHTML、DOM、 

XML、xMLHttpRequest绑定和所有数据的处理。Ajax的 

个最大特点就是无需刷新页面便可向服务器传输或 

读写数据 ,它的核心是JavaScript对象XmlHttpRe· 

quest,该对象在Internet Explorer 5中首次引入。XmlHt— 

tpRequest对象负责将用户信息以异步通信的方式发送 

到服务器端,并接收来自服务器返回的响应信息和数 

据。同时xmlHttpRequest提供了一系列的属性和方法, 

用来向服务器发送异步的Http请求;在服务器处理用户 

请求的过程中,xmlHttpRequest通过属性的状态值来实 

时反映Http请求所处的状态,并根据这些状态指示 

Javascript做相应的处理 ;当服务器顺利完成响应用户 

行为的动作、并将响应数据返回时,xmlHttpRequest提 

供的response系列方法,可以将这些数据以文本、XML— 

Document对象、AdoStream对象或者Unsigned bye数组 

的方式组装起来,提供给Javascript处理。 

3 Ajax无刷新技术实现天气预报(警报)实时 

更新的方法 

3.1浏览器端实时更新的实现方式 

用户进入以后(整个session的时效之内),如果收 

到新的天气预报(警报)内容网页立即进行实时刷新并 

发出声音提示。操作思路为:首先,浏览器端在页面加 

载完毕后,启动一个循环计时器反复调用获取更新信息 

的函数,更新函数通过xmlHttpRequest对象向服务器发 

送获取请求,然后根据服务器的响应结果判断浏览器端 

天气预报(警报)的内容是否需要更新,若有新数据则将 

其内容写入页面相应位置并发出声音提示。具体实现 

程序为: 

<script type=”text/javascript”> 

var xmlHttp;//用于保存xMLHttpRequest对象的全局 

变量 

var refreshTime=1000¥60;//自动刷新时间间隔,设 

计为60s(1min) 

var Refreshstate=false;//是否处于自动刷新过程中 

function createXmlHttp() //用于创建XmlHttpRequest 

对象 

{ 

//根据window.XmlHttpRequest对象判断是否存在使用 

不同的创建方式 

if(window.xMLHttpRequest) 

xmlHttp new xmlHttpRequest();//FireFox、Opera 

等浏览器支持 

}else{ 

xmlHttp=new ActiveXObject f”Microsoft.XMLHT· 

TP”);//IE浏览器支持 

} 

} 

function checkNewtqyb()//获取最新天气预报(警报) 

内容 

{ 

if(Refreshstate) 

{ 

return://如果已在刷新过程中,直接返回,取消操作 

}else{ 

Refreshstate=true://设置刷新状态为true 

createXmlHttp();//g ̄J建xMLHttpRequest对象 

xmlHttp.open(”GET”,”checktqyb.js p'l,true); 

xmlHttp.onreadystatechange=writedata;//设置回调 

函数 

xmlHttp.send(nul1);//发送GET请求 

} 

} 

function writedata()//将最新内容写入页面 

{ 

if(xmlHttp.readyState==4)&&(xmlHttp.States 

==

200、 

//readyState对象状态(integer)=4表示数据接收 

完毕,States=200,表示H T1’P请求成功 

{ 

Refreshstate=false;//获取成功,设置刷新状态 

为false 

var response=xmlHttp.responseText: 

if(response==1)//判断为假 

{ 

return; 

}else{// ̄lJ断为真 

try{ 

xmlHttp.open(”GET”,”tqyb.txt”,true); 

xmlHttp.onreadystatechange =handleChange; 

xmlHttp.send(nul1); 

维普资讯

·

346· 中国农业气象 第29卷 

jian.txt”);//建立FileReader对象,并设定由fr对象变 

} 

} 

} 

function handleChange() 

量引用 

BufferedReader br=new BufferedReader(fr);//建 

立BufferedReader对象,并设定由br对象变量引用 

shijianl=br.readLong();//读取一行数据 

Shijian2=lastModiifed(path+”\\tqyb.txt”);读取 

文件的修改时间 

{ 

if(xmlHttp.readyState==4)&&(xmlHttp.status 

==

200、 

{ 

document.write f’<IFRAME name=tqyb marginWidth= 

0 marginHeight=0 src=”text/txyb.txt”frameBorder=0 

width=21 8 scrolling=auto height=80 cellpadding=”0” 

cellspacing=”0”></IFRAME>’);//刷新内容 

<EMBED src’music/tqyb.wav’hidden=true autostart 

=true loop:false>;声音提示 

} 

} 

//初始化获取最新内容,并设置定时获取函数调用 

function init() 

{ 

setlnterval(”checkNewtqyb()”,refreshTime); 

} 

</script> 

</head> 

<body><IFRAME name=tqyb marginWidth:0 mar— 

ginHeight=0 src=”text/txyb.txt”frameBorder=0 width 

21 8 scrolling=auto height=80 cellpadding=”0”cell— 

spacing=”0”></IFRAME>: 

onload=”init(、”> 

3.2服务器端的实现方式 

服务器在收到浏览器端发送的请求后,根据天气预 

报(警报)文件的修改时间判断其内容是否为最新的,然 

后将结果及时传送给请求的浏览器端,其中lastModiifed 

()返回文件上次修改时间(从GMT1970年1月1日开 

始计,单位:ms)。 

具体程序为: 

checktqyb.jsp 

<%@page contentType=”text/html:charset=UTF一 

8”%>//设置为UTF一8防出现中文乱码止 

<%@page language=”java”%> 

<%@page import=”java.util. ,java.text.%,java. 

io. ”%> 

<% 

Long shijian l,shijian2; 

FileReader fr=new FileReader(path+”\\shi— 

If shijian1.equals(shijian2) 

{ 

Response.getwriter().print(1)//输出1表示 

tqyb.txt没有新内容 

}else{ 

Response.getwriter().print(0); 

br.close();//关闭BufferedReader对象 

fr.close();//关闭文件 

File f=new File(path,”shijian.txt”); 

if(f.exists()){//检查shijian.txt是否存在 

f.delete();//删除shijian.txt文件} 

FneWriter fw=new FileWriter(path+”\\shijian. 

txt”);//建立FileWrite对象,并设定由fw对象变量引用 

fw.writeLong(shijian2);//将tqyb.txt的修改时间 

写入文件 

fw.close();//关闭文件 

} 

} 

%> 

4 结语 

本文详细介绍了利用Ajax无刷新技术实现气象网 

站中天气预报(警报)内容局部实时更新的程序,可操作 

性强,具有实际应用价值。实际上这种技术的应用范围 

很广,在更新频繁(文字现场直播、股票价格的改变)、快 

速响应、局部刷新等情况下具有极大的推广价值,有利 

于提高网站的刷新效率。但是在设计刷新时要注意两 

个问题:第一,刷新问隔设置要合理,太频繁会对服务器 

造成压力,时间太长数据的时效性又无法保证;第二,由 

于网络原因刷新时间可能较长,所以要设置一个标识 

(本文为Refreshstate),以保证在一个请求尚未处理完毕 

时,新的请求不予执行。 

参考文献: 

[1]秦大河.中国气象事业发展战略研究[M].北京:气象出版 

社,2004:55. 

[2]柯自聪.Ajax开发精要——概念、案例与框架[M].北京:电 

子工业出版社,2006:3_4. 

[3]张桂元,贾燕枫,姜波.征服Ajax web2.0快速入门与项目实 

践(java)[M].北京:人民邮电出版社,2006:112. 

[4]王嘉.Ajax经典案例开发大全[M].北京:清华大学出版社, 

2007:223. 


发布者:admin,转转请注明出处:http://www.yc00.com/news/1718906593a2753455.html

相关推荐

发表回复

评论列表(0条)

  • 暂无评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信