AJAX + SVG 实现实时监控图表-Jquery真的不难~第七回 JS也要...-用nvm管理nodejs

当前位置: 编程技术>WEB前端

本页文章导读:

▪AJAX + SVG 实现实时监控图表简介： AJAX 已经有很多文章介绍它的原理及其应用了。但是遗憾的是现在并没有很多结合实际项目应用。本文结合实际项目中的应用来讲述利用 AJAX 和SVG 技术如何创建各种激动人心的功能，.........

▪Jquery真的不难~第七回 JS也要面向对象回到目录　　　　前几篇文章以JQ为主，本系列的八篇文章中，第一讲为ＪＳ基础，从第二讲开始到第六讲主要是ＪＱ基础知识，而第七讲与第八讲是ＪＳ中的一些高级应用，写到这里，也快.........

▪用nvm管理nodejs 用nvm管理nodejs 公司开发机上用的node.js版本还是 v0.4.9，想升级到最新，于是用了nvm（https://github.com/creationix/nvm）。按照官网说法，安装nvm,得先有git，自己用的是cent.........

[1]AJAX + SVG 实现实时监控图表

来源: 互联网发布时间: 2013-11-06

简介： AJAX 已经有很多文章介绍它的原理及其应用了。但是遗憾的是现在并没有很多结合实际项目应用。本文结合实际项目中的应用来讲述利用 AJAX 和SVG 技术如何创建各种激动人心的功能，并附带可以运行的例子和源代码。

前言

AJAX 已经有很多文章介绍它的原理及其应用了。但是遗憾的是现在并没有很多结合实际项目应用。本文结合实际项目中的应用来讲述利用 AJAX 和SVG 技术如何创建各种激动人心的功能，并附带可以运行的例子和源代码。

本文需要一定的 AJAX，SVG 知识和应用经验。当然它们都可以在 ibm.com/developerworks/cn 上找到。

个人对于 AJAX 应用的建议是如果传统的 MVC 能够满足的应用，没有必要使用AJAX来代替，因为这里 AJAX 唯一能带来的好处只是无刷新。AJAX 是用来帮助我们实现以往使用传统 web 技术难以实现的功能的。

技术名词

1． AJAX ，AJAX(Asynchronous JavaScript and XML)是多种技术的综合，它使用 XHTML和 CSS 标准化呈现，使用 DOM 实现动态显示和交互，使用 XML 和 XSTL 进行数据交换与处理，使用 XMLHttpRequest 对象进行异步数据读取，使用 Javascript 绑定和处理所有数据。更重要的是它打破了使用页面重载的惯例技术组合，可以说 AJAX 已成为 Web 开发的重要武器

2． SVG(Scalable Vector Graphic) 是一个标准开放的矢量图像格式。它使你设计的网页可以更加精彩，更加细致。使用简单的文本命令，SVG 甚至可以做出诸如色彩线性变化、自定义置入字体、透明、动态效果、虑镜效果等各式常见的图像效果。SVG 图像是基于 XML(可扩展标识语言--未来的网络语言)的应用，并由 W3C 组织的 SVG 开发组负责详细的研究和开发。

3． DWR，DWR是一个开源的类库，可以帮助开发人员开发包含 AJAX 技术的网站。它可以允许在浏览器里的代码使用运行在 WEB 服务器上的 JAVA 函数，就像它就在浏览器里一样。

阅读本文最好具有下列知识：

1. AJAX 开发应用

2．SVG 相关知识，特别是与JavaScript交互。(developerworks 上有非常详尽 SVG 的技术文章)

3． DWR基础。 (developerWworks 上有非常详尽的DWR框架的技术文章和例子，本文不详细结束DWR基础知识。)例如： http://www.ibm.com/developerworks/cn/java/j-ajax3/

实际效果

技术叙述的再好，不如一个实际的例子，我们先看看实际效果。读者可以先下载本文附带的例子，发布到任何一个支持JSP1.1的servle服务器上，例如Tomcat4.0或者 webshpere,weblogic上，然后访问页面：http://localhost:端口/ajaxSVG/DyMeter.jsp。(以Tomcat为例，端口就是8080)

