在本文中，我将向你展示如何使用 ASP.NET AJAX 框架对添加可点击的热点的 HTML Map 控件进行扩展。经扩展后，当我们的鼠标移动到这些热点上后，即弹出关于这些热点的详细信息; 但是，这些详细信息都是通过 AJAX 异步方式从远程服务中取得的。

一、 简介

首先，我们注意到，ASP.NET 2.0中也提供了一个服务器控件 ImageMap。此控件是一个让你可以在图片上定义热点(HotSpot)区域的服务器控件。用户可以通过点击这些热点区域进行回发(PostBack)操作或者转发到某个 URL 地址。典型情况下，该控件用于需要对某张图片的局部范围进行互动操作。然而，这个控件的不足之处在于，在点击这些热点区域进行回发时将导致整个 Web 页面的刷新。

在本文中，我们将基于 ASP.NET AJAX 技术对普通的 HTML Map 控件加以扩展，以达到在点击其上的热点区域时，在显示有关详细信息时仅仅导致局部的页面更新，从而使之适应 Web 2.0应用程序开发潮流。

下面图1展示了本文示例程序运行时的一个快照。

图1.使用  AJAX技术扩展后的 Map 控件热点点击仅引发局部更新。

从上图中看到，当鼠标悬浮于上图太阳系中的木星(木星)上时，有关该星球的细节信息将以一个弹出窗口形式友好地展示出来(注：此图取自 MSDN，这里没有翻译相应单词)。

二、 创建一个 AJAX 示例网站

启动 Visual Studio 2005，选择“文件→新建网站…”，然后选择“ASP.NET AJAX-Enabled Web Site”模板，命名工程为“Ajax_ImageMap”，并选择C#作为内置支持语言，最后点击 OK。

然后，添加一个新的 ASPX 页面 ImageMap.aspx，并且按如下所示修改其中的 HTML 代码部分：

以下是引用片段：
〈IMG SRC="images\solarsys.gif" WIDTH=504 HEIGHT=126 BORDER=0
       ALT="Solar System" USEMAP="#SystemMap"〉
〈MAP NAME="SystemMap"〉
〈AREA SHAPE="rect" COORDS="0,0,82,126"
       onmouseover="javascript:GetAreaInfo(event,'sun');

onmouseout="javascript:HidePopup(); "〉
〈AREA SHAPE="circle" COORDS="90,58,3"
       onmouseover="javascript:GetAreaInfo(event, 'merglobe');

" onmouseout="javascript:HidePopup(); "〉

〈AREA SHAPE…………（省略）
〈/MAP〉

在上面代码中，我们添加了一个 HTML 元素和一个 HTML 元素(注：VS2005 工具栏中没有提供现成的控件，只能手工添加)。其中定义了各个星球相应的热点形状及坐标信息。而且，每一个热点都有一个相应的 onmouseover 和 onmouseout JavaScript 函数与之相关联。当鼠标在这些热点上移动时，这两个函数将被激活，相应信息被显示出来。有关这两个函数，我们将在后面详细讨论。

三、 创建一个AJAX服务

现在，我们需要创建一个新的 Web 服务，由它负责与热点点击相关的数据检索任务。其实，这里所谓的“AJAX 服务”，其功能与通常的 Web 服务是一致的。有关它们之间的细节区别在此不再赘述。现在，你可以右击工程，然后添加一个命名为 LocationService.asmx 的 Web 服务。

注意，在本例中我们仅想通过这个 Web 服务来模拟实战环境中的一种简单逻辑。因此，它仅包含一个 Web 方法; 此方法负责模拟从服务器数据库中取得客户端需要的信息。

在此，为了使这个 ASP.NET Web 服务能够被从客户端以 AJAX 方式加以调用，必须把ScriptService属性添加到类声明的前面，如下所示：

