利用canvas进行 最大邻域法 图像放大

利用html5中的canvas可以进行在线图片处理，下面以放大图片为例来介绍基本方法。

图片放大可以用很多插值方法，比如在html中指定img元素的width属性时，浏览器会自动对其进行插值放大。但一些时候我们需要自定义的插值放大方法，比如下面的链接演示了雷达回波图片的放大，采用了基本的最大邻域法来进行放大，这时需要我们自己来写算法。

先看演示：雷达回波图采用最大邻域法来进行放大

下面是主要的两个处理函数：

//获取图片像素信息
var getImagePixelData = function(img){
	var canvas = $('')[0];
	canvas.width = img.width;
	canvas.height = img.height;
	
	var context = canvas.getContext('2d');//获取2D绘制上下文context 原生API
	
	context.drawImage(img, 0, 0);//在context中绘制图片 原生API
	
	return context.getImageData(0,0,img.width, img.height);//获取context中的像素数据 原生API
}

//利用包含图片像素数据的对象imageData 获取 放大后的对象newImageData
var scaleImage = function(imageData, newImageData){
	
	var ow = imageData.width, oh = imageData.height;
	
	var scalew = newImageData.width/ow,
	scaleh = newImageData.height/oh;
	
	var se1, se2, se3;
	
	var pos = 0, pos2 = 0;
	
	for(var y = 0; y < oh; y++){
		for(var x = 0; x < ow; x++){
		
			if(imageData.data[pos+3]){
				for(var ny = Math.floor(y*scaleh); ny < Math.floor((y+1)*scaleh); ny++){
					for(var nx = Math.floor(x*scalew); nx < Math.floor((x+1)*scalew); nx++){
						pos2 = (ny*newImageData.height + nx)*4;
						newImageData.data[pos2] = imageData.data[pos];
						newImageData.data[pos2+1] = imageData.data[pos+1];
						newImageData.data[pos2+2] = imageData.data[pos+2];
						newImageData.data[pos2+3] = imageData.data[pos+3];
					}
				}
			
			}
			pos += 4;
		}
	}
	
	return newImageData;
}

使用 HTML5 WebSocket 构建实时 Web 应用

作为下一代的 Web 标准，HTML5 拥有许多引人注目的新特性，如 Canvas、本地存储、多媒体编程接口、WebSocket 等等。这其中有“Web 的 TCP ”之称的 WebSocket 格外吸引开发人员的注意。WebSocket 的出现使得浏览器提供对 Socket 的支持成为可能，从而在浏览器和服务器之间提供了一个基于 TCP 连接的双向通道。Web 开发人员可以非常方便地使用 WebSocket 构建实时 web 应用，开发人员的手中从此又多了一柄神兵利器。本文首先介绍 HTML5 WebSocket 的基本概念以及这个规范试图解决的问题，然后介绍 WebSocket 的基本原理和编程接口。接下来会通过一个简单案例来示范怎样实现一个 WebSocket 应用，并且展示 WebSocket 如何在功能强大和编程简单易用上达到的完美统一。最后介绍了目前主流浏览器对 WebSocket 支持的状况、局限性以及未来的展望。

实时 Web 应用的窘境

Web 应用的信息交互过程通常是客户端通过浏览器发出一个请求，服务器端接收和审核完请求后进行处理并返回结果给客户端，然后客户端浏览器将信息呈现出来，这种机制对于信息变化不是特别频繁的应用尚能相安无事，但是对于那些实时要求比较高的应用来说，比如说在线游戏、在线证券、设备监控、新闻在线播报、RSS 订阅推送等等，当客户端浏览器准备呈现这些信息的时候，这些信息在服务器端可能已经过时了。所以保持客户端和服务器端的信息同步是实时 Web 应用的关键要素，对 Web 开发人员来说也是一个难题。在 WebSocket 规范出来之前，开发人员想实现这些实时的 Web 应用，不得不采用一些折衷的方案，其中最常用的就是轮询 (Polling) 和 Comet 技术，而 Comet 技术实际上是轮询技术的改进，又可细分为两种实现方式，一种是长轮询机制，一种称为流技术。下面我们简单介绍一下这几种技术：

轮询：

这是最早的一种实现实时 Web 应用的方案。客户端以一定的时间间隔向服务端发出请求，以频繁请求的方式来保持客户端和服务器端的同步。这种同步方案的最大问题是，当客户端以固定频率向服务器发起请求的时候，服务器端的数据可能并没有更新，这样会带来很多无谓的网络传输，所以这是一种非常低效的实时方案。

长轮询：

长轮询是对定时轮询的改进和提高，目地是为了降低无效的网络传输。当服务器端没有数据更新的时候，连接会保持一段时间周期直到数据或状态改变或者时间过期，通过这种机制来减少无效的客户端和服务器间的交互。当然，如果服务端的数据变更非常频繁的话，这种机制和定时轮询比较起来没有本质上的性能的提高。

流：

流技术方案通常就是在客户端的页面使用一个隐藏的窗口向服务端发出一个长连接的请求。服务器端接到这个请求后作出回应并不断更新连接状态以保证客户端和服务器端的连接不过期。通过这种机制可以将服务器端的信息源源不断地推向客户端。这种机制在用户体验上有一点问题，需要针对不同的浏览器设计不同的方案来改进用户体验，同时这种机制在并发比较大的情况下，对服务器端的资源是一个极大的考验。