点击开始按钮，你会发现图表的指针会根据服务器的数据实时摆动。很类似与一个汽车仪器仪表盘，这是以往 cs 软件或者是 flash 才能实现的效果，现在我们使用纯 web 的形式实现了。

从专业术语来说，它实际上是一个 Dash Board，其实在各种 BI（商业智能）应用中都可以看到它，它的灵感来自于汽车的仪表盘，它非常直观的反映了当前数据的状态，例如处于危险，安全，过低等等。

当然它并不新鲜，很多软件都能提供这种图表，我们今天要使用 AJAX 和 SVG 来突破传统应用，以往的软件生成的图片都是静态的，注意我这里的静态是指它们生成的图片上的指针不会像真正的汽车仪表盘一样随着汽车的各种数据的变化，例如速度、油量的变化而摆动，根据汽车的实时速度而摆动，而是用户刷新一次页面，软件根据服务器端的数据重新生成图片再显示给最终用户。

传统的这种方式对于一般的 BI 应用来说是完全足够了，但是对于实时性要求比较高的系统来说，利用监控系统来说，不可能要求用户随时刷新页面，或者使用 JavaScript 来定时刷新页面，这样效果非常差，而且服务器端反复在内存，或者硬盘中生成图片，用户数量多之后，系统负担太重了。

我们抛开技术想一下，我们实际上只想改变指针的位置就行了，根本没有必要生成整个图片或者是传递整个图片的数据给客户端。这种设置非常不合理，但是这在以往的技术上是难以完成的。

现在如果使用AJAX技术，我们只需要传输过来当前的数据，告诉仪表盘的指针应该指向哪里就行了。无需页面刷新，无需重新生成图片，并且网络端，服务器端，用户端的开销都非常少，以往的方案没有经验的程序员经常会导致内存溢出，现在采用这种方案这种错误的风险就大大减小了。

回页首

原理

其实原理并不复杂，我们利用 SVG 来绘制仪表盘，然后利用 AJAX 技术定时向服务器请求更新数据（也就是指针所指向的数据），如果数据更新了，则调用 JavaScript 脚本让SVG 的仪表盘重新定位指针，这样就实现了图表的实时刷新。下图描述了各种技术的在本教程中的用途。

回页首

代码细节

这个例子程序由一个 SVG 文件，JSP 文件，和一个 JAVA 类组成：

MeterRemote.java
MeterChart.svg
DyMeter.jsp

首先看看 MeterRemote.java，它生成了指针所指向的数据，作为例子我只是生成一个随机数据，在实际项目中它就应该是返回实际的数据，例如，汽车仪表盘就是当前汽车的时速。它们在实际项目中可以来自在实际项目中数据可以是来自数据库，JMS，Web 服务，EJB 等。

import java.util.Random;
public class MeterRemote {
	
	private double curr_value,full_value=200;
	
	public double getDegree(){
	Random r=new Random();
	curr_value=r.nextInt(200);
	
	return 	curr_value/full_value*270;
	}

}

接着我们利用 DWR 引擎把该 Java 类发布，让远程 AJAX 应用能够调用该 Java 类的方法 getDegree（）。

打开 dwr.xml 文件，在本文提供的例子从您可以看到它，添加如下代码：

<allow>
    <create creator="new" javascript="MeterRemote">
      <param name="class" value="com.nbw.svg.DyChart.ajax.MeterRemote"/>
    </create>
 </allow>

这样 DWR 就把一个 Java 类发布出来了，可以在页面通过 js 就可以直接调用它了，非常的简单。它和大多数框架一样使用了一个 xml 文件来完成自己的配置，使用 creat 标签可以发布一个 java 类，creator=new 表明创建方式是通过new来创建实例，java 类这里的配置都是一样的，因为它支持spring和struts才会有不同的creator。Javascript="MeterRemote"说明了它在页面中使用MeterRemote对象(js对象)来调用。Param标签就定义了具体的类的名称。使用DWR还可以指定调用的权限和指定具体的java类的方法，而不是把所有的对象的方法都发布出来。跟多的配置信息请查阅ibm上其它文章。

