简介
ASP.NET Atlas是一套丰富的类库，用于ASP.NET开发AJAX风格的应用程序。本文试图解说Atlas框架的一般性特征，由于Atlas是一个庞大的库，故本文集中探讨Atlas的两个最重要的特征：
1. 能够从客户端脚本中调用服务器端web服务
2. 使得开发跨浏览器兼容的JavaScript代码相当容易
通过对这两个特征的介绍，读者朋友可以熟悉Atlas类库的使用方法。
背景
MFC Scribble应用程序是学习MFC编程的著名例子之一。Scribble应用程序允许用户使用鼠标自由涂画。我在网络中曾看见这样一个类似的利用 AJAX技术的应用程序。但遗憾的是，这个JavaScript绘图站点仅能在Firefox浏览器上运行。因此，我在本文中将解释怎样构建一个跨浏览器 版本的Scribble程序。
安装Atlas
在本文完成时，可以点按这个链接下载Atlas的十 二月CTP。如果这个链接不能工作，你总可以转到Atlas站点得到正确的链接。该Atlas库可以作为Visual Studio 2005的一个模板（VSI）。在刚才的这个下载站点上有关于怎样安装这个模板的说明。
创建一个Atlas工程
一旦安装了Atlas模板，你就可以通过点按菜单选项"File-＞New-＞Web Site"来创建一个空白的Atlas工程。然后就可以打开图1所示的"New Web Site"对话框。
在"location"下面，可以选择"File System"或"HTTP"。选择HTTP将允许你基于一个IIS服务器的站点，而选择File System将允许你在本地文件系统（你可以使用开发web服务器来进行调试和测试）上创建一站点。你可以选择任何一个选项，但是我发现该应用程序如果使 用Internet Explorer且基于IIS运行效果更好一些。
Atlas空工程
上面最新创建的Atlas网站具有下列目录结构：
· App_Data
这是放置数据文件的空目录。
· Bin
这个目录下放置相应于装配集Microsoft.Web.Atlas的dll文件。这个目录下包含了Atlas库的服务器位置。
· ScriptLibrary
在这个目录下，你可以放置该应用程序的任何JavaScript文件。
o Atlas
Atlas客户端脚本放在这里，它有如下两个子目录：
§ Debug
Atlas客户端JavaScript文件的调试版本放在这个目录下。
§ Release
Atlas客户端JavaScript文件发行版本放在这个目录下。这个目录下的脚本更为紧凑，并且去除了一些调试代码。
Atlas客户端脚本
Atlas的12月份发行版本提供了下面几个客户端脚本：
· Atlas.js
这是核心Atlas脚本文件，它包括了基本的工具函数和客户端控件和组件。
· AtlasCompat.js
这个文件包含Atlas兼容层以支持Mozilla Firefox和Apple的iMac-Safari web浏览器。这个脚本可以确保Atlas代码是跨浏览器兼容的。
· AtlasCompat2.js
这个文件包含其它函数以确保与Safari web浏览器的兼容性。
· AtlasRuntime.js
这是一个核心Atlas脚本文件的缩微版本，其中并不含有客户端组件和控件。这个脚本文件在前面提到的组件或控件没有使用时使用。
· AtlasUIDragDrop.js
包含工具函数，用于提供网页中的鼠标拖放功能。
· AtlasUIGlitz.js
包含工具函数，用于提供网页中的动画和其它特殊效果。
· AtlasUIMap.js
支持使用Virtual Earth的Atlas映射框架的脚本文件。
其它文件
Atlas还把下面文件添加到网站的根目录下。
· Default.aspx和Default.aspx.cs
该网页包含Atlas脚本管理器控件-负责生成参考Atlas客户端脚本的脚本块。一个test/xml-script块类型的客户端脚本也被添加到该页面上。这个脚本块用于使用声明性XML语法写脚本。
· eula.rtf
· readme.txt
· Web.Config
这个web.config是运行Atlas应用程序所必需的。它包含一些Atlas特定的配置设置，并且可以在这个文件中添加Atlas HTTP模块和HTTP处理器。
Scribble应用程序
该Scribble应用程序允许用户拖动鼠标左键自由绘制图案。当用户释放鼠标按钮或移动到绘画区域外面时，结束一个笔画。可以使用JavaScript并利用VML技术来实现作画，但是我们在本文中不准备使用VML。
在Scribble的默认网页上将出现一幅图像（常规的具有IMG标签的HTML图像）。用户在该图像上的鼠标事件能够被JavaScript事件处理 器所捕获。该JavaScript函数能够把绘制笔画相应的点系列发送到一个web服务中。该web服务通过把所有由用户发送来的点绘制成线同时更新保存 在会话变量中的图像对象。最后，客户端向服务端请求一个更新后的图像。该图像源是一个HTTP处理器，它把存储在会话变量中的图像对象流向客户端。下面是 该应用程序的主要组成部件。
· Default.aspx
拥有动态图像和Atlas脚本管理器控件的页面。
· ScribbleImage.ashx
这是一个HTTP处理器，它实现把存储在会话变量中的图像对象转换为流式数据。
· ScribbleService.asmx
所有的绘画请求发送到这个web服务中。这个web服务实现图像修改。
· Scribble.js
该应用程序相应的主要JavaScript代码驻留在这个文件中，以达到设计与代码的清晰分离。
· Global.asax
Session_Start和Session_End事件是在Global.asax中处理的。Session_Start用于创建会话变量，而Session_End用于释放存储在会话变量中的图像。
Global.asax
我们从Global.asax文件开始进行我们的编码过程。
1. 在"Website"菜单上点击"Add New Item"或按下Ctrl +Shift+A组合键。
2. 在"Add New Item"对话框中选择"Global Application Class"并且点击ok。你会看到Global.asax文件被自动创建。
3. 一开始，我们导入System.Drawing命名空间。这只要在上面文件的第一行的后面插入下面一行代码即可：
＜%@ Import Namespace="System.Drawing" %＞
4. 添加下列代码到Session_Start函数。
这部分代码创建一个简单的白色200×200像素的位图，背景全为白色并把它赋给会话变量Image。
5. Session_End函数应该释放掉存储在会话变量中的图像。
6. 从"Website"菜单中选择"Add Reference"。
7. 在"Add Reference"对话框中选择"System.Drawing"并且点击OK。
8. 最后，在"Build"菜单下点击"Build Web Site"或按组合键Ctrl+Shift+B来确保没有构建错误。
这个web处理器用于把存储在会话变量中的图像数据流回客户端。
1. 在"WebSite"菜单中点击"Add New Item"或按下Ctrl+Shift+A。
2. 在"Add New Item"对话框中选择"Generic Handler"，然后把该处理器的名字设置为ScribbleImage.ashx并且点击OK。
3. 一个web处理器要使用会话变量，它需要实现接口IRequiresSessionState。这是唯一的标记接口并且没有要重载的方法。如下所示编辑该类的声明：
4. 接下来，我们把代码添加到ProcessRequest方法。
o 第一行设置相应于image/png的响应的ContentType头。这确保浏览器认出该响应是一个png图像而不是普通HTML代码。
o 紧接着的四行向浏览器指明不应该缓冲这个响应。所有的这四行都是必要的，用于确保该代码是跨浏览器兼容的。我们将在本教程的以后的版本中优化这些代码。
o 最后，会话变量中的位图被存储到一个内存流中，而该内存流的内容被写到响应中。由于图像是二进制数据，所以这里使用了BinaryWrite函数。
ScribbleService.asmx
我们有办法来初始化会话图像并把该图像内容转换成流作为响应。现在，我们需要一些方法来把内容添加到图像本身。我们期望客户调用ScribbleService.asmx web服务以把线段添加到图像上。
1. 在"WebSite"菜单中点击"Add New Item"或按下Ctrl+Shift+A。
2. 在"Add New Item"对话框中选择"Web Service"，指定名为ScribbleService.asmx并且点击OK。确保未选定"Place Code in a Separate File"。
3. 通过把下列一行添加到命名空间语句中来导入命名空间System.Drawing：
using System.Drawing;
4. 接下来，我们需要为绘制点定义一个简单的类。我们不能使用System.Drawing.Point类，因为它是不可以XML串行化的。在后面的内容中， 我们将会看到我们怎样使用System.Drawing.Point来代替定制的类。现在我们先在ScribbleService类声明之前添加下面代 码：
5. 最后，我们需要添加一个方法来使用一组给定的点进行绘制。我们把一个web方法Draw添加到我们的web服务。
o 属性WebMethod(EnableSession=true)保证会话变量可从web服务中进行存取。
o 图像被锁定以确保并发存取的安全性。
o 绘制本身很简单，因为它仅是把在points数组中提供的点连接起来。
Scribble.js
我们让服务器端图像处理器和服务器端web服务来更新图像。现在，我们需要创建在scribble应用程序中的客户端脚本，由它来把来自鼠标动作的点发送到服务器web服务。
1. 点击在解决方案资源管理器中的ScriptLibrary文件夹。
2. 在"WebSite"菜单中点击"Add New Item"或按下Ctrl+Shift+A。
3. 在"Add New Item"对话框中选择"JScript File"，指定名字为Scribble.js并且按OK。这将把Scribble.js文件放到ScriptLibrary文件夹下。
4. 然后，我们需要声明一些全局变量。在scribble的第一个版本中，我们将使用全局变量，但是在以后的版本中我们开始使用JavaScript对象。
在一个绘制请求被发送到服务器后，这里的iter变量用来修改图像的源。在Internet Explorer情况下，设置image.src=image.src的确可以刷新该图像，但是相同的代码无法在Firefox中工作。为此，我们需要维 护变量iter，这个变量在每次Draw请求发送到Web服务时加1。我们把重复操作次数添加到originalSrc变量中，这样浏览器认为它需要请求 服务器获取刷新数据，而不是使用缓冲图像的方式。
5. 定义函数startStroke，它响应mousedown事件开始一个笔画。
当一个新笔画开始时，我们创建一个新的点集合，见上面代码的第一行。第二行取消该事件的默认行为。当相应于一个图像的mousedown事件的默认行为将开始一次拖动操作时，这是必需的；这样以来可以防止激活进一步的事件。
6. 当一个响应于一次mouseup事件或mouseout事件的笔画结束时，我们需要实际调用web服务。这是在endStroke函数中完成的。
该函数中唯一让人感兴趣的一行是ScribbleService.Draw(points,onWebMethodComplete, onWebMethodTimeout,onWebMethodError);它异步地调用在ScribbleService.asmx中的web服务方 法Draw。Atlas框架使得这一函数可以自动为我们所用。
7. 当在web服务方法中发生错误时，将激活onWebMethodError，而当web方法调用超出定义在Atlas框架中可配置的时限时，onWebMethodTimeout函数被调用。在这个版本中，我们仅向用户显示一个带有错误文本的消息框。
当web方法调用成功时，onWebMethodComplete函数被调用；这时需要重新加载图像。
我们创建一个Image对象shimImage并且把它的源设置为我们正在绘制的图像的最原始的源。当图像对象加载时，我们把在该页面中的实际HTML图像元素的源设置为临时图像对象的源，这样做可以避免在替换图像时产生闪烁现象。
8. 我们需要在mousemove事件期间填充points数组。这是在addPoints函数中实现的。
o 新的点对象被使用事件对象的offsetX和offsetY属性构建，并随后被添加到points数组中。offsetX和offsetY属性给出了相对的鼠标位置，这相当于产生该事件的HTML元素。
o 如果数组的长度达到3，那么我们能够自动地请求服务器实现一个绘制操作并且重置points数组。这样以来，用户在他释放掉鼠标按钮前可以看到绘制过程。
9. 最后，我们需要钩住事件，这是在pageLoad函数中完成的。
o pageLoad是一个特别函数，当Atlas框架完成加载后它被激活。我们使用this来取代常规的窗口或体（body）加载事件，这样我们可以确保Atlas已经完成加载。
o 实际要画的图像元素被放置在一个具有id drawingSurface的div标签中。该元素的大小与该图像的大小相同，这样我们可以安全地把事件依附到drawingSurface div上面。
Default.aspx
应用程序所需要的单独组件必须被装配到Default.aspx页面中。下面是这个页面的代码。
这个页面的最重要的部分是atlas:ScriptManager服务器控件。ScriptManager服务器控件负责为Atlas和任何web服务 代理脚本生成客户端脚本块。下面让我们分析一下Default.aspx页面中的ScriptManager控件的使用。
1. EnableScriptComponents属性被设置为false。这生成了一个参考AtlasRuntime.js而不是参考Atlas.js的客 户端脚本块。因为我们没有使用任何Atlas组件或控件，所以在这个版本的scribble教程中我们比较喜欢轻量级版本的Atlas框架。我们把一个服 务参考添加到ScribbleService.asmx web服务。这将为web服务代理生成一个到客户端脚本的URL参考。
2. 我们也把Scribble.js文件作为另一个脚本参考添加到该服务上。
这把上面所讨论的各项功能都联合到一起，现在你可以编译和运行该工程了。我鼓励你看一下实际的由Atlas脚本管理器所生成的客户端html。
A tlas魔术
下面是Atlas框架为我们所做的：
1. 它允许我们创建web应用程序而不需要为使其跨浏览器而付出特殊努力。web服务调用和客户端事件处理可自动地工作于Internet Explorer和Firefox浏览器上。Atlas框架把所需要的JavaScript原型添加到Firefox对象以使其看起来象Internet Explorer对象。Internet Explorer的特定函数，如attachEvent，event.offsetX和event.offsetY都可以应用于Firefox。你可以通 过AtlasCompat.js文件来对此进行进一步分析。
2. 它自动地为Scribble web服务方法创建一个JavaScript代理。该JavaScript代理脚本文件相应于一个ScribbleService.asmx文件拥有 URL ScribbleService.asmx/js。这被添加在web.config文件中的Atlas HTTP模块所产生。
小结
我们已经看到了如何调用web服务与如何容易地使用Atlas来编写跨浏览器的应用程序。在以后的教程中，我们会看到更多的Atlas客户端控件与声明性编程(依赖于用户反馈！)。
下载并使用源代码
由于Atlas目前还不是可重发布的，所以我没把Atlas文件包括到下载的源码中。要使下载的源码能够工作，您需要按以下步骤操作。
1. 你需要从Atlas Web Site下载Atlas。
2. 在下载Atlas空白的工程模板以后，通过菜单命令File－New－Web Site创建一新的网站
3. 把源zip文件展开到新建的工程目录下以覆盖任何现有文件。
4. 在"Website"菜单下选择"Add Existing Item"，从网站的根目录下添加上ScribbleService.asmx和ScribbleImage.ashx，并且从ScriptLibrary文件夹下添加上文件Scribble.js。
ASP.NET Atlas是一套丰富的类库，用于ASP.NET开发AJAX风格的应用程序。本文试图解说Atlas框架的一般性特征，由于Atlas是一个庞大的库，故本文集中探讨Atlas的两个最重要的特征：
1. 能够从客户端脚本中调用服务器端web服务
2. 使得开发跨浏览器兼容的JavaScript代码相当容易
通过对这两个特征的介绍，读者朋友可以熟悉Atlas类库的使用方法。
背景
MFC Scribble应用程序是学习MFC编程的著名例子之一。Scribble应用程序允许用户使用鼠标自由涂画。我在网络中曾看见这样一个类似的利用 AJAX技术的应用程序。但遗憾的是，这个JavaScript绘图站点仅能在Firefox浏览器上运行。因此，我在本文中将解释怎样构建一个跨浏览器 版本的Scribble程序。
安装Atlas
在本文完成时，可以点按这个链接下载Atlas的十 二月CTP。如果这个链接不能工作，你总可以转到Atlas站点得到正确的链接。该Atlas库可以作为Visual Studio 2005的一个模板（VSI）。在刚才的这个下载站点上有关于怎样安装这个模板的说明。
创建一个Atlas工程
一旦安装了Atlas模板，你就可以通过点按菜单选项"File-＞New-＞Web Site"来创建一个空白的Atlas工程。然后就可以打开图1所示的"New Web Site"对话框。
|
在"location"下面，可以选择"File System"或"HTTP"。选择HTTP将允许你基于一个IIS服务器的站点，而选择File System将允许你在本地文件系统（你可以使用开发web服务器来进行调试和测试）上创建一站点。你可以选择任何一个选项，但是我发现该应用程序如果使 用Internet Explorer且基于IIS运行效果更好一些。
Atlas空工程
上面最新创建的Atlas网站具有下列目录结构：
· App_Data
这是放置数据文件的空目录。
· Bin
这个目录下放置相应于装配集Microsoft.Web.Atlas的dll文件。这个目录下包含了Atlas库的服务器位置。
· ScriptLibrary
在这个目录下，你可以放置该应用程序的任何JavaScript文件。
o Atlas
Atlas客户端脚本放在这里，它有如下两个子目录：
§ Debug
Atlas客户端JavaScript文件的调试版本放在这个目录下。
§ Release
Atlas客户端JavaScript文件发行版本放在这个目录下。这个目录下的脚本更为紧凑，并且去除了一些调试代码。
Atlas客户端脚本
Atlas的12月份发行版本提供了下面几个客户端脚本：
· Atlas.js
这是核心Atlas脚本文件，它包括了基本的工具函数和客户端控件和组件。
· AtlasCompat.js
这个文件包含Atlas兼容层以支持Mozilla Firefox和Apple的iMac-Safari web浏览器。这个脚本可以确保Atlas代码是跨浏览器兼容的。
· AtlasCompat2.js
这个文件包含其它函数以确保与Safari web浏览器的兼容性。
· AtlasRuntime.js
这是一个核心Atlas脚本文件的缩微版本，其中并不含有客户端组件和控件。这个脚本文件在前面提到的组件或控件没有使用时使用。
· AtlasUIDragDrop.js
包含工具函数，用于提供网页中的鼠标拖放功能。
· AtlasUIGlitz.js
包含工具函数，用于提供网页中的动画和其它特殊效果。
· AtlasUIMap.js
支持使用Virtual Earth的Atlas映射框架的脚本文件。
其它文件
Atlas还把下面文件添加到网站的根目录下。
· Default.aspx和Default.aspx.cs
该网页包含Atlas脚本管理器控件-负责生成参考Atlas客户端脚本的脚本块。一个test/xml-script块类型的客户端脚本也被添加到该页面上。这个脚本块用于使用声明性XML语法写脚本。
· eula.rtf
· readme.txt
· Web.Config
这个web.config是运行Atlas应用程序所必需的。它包含一些Atlas特定的配置设置，并且可以在这个文件中添加Atlas HTTP模块和HTTP处理器。
Scribble应用程序
该Scribble应用程序允许用户拖动鼠标左键自由绘制图案。当用户释放鼠标按钮或移动到绘画区域外面时，结束一个笔画。可以使用JavaScript并利用VML技术来实现作画，但是我们在本文中不准备使用VML。
在Scribble的默认网页上将出现一幅图像（常规的具有IMG标签的HTML图像）。用户在该图像上的鼠标事件能够被JavaScript事件处理 器所捕获。该JavaScript函数能够把绘制笔画相应的点系列发送到一个web服务中。该web服务通过把所有由用户发送来的点绘制成线同时更新保存 在会话变量中的图像对象。最后，客户端向服务端请求一个更新后的图像。该图像源是一个HTTP处理器，它把存储在会话变量中的图像对象流向客户端。下面是 该应用程序的主要组成部件。
· Default.aspx
拥有动态图像和Atlas脚本管理器控件的页面。
· ScribbleImage.ashx
这是一个HTTP处理器，它实现把存储在会话变量中的图像对象转换为流式数据。
· ScribbleService.asmx
所有的绘画请求发送到这个web服务中。这个web服务实现图像修改。
· Scribble.js
该应用程序相应的主要JavaScript代码驻留在这个文件中，以达到设计与代码的清晰分离。
· Global.asax
Session_Start和Session_End事件是在Global.asax中处理的。Session_Start用于创建会话变量，而Session_End用于释放存储在会话变量中的图像。
Global.asax
我们从Global.asax文件开始进行我们的编码过程。
1. 在"Website"菜单上点击"Add New Item"或按下Ctrl +Shift+A组合键。
2. 在"Add New Item"对话框中选择"Global Application Class"并且点击ok。你会看到Global.asax文件被自动创建。
3. 一开始，我们导入System.Drawing命名空间。这只要在上面文件的第一行的后面插入下面一行代码即可：
＜%@ Import Namespace="System.Drawing" %＞
4. 添加下列代码到Session_Start函数。
| void Session_Start(object sender, EventArgs e){ Bitmap bmp = new Bitmap(200, 200); using (Graphics g = Graphics.FromImage(bmp)) { g.FillRectangle(new SolidBrush(Color.White),new Rectangle(0, 0, bmp.Width, bmp.Height)); g.Flush(); } Session["Image"] = bmp; } |
这部分代码创建一个简单的白色200×200像素的位图，背景全为白色并把它赋给会话变量Image。
5. Session_End函数应该释放掉存储在会话变量中的图像。
| Bitmap bmp = (Bitmap)Session["Image"]; bmp.Dispose(); |
6. 从"Website"菜单中选择"Add Reference"。
7. 在"Add Reference"对话框中选择"System.Drawing"并且点击OK。
8. 最后，在"Build"菜单下点击"Build Web Site"或按组合键Ctrl+Shift+B来确保没有构建错误。
| ScribbleImage.ashx |
这个web处理器用于把存储在会话变量中的图像数据流回客户端。
1. 在"WebSite"菜单中点击"Add New Item"或按下Ctrl+Shift+A。
2. 在"Add New Item"对话框中选择"Generic Handler"，然后把该处理器的名字设置为ScribbleImage.ashx并且点击OK。
3. 一个web处理器要使用会话变量，它需要实现接口IRequiresSessionState。这是唯一的标记接口并且没有要重载的方法。如下所示编辑该类的声明：
| public class ScribbleImage : IHttpHandler, System.Web.SessionState.IRequiresSessionState |
4. 接下来，我们把代码添加到ProcessRequest方法。
| public void ProcessRequest (HttpContext context){ context.Response.ContentType = "image/png"; context.Response.Cache.SetNoStore(); context.Response.Cache.SetCacheability(HttpCacheability.NoCache); context.Response.Cache.SetExpires(DateTime.Now); context.Response.Cache.SetValidUntilExpires(false); System.Drawing.Bitmap bmp = (System.Drawing.Bitmap)context.Session["Image"]; lock(bmp) { using (MemoryStream ms = new MemoryStream()) { bmp.Save(ms, ImageFormat.Png); ms.Flush(); context.Response.BinaryWrite(ms.GetBuffer()); } } } } |
o 第一行设置相应于image/png的响应的ContentType头。这确保浏览器认出该响应是一个png图像而不是普通HTML代码。
o 紧接着的四行向浏览器指明不应该缓冲这个响应。所有的这四行都是必要的，用于确保该代码是跨浏览器兼容的。我们将在本教程的以后的版本中优化这些代码。
o 最后，会话变量中的位图被存储到一个内存流中，而该内存流的内容被写到响应中。由于图像是二进制数据，所以这里使用了BinaryWrite函数。
ScribbleService.asmx
我们有办法来初始化会话图像并把该图像内容转换成流作为响应。现在，我们需要一些方法来把内容添加到图像本身。我们期望客户调用ScribbleService.asmx web服务以把线段添加到图像上。
1. 在"WebSite"菜单中点击"Add New Item"或按下Ctrl+Shift+A。
2. 在"Add New Item"对话框中选择"Web Service"，指定名为ScribbleService.asmx并且点击OK。确保未选定"Place Code in a Separate File"。
3. 通过把下列一行添加到命名空间语句中来导入命名空间System.Drawing：
using System.Drawing;
4. 接下来，我们需要为绘制点定义一个简单的类。我们不能使用System.Drawing.Point类，因为它是不可以XML串行化的。在后面的内容中， 我们将会看到我们怎样使用System.Drawing.Point来代替定制的类。现在我们先在ScribbleService类声明之前添加下面代 码：
| public class Point{ public int X; public int Y; }; |
5. 最后，我们需要添加一个方法来使用一组给定的点进行绘制。我们把一个web方法Draw添加到我们的web服务。
| [WebMethod(EnableSession = true)] public void Draw(Point[] points){ Image scribbleImage = (Image)Session["Image"]; lock(scribbleImage) { using (Graphics g = Graphics.FromImage(scribbleImage)) using(Pen p = new Pen(Color.Black, 2)) { if (points.Length ＞ 1) { int startX = points[0].X; int startY = points[0].Y; for (long i = 1; i ＜ points.Length; i++) { g.DrawLine(p, startX, startY, points[i].X, points[i].Y); startX = points[i].X; startY = points[i].Y; } } } } } |
o 属性WebMethod(EnableSession=true)保证会话变量可从web服务中进行存取。
o 图像被锁定以确保并发存取的安全性。
o 绘制本身很简单，因为它仅是把在points数组中提供的点连接起来。
Scribble.js
我们让服务器端图像处理器和服务器端web服务来更新图像。现在，我们需要创建在scribble应用程序中的客户端脚本，由它来把来自鼠标动作的点发送到服务器web服务。
1. 点击在解决方案资源管理器中的ScriptLibrary文件夹。
2. 在"WebSite"菜单中点击"Add New Item"或按下Ctrl+Shift+A。
3. 在"Add New Item"对话框中选择"JScript File"，指定名字为Scribble.js并且按OK。这将把Scribble.js文件放到ScriptLibrary文件夹下。
4. 然后，我们需要声明一些全局变量。在scribble的第一个版本中，我们将使用全局变量，但是在以后的版本中我们开始使用JavaScript对象。
| //要被绘制的HTML图像元素 var image; //图像源 var originalSrc; //The number of iteration var iter = 0; //点数组 var points = null; |
在一个绘制请求被发送到服务器后，这里的iter变量用来修改图像的源。在Internet Explorer情况下，设置image.src=image.src的确可以刷新该图像，但是相同的代码无法在Firefox中工作。为此，我们需要维 护变量iter，这个变量在每次Draw请求发送到Web服务时加1。我们把重复操作次数添加到originalSrc变量中，这样浏览器认为它需要请求 服务器获取刷新数据，而不是使用缓冲图像的方式。
5. 定义函数startStroke，它响应mousedown事件开始一个笔画。
| function startStroke(){ points = new Array(); window.event.returnValue = false; } |
当一个新笔画开始时，我们创建一个新的点集合，见上面代码的第一行。第二行取消该事件的默认行为。当相应于一个图像的mousedown事件的默认行为将开始一次拖动操作时，这是必需的；这样以来可以防止激活进一步的事件。
6. 当一个响应于一次mouseup事件或mouseout事件的笔画结束时，我们需要实际调用web服务。这是在endStroke函数中完成的。
| function endStroke(){ if (!points || points.length ＜ 2) return true; //把点发送到web服务 ScribbleService.Draw(points, onWebMethodComplete, onWebMethodTimeout, onWebMethodError); points = null; window.event.returnValue = false; } |
该函数中唯一让人感兴趣的一行是ScribbleService.Draw(points,onWebMethodComplete, onWebMethodTimeout,onWebMethodError);它异步地调用在ScribbleService.asmx中的web服务方 法Draw。Atlas框架使得这一函数可以自动为我们所用。
7. 当在web服务方法中发生错误时，将激活onWebMethodError，而当web方法调用超出定义在Atlas框架中可配置的时限时，onWebMethodTimeout函数被调用。在这个版本中，我们仅向用户显示一个带有错误文本的消息框。
| function onWebMethodError(fault){ alert("Error occured:\n" + fault.get_message()); } function onWebMethodTimeout(){ alert("Timeout occured"); } |
当web方法调用成功时，onWebMethodComplete函数被调用；这时需要重新加载图像。
| function onWebMethodComplete(result, response, context){ //我们需要刷新图像 var shimImage = new Image(200, 200); shimImage.src = originalSrc + "?" + iter++; shimImage.onload = function(){ image.src = shimImage.src; } } |
我们创建一个Image对象shimImage并且把它的源设置为我们正在绘制的图像的最原始的源。当图像对象加载时，我们把在该页面中的实际HTML图像元素的源设置为临时图像对象的源，这样做可以避免在替换图像时产生闪烁现象。
8. 我们需要在mousemove事件期间填充points数组。这是在addPoints函数中实现的。
| function addPoints(){ if (points){ var point = { X : window.event.offsetX,Y : window.event.offsetY}; points.push(point); if (points.length == 3){ endStroke(); points = new Array(); points.push(point); } window.event.returnValue = false; } } |
o 新的点对象被使用事件对象的offsetX和offsetY属性构建，并随后被添加到points数组中。offsetX和offsetY属性给出了相对的鼠标位置，这相当于产生该事件的HTML元素。
o 如果数组的长度达到3，那么我们能够自动地请求服务器实现一个绘制操作并且重置points数组。这样以来，用户在他释放掉鼠标按钮前可以看到绘制过程。
9. 最后，我们需要钩住事件，这是在pageLoad函数中完成的。
| function pageLoad(){ var surface = document.getElementById("drawingSurface"); image = surface.getElementsByTagName("IMG")[0]; originalSrc = image.src; surface.attachEvent(" startStroke); surface.attachEvent(" endStroke); surface.attachEvent(" endStroke); surface.attachEvent(" addPoints); } |
o pageLoad是一个特别函数，当Atlas框架完成加载后它被激活。我们使用this来取代常规的窗口或体（body）加载事件，这样我们可以确保Atlas已经完成加载。
o 实际要画的图像元素被放置在一个具有id drawingSurface的div标签中。该元素的大小与该图像的大小相同，这样我们可以安全地把事件依附到drawingSurface div上面。
Default.aspx
应用程序所需要的单独组件必须被装配到Default.aspx页面中。下面是这个页面的代码。
| ＜%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %＞ ＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"＞ ＜html xmlns="http://www.w3.org/1999/xhtml"＞ ＜head runat="server"＞ ＜title＞Atlas Scribble Sample＜/title＞ ＜/head＞ ＜body＞ ＜form id="form1" runat="server"＞ ＜Atlas:ScriptManager ID="AtlasScriptManager" runat="server" EnableScriptComponents="False" ＞ ＜Services＞ ＜Atlas:ServiceReference Path="ScribbleService.asmx" /＞ ＜/Services＞ ＜Scripts＞ ＜Atlas:ScriptReference Path="ScriptLibrary/Scribble.js" /＞ ＜/Scripts＞ ＜/Atlas:ScriptManager＞ ＜div id="drawingSurface" style="border:solid 1px black;height:200px;width:200px"＞ ＜img alt="Scribble" src="ScribbleImage.ashx" style="height:200px;width:200px" galleryimg="false" /＞ ＜/div＞ ＜/form＞ ＜/body＞ ＜/html＞ |
这个页面的最重要的部分是atlas:ScriptManager服务器控件。ScriptManager服务器控件负责为Atlas和任何web服务 代理脚本生成客户端脚本块。下面让我们分析一下Default.aspx页面中的ScriptManager控件的使用。
1. EnableScriptComponents属性被设置为false。这生成了一个参考AtlasRuntime.js而不是参考Atlas.js的客 户端脚本块。因为我们没有使用任何Atlas组件或控件，所以在这个版本的scribble教程中我们比较喜欢轻量级版本的Atlas框架。我们把一个服 务参考添加到ScribbleService.asmx web服务。这将为web服务代理生成一个到客户端脚本的URL参考。
2. 我们也把Scribble.js文件作为另一个脚本参考添加到该服务上。
这把上面所讨论的各项功能都联合到一起，现在你可以编译和运行该工程了。我鼓励你看一下实际的由Atlas脚本管理器所生成的客户端html。
A tlas魔术
下面是Atlas框架为我们所做的：
1. 它允许我们创建web应用程序而不需要为使其跨浏览器而付出特殊努力。web服务调用和客户端事件处理可自动地工作于Internet Explorer和Firefox浏览器上。Atlas框架把所需要的JavaScript原型添加到Firefox对象以使其看起来象Internet Explorer对象。Internet Explorer的特定函数，如attachEvent，event.offsetX和event.offsetY都可以应用于Firefox。你可以通 过AtlasCompat.js文件来对此进行进一步分析。
2. 它自动地为Scribble web服务方法创建一个JavaScript代理。该JavaScript代理脚本文件相应于一个ScribbleService.asmx文件拥有 URL ScribbleService.asmx/js。这被添加在web.config文件中的Atlas HTTP模块所产生。
小结
我们已经看到了如何调用web服务与如何容易地使用Atlas来编写跨浏览器的应用程序。在以后的教程中，我们会看到更多的Atlas客户端控件与声明性编程(依赖于用户反馈！)。
下载并使用源代码
由于Atlas目前还不是可重发布的，所以我没把Atlas文件包括到下载的源码中。要使下载的源码能够工作，您需要按以下步骤操作。
1. 你需要从Atlas Web Site下载Atlas。
2. 在下载Atlas空白的工程模板以后，通过菜单命令File－New－Web Site创建一新的网站
3. 把源zip文件展开到新建的工程目录下以覆盖任何现有文件。
4. 在"Website"菜单下选择"Add Existing Item"，从网站的根目录下添加上ScribbleService.asmx和ScribbleImage.ashx，并且从ScriptLibrary文件夹下添加上文件Scribble.js。
5. 构建并运行该网站。
本文转自朱先忠老师51CTO博客，原文链接： http://blog.51cto.com/zhuxianzhong/60105，如需转载请自行联系原作者