综合这几种方案，您会发现这些目前我们所使用的所谓的实时技术并不是真正的实时技术，它们只是在用 Ajax 方式来模拟实时的效果，在每次客户端和服务器端交互的时候都是一次 HTTP 的请求和应答的过程，而每一次的 HTTP 请求和应答都带有完整的 HTTP 头信息，这就增加了每次传输的数据量，而且这些方案中客户端和服务器端的编程实现都比较复杂，在实际的应用中，为了模拟比较真实的实时效果，开发人员往往需要构造两个 HTTP 连接来模拟客户端和服务器之间的双向通讯，一个连接用来处理客户端到服务器端的数据传输，一个连接用来处理服务器端到客户端的数据传输，这不可避免地增加了编程实现的复杂度，也增加了服务器端的负载，制约了应用系统的扩展性。

WebSocket 的拯救

HTML5 WebSocket 设计出来的目的就是要取代轮询和 Comet 技术，使客户端浏览器具备像 C/S 架构下桌面系统的实时通讯能力。 浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。因为 WebSocket 连接本质上就是一个 TCP 连接，所以在数据传输的稳定性和数据传输量的大小方面，和轮询以及 Comet 技术比较，具有很大的性能优势。Websocket.org 网站对传统的轮询方式和 WebSocket 调用方式作了一个详细的测试和比较，将一个简单的 Web 应用分别用轮询方式和 WebSocket 方式来实现，在这里引用一下他们的测试结果图：

[caption id="" align="alignnone" width="504"]图 1. 轮询和 WebSocket 实现方式的网络负载对比图[/caption]

通过这张图可以清楚的看出，在流量和负载增大的情况下，WebSocket 方案相比传统的 Ajax 轮询方案有极大的性能优势。这也是为什么我们认为 WebSocket 是未来实时 Web 应用的首选方案的原因。

WebSocket 规范

WebSocket 协议本质上是一个基于 TCP 的协议。为了建立一个 WebSocket 连接，客户端浏览器首先要向服务器发起一个 HTTP 请求，这个请求和通常的 HTTP 请求不同，包含了一些附加头信息，其中附加头信息”Upgrade: WebSocket”表明这是一个申请协议升级的 HTTP 请求，服务器端解析这些附加的头信息然后产生应答信息返回给客户端，客户端和服务器端的 WebSocket 连接就建立起来了，双方就可以通过这个连接通道自由的传递信息，并且这个连接会持续存在直到客户端或者服务器端的某一方主动的关闭连接。

下面我们来详细介绍一下 WebSocket 规范，由于这个规范目前还是处于草案阶段，版本的变化比较快，我们选择 draft-hixie-thewebsocketprotocol-76版本来描述 WebSocket 协议。因为这个版本目前在一些主流的浏览器上比如 Chrome,、FireFox、Opera 上都得到比较好的支持，您如果参照的是新一些的版本话，内容可能会略有差别。

一个典型的 WebSocket 发起请求和得到响应的例子看起来如下：

清单 1. WebSocket 握手协议

客户端到服务端： 
GET /demo HTTP/1.1 
Host: example.com 
Connection: Upgrade 
Sec-WebSocket-Key2: 12998 5 Y3 1 .P00 
Upgrade: WebSocket 
Sec-WebSocket-Key1: 4@1 46546xW%0l 1 5 
Origin: http://example.com 
[8-byte security key] 

服务端到客户端：
HTTP/1.1 101 WebSocket Protocol Handshake 
Upgrade: WebSocket 
Connection: Upgrade 
WebSocket-Origin: http://example.com 
WebSocket-Location: ws://example.com/demo 
[16-byte hash response]

这些请求和通常的 HTTP 请求很相似，但是其中有些内容是和 WebSocket 协议密切相关的。我们需要简单介绍一下这些请求和应答信息，”Upgrade:WebSocket”表示这是一个特殊的 HTTP 请求，请求的目的就是要将客户端和服务器端的通讯协议从 HTTP 协议升级到 WebSocket 协议。从客户端到服务器端请求的信息里包含有”Sec-WebSocket-Key1”、“Sec-WebSocket-Key2”和”[8-byte securitykey]”这样的头信息。这是客户端浏览器需要向服务器端提供的握手信息，服务器端解析这些头信息，并在握手的过程中依据这些信息生成一个 16 位的安全密钥并返回给客户端，以表明服务器端获取了客户端的请求，同意创建 WebSocket 连接。一旦连接建立，客户端和服务器端就可以通过这个通道双向传输数据了。

在实际的开发过程中，为了使用 WebSocket 接口构建 Web 应用，我们首先需要构建一个实现了 WebSocket 规范的服务器，服务器端的实现不受平台和开发语言的限制，只需要遵从 WebSocket 规范即可，目前已经出现了一些比较成熟的 WebSocket 服务器端实现，比如：

• Kaazing WebSocket Gateway — 一个 Java 实现的 WebSocket Server


• mod_pywebsocket — 一个 Python 实现的 WebSocket Server


• Netty —一个 Java 实现的网络框架其中包括了对 WebSocket 的支持


• node.js —一个 Server 端的 JavaScript 框架提供了对 WebSocket 的支持

如果以上的 WebSocket 服务端实现还不能满足您的业务需求的话，开发人员完全可以根据 WebSocket 规范自己实现一个服务器。在“WebSocket 实战”这一节，我们将使用 Microsoft .NET 平台上的 C# 语言来打造一个简单的 WebSocket 服务器，继而构建一个简单的实时聊天系统。

WebSocket JavaScript 接口

上一节介绍了 WebSocket 规范，其中主要介绍了 WebSocket 的握手协议。握手协议通常是我们在构建 WebSocket 服务器端的实现和提供浏览器的 WebSocket 支持时需要考虑的问题，而针对 Web 开发人员的 WebSocket JavaScript 客户端接口是非常简单的，以下是 WebSocket JavaScript 接口的定义：