重新启动服务器，使用浏览器打开如下地址：
http://localhost:8080/ajaxSVG/dwr

如下图所示：

会看到MeterRemote链接，说明发表成功了，单击该链接http://localhost:8080/ajaxSVG/dwr/test/MeterRemote会看到测试页面，它上面包含了如何使用，和可以调用的方法。

如下图所示：

你可以点击 Excute 来测试一下效果，这样网页就能够直接调用 java 端的程序了。接着我们看看 JSP 文件。

首先导入 js，这样才能：

1.<script type='text/javascript' src='/ ajaxSVG
/dwr/engine.js'></script>
2.<script type='text/javascript' src='/ ajaxSVG
/dwr/util.js'></script>
3.<script type='text/javascript'src='/ ajaxSVG
/dwr/interface/MeterRemote.js'><

[2]Jquery真的不难~第七回 JS也要面向对象

来源: 发布时间: 2013-11-06

回到目录　　

　　前几篇文章以JQ为主，本系列的八篇文章中，第一讲为ＪＳ基础，从第二讲开始到第六讲主要是ＪＱ基础知识，而第七讲与第八讲是ＪＳ中的一些高级应用，写到这里，也快要和《Jquery真的不难》说再见了，有点舍不得，恩，连续的两天失眠，呵呵，不知道为什么，可能是兴奋过度了吧，呵呵，总之这几天的状态超级好，我喜欢这种感觉，非常感谢！

ＪＳ也要面向对象这个题目很大，我是搞Ｃ#开发的，而Ｃ#是个面向人性化的语言，呵呵，我更希望把面向对象改成面向人性化，呵呵，因为只有你把它拟人化之后，你才能更好的去学习吧，编程，上学时大多人说它是个枯燥的东西，编程课卓见变成了睡觉课，呵呵，但似乎从那里起，我就已经被代码吸引了，不知道为什么，但到今天我终于找到原因了，因为我把代码拟人化了，或者说我被代码拟人化了，呵呵！

一　函数实现的面向对象

二　通过ＪＳ对象实现的面向对象

　　　　　　　//一个人
var People = {
Name: "lose.zhang",
Age: 30,
Enjon: ["C#", "JS", "SQL", "NoSQL", "SOA", "AOP", "IOC", "DynamicProxy", "OOD&DDP"],
Print: function (msg) {
console.log(msg);
},
Work: {
Name: "Software Architect",
Salary: "保密",
Print: function () {
console.log("这个人：" + People.Name
+ ",他的年龄：" + People.Age
+ ",他的特长是：" + People.Enjon
+ ",它的职位是：" + this.Name
+ ",它的薪水是：" + this.Salary);
}
}
};
People.Work.Print();

恩，在这些代码实现过程中，有几个基础东西要撑握一下了：

声明变量：var x=1;

声明数组：var xArr=[];

声明对象：var xObject={};

声明函数：var xFunction=function(){};

函数实例：var xFunInstance=new xFunction();

函数扩展方法：XFunction().prototype.ExtensionForPrint(){}; //只有函数的实例对象，才能访问扩展方法

恩差不多了，就到这里吧！

感谢阅读！

回到目录

本文链接

[3]用nvm管理nodejs

来源: 发布时间: 2013-11-06

用nvm管理nodejs

公司开发机上用的node.js版本还是 v0.4.9，想升级到最新，于是用了nvm（https://github.com/creationix/nvm）。

按照官网说法，安装nvm,得先有git，自己用的是centos5.4时还没有，所以先在centos上安装git。由于centos上默认yum源是没有git的，所以想通过yum install简单安装的希望破灭。Google一把，找到了安装的命令：

yum -y install zlib-devel openssl-devel perl cpio expat-devel gettext-devel

wget http://git-core.googlecode.com/files/git-1.7.7.5.tar.gz

./configure –prefix=/usr/local/git

make

make install

可是又出现yum源错误，mirror里找不到 (没有问题的可以略过)

file://media/CentOS_5.2_Final/repodata/repomd.xml:[Error 5] OSError：［Errno 2］

Trying other mirror.

Error: Cannot retrieve repository metadata(repomd.xml) for repository: c5-media.