以下是引用片段：
[ScriptService()]
public class LocationService : System.Web.Services.WebService
{

现在，编写我们的 Web 方法：
以下是引用片段：
[WebMethod]
[ScriptMethod(UseHttpGet = false, ResponseFormat = ResponseFormat.Json)]

public string GetAreaInfo(string area)

{

return area;
}

根据权威人士建议，为了安全起见，我们一般要使用 HttpPost(或者 HttpGet= false)方式访问 Web 方法。然后，我们把返回的数据格式配置为 JSON 格式(默认方式即为 JSON 方式)。

为了简化起见，这里的 GetAreaInfo 方法仅仅返回输入参数的相同值; 但在实际开发中，我们应该在此替换以从数据库中检索数据。

到目前为止，我们已经成功创建从客户端以 AJAX 方式加以调用的 Web 服务。

但是，我们还要对页面中的服务器控件 ScriptManager 进行一些适当的配置，如下所示：

以下是引用片段：
〈asp:ScriptManager ID="ScriptManager1" runat="server"〉
〈services〉
〈asp:servicereference path="~/LocationService.asmx" /〉
〈/services〉
〈/asp:ScriptManager〉

在此，我们仅在节点下加入了一个服务参考，但其作用如何呢?

从生成的 HTML 源码分析，上面的配置将生成如下所示内容：

以下是引用片段：
〈script src="LocationService.asmx/jsdebug" type="text/javascript"〉〈/script〉

这里的脚本标签引用了一个 JavaScript 文件 LocationService.asmx/jsdebug。其实这是一个Web 服务代理类。正是通过此代理类，我们才得以从客户端以异步方式调用服务器端的 Web 服务。

更有意思的是，如果你简单地复制显示在上面的路径到浏览器中，你将看到一个在运行时刻由 AJAX环境生成的 JavaScript 文件—此文件使脚本服务调用可用。有关代理类，我们不再深入讨论。

下面，我们来看如何创建一个定制的客户端类。

四、 创建客户端定制类

我们知道ASP.NET AJAX框架的重大“发明”之一就是，它引入了面向对象的 JavaScript 编程模型。现在，借助于 JavaScript 设计模式，我们可以轻松地创建自己的模板或类，加入继承概念，创建接口与枚举等。

在本文中，我们将开发一个封装所有本示例中要求功能的客户端类。

现在，右击工程，并新添加一个名为 ImageMap 的 JavaScript 文件。在此文件中，我们将定义一个新的命名空间 MyServices; 这个命名空间将包含我们要开发的客户端类。如下所示：

以下是引用片段：

Type.registerNamespace("MyServices");

接下来，我们定义要创建的客户端类的构造函数：

以下是引用片段：
MyServices.Location = function (uiElement, uiBody) {
MyServices.Location.initializeBase(this);
this._uiElement = uiElement;
this._uiBody = uiBody;
this._xAxis = 0;
this._yAxis = 0;
}

一个模板或类的构造函数也只不过是一个普通的 JavaScript 函数。该构造器共有两个参数：uiElement 和 uiBody。

这两个参数都将用于描述在页面显示的弹出窗口。另外两个私有变量_xAxis 和_yAxis 用于描述弹出窗口的显示位置。典型情况下，我们最好在构造器中声明所有的私有成员。

接下来，我们将使用原型设计模式编写该类中的成员函数和属性：

以下是引用片段：

MyServices.Location.prototype =
{
get_uiElement: function()
{
return this._uiElement;
},
set_uiElement: function(value)
{
this._uiElement = value;
},
get_uiBody: function()
{
return this._uiBody;
},
set_uiBody: function(value)
{
this._uiBody = value;
},

注意，这里的 UI 元素属性方法的定义方式非常类似于.NET 中各种语言中的定义形式。

下面的成员函数是我们的重点，它负责调用远程的 Web 服务：

以下是引用片段：

ShowPopupinfo: function(event, areaName)
{

MyServices.LocationService.GetAreaInfo(areaName,

Function.createDelegate(this, this.OnCompleted),

this.OnError, //负责进行错误处理的回叫函数

this.OnTimeOut); //负责进行超时处理的回叫函数

this._xAxis = event.clientX;

this._yAxis = event.clientY;
}

上面的代码展示的是非常典型的从客户端调用 Web 服务的方法：

1)形式与调用一个普通的本地方法几乎一样方便;

2)Function.createDelegate 函数是 ASP.NET AJAX 客户端开发中的极为重要的全局函数。创建此函数的原始目的之一是解决 this 关键字的问题。在一个由一个 DOM 元素引发的事件处理器中，this 关键字总是引用此 DOM 元素而不是类本身。但在此，我们使用这个函数的理由是，使得 AJAX 环境在与激发 Web 服务的相同的类实例中调用成功时的回叫函数。当你需要引用客户端类的属性和方法时，这是相当重要的。简言之，使用此函数将使得访问调用 Web 服务的客户端类的属性和方法安全而准确。否则，进行异步调用的客户端类实例将为 null，因为 Web 服务的响应是在另一个不同的上下文中执行的—这个上下文不再等同于发出异步 Web 调用请求的那个上下文。