清单 2. WebSocket JavaScript 定义

 [Constructor(in DOMString url, in optional DOMString protocol)] 
 interface WebSocket { 
   readonly attribute DOMString URL; 
        // ready state 
   const unsigned short CONNECTING = 0; 
   const unsigned short OPEN = 1; 
   const unsigned short CLOSED = 2; 
   readonly attribute unsigned short readyState; 
   readonly attribute unsigned long bufferedAmount; 
   //networking 
   attribute Function onopen; 
   attribute Function onmessage; 
   attribute Function onclose; 
   boolean send(in DOMString data); 
   void close(); 
 }; 
 WebSocket implements EventTarget; 

其中 URL 属性代表 WebSocket 服务器的网络地址，协议通常是”ws”,send 方法就是发送数据到服务器端，close 方法就是关闭连接。除了这些方法，还有一些很重要的事件：onopen，onmessage，onerror 以及 onclose。我们借用 Nettuts 网站上的一张图来形象的展示一下 WebSocket 接口：
[caption id="" align="alignnone" width="443"]图 2. WebSocket JavaScript 接口[/caption]

下面是一段简单的 JavaScript 代码展示了怎样建立 WebSocket 连接和获取数据：

清单 3. 建立 WebSocket 连接的实例 JavaScript 代码

 var  wsServer = 'ws://localhost:8888/Demo'; 
 var  websocket = new WebSocket(wsServer); 
 websocket.onopen = function (evt) { onOpen(evt) }; 
 websocket.onclose = function (evt) { onClose(evt) }; 
 websocket.onmessage = function (evt) { onMessage(evt) }; 
 websocket.onerror = function (evt) { onError(evt) }; 
 function onOpen(evt) { 
 console.log("Connected to WebSocket server."); 
 } 
 function onClose(evt) { 
 console.log("Disconnected"); 
 } 
 function onMessage(evt) { 
 console.log('Retrieved data from server: ' + evt.data); 
 } 
 function onError(evt) { 
 console.log('Error occured: ' + evt.data); 
 } 

浏览器支持

下面是主流浏览器对 HTML5 WebSocket 的支持情况：

浏览器	支持情况
Chrome	Supported in version 4+
Firefox	Supported in version 4+
Internet Explorer	Supported in version 10+
Opera	Supported in version 10+
Safari	Supported in version 5+

WebSocket 实战

这一节里我们用一个案例来演示怎么使用 WebSocket 构建一个实时的 Web 应用。这是一个简单的实时多人聊天系统，包括客户端和服务端的实现。客户端通过浏览器向聊天服务器发起请求，服务器端解析客户端发出的握手请求并产生应答信息返回给客户端，从而在客户端和服务器之间建立连接通道。服务器支持广播功能，每个聊天用户发送的信息会实时的发送给所有的用户，当用户退出聊天室时，服务器端需要清理相应用户的连接信息，避免资源的泄漏。以下我们分别从服务器端和客户端来演示这个 Web 聊天系统的实现，在实现方式上我们采用了 C# 语言来实现 WebSocket 服务器，而客户端是一个运行在浏览器里的 HTML 文件。

WebSocket 服务器端实现

这个聊天服务器的实现和基于套接字的网络应用程序非常类似，首先是服务器端要启动一个套接字监听来自客户端的连接请求，关键的区别在于 WebSocket 服务器需要解析客户端的 WebSocket 握手信息，并根据 WebSocket 规范的要求产生相应的应答信息。一旦 WebSocket 连接通道建立以后，客户端和服务器端的交互就和普通的套接字网络应用程序是一样的了。所以在下面的关于 WebSocket 服务器端实现的描述中，我们主要阐述 WebSocket 服务器怎样处理 WebSocket 握手信息，至于 WebSocket 监听端口的建立，套接字信息流的读取和写入，都是一些常用的套接字编程的方式，我们就不多做解释了，您可以自行参阅本文的附件源代码文件。

在描述 WebSocket 规范时提到，一个典型的 WebSocket Upgrade 信息如下所示：

GET /demo HTTP/1.1 
Host: example.com 
Connection: Upgrade 
Sec-WebSocket-Key2: 12998 5 Y3 1 .P00 
Upgrade: WebSocket 
Sec-WebSocket-Key1: 4@1 46546xW%0l 1 5 
Origin: http://example.com 
[8-byte security key] 

其中 Sec-WebSocket-Key1，Sec-WebSocket-Key2 和 [8-byte security key] 这几个头信息是 WebSocket 服务器用来生成应答信息的来源，依据 draft-hixie-thewebsocketprotocol-76 草案的定义，WebSocket 服务器基于以下的算法来产生正确的应答信息：

1. 逐个字符读取 Sec-WebSocket-Key1 头信息中的值，将数值型字符连接到一起放到一个临时字符串里，同时统计所有空格的数量；


2. 将在第 1 步里生成的数字字符串转换成一个整型数字，然后除以第 1 步里统计出来的空格数量，将得到的浮点数转换成整数型；


3. 将第 2 步里生成的整型值转换为符合网络传输的网络字节数组；


4. 对 Sec-WebSocket-Key2 头信息同样进行第 1 到第 3 步的操作，得到另外一个网络字节数组；


5. 将 [8-byte security key] 和在第 3，第 4 步里生成的网络字节数组合并成一个 16 字节的数组；


6. 对第 5 步生成的字节数组使用 MD5 算法生成一个哈希值，这个哈希值就作为安全密钥返回给客户端，以表明服务器端获取了客户端的请求，同意创建 WebSocket 连接

