创建基于AJAX技术的Scribble应用程序

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("onmousedown", startStroke); 　surface.attachEvent("onmouseup", endStroke); 　surface.attachEvent("onmouseout", endStroke); 　surface.attachEvent("onmousemove", 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。

　　Atlas魔术

　　下面是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. 构建并运行该网站。

查看本文来源