Please verify its path and try again

继续google之，只能重新配理yum，修改/etc/yum.repos.d/CentOS-Base.repo：

内容为[base]
name=CentOS-5 - Base
#mirrorlist=http://mirrorlist.centos.org/?release=$releasever5&arch=$basearch&
repo=os
#baseurl=http://mirror.centos.org/centos/$releasever/os/$basearch/
baseurl=http://ftp.sjtu.edu.cn/centos/5.3/os/$basearch/
gpgcheck=1
gpgkey=http://mirror.centos.org/centos/RPM-GPG-KEY-centos5

#released updates
[update]
name=CentOS-5 - Updates
#mirrorlist=http://mirrorlist.centos.org/?release=4&arch=$basearch&repo=updates
baseurl=http://ftp.sjtu.edu.cn/centos/5.3/updates/$basearch/
gpgcheck=1
gpgkey=http://mirror.centos.org/centos/RPM-GPG-KEY-centos5

#packages used/produced in the build but not released
[addons]
name=CentOS-5 - Addons
#mirrorlist=http://mirrorlist.centos.org/?release=4&arch=$basearch&repo=addons

baseurl=http://ftp.sjtu.edu.cn/centos/5.3/addons/$basearch/
gpgcheck=1
gpgkey=http://mirror.centos.org/centos/RPM-GPG-KEY-centos5

#additional packages that may be useful
[extras]
name=CentOS-5 - Extras
#mirrorlist=http://mirrorlist.centos.org/?release=4&arch=$basearch&repo=extras

baseurl=http://ftp.sjtu.edu.cn/centos/5.3/extras/$basearch/
gpgcheck=1
gpgkey=http://mirror.centos.org/centos/RPM-GPG-KEY-centos5

#additional packages that extend functionality of existing packages
[centosplus]
name=CentOS-5 - Plus
#mirrorlist=http://mirrorlist.centos.org/?release=4&arch=$basearch&repo=centosplus
baseurl=http://ftp.sjtu.edu.cn/centos/5.3/centosplus/$basearch/
gpgcheck=1
enabled=0
gpgkey=http://mirror.centos.org/centos/RPM-GPG-KEY-centos5

#contrib - packages by Centos Users
[contrib]
name=CentOS-5 - Contrib
#mirrorlist=http://mirrorlist.centos.org/?release=4&arch=$basearch&repo=contrib
baseurl=http://ftp.sjtu.edu.cn/centos/5.3/contrib/$basearch/
gpgcheck=1
enabled=0
gpgkey=http://mirror.centos.org/centos/RPM-GPG-KEY-centos5

配好yum后，就可以再安装git所依赖的库了

然后再安装好git后，再安装nvm就很快了，可直接执行官网上提供的命令：

wget -qO- https://raw.github.com/appleboy/nvm/develop/install.sh | sh

完后，运行nvm, 提示nvm command not found，再次google和官网上搜，以及自己破天荒实验所得，得把. ~/.nvm/nvm.sh 加到 ~/.bashrc 下, 在 ~/.profile下要加上

mesg n

[[ -s /home/frontend/.nvm/nvm.sh ]] && . /home/frontend/.nvm/nvm.sh # This loads NVM

注：/home/frontend/ 为用户目录

之后运行nvm，就会出来

可以按照提示输入命令，比如，我想用最新的基础稳定版，则直接执行 nvm install stable，查看已安装的node版本，输入 nvm ls，非常方便。看下我目前装了两个版本：

保留了以前的v0.4.9，以免新版本出现问题，可以采用 npm use ，在版本间来回自由切换。为了保证每次打开新的shell运行窗口时，系统默认采用的node版本，可以使用nvm alias default 0.4 命令。

另：我在centos上运行node的v0.8.17时，出现以下提示

这是由于CentOS 5自带的glibc库版本过低，我们无法用直接使用新版的Node

运行nodejs 0.8.17报错，具体可以看这里解决：（http://www.noanylove.com/2012/11/centos-5-install-node-js/）

话不择多，thanks all!!!

http://www.cnblogs.com/caozf/

本文链接