ASP.NET AJAX 概述
1. AJAX简述
1.1. 传统Web应用和AJAX区别
在采用传统Web应用时，用户需要点击"Submit"按钮来发送或者接受数据信息，然后等待服务器响应请求，页面重新加载。这样因为服务器每次都会返回一个新的页面，
所以导致速度有可能很慢而且用户交互不友好。使用AJAX技术，就可以使Javascript通过XMLHttpRequest对象直接与服务器进行交互。通过HTTP Request,一个web页面可以发送
一个请求到web服务器并且接受web服务器返回的信息(不用重新加载页面)，展示给用户的还是同一个页面，用户感觉页面刷新，也看不到Javascript后台进行的发送请求和接受响应。
1.2. AJAX应用
– 异步：AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
– 页面部分刷新，AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
– 减少数据传输量，AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。
– 提高用户体验
2. ASP.NET AJAX概述
2.1. 微软ASP.NET的AJAX实现
– 与ASP.NET 2.0无缝集成
– 轻易添加AJAX效果
– 以服务器端为中心开发（不用写JS代码）
– 以客户端为中心开发（提供丰富支持）
2.2. 什么是AJAX?
AJAX 是一种用于创建快速动态网页的技术。
2.3. ASP.NET AJAX组件
2.3.1. ASP.NET AJAX Control Tookit
安装ASP.NET AJAX 控件工具包，其获取控件工具包可访问下面地址： http://www.asp.net/ajaxlibrary/AjaxControlToolkitSampleSite/
几个下载选项的区别在于 .NET 版本号以及是否要包含源代码。我这里下载的是针对 .NET 4 设计且不含源代码的工具包。
解压文件后，可以找到一个主要的程序集 AjaxControlToolkit.dll 以及一系列支持不同文化及本地化的较小的卫星程序集。另外，还可以看到一个 AjaxControlToolkitSampleSite.zip 文件，
它包含大量示例网站（演示 ASP.NET Ajax Control Toolkit 所有的元素），以及包含了安装说明的 ReadMe.html 文件。
如果要使用 ASP.NET AJAX 控件工具包开发，可直接将主程序集以及文化特定的子文件夹复制到 Web 应用程序的 Bin 目录。
但把这些新组件加入到 VS 的工具箱则更好，下面是具体步骤：
a.确保控件工具包文件夹位于硬盘的某个永久位置。
b.在工具箱上为控件新建一个页签。（右击工具箱 -> 添加新页签 -> 输入如 "AJAX Toolkit”）
c.右击新页签某个空白区域，选择 “选择项目”。
d.在选择工具箱对话框中，单击“浏览”找到控件工具包程序集。
现在可以在任意网站的任意页面里使用 ASP.NET AJAX 控件工具包里的组件了。第一次拖动组件时，VS 会把 AjaxControlToolkit.dll 程序集和本地化程序集一起复制到 Web 应用程序的 Bin 目录。
2.3.2. Microsoft AJAX Library
2.3.3. ASP.NET 2.0 AJAX Extensions
• 序列化与反序列化
• 客户端访问Web Service方法
• 服务器端AJAX控件
– ScriptManager
– UpdatePanel
– Extender
2.3.4. ASP.NET 2.0
2.3.5. ASP.NET AJAX控件工具包
AlwaysVisableControlExtender 能把控件固定在某一特定位置（如网页的左上角），即使用户滚动页面也是如此
AnimationExtender 强大而灵活的扩展器，可以单独或组合给大小调整、移动、淡出、颜色变化等添加动画
AutoCompleteExtender 根据用户的部分输入提供建议列表，列表内容完全由 Web 方法生成
CalendarExtender 显示一个弹出的日历，它可以被附加到文本框上，方便输入日期。用户选定某个日期后，该日期被插入到关联的控件中
CascadingDropDown 不必手工编码，就可以相应关联下拉列表
CollapsiblePanelExtender 展开或收叠页面上的面板。页面其余部分沿它们重新排列
ColorPickerExtender 显示一个弹出的颜色选择器，可以附加到文本框以方便选择颜色
ConfirmButtonExtender 截获 Button、LinkButton、ImageButton 控件的单击事件并显示一个确认消息。如果用户在确认框里选择取消操作，那么单击事件被取消
DragPanelExtender 使面板能够在页面上拖动
DropDownExtende 在鼠标移过的时候将几乎所有控件转变为下拉列表框内。比如，可以将它链接到一个 Label 控件。用户鼠标移动到它上面时，从列表中选择一个不同的
条目（因此改变了标签中的文字），然后将鼠标移开（允许标签恢复到它本来的原始外观）
DropShadowExtender 为面板添加阴影效果。阴影可以是部分透明的。你可以控制其边界的大小弧度
DynamicPopulateExtender 用 Web 服务方法调用的结果替代某个控件的内容
FilteredTextBoxExtender 让你能够禁止输入某些字符到文本框。这意味着补充了验证，而不是代替它，因为恶意的用户可以篡改呈现的页面或禁用 JavaScript 对字符的过滤
HoverMenuExtender 这个扩展器能够在用户鼠标滑过控件时弹出内容
ListSearchExtender 让用户输入条目文本的前几个字母来搜索 ListBox 或 DropDownList 里面的内容。控件搜索条目并跳到匹配用户输入的第一个条目处
MaskedEditExtender 使用掩码限制用户能够输入文本框的内容。（掩码是一个定义固定长度文本模式的字符串，它提供提示字符帮助用户输入值。例如，电话号码掩码
可能在文本框里显示( ) - 。随着用户的输入，占位符被有效的数字字符取代，而非数字字符则被拒绝。）你可以结合 MaskedEditValidator
使用 MaskedEditExtender，确保用户不能篡改 js 代码并输入无效的值
ModalPopupExtender 让你能够创建模态对话框的效果，它可以把页面变暗、禁用控件并在最前面显示一个叠加面板
MultiHandleSliderExtender 能将一个TextBox 转化为一个滑动控件。这个滑动控件拥有超出标准 ASP.NET 服务器端等效控件的功能。最引人注目的是，它支持一个滑动轨道有多个锚点。
这在使用滑动控件来标识一个值域时非常有用！
MutuallyExclusiveCheckBoxExtender 允许给多个 CheckBox 控件关联一个“键值”。当用户单击某个按这种方式扩展的复选框时，具有相同“键值”的复选框将自动取消或选中
NumericUpDownExtender 给文本框提供可配置的上下箭头按钮（在右边），这些按钮增大或减小文本框中的数值或日期
PagingBulletedListExtender 附加到一个 BulletedList 并让它能够支持客户端的分页功能，这样一个很长的列表可以分解为多个较小的区段
PasswordStrength 附加到文本框上，随着用户的输入，它评估文本框值的密钥强度，一般用作密码创建框的指导
PopupControlExtender 提供可显示在任意控件旁边的弹出内容
ResizableControlExtender 允许用户通过控件右下角可配置的手柄调整控件的大小
RoundedCornersExtender 围绕任意控件显示一个整洁、专业的外观
SliderExtender 把文本框转换为一个图形滑块，允许用户拖动轨道上的指针选择一个数值
SlideShowExtender 附加到一个 image 元素上，并让它显示一组图片。图片通过一个 Web 服务方法提供，幻灯片可以一直循环显示，也可以通过你创建的“播放”、“暂停”、“前进”、“后退”按钮控制
TextBoxWatermarkExtender 能够在 TextBox 控件为空时自动修改背景色并提供特定文字。例如，文本框可能包含写在淡蓝背景上的浅灰文字 EnterValue。光标进入文本框或在文本框中输入内容后，
这些文字就会消失
ToggleButtonExtender 把普通的 ASP.NET 复选框变成图片复选框
UpdatePanelAnimationExtender 可以使用与 AnimationExtender 相同的动画。不过，它设计为配合 UpdatePanel 使用，并在更新进行时或面板被刷新时自动执行这些动画
ValidatorCalloutExtender 扩展 ASP.NET 验证控件的客户端逻辑，以便验证控件使用弹出验证提示指向含有非法输入的控件
2.3.6. ASP.NET AJAX 控件工具包中的控件
Accordion 这个控件堆叠多个内容面板，并允许用户每次只看到其中的一个。单击某个面板时，该面板展开，而其他面板收起（页头可见）。它的其他特性包括自动的淡入淡出效果
以及对控件的大小进行限制（此时，如果控件的内容可见，较大的内容区域会出现滚动条）。
AsyncFileUpload 与 FileUpload Web 控件相似，但它异步执行工作，用户可以继续和页面交互（显然，页面回发或导航到新页面会中断异步文件的传输）。可以被配置为文件上传过程中
显示其他控件。通常，第二个控件（通过 ThorbberID 属性）会显示一个简单的动画提示用户上传正在进行
ComboBox 这个控件受到了 Windows 组合列表框的启发，它提供一个下拉列表框并允许用户输入任意文本。
Editor 这个特别值得注意的强大控件提供了 HTML 编辑的能力，具有完整的命令工具栏。用户可以在 3 个模式间切换：Html（显示标记）、Design（和文字处理器相似，
显示正确呈现的 HTML 预览）、Preview（和 Design 相似，但不能编辑）
NoBot 这个控件执行数项检查以识别是否某个自动程序（bot）正在访问页面。如果 NoBot 确认当前是自动程序正在访问页面，请求就会被拒绝。这项技术主要用于防止程序偷窃
内容或者向博客提交垃圾内容，但可以被绕开。例如，NoBot 强制浏览器执行一段使用 HTML DOM 并提交结果的 JavaScript 计算，它的目的是捕获访问页面的非浏览器
应用程序。NoBot 还拒绝那些表单回发特别迅速或在特定间隔时间内回传次数特别多的请求。这两种行为都暗示当前是一个程序而不是一个人在进行工作
Rating 允许用户在一组星号上滑动鼠标，当期望个数的星号被显示后设置等级
ReorderList 创建一个可滚动的模板列表，允许用户通过拖放对条目进行重新排序
Seadragon 让用户能够放大一个原本非常大的图片的特定部分。背后，这些图片由一系列更小的条幅组成，它们由 Web 服务器托管。需要通过免费的 Deep Zoom Composer（http://tinyurl.com/26wjeqt）工具来生成 Seadragon 图片。特别值得一提的是 Silverlight 内置了非常强大的缩放图片功能。
TabContainer 模拟 Windows 中的页签。每个页签有一个页头，用户通过单击页头在页签中切换
3. ASP.NET AJAX示例
Let AJAX change this text
AJAX is not a programming language.
It is just a technique for creating better and more interactive web applications.
上面的 AJAX 应用程序包含一个 div 和一个按钮。
div 部分用于显示来自服务器的信息。当按钮被点击时，它负责调用名为 loadXMLDoc() 的函数：
<html> <body> <div id="myDiv"><h3>Let AJAX change this text</h3></div> <button type="button" onclick="loadXMLDoc(url)">Change Content</button> </body> </html>
接下来，在页面的 head 部分添加一个 <script> 标签。该标签中包含了这个 loadXMLDoc() 函数：
<head> <script type="text/javascript">
function loadXMLDoc(url)
{
var xmlhttp;
var txt,xx,x,i;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
txt="<table border='1'><tr><th>Title</th><th>Artist</th></tr>";
x=xmlhttp.responseXML.documentElement.getElementsByTagName("CD");
for (i=0;i<x.length;i++)
{
txt=txt + "<tr>";
xx=x[i].getElementsByTagName("TITLE");
{
try
{
txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
}
catch (er)
{
txt=txt + "<td> </td>";
}
}
xx=x[i].getElementsByTagName("ARTIST");
{
try
{
txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
}
catch (er)
{
txt=txt + "<td> </td>";
}
}
txt=txt + "</tr>";
}
txt=txt + "</table>";
document.getElementById('txtCDInfo').innerHTML=txt;
}
}
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
</script> </head>
4. 开发工具演示
• JavaScript调试
– Visual Studio 2012（IE）
– Venkman（FireFox）
• HTTP内容察看
– Fiddler
• 页面开发辅助工具
– IE Dev Toolbar（IE）
– FireBug（FireFox）
• 其他
– Web Development Helper
– .NET Reflector 5.0
浙公网安备 33010602011771号