网页动态曲线详细设计.doc

《网页动态曲线详细设计.doc》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、为了能够实时，动态地展示传感器传递过来的信息，我们采用了JSP+Javascript+Html的方式实现了实时动态展示效果；其中关键技术突破包括以下几点：1.数据库数据的获取。假定传感器已经通过远程将数据传输过来并存入数据库对应的表，需要定时定量地从中挑选出最新的数据并切除其中的冗余和坏值。JSP能够实现与与数据库方便地进行建立连接、释放连接，通过JDBC驱动桥来驱动数据源对数据库进行访问。2.JSP应用程序服务器与JavaScript脚本程序之间的数据共享。由于JSP部分是单独在服务器端执行的，而用来绘图的部分是在浏览器端执行的，

2、所以这两者之间的数据共享是至关重要的。下面是我们设计中的方案：1)JSP获取JavaScript数据：通过表单的强大功能，可以将网页内的信息打包发送给JSP使用，关键对象是：Request对象，关键函数是getParameter（）；使用这个函数可以方便获取页面参数；2)JavaScript获取JSP数据：通过JSP已经可以从数据库读取到传感器的数据了，要如何将这些数据从服务器端交给浏览器段呢？使用以下代码：Varss=<%=SSL%>,其中ss是javascript变量，SSL是JSP中的变量，这样就可以完成JavaScript获

3、取JSP数据的功能，使用数组原理也是一样的。3.数据读取与展示的设计。JSP可以嵌入到网页当中任意位置，但是当浏览器访问网站的时候JAVA应用程序服务器会主动挑出其中的java代码段然后送到服务器去执行，所以想要通过不间断地获取新鲜数据几乎只有通过不断地刷新才有可能实现（因为应用程序服务器不可能只为一个用户单独建立一个进程让它去按时执行，否则服务器很容易奔溃）。而要以比较高的频率刷新页面会导致整个页面不完整或者对浏览者造成不适感。传感器传输数据是有一定频率的，每秒钟多少个数据都是约定好的，所以我们没有必要在极短的时间内（比如0.5秒

4、或是更短）进行新数据的获取，只需要依据实际的传输频率，每次刷新时候读出前一个阶段的数据即可。例如，轨道温度传感器1每1分钟传输一次数据，这就意味着这部分数据里面包含且只能包含接收到数据前一分钟内传感器检测到的情况，所以，我们只需要按照这个频率一次读取60个数据（默认每秒一个），然后在接下来的一秒时间内将这些数据展示出来，类似于一个过程的回放。这样就可以实现数据的动态显示，并且刷新频率很低，不会造成浏览者的不适感，界面整体效果也会比较完美。4.数据曲线的绘制。在已经得到数据的基础上，怎么精确，合理，界面友好地展示给浏览着便成为首要问题

5、。早web开发中也有各式各样的技术用于实现此功能，例如纯Java的Jfree，还有Microsoft的VML(矢量标记语言)，还有Google的CANVAS，还有HighChart等。我们最终选择的是HighChart，这是一个纯粹使用JAVASCRIPT实现的工具库，最大的优点在于它弥补了其他各个方案的弱点并且本身也能绘制出让人比较满意的矢量图形，例如：JFREE是一款借助JAVA的工具语言，离开了Java的平台，这个功能就会完全散失，而我们看到当前有一部分浏览器已经开始不支持java了；VML的弱点就如同windows本身的弱点

6、一样，只能用于windows的操作系统的IE浏览器，换了别的非IE内核浏览器就不行了，但是目前主流服务器还是通过非图形化的linux或者是unix操作系统搭建的，所以为了更好的平台可移植性我们放弃了VML；Canvas或许是Google为了对抗Microsoft而研发的一款工具，其功能类似于VML，转换部分但是由Google来完成的；HighChart是一款完全基于javascript而运行的脚本语言工具包，任何支持JavaScript的浏览器都可以完成解析，而且不会对服务器端产生工作负担，只要有数据，绘图部分都交给浏览器来执行，这

7、样就释放了服务器的负担，这将大大有利于服务器的运转，即便是在访问量很大的时候。