至此，客户端和服务器的 WebSocket 握手就完成了，WebSocket 通道也建立起来了。下面首先介绍一下服务器端实现是如何根据用户传递的握手信息来生成网络字节数组的。.NET 平台提供了很方便的对字符串，数值以及数组操作的函数，所以生成字节数组的方法还是非常简单明了的，代码如下：

清单 4. 生成网络字节数组的代码

   private byte[] 　 BuildServerPartialKey(string clientKey) 
 { 
      string partialServerKey = ""; 
     byte[] currentKey; 
     int spacesNum = 0; 
     char[] keyChars = clientKey.ToCharArray(); 
     foreach (char currentChar in keyChars) 
     { 
         if (char.IsDigit(currentChar)) partialServerKey += currentChar; 
        if (char.IsWhiteSpace(currentChar)) spacesNum++; 
     } 
     try 
     { 
              currentKey = BitConverter.GetBytes((int)(Int64.Parse(partialServerKey) 
 / spacesNum)); 
        if (BitConverter.IsLittleEndian) Array.Reverse(currentKey); 
     } 
     catch 
     { 
        if (currentKey!= null) Array.Clear(currentKey, 0, currentKey.Length); 
     } 
     return currentKey; 
  } 

得到网络字节数组以后，服务器端生成 16 位安全密钥的方法如下所示：

清单 5. 生成 16 位安全密钥的代码

private byte[] BuildCompleteServerKey(byte[] serverKey1, byte[] serverKey2, 
 byte[] last8Bytes) 
 { 
     byte[] concatenatedKeys = new byte[16]; 
    Array.Copy(serverKey1, 0, concatenatedKeys, 0, 4); 
    Array.Copy(serverKey2, 0, concatenatedKeys, 4, 4); 
    Array.Copy(last8Bytes, 0, concatenatedKeys, 8, 8); 
    System.Security.Cryptography.MD5 MD5Service = 
 System.Security.Cryptography.MD5.Create(); 
   return MD5Service.ComputeHash(concatenatedKeys); 
 } 

整个实现是非常简单明了的，就是将生成的网络字节数组和客户端提交的头信息里的 [8-byte security key] 合并成一个 16 位字节数组并用 MD5 算法加密，然后将生成的安全密钥作为应答信息返回给客户端，双方的 WebSocekt 连接通道就建立起来了。实现了 WebSocket 握手信息的处理逻辑，一个具有基本功能的 WebSocket 服务器就完成了。整个 WebSocket 服务器由两个核心类构成，一个是 WebSocketServer，另外一个是 SocketConnection，出于篇幅的考虑，我们不介绍每个类的属性和方法了，文章的附件会给出详细的源代码，有兴趣的读者可以参考。

服务器刚启动时的画面如下：

[caption id="" align="alignnone" width="437"]图 3. WebSocket 服务器刚启动的画面[/caption]

客户端可以依据这个信息填写聊天服务器的连接地址，当有客户端连接到聊天服务器上时，服务器会打印出客户端和服务器的握手信息，每个客户的聊天信息也会显示在服务器的界面上，运行中的聊天服务器的界面如下：
[caption id="" align="alignnone" width="408"]图 4. 有客户端连接到 WebSocket 服务器的[/caption]

以上我们简单描述了实现一个 WebSocket 服务器的最基本的要素，下一节我们会描述客户端的实现。

客户端实现

客户端的实现相对于服务器端的实现来说要简单得多了，我们只需要发挥想象去设计 HTML 用户界面，然后呼叫 WebSocket JavaScript 接口来和 WebSocket 服务器端来交互就可以了。当然别忘了使用一个支持 HTML5 和 WebSocket 的浏览器，在笔者写这篇文章的时候使用的浏览器是 Firefox。客户端的页面结构是非常简洁的，初始运行界面如下：
[caption id="" align="alignnone" width="353"]图 5. 聊天室客户端初始页面[/caption]

当页面初次加载的时候，首先会检测当前的浏览器是否支持 WebSocket 并给出相应的提示信息。用户按下连接按钮时，页面会初始化一个到聊天服务器的 WebSocekt 连接，初始化成功以后，页面会加载对应的 WebSocket 事件处理函数，客户端 JavaScript 代码如下所示：

清单 6. 初始化客户端 WebSocket 对象的代码

 function ToggleConnectionClicked() {
          if (SocketCreated && (ws.readyState == 0 || ws.readyState == 1)) {  
                ws.close();
            } else {
                Log("准备连接到聊天服务器 ...");
                try {
                 ws = 
                 new WebSocket("ws://" + document.getElementById("Connection").value);
                  SocketCreated = true;
                } catch (ex) {
                  Log(ex, "ERROR");
                  return;
                }
                document.getElementById("ToggleConnection").innerHTML = "断开";
                ws.onopen = WSonOpen;
                ws.onmessage = WSonMessage;
                ws.onclose = WSonClose;
                ws.onerror = WSonError;
            }
        };

        function WSonOpen() {
            Log("连接已经建立。", "OK");
            $("#SendDataContainer").show("slow");
        };

        function WSonMessage(event) {
            Log(event.data);            
        };

        function WSonClose() {
            Log("连接关闭。", "ERROR");
            document.getElementById("ToggleConnection").innerHTML = "连接";
            $("#SendDataContainer").hide("slow");
        };


        function WSonError() {
            Log("WebSocket错误。", "ERROR");
        };

当用户按下发送按钮，客户端会调用WebSocket对象向服务器发送信息，并且这个消息会广播给所有的用户，实现代码如下所示：

function SendDataClicked()
 {
            if (document.getElementById("DataToSend").value != "") {
                ws.send(document.getElementById("txtName").value + "说 :\"" + 
document.getElementById("DataToSend").value + "\"");
                document.getElementById("DataToSend").value = "";
            }
        };