3)有意思的是，这里的 GetAreaInfo 方法并不是我们在前面创建的Web服务中的那个，而是属于在运行时刻创建的 Web 服务代理类—此代理类作为一个客户端代理访问服务器端的 ASMX Web 服务。

上面 ShowPopupInfo 函数中的最后两行代码中，使用事件的输入参数设置两个私有变量 xAxis和 yAxis 的值。我们在此的目的是，在与用户点击位置尽可能近的地方显示弹出窗口。

下面是调用成功时对应的回叫函数的实现代码：

以下是引用片段：
OnCompleted: function(result, userContext, methodName)
{
var uiElement = $get(this.get_uiElement());
var uiBody = $get(this.get_uiBody());
if (uiBody != null)
{
var textNode = uiBody.firstChild;
if (!textNode)
{
textNode = document.createTextNode(result);
uiBody.appendChild(textNode);
}
else
{
textNode.nodeValue = result;
}
if (uiElement != null)
{
uiElement.style.visibility = "visible";
uiElement.style.display = "inline";
uiElement.style.left = this._xAxis + "px";
uiElement.style.top = this._yAxis + "px";
}
}
},

内容相当简单—把从服务器端返回的数据设置为弹出窗口的显示内容并根据情况确保显示此窗口。

在创建客户端类的最后，我们还必须告诉 AJAX 框架在客户端注册之，以便可以从客户端访问它：

以下是引用片段：

MyServices.Location.registerClass("MyServices.Location");

至此，客户端类 MyServices.Location 已经成功创建。那么，如何使用它呢?

首先，我们需要在页面加载时定义客户端类的一个新的实例。为此，我们需要在 pageLoad 函数中编程：

以下是引用片段：
var location = null;
function pageLoad(sender, args) {
location = new MyServices.Location("modal", "modalBody");
location.HidePopupInfo();
}

上面的代码简单地创建 MyServices.Location 类的一个新的实例。然后调用客户端类的成员函数之一来隐藏页面中的弹出窗口。为什么我们在 pageLoad 函数中创建客户端类的一个实例呢?原因在于，当 AJAX 环境控制流程到达 pageLoad 函数时，所有的 AJAX 客户端和用户定义的 JavaScript 代码都已经被成功加载。因此，这一时刻我们可以安全地访问任何用户或系统定义的 JavaScript 代码。

其它几个工具函数比较简单，在此不再赘述。

五、 总结

在本文中，我向你展示了如何通过创建一个 AJAX 服务和创建自己定制的客户端类来扩展 HTML Map 控件。在扩展后的控件中，当点击图像中的某个区域时，我们可以通过新型的 AJAX 方式来给出相关细节信息，而不必刷新整个 Web 页面。尽管在大部分 Web 应用中我们较少应用到这种 Map 控件(也许因此VS2005工具栏中省略之)，但如果开发大量图片、图像及地图操作相关的 Web 应用时，基于本文 AJAX改造后的 Map 控件一定会让你的 Web 应用更加绚烂多彩。