使用AjaxControlTookit时，如果控件的右侧小箭头不出现，则可检查：
1,是否添加引用
2,工具箱中的相关选项卡对应的DLL是否跟引用中的DLL一致（可删除并重建相关选项卡）
一般情况下就可以正常使用AjaxControlTookit了。
Ajax 无疑是最流行的新 Web 技术，这一杰出的方法可以将笨拙的 Web 界面转化成交互性的 Ajax 应用程序。它采用客户端脚本与 Web 服务器交换数据，所以，不必采用会中断交互的完整页面刷新，就可以动态地更新 Web 页面。使用 Ajax，可以创建更加丰富、更加动态的 Web 应用程序用户界面，其即时性与可用性甚至能够接近本机桌面应用程序。
Ajax 由 HTML、JavaScript、DHTML 和 DOM 组成。本系列的作者 Brett McLaughlin 是一位 Ajax 专家，他演示了这些技术如何协同工作 —— 从总体概述到细节的讨论 —— 使高效的 Web 开发成为现实。
系列文章
 |
第 1 部分: Ajax 简介 （2006 年 1 月 4 日）
Ajax 由 HTML、JavaScript、DHTML 和 DOM 组成，这一杰出的方法可以将笨拙的 Web 界面转化成交互性的 Ajax 应用程序。本文的作者是一位 Ajax 专家，他演示了这些技术如何协同工作 —— 从总体概述到细节的讨论 —— 使高效的 Web 开发成为现实。他还揭开了 Ajax 核心概念的神秘面纱，包括 XMLHttpRequest 对象。
第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求 （2006 年 2 月 16 日）
多数 Web 应用程序都使用请求/响应模型从服务器上获得完整的 HTML 页面。常常是点击一个按钮，等待服务器响应，再点击另一个按钮，然后再等待，这样一个反复的过程。有了 Ajax 和 XMLHttpRequest 对象，就可以使用不必让用户等待服务器响应的请求/响应模型了。本文中，Brett McLaughlin 介绍了如何创建能够适应不同浏览器的 XMLHttpRequest 实例，建立和发送请求，并响应服务器。
第 3 部分: Ajax 中的高级请求和响应 （2006 年 3 月 23 日）
对于很多 Web 开发人员来说，只需要生成简单的请求并接收简单的响应即可；但是对于希望掌握 Ajax 的开发人员来说，必须要全面理解 HTTP 状态代码、就绪状态和 XMLHttpRequest 对象。在本文中，Brett McLaughlin 将向您介绍各种状态代码，并展示浏览器如何对其进行处理，本文还给出了在 Ajax 中使用的比较少见的 HTTP 请求。
第 4 部分: 利用 DOM 进行 Web 响应 （2006 年 4 月 10 日）
程序员（使用后端应用程序）和 Web 程序员（编写 HTML、CSS 和 JavaScript 上）之间的分水岭是长久存在的。但是，Document Object Model (DOM) 弥补了这个裂缝，使得在后端使用 XML 同时在前端使用 HML 切实可行，并成为极其有效的工具。在本文中，Brett McLaughlin 介绍了 Document Object Model，解释它在 Web 页面中的应用，并开始挖掘其在 JavaScript 中的用途。
第 5 部分: 操纵 DOM （2006 年 4 月 27 日）
上一期中 Brett 介绍了文档对象模型（DOM），它的元素在幕后定义了 Web 页面。这一期文章中他将进一步探讨 DOM。了解如何创建、删除和修改 DOM 树的各个部分，了解如何实现网页的即时更新！
第 6 部分: 建立基于 DOM 的 Web 应用程序 （2006 年 10 月 12 日）
Brett McLaughlin 通过一个具体的 DOM 应用程序结束了他的 DOM 编程三部曲。
第 7 部分: 在请求和响应中使用 XML（1） （2006 年 10 月 23 日）
Brett McLaughlin 示范了如何使用 XML 数据格式发送异步请求。
第 8 部分：在请求和响应中使用 XML（2） （2006 年 10 月 23 日）
这篇文章主要探讨在大多数情况下 确实是 好主意的一种做法：向客户机返回 XML 响应。
第 9 部分：使用 Google Ajax Search API （2007 年 3 月 1 日）
发出异步请求并不意味着只是与您自己的服务器端程序交互。其实也可以与一些公共 API，例如来自 Google 或 Amazon 的 API 进行通信，从而为 Web 应用程序增加您自己的脚本和服务器端程序所不能提供的更多功能。本文将教您如何向公共 API，例如 Google 提供的 API 发出请求并接收其响应。
第 10 部分：使用 JSON 进行数据传输 （2007 年 4 月 9 日）
在异步应用程序中发送和接收信息时，可以选择以纯文本和 XML 作为数据格式。掌握 Ajax 的这一期讨论另一种有用的数据格式 JavaScript Object Notation（JSON），以及如何使用它更轻松地在应用程序中移动数据和对象。
第 11 部分：服务器端的 JSON （2007 年 8 月 28 日）
在最后一篇文章中，您将会学习如何处理以 JSON 格式发送到服务器的数据以及如何使用相同格式对脚本进行回复。
2007 年 10 月 29 日
在这个一切都要求新奇的世界中，要吸引用户的注意实属不易。了解如何在 Ajax 工具中使用 lightbox、弹出、窗口和渐变消息之类的新技术吸引用户的目光。
这可能是流传在都市中的一个传奇故事。很多年之前就有人和我说过这样一个用户交互体验。测试者的座位下面塞了 100 美金，而他正在使用计算机中的桌面应用程序。这个应用程序的状态栏中显示了这样一条信息：“在您的座位下面有 100 美金。”可悲的是，没有一个参与者能够发现他座位下面的钱。这个故事告诉我们状态栏传递信息的效率有多低，而且要吸引用户的注意绝非易事。
本文将介绍如何结合 PHP、动态 HTML（DHTML）和异步的 JavaScript + XML（Ajax）为内容增色，从而真正吸引用户的眼球。
|
在浏览器中设置状态栏相当简单，但是要实现一些有用的功能（比如说弹出一个工具提示）则不是那么容易。考虑到简单性，我选择使用了一个可从网络上免费获得的工具提示库，它构建于出色的 Prototype.js JavaScript 库之上。清单 1 显示了这个工具提示的代码。
清单 1. index.html
<html>
<head>
<script src="prototype.js" type="text/javascript"></script>
<script src="tooltip.js" type="text/javascript"></script>
<style>
body { font-family: arial,verdana; }
.popup { padding:10px; border:1px solid #ccc;
background:#eee; width:250px; font-size: small; }
</style>
</head>
<body>
<div id="book1">Code Generation In Action</div>
<div id="popup1" class="popup">
</div>
</body>
<script type="text/javascript">
new Ajax.Updater( 'popup1', 'text.php' );
new Tooltip('book1', 'popup1')
</script>
</html>
|
该页面首先使用一个 Ajax 调用更新工具提示的内容，方法是使用 Prototype.js 库中的 Ajax.Updater 类。然后再使用工具提示库所提供的 Tooltip 类将工具提示分配给 book1 <div> 标记。
清单 2 显示了该工具提示内容的代码。
清单 2. text.php
An excellent book on code generation and generative programming by Jack Herrington. |
现在，可以在浏览器中打开页面以查看效果。显示的页面如 图 1 所示。
图 1. 鼠标未移到文本上
当我把鼠标移到文本上，页面将弹出一个小窗口，如 图 2 所示。
图 2. 弹出窗口
|
|
工具提示是一种整洁的页面呈现方式，并能根据用户的需要显示内容。如果某个用户想了解某项内容的更多信息，只需将鼠标移到该内容上便可显示详细信息。这些详细信息可具有不同的复杂度，可以是图像、表格和格式化数据。
 |
|
Lightbox 是一种最前沿的创新方法，可以将用户的注意力集中到页面上的某个特定元素。在下面的示例中，我在页面中添加了一个缩略图，当用户单击它时便会在 “lightbox” 中显示出大图。
要创建这种效果，我将使用极为优秀的 Lightbox JS 2.0 库，它同样构建于 Prototype.js 框架之上。清单 3 显示了示例代码。
清单 3. index.html
<html> <head> <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> <script src="js/prototype.js" type="text/javascript"></script> <script src="js/scriptaculous.js?load=effects" type="text/javascript"></script> <script src="js/lightbox.js" type="text/javascript"></script> </head> <body> <a href="images/megan1_400_320.jpg" rel="lightbox"> <img src="images/megan1_400_320.jpg" width="100" height="80" alt="Megan" border="0" /></a> </body> </html> |
在浏览器中打开该页面时，只能看到缩略图，如 图 3 所示。
图 3. 单击缩略图之前的显示效果
当我单击该缩略图时，实际大小的图像将优雅地显示在窗口中央，如 图 4 所示。
图 4. 显示实际大小图像的 lightbox
此外，背景中的所有其他内容将变成灰色，这样用户将更容易注意到页面中间显示的内容。
|
|
如果您对 lightbox 这个术语还不太熟悉也没有关系：因为它是摄影行业中的一个相当深奥的词汇。在过去胶片摄影的时代，lightbox 是一个 6 英寸高，长宽皆为几英尺的盒子形状的设备，顶部涂有塑性白漆，盒子中间的小灯可以为整个表面提供照明。因此， 我们可以将幻灯片和底片放在 lightbox 上，然后使用一种小型放大镜来检查图像。您可以认为图 4 中的效果就是在通过 lightbox 上的放大镜查看照片。因此，lightbox 的术语便从此而来。
但是，是否可以将图像换成文本，并实现同样的效果呢？
Particle Tree 这个站点就使用这种与众不同的方法实现了 lightbox。此方法的优点便是可以显示使用 Ajax 从服务器获取的任意 HTML 代码。我将使用这种方法将额外的文本显示给用户。
清单 4 显示了主页代码。
清单 4. index.html
<html> <head> <title> Lightbox Text Test </title> <link rel="stylesheet" href="css/default.css" media="screen,projection" type="text/css" /> <link rel="stylesheet" href="css/lightbox.css" media="screen,projection" type="text/css" /> <script type="text/javascript" src="scripts/prototype.js"></script> <script type="text/javascript" src="scripts/lightbox.js"></script> </head> <body> <a href="text.php" class="lbOn">More About This Article</a> </body> </html> |
清单 5 中的 HTML 代码将通过 Ajax 获取并随后显示给用户。
清单 5. text.php
<p>This article covers the basics of AJAX Lightbox that shows text blocks instead of images</p> <p><a href="#" class="lbAction" rel="deactivate"> Return to article list</a></p> |
以上代码在浏览器中的显示效果如 图 5 所示。
图 5. 单击文本便可获得更多信息
当我单击文本时，可以看到页面内容将突出显示出来。请参见 图 6。
图 6. 运行中的文本 lightbox
|
|
这种方法可以为页面上列出的产品或文章显示额外信息，而不必使用户离开当前页面。相反，您将间接地将用户的注意力转移到这些内容上。与 HTML 代码一样，这些信息可以包括更多的文本内容、图像，或者甚至是表单（比如说注册、评论或登录表单）。
|
|
我在上一示例中提到过使用 lightbox 显示表单，但是这并不是用户在使用表单时真正需要的。他们真正需要的是窗口。所幸的是，Prototype 库提供了一个极好的窗口实现，该窗口实现具有各种不同的皮肤可满足您的需要。
窗口代码还将使用 Ajax 通过 Prototype 获取将在窗口框架中显示的内容。首先，开发托管窗口的基本页面，如 清单 6 所示。
清单 6. index.html
<html>
<head>
<script type="text/javascript" src="javascripts/prototype.js"></script>
<script type="text/javascript" src="javascripts/effects.js"></script>
<script type="text/javascript" src="javascripts/window.js"></script>
<script type="text/javascript" src="javascripts/window_effects.js"></script>
<link href="themes/default.css" rel="stylesheet" type="text/css" ></link>
<link href="themes/spread.css" rel="stylesheet" type="text/css" ></link>
</head>
<body>
<a href="javascript:void showWindow();">Show Window</a>
<script>
function showWindow()
{
win = new Window( { className: 'spread', url: 'test.html',
title: 'Simple Window', width:400,
height:300, destroyOnClose: true, recenterAuto:false } );
win.showCenter();
}
</script>
</body>
</html>
|
此处的 JavaScript 代码将响应单击 Show window 按钮的操作，结果是创建一个具有指定宽度、高度、标题和内容（内容由特定的 URL 指定）的窗口。然后使用 showCenter() 方法显示窗口，窗口将显示在在浏览器窗口的中部。
清单 7 显示了窗口的内容。
清单 7. test.html
<h1>Registration</h1> <p>You need to first register the product before...</p> |
该页面在浏览器的显示效果如 图 7 所示。
图 7. 窗口链接
页面中并没有什么内容，但是单击窗口链接之后却是另一番景色。如 图 8 所示。
图 8. 弹出窗口
有点华而不实的感觉，但是它确实可以吸引用户的注意力。除了石灰绿之外，您还可以选择一些不同的皮肤。
但是我真正想要的是弹出表单，不是吗？我特别想在主页上实现一个登录表单，当我单击 Login 按钮时便会弹出一个登录表单。清单 8 显示了主页的代码。
清单 8. form.php
<html>
<head>
<script type="text/javascript" src="javascripts/prototype.js"></script>
<script type="text/javascript" src="javascripts/effects.js"></script>
<script type="text/javascript" src="javascripts/window.js"></script>
<script type="text/javascript" src="javascripts/window_effects.js"></script>
<link href="themes/default.css" rel="stylesheet" type="text/css" ></link>
<link href="themes/spread.css" rel="stylesheet" type="text/css" ></link>
</head>
<body>
<div id="myloginform" style="display:none;overflow:clip;padding:10px;">
<form id="loginfrm">
<table>
<tr><td>Login</td><td><input type="text" name="name" /></td></tr>
<tr><td>Password</td><td><input type="password" name="password" /></td></tr>
</table>
</form>
<button onclick="login()">Login</button>
</div>
<a href="javascript:void showWindow();">Login</a>
<script>
var g_loginWindow = null;
function login()
{
new Ajax.Request( 'login.php', {
parameters: $('loginfrm').serialize(),
method: 'post',
onSuccess: function( transport ) {
g_loginWindow.close();
}
} );
}
function showWindow()
{
g_loginWindow = new Window( { className: 'spread', title: "Login",
destroyOnClose: true,
onClose:function() { $('myloginform').style.display = 'none'; } } );
g_loginWindow.setContent( 'myloginform', true, true );
g_loginWindow.showCenter();
}
</script>
</body>
</html>
|
这次，窗口的内容将直接存放在页面中。但是，当用户单击表单上的 Login 按钮时，页面将使用 Ajax.Request 对象向服务器请求登录表单。清单 9 显示了这个简单的登录脚本，实际中的实现将远没有这么简单。
清单 9. login.php
<true /> |
这时，当我在浏览器中打开该页面时将看到一个登录链接，如 图 9 所示。
图 9. login 链接
当我单击该链接时，将看到一个非常酷的 Web 2.0 样式的登录窗口，如 图 10 所示。
图 10. login 窗口
|
|
当用户单击 Login 按钮时，页面将把用户名和密码发送给服务器。然后，服务器将验证凭证并建立一个会话 cookie，并回复响应，指示页面返回主页。
实际上，此类功能可以在应用程序中实现弹出窗口，并让用户感觉自己仿佛更像是在使用桌面应用程序，而不是在访问 Web 页面。
|
|
与用户通信的另一种新方法是渐变消息 — 也就是，这种消息将在屏幕的一个重要位置弹出，告诉用户某些重要的事情。在本例中，我将使用 Scriptaculous 效果库（它也构建于 Prototype.js 之上）实现渐变消息。。
首先，我们从 清单 10 开始。
清单 10. index.html
<html><head>
<style>
.alert {
opacity: 0.0;
border:2px dashed black;
padding:5px;
background:#eee;
font-family: arial, verdana;
font-weight: bold; }
</style>
<script src="lib/prototype.js"></script>
<script src="src/effects.js"></script>
<script>
function submit()
{
new Ajax.Updater( 'result', 'alert.html', {
method: 'get',
onSuccess: function() {
new Effect.Opacity('result',
{ duration: 2.0, from: 0.0, to: 1.0 } );
new Effect.Opacity('result',
{ delay: 10.0, duration: 2.0, from: 1.0, to: 0.0 } );
} }
);
}
</script>
</head><body>
<div id="result" class="alert"></div><br/><br/>
<button onclick="submit()">Submit</button>
</body></html>
|
在理想情况下，该页面有点类似含有 Submit 按钮的表单。然后，当用户单击 Submit 按钮时，服务器接收到提交的表单数据后将返回一个消息。这个消息将突出显示在某个位置，然后效果将渐渐减弱。在本例中，我省去了表单元素，因此页面中只有一个 Submit 按钮。
Submit 按钮将 Ajax 请求发送给 alert.html 页面。然后，将该页面的结果存放在 result <div> 标记中，Scriptaculous 效果类可以使该标记显示为渐变效果。
清单 11 显示了 alert 页面的代码。
清单 11. alert.html
A new record has been added. |
该页面中浏览器中的显示效果如 图 11 所示。
图 11. 表单的 Submit 按钮
还是一样，页面中并没有什么内容。可以考虑在 Submit 按钮上面加入一些含有数据的表单字段。
当我单击 Submit 按钮时，页面将突出显示警告提示，如 图 12 所示。
图 12. 渐变效果的消息
|
|
几秒钟之后，消息将逐渐消失。
这种与用户交互的方式虽然简单，但是十分有效。只要别过度使用，它可以直接让用户感受到对象的出现和消失。这是人类与生俱来的本能。因此，您会自然地注意到。只要能够合理地使用这些技巧，吸引用户的注意力将不再困难。
|
希望本文中的工具可以让您通过创新的方式实现交互和提示。随着时间的推移，我确信这些技巧将过度使用，并最终落得与状态栏一样的下场。但是在开始阶段，这些工具将提供一种有趣、有效且符合 Web 2.0 的吸引用户注意的方式。
|
|
| 描述 | 名字 | 大小 | 下载方法 |
|---|---|---|---|
| 示例代码 | x-ajaxxml6-lightbox.zip | 1573KB | HTTP |
| ||||
 |
关于下载方法的信息 | |||
XMLHttpRequest对象
方法：
abort(),停止当前请求
getAllResponseHeaders(),把HTTP请求的所有响应首部作为键/值对返回
getResponseHeader("header"),返回指定首部的串值
open("method","url"),建立对服务器调用。method参数可以是GET,POST,PUT，url参数可以是相对URL或绝对URL。还有3个可选参数。
send(content),向服务发送请求
setRequestHeader("header","value"),把指定首部设置为所提供的值，在设置任何首部之前必须先调用open()
属性：
onreadystatechane每个状态改变时都会触发这个事件处理器，通常会调用一个JS函数
readyState请求的状态，有：0＝未初始化，1＝正在加载，2＝已加载，3＝交互中，4＝完成
responseText服务器响应，表示为一个口中
responseXML服务器的响应，表示为XML。这个对象可以解析为一个DOM对象
status服务器的HTTP状态码（200对应OK，404对应NOT FOUND。。）
学 ASP.NET 已经有些时候了，也经常利用 AJAX TOOLKIT 所提供的控件为自己的项目增添功能和特效，AJAX 总能给用户非常良好的体验。
今天开始，我会陆陆续续把 ASP.NET AJAX 1.0 开发和部署方面的一些要点摘录下来，以便自己今后方便使用，并给 .net 初学者提供一些学习参考，文中有不正确的地方，希望各位批评指正。我的编程语言使用
C#，使用 VB.NET 的朋友相信也能看得懂。网上有许多在线翻译 C# 和 VB 代码的工具，不用我说知道怎么做了吧~
这里使用 Microsoft Visual Studio 2005 作为 Web 开发的平台，从微软官方下载 VS2005 以及 VS2005 SP1 进行安装。当然也可以使用
Visual Web Developer 2005 Express Edition 进行开发。
首先从 ASP.NET AJAX 官方网站http://www.asp.net/ajax/下载最新的
Framework。
安装 AJAX.NET Extensions v1.0，很简单，按提示操作即可。
启动 VS，新建网站，选择 ASP.NET AJAX Enabled Web Site。
接下来做个简单的演示功能：
打开 Default.aspx 的设计器视图，从工具箱拖入一个 ScriptManager 控件到界面，这是任何一个 ASP.NET AJAX 网页所必需的，并且在放在所有其它控件的上面，它可以放在母板页，但也要保证在所有其它控件的最上面。
往设计器视图拖入三个 Label 控件和一个 Button 控件。在 Page_Load 事件中写入：
Label1.Text = DateTime.Now.ToString();
Label2.Text = DateTime.Now.ToString();
Label3.Text = DateTime.Now.ToString();这时运行程序并点击按钮，三个 Label 都同时更新时间。
然后从工具箱拖入一个 UpdatePanel 到页面，把 Label2 和 Button1 移入 UpdatePanel 中，再运行一次，这时发现当点击按钮时只有
Label2 的内容是更新的，另外两个 Label 的值不变。这就是 UpdatePanel 的作用：局部更新。
这是一种方法，如果我们的界面设计必需把这个 Button1 放在 UpdatePanel 外面，而当点击按钮时只需更新 UpdatePanel 的内容时，可以这样做：
把 Button1 从 UpdatePanel 中移出到外面，转到“源”视图，在 asp:UpdatePanel 标签内部加入 Triggers 标签，再内建标签
asp:AsyncPostBackTrigger 代码如下：
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
<asp:Label ID="Label3" runat="server" Text="Label"></asp:Label>
<br />
<asp:Button ID="Button1" runat="server" Text="Button" />
</div>
</form>
运行，点按钮试试，是不是跟刚才一样的效果呢？
安装ASP.NET AJAX
安装Toolkit：
下载解压AjaxControlToolkit.zip移至
C:\Program Files\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extensions\AjaxControlToolkit
安装模板C:\Program Files\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extensions\AjaxControlToolkit\AjaxControlExtender\AjaxControlExtender.vsi
若安装失败，手工建立以下文件夹：
\My Documents\Visual Studio 2005\Templates\ItemTemplates\Visual C#
\My Documents\Visual Studio 2005\Templates\ItemTemplates\Visual Basic
\My Documents\Visual Studio 2005\Templates\ProjectTemplates\Visual C#
\My Documents\Visual Studio 2005\Templates\ProjectTemplates\Visual Basic
把SampleWebSite\Bin下的AjaxControlToolkit.dll和AjaxControlToolkit.pdb
复制至Binaries下。
打开VS，添加选项卡AjaxControlToolkit，添加项浏览至Binaries\AjaxControlToolkit.dll