如果有多个用户登录到聊天服务器，客户端页面的运行效果如下所示：[caption id="" align="alignnone" width="415"]图 6. 聊天客户端运行页面[/caption]


至此我们已经完成了一个完整的 WebSocket 客户端实现，用户可以体验一下这个聊天室的简单和快捷，完全不用考虑页面的刷新和繁琐的 Ajax 调用，享受桌面程序的用户体验。WebSocket 的强大和易用可见一斑，您完全可以在这个基础上加入更多的功能，设计更加漂亮的用户界面，切身体验 WebSocket 的震撼力。完整的客户端代码请参阅附件提供的源代码。

WebSocket 的局限性

WebSocket 的优点已经列举得很多了，但是作为一个正在演变中的 Web 规范，我们也要看到目前用 Websocket 构建应用程序的一些风险。首先，WebSocket 规范目前还处于草案阶段，也就是它的规范和 API 还是有变动的可能，另外的一个风险就是微软的 IE 作为占市场份额最大的浏览器，和其他的主流浏览器相比，对 HTML5 的支持是比较差的，这是我们在构建企业级的 Web 应用的时候必须要考虑的一个问题。

总结

本文介绍了 HTML5 WebSocket 的横空出世以及它尝试解决的的问题，然后介绍了 WebSocket 规范和 WebSocket 接口，以及和传统的实时技术相比在性能上的优势，并且演示了怎样使用 WebSocket 构建一个实时的 Web 应用，最后我们介绍了当前的主流浏览器对 HTML5 的支持情况和 WebSocket 的局限性。不过，我们应该看到，尽管 HTML5 WebSocket 目前还有一些局限性，但是已经是大势所趋，微软也明确表达了未来对 HTML5 的支持，而且这些支持我们可以在 Windows 8 和 IE10 里看到，我们也在各种移动设备，平板电脑上看到了 HTML5 和 WebSocket 的身影。WebSocket 将会成为未来开发实时 Web 应用的生力军应该是毫无悬念的了，作为 Web 开发人员，关注 HTML5，关注 WebSocket 也应该提上日程了，否则我们在新一轮的软件革新的浪潮中只能做壁上观了。

示例代码下载： source.zip

参考资料

学习

• W3C 的 HTML 规范：HTML5 的官方网站
  
  
  


• WebSocket.Org：一个专门介绍和推广 WebSocket 技术的网站
  
  
  


• 维基百科 WebSocket：维基百科上关于 WebSocket 的介绍
  
  
  


• nettuts WebSocket：nettut 网站上关于 WebSocket 的介绍
  
  
  


• developerWorks Web development
  专区：通过专门关于 Web 技术的文章和教程，扩展您在网站开发方面的技能。
  
  


• developerWorks Ajax 资源中心：这是有关 Ajax 编程模型信息的一站式中心，包括很多文档、教程、论坛、blog、wiki 和新闻。任何 Ajax 的新信息都能在这里找到。
  
  


• developerWorks Web 2.0 资源中心，这是有关 Web 2.0 相关信息的一站式中心，包括大量 Web 2.0 技术文章、教程、下载和相关技术资源。您还可以通过 Web 2.0 新手入门 栏目，迅速了解 Web 2.0 的相关概念。
  
  
• 查看 HTML5 专题，了解更多和 HTML5 相关的知识和动向。
  
  

讨论

• 加入 developerWorks 中文社区。查看开发人员推动的博客、论坛、组和维基，并与其他 developerWorks 用户交流。

[原文链接]: 使用 HTML5 WebSocket 构建实时 Web 应用

理解和应用canvas变换

默认的canvas画布以左上角为原点，向右为x轴增长方向，向下为y轴增长方向。默认以像素为单位。

很多情况下使用默认绘图环境极为不便，默认坐标系与我们上学时经常用到的直角坐标系不太一致。

幸运的是我们可以利用为canvas提供的变换函数来进行坐标转换，比如将原点移动到画布中心，转换Y轴方向等。
当调用一个变换函数时，接下来的绘图将自动变换。所以变换前应该先将当前环境保存下来，执行完绘图时恢复之前的环境。
save()和restore()两个函数用来保存和恢复环境。

下面说一下常用的变换函数：

1. 平移函数 translate(dx, dy)
调用此函数后接下来的绘图x值自动增加dx，y值自动增加dy。效果就是平移一个绘图，也就是所有点都进行了平移。这也是改变原点的办法。

2. 旋转函数 rotate(angle)
调用此函数后接下来的绘图将沿原点顺时针方向旋转angle弧度

3. 缩放函数 scale(a, b)
调用此函数后x坐标值将缩放a倍，y坐标将缩放b倍。效果是整个绘图放大或缩小了。
a和b的值可以为负值，比如 scale(1, -1)的效果是转换y轴的方向(向下变为向上)。

还有两个矩阵变换函数transform / setTransform。它们稍微复杂些，先不介绍。

上面那些变换函数可以一起使用，但你心中要明白每一步操作有什么影响。

回到开头的问题，比如我们想将原点移动到(300,400)这个点，然后使y轴方向向上，可以这么做：

	dc.translate(300, 400);
	dc.scale(1,-1);

接下来的绘图就是你熟悉的在直角坐标系下的绘图了。

当绘制正弦函数sin(x)时，由于y值最大为1，x的范围一般为2*π ，这时可以利用缩放函数scale对x轴和y轴进行放大。
又比如我们的数据值是在(1000,3000)附近，这时可以在设置好坐标后对坐标进行平移，使(1000,3000)这个点在画布中央。

	dc.translate(300, 400);
	dc.scale(1,-1);
	dc.translate(-1000, -3000);

相关链接：1.canvas基础教程

Google Maps JavaScript API 几种事件(event)的说明

当移动或放大缩小google maps时，将会产生zoom_changed、center_changed、bounds_changed、dragend等各种事件。通过下面的html代码可以测试这些事件何时发生，以及发生的先后顺序。

运行html文件后可得出下面的结论：

1. 当移动地图时，center_changed和bounds_changed事件会不断触发，一直到移动结束。所以如果需要在视图改变时利用Ajax方式获取数据时千万不要绑定到bounds_changed(或center_changed)事件，因为这样会在移动一次地图时触发多次bounds_changed事件，导致多次重复的Ajax请求


2. 事件触发的顺序 center_changed -- zoom_changed -- bounds_changed ， 当center_changed事件发生时不一定能正确通过getBounds()函数获取视图边界


3. dragend事件在拖动结束时触发，此时由于地图可能还在移动，所以还可能继续触发center_changed和bounds_changed事件

CSS绝对定位的一些解释

absoluteA
absoluteB
floatC
floatD

效果如下：


可以看到：

1. 采用absolute定位时，left,right,top,bottom分别是定位元素与父元素 左-左 右-右 上-上 下-下 边的距离


2. float元素的父元素为非绝对定位元素时，float不会撑大父元素的高度。当float元素的父元素为绝对定位元素时，float元素会撑大父元素的宽度和高度


3. 当absolute定位的元素(比如元素M)内容改变时，定位属性不会改变。比如指定M的bottom为10px，当动态向M添加了一些内容导致M高度增大时，M将向上面伸展，底框与父元素始终保持10px

jQuery 1.7 事件绑定函数

jQuery 1.7 前几天发布了，新增了两个事件处理函数 .on() 和 .off() 分别用来绑定和解除事件。这两个函数可以取代之前版本中所有的事件处理函数。
现在事件绑定和解除更简单了，下面是新旧版本事件处理代码的对比：

$('a').bind('click', myHandler);
$('a').on('click', myHandler);

$('form').bind('submit', { val: 42 }, fn);
$('form').on('submit', { val: 42 }, fn);

$(window).unbind('scroll.myPlugin');
$(window).off('scroll.myPlugin');

$('.comment').delegate('a.add', 'click', addNew);
$('.comment').on('click', 'a.add', addNew);

$('.dialog').undelegate('a', 'click.myDlg');
$('.dialog').off('click.myDlg', 'a');

$('a').live('click', fn);
$(document).on('click', 'a', fn);

$('a').die('click');
$(document).off('click', 'a');

另外想说一下jQuery中的事件对象(Event Object)：

jQuery的事件系统规范化了事件对象(根据W3C标准)。jQuery保证事件对象被传递给事件处理程序。大部分的属性从原来的事件中复制和规范化给新的事件对象。

jQuery保证下列属性是事件对象的成员，尽管它们中的一些值可能是undefined(依赖于具体的事件):

altKey, attrChange, attrName, bubbles, button, cancelable, 
charCode, clientX, clientY, ctrlKey, currentTarget, data, detail, 
eventPhase, fromElement, handler, keyCode, layerX, layerY,
 metaKey, newValue, offsetX, offsetY, originalTarget,
 pageX, pageY, prevValue, relatedNode, relatedTarget, 
screenX, screenY, shiftKey, srcElement, target, 
toElement, view, wheelDelta, which

为了跨浏览器兼容，jQuery 对下列属性进行了规范化:

    target
    relatedTarget
    pageX
    pageY
    which
    metaKey

特别注意，并不是所有原始事件的属性都被复制给jQuery的事件对象。这时可以用 event.originalEvent 来获取原始事件对象。比如在HTML5文件拖放操作时需要用到drop事件的dataTransfer属性，可以像下面这样做：

$('body').on('drop',function(e){
	var file = e.originalEvent.dataTransfer.files[0];//获取一组拖放文件中的第一个文件

	reader = new FileReader();//创建FileReader对象来读取文件内容
	reader.onload = function(e){//读取完成时将内容显示于body中
		$('body').text(e.target.result);
	};
	reader.readAsText(file,'utf-8');//开始读取文件
	
	//相当于同时调用e.stopPropagation() 和 e.preventDefault()
	return false;//阻止事件冒泡和浏览器的默认行为
});

Javascript 中的 json与对象的转化

简单的说json是一种数据交换格式。具体说明请见官方网站中文站

将后台程序(如php)发送过来的json数据转化为javascript的数组或者对象的方法十分简单，代码如下

//假设后台发送的json数据为 '{a:2,b:1}' 存储于str中
var data = eval( '(' + str + ')' );

然而想将一个javascript对象转化为json格式的字符串却并不那么简单，特别是对象的属性值递归包含一个对象时(如 var obj={a:[2,3],b:{m:[3,4],n:2} } ),那么有没有什么方法将obj转化为json格式的字符串呢？

当然你可以自己写一个函数，递归遍历一个对象并将其转化为json格式的字符串，对于大部分人来说这有些困难并容易出错。
幸好已经有人做好了这件事情，你只用包含一段javascript代码即可。
打开官方网站http://www.json.org/json-zh.html ,找到Javascript分类下的 json2.js链接并打开，然后下载文件并解压，在你的网页中包含json2.js文件即可。

使用方法：

------------------------------------------------------------
补充：貌似现在新版的浏览器都原生支持JSON.stringify函数了。请见此文介绍：JSON对象和字符串之间的相互转换

CSS框模型：一切皆为框 -- 从行框说起

1.行框 看图说话
[caption id="attachment_685" align="alignnone" width="355" caption="css 行框 各部分详解"][/caption]

上图代表了框模型中的行框。line-height 属性设置行间的距离（行高）。该属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。

line-height 与 font-size 的计算值之差（在 CSS 中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。[来源]

2.框模型 继续看图


上图代表了CSS中的框，每个框有高度(height)、宽度(width)、内边距(padding)、边框(border)、外边距(margin)等属性。

3.css中元素的分类

元素是文档结构的基础，在CSS中，每个元素生成了一个包含了元素内容的框（box，也译为“盒子”）。但是不同的元素显示的方式会有所不同，例如<div>和<span>就不同，而<strong>和<p>也不一样。在文档类型定义（DTD）中对不同的元素规定了不同的类型，这也是DTD对文档之所以重要的原因之一。[来源]

i. 替换和不可替换元素

从元素本身的特点来讲，可以分为替换和非替换元素。

a) 替换元素

替换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。

例如浏览器会根据<img>标签的src属性的值来读取图片信息并显示出来，而如果查看(X)HTML代码，则看不到图片的实际内容；又例如根据<input>标签的type属性来决定是显示输入框，还是单选按钮等。

(X)HTML中的<img>、<input>、<textarea>、<select>、<object>都是替换元素。这些元素往往没有实际的内容，即是一个空元素，例如：

浏览器会根据元素的标签类型和属性来显示这些元素。可替换元素也在其显示中生成了框。

b) 非替换元素

(X)HTML 的大多数元素是不可替换元素，即其内容直接表现给用户端（例如浏览器）。例如：

非替换元素

段落<p>是一个不可替换元素，文字“段落的内容”全被显示。

ii. 显示元素 块级元素和行内元素

除了可替换元素和不可替换元素的分类方式外，CSS 2.1中元素还有另外的分类方式：块级元素（block-level）和行内元素（inline-level，也译作“内联”元素）。

a) 块级元素

在视觉上被格式化为块的元素，最明显的特征就是它默认在横向充满其父元素的内容区域，而且在其左右两边没有其他元素，即块级元素默认是独占一行的。

典型的块级元素有：<div>、<p>、<h1>到<h6>，等等。

通过CSS设定了浮动（float属性，可向左浮动或向右浮动）以及设定显示（display）属性为“block”或“list-item”的元素都是块级元素。

但是浮动元素比较特殊，由于浮动，其旁边可能会有其他元素的存在。而“list-item”（列表项<li>），会在其前面生成圆点符号，或者数字序号。

b) 行内元素
行内元素不形成新内容块，即在其左右可以有其他元素，例如<a>、<span>、<strong>等，都是典型的行内级元素。

display属性等于“inline”的元素都是行内元素。几乎所有的可替换元素都是行内元素，例如<img>、<input>等等。

不过元素的类型也不是固定的，通过设定CSS 的display属性，可以使行内元素变为块级元素，也可以让块级元素变为行内元素。

4.回到行框

平时块状元素用得比较多，也比较熟悉，可对于行内元素才是真正包含文字数据的地方，也是重点需要修饰的地方。

一般的行内元素(span,img,input)具有框模型中规定的边框背景等css属性，但一些属性对于行内元素来说可能是没有效果的。

height/width 属性设置元素内容区的高度和宽度，在内容区外面可以增加内边距、边框和外边距。

行内非替换元素(如span)会忽略这两个属性。

基于web的城镇报发布程序

1. 类 WebCzb 用于整体管理
2. 创建对象 var app = new WebCzb(option); 所有选项以单独的js文件保存
3. 动态生成html代码 $('#new-czb').append(app.getUIHtml());
4. app.lastForcast 存储上一次的预报 并转化为本次预报(自动偏移时次)
5. app.nowForcast 存储本次预报并动态更新
6. app.postForcast 上传预报至省FTP和后台数据库
7. app.curForcastSpan 存储目前用户编辑的时段
8. 当用户切换时段时自动保存当前时段数据
9. json2.js将预报以json方式存储于后台
10.mysql数据库的创建

#创建数据库
CREATE DATABASE IF NOT EXISTS onlineWork;
USE onlineWork

/*
	创建表
*/
CREATE TABLE IF NOT EXISTS
czbEdit (
		postTime DATETIME NOT NULL PRIMARY KEY,
		forcastBegin DATETIME NOT NULL,
		forcastType ENUM('first','second','third','forth') NOT NULL,
		forcastJson TEXT NOT NULL,
		forcastText TEXT NOT NULL,
		editName VARCHAR(20) );

---------------------------------------------------------
will do：

1. 切换日期时进行偏移处理[√]
2. 添加保存按钮仅保存不发布预报
3. 预报发布后重新请求最新的预报以供继续制作另一时次预报
4. 在页面右侧增加一些有用信息 气温风速降水历史平均状况注意事项等
5. 增加备注功能 对某一时次进行备注和提醒
6. 压缩JS代码
7. 美化页面UI 字体 margin等
8. 发布的同时提交个人预报 返还更清晰的成功或错误报告
9. 地图式编辑 多选式编辑
10. 切换时次后 返还上次信息前 应当处于不可编辑状态

jQuery获取window、document、dom元素的高度和宽度函数分析

以下为获取高度或宽度函数的jQuery源代码

// 创建jQuery.height(size)  jQuery.width(size)
//调用each方法创建两个相似的函数
jQuery.each([ "Height", "Width" ], function( i, name ) {

	var type = name.toLowerCase();

	jQuery.fn[ type ] = function( size ) {
		
		var elem = this[0];
		if ( !elem ) {
			return size == null ? null : this;
		}

		if ( jQuery.isFunction( size ) ) {
			return this.each(function( i ) {
				var self = jQuery( this );
				self[ type ]( size.call( this, i, self[ type ]() ) );
			});
		}

		// 获取window对象的高度或宽度 ($(window).width() ) 实际上是当前可见区域的高度或宽度
		if ( jQuery.isWindow( elem ) ) {
			// Everyone else use document.documentElement or document.body depending on Quirks vs Standards mode
			// 3rd condition allows Nokia support, as it supports the docElem prop but not CSS1Compat
			// 以上英文的意思是依赖于Quirks 或 Standards 文档模式来使用 
			// document.documentElement (实际上就是元素) 或 document.body
			var docElemProp = elem.document.documentElement[ "client" + name ];
			return elem.document.compatMode === "CSS1Compat" && docElemProp ||
				elem.document.body[ "client" + name ] || docElemProp;

		// 获取整个文档对象(document)的宽度或高度
		} else if ( elem.nodeType === 9 ) {
			// Either scroll[Width/Height] or offset[Width/Height], whichever is greater
			return Math.max(
				elem.documentElement["client" + name],
				elem.body["scroll" + name], elem.documentElement["scroll" + name],
				elem.body["offset" + name], elem.documentElement["offset" + name]
			);

		// 获取DOM元素的高度或宽度
		} else if ( size === undefined ) {
			var orig = jQuery.css( elem, type ),
				ret = parseFloat( orig );

			return jQuery.isNaN( ret ) ? orig : ret;

		// 设置DOM元素的高度或宽度 (当没有单位时默认为像素值)
		} else {
			return this.css( type, typeof size === "string" ? size : size + "px" );
		}
	};

});

jQuery(window).height()代表了当前可见区域的大小，而jQuery(document).height()则代表了整个文档的高度，可视具体情况使用
注意当浏览器窗口大小改变时(如最大化或拉大窗口后) jQuery(window).height() 随之改变，但是jQuery(document).height()是不变的。

DOM结构以及HTML中的基本元素

DOM的基本结构：

几点说明:
1.DOM的根节点是Document文档，每个载入浏览器的 HTML 文档都会成为 Document 对象,window.document代表了这个对象，也可以用所有基本元素节点的ownerDocument属性获取这个对象。
2.html节点是第二级节点，包含了head和body两个元素节点。

HTML中基本元素拥有的属性(W3C: W3C Standard.)

Property	Description	W3C
attributes[]	获取一个元素的所有属性组成的数组	Yes
childNodes[]	获取一个元素的所有子节点组成的数组	Yes
accessKey	设置或获取一个元素的快捷键	Yes
className	Sets or returns the class attribute of an element	Yes
clientHeight	Returns the viewable height of the content on a page (not including borders, margins, or scrollbars)	Yes
clientWidth	Returns the viewable width of the content on a page (not including borders, margins, or scrollbars)	Yes
dir	Sets or returns the text direction of an element	Yes
disabled	Sets or returns whether an element is disabled, or not	Yes
firstChild	Returns the first child of an element	Yes
height	设置或获取元素的高度属性	Yes
id	Sets or returns the id of an element	Yes
innerHTML	Sets or returns the HTML contents (+text) of an element	Yes
lang	Sets or returns the language code for an element	Yes
lastChild	获取一个元素的最后一个子元素	Yes
length		Yes
nextSibling	获取紧邻元素之后的元素	Yes
nodeName	获取元素的节点名称 (以大写方式)	Yes
nodeType	获取元素的节点类型	Yes
nodeValue	获取元素的值	Yes
offsetHeight	Returns the height of an element, including borders and padding if any, but not margins	No
offsetLeft	Returns the horizontal offset position of the current element relative to its offset container	Yes
offsetParent	Returns the offset container of an element	Yes
offsetTop	Returns the vertical offset position of the current element relative to its offset container	Yes
offsetWidth	获取一个元素的宽度，包括补白和边框，不包括边界	No
ownerDocument	获取一个元素所属的根文档(Document对象)	Yes
parentNode	获取一个元素的父节点	Yes
previousSibling	获取紧邻元素之前的元素	Yes
scrollHeight	获取元素的整体高度(包括滚动条)	Yes
scrollLeft	Returns the distance between the actual left edge of an element and its left edge currently in view	Yes
scrollTop	Returns the distance between the actual top edge of an element and its top edge currently in view	Yes
scrollWidth	获取元素的整体宽度(包括滚动条)	Yes
style	设置或获取元素的样式属性	Yes
tabIndex	设置或获取元素的TAB顺序	Yes
tagName	以大写字符串的方式获取元素的标签名	Yes
title	设置或获取元素的标题属性	Yes
width	设置或获取元素的宽度属性	Yes

html中基本元素拥有的方法：

Method	Description	W3C
appendChild()	在子元素列表后面增加一个新的元素	Yes
blur()	从一个元素上移除焦点	Yes
click()	在一个元素上执行点击操作	Yes
cloneNode()	复制元素	Yes
focus()	让一个元素成为焦点	Yes
getAttribute()	Returns the value of an attribute	Yes
getElementsByTagName()	根据指定的标签名获取所有元素	Yes
hasChildNodes()	返回一个元素是否有子元素	Yes
insertBefore()	在现存的子元素前插入一个新的子元素	Yes
item()	基于文档树的位置返回一个元素	Yes
normalize()	Puts all text nodes underneath this element (including attributes) into a "normal" form where only structure (e.g., elements, comments, processing instructions, CDATA sections, and entity references) separates Text nodes, i.e., there are neither adjacent Text nodes nor empty Text nodes	Yes
removeAttribute()	从元素中移除指定的属性	Yes
removeChild()	移除一个子元素	Yes
replaceChild()	替换一个子元素	Yes
setAttribute()	为元素增加新的属性	Yes
toString()	将一个元素转化为字符串	Yes