基于ASP NET的Web应用开发单元8任务1：创建AJAX程序

• 当异步回发代码需要访问UpDatePanel之外的控件时，注 意它对这些控件所修改的值有可能会消失，因为服务器发 给浏览器的仅是浏览器更新页面局部所需要的那部分数据 而非整个页面，因此这些控件的状态可能不能被正确保存 和恢复。
四、小结
• • • • • • 了解了什么是AJAX技术 了解了AJAX实现异步回调的原理 了解了ASP.NET AJAX的框架 掌握了在ASP.NET 应用程序实现局部刷新的方法 实现局部刷新必须要有ScriptManager控件 要实现局部刷新的控件必须包含在UpdatePanel控件之 内 通过学习本单元的内容可以了解AJAX技术在ASP.NET应 用程序的作用，并能在ASP.NET应用程序中使用AJAX技 术实现局部刷新的功能。
二、基本知识与技能—AJAX技术简介 • 简而言之，AJAX技术是通过使用XHTML、 CSS、DOM等实现的，具体实现如下所示。
– – – – – 使用XHTML+CSS进行页面表示。 使用DOM进行动态显示和交互。 使用XML和XSLT进行数据交换。 使用XMLHttpRequest进行异步数据查询、检索 使用JavaScript进行页面绑定。
三、任务1的实施
1. 新建ASP.NET空WEB项目Task8-1,添加页面AjaxTest.aspx，页面布局 代码如下：
<form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <div align="center"> 全页面的更新时间 <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label><br /> <asp:Button ID="Button1" runat="server" Text="更新整个页面（标准回发） onclick="Button1_Click" /> </div> <div align="center" style="background-color: #C0C0C0; margin-top: 10px;"> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> 局部可更新区域的更新时间 <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label><br /> <asp:Button ID="Button2" runat="server" Text="更新局部区域（异步回发） onclick="Button2_Click" /> </ContentTemplate> </asp:UpdatePanel> </div> </form>
二、基本知识与技能—AJAX技术简介
• AJAX技术看似非常的复杂，其实AJAX并不是新技术，AJAX只是一 些老技术的混合体，AJAX通过将这些技术进行一定的修改、整合和 发扬，就形成了AJAX技术。这些老技术包括有：
– – – – –
XHTML：基于XHTML1.0规范的XHTML技术。 CSS：基于CSS2.0的CSS布局的CSS编程技术。 DOM： HTML DOM，XML DOM等DOM技术。 JavaScript：JavaScript编程技术。 XML：XML DOM、XSLT、XPath等XML编程技术。
五、作业 使用AJAX技术完成一个局部刷新页面的制作 。
Thank You!
– 局部页刷新，即只刷新已发生更改的网页部分。 – 自动生成的代理类，可简化从客户端脚本调用Web服 务方法的过程。 – 支持大部分流行的浏览器。 – 因为网页的大部分处理工作是在浏览器中执行的，所 以大大提高了效率
二、基本知识与技能—ASP.NET
AJAX架构
• 微软公司将AJAX技术组合到已有的ASP.NET基础架构中 ，形成了自己的AJAX技术开发框架。 ASP.NET AJAX由 客户端脚本库和服务器组件组成，它们一起提供了一个健 壮的开发框架。
<asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager>
• 开发人员无需对ScriptManger控件进行配置，只需保证S criptManger控件在UpdatePanel控件之前即可。使用了 ScriptManger控件之后，可以使用UpdatePanel用来确 定需要进行局部更新的控件。
单击更新局部区域
二、基本知识与技能—什么是AJAX
• AJAX (Asynchronous JavaScript + XML)是一种在客 户端与服务器端异步通信的技术，通俗点来说就是无刷 新的页面请求技术。在ASP.NET中，每当用户请求页面 时，无论是第一次请求还是页面回发请求，都将导致Se rver端重新生成一个Web页面，并被发送到客户端。此 时客户端会重新加载一个全新的Web页面，浏览器的进 度条会显示重新加载时的进度，整个过程都由客户端和 服务器端直接通信来完成。 • AJAX技术则在客户端和服务器端增加了一个客户端代 理层，当客户端需要与服务器端通信时，由客户端代理 层向服务器端异步地发出请求。服务器端收到请求，执 行一系列行为并传回更新信息给客户端代理，代理层将 提取出服务器端返回的信息更新客户端。整个过程由代 理异步的在后台完成，客户端不需要进行任何的刷新动 作，因此通常有人称AJAX页面为无刷新Web页面。
技术应用背景
• 现今，在Web开发领域最流行的就属AJAX，AJA X 能够提升用户体验，更加方便的与 Web 应用程 序进行交互。在传统的Web开发中，对页面进行 操作往往需要进行回发，从而导致页面刷新，而 使用AJAX就无需产生回发从而实现无刷新效果。
• AJAX英文全称是Asynchronous JavaScript and XML ，中文称为异步 JavaScript 和 XML 。事实上 AJAX本身不能称为一门技术、语言或者是软件， 它是多种技术组合，这些技术存在了很多年，现 在借助于AJAX的出现，开始越来越受到开发人员 的重视。
二、基本知识与技能—AJAX技术简介
• 除了上面的一些老技术，AJAX还包含另一个技术，这个 技术就是XMLHttpRequest。在AJAX中，最重要的就是 XMLHttpRequest对象，XMLHttpRequest对象是JavaS cript对象，正是XMLHttpRequest对象实现了AJAX可以 在服务器和浏览器之间通过JavaScript创建一个中间层， 从而实现了异步通信。 AJAX页面请求示意如图所示。
三、任务1的实施
2. 上述代码使用了UpdatePanel控件将服务器控件进行绑定，当浏览者操作Update Panel控件中的控件实现某种特定的功能时，页面只会针对UpdatePanel控件之间 的控件进行刷新操作，而不会进行整个页面的刷新。为控件进行事件操作编写代码 ，示例代码如下所示。
public partial class AjaxTest : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { Label1.Text = DateTime.Now.ToString(); Label2.Text = DateTime.Now.ToString(); } protected void Button1_Click(object sender, EventArgs e) { Label1.Text = DateTime.Now.ToString(); } protected void Button2_Click(object sender, EventArgs e) { Label2.Text = DateTime.Now.ToString(); } }
二、基本知识与技能—AJAX技术和传统Web程序比较
二、基本知识与技能—ASP.NET
AJAX技术
• ASP.NET AJAX是AJAX的Microsoft实现方式， 专用于ASP.NET开发人员。使用ASP.NET中的AJ AX功能，可以生成丰富的Web应用程序。与传统 的Web应用程序相比， • 基于ASP.NET AJAX的Web应用程序具有以下优 点：
WEB 应 用 开 发
单元8：创建无刷新网页
任务1：创建AJAX程序
主要内容
1 2 3 4
AJAX 介绍 ASP.NET AJAX技术 ASP.NET AJAX架构 ASP.NET AJAX应用程序
学习目标 知识目标 • • • • 了解什么是AJAX 了解AJAX技术的构成 了解ASP.NET AJAX技术 掌握AJAX技术如何在ASP.NET应用程序中发 挥作用 能力目标 • 能够创建AJAX程序
Baidu Nhomakorabea
二、基本知识与技能—AJAX在ASP.NET程序的应用
• 虽然AJAX的原理听上去非常的复杂，但是AJAX的使用却 是非常方便的。ASP.NET 提供了AJAX控件以便开发人员 快速的进行AJAX应用程序开发。在进行AJAX页面开发时 ，首先需要使用脚本管理控件（ScriptManger），示例 代码如下所示。
三、任务1的实施
3. 运行结果如下：
一个重要疑问：
当点击放在UpdatePanel中的按钮局部更新阴影部分区域时，在服务 器端是不是仅执行与阴影部分页面区域更新的C#代码？
三、任务1的实施
• 任务结果分析 • 在异步更新模式下，服务器端的页面类仍然经历与传统回 发一样的生命周期。 • 这就是说：不管是异步回发还是传统回发，服务器端该执 行的代码还是会执行，但在发回给浏览器数据时有差别。 如果是异步回发，服务器会根据异步回发送来的数据仅发 送要更新的那部分页面给浏览器，而传统回发时，服务器 则会发回整个页面。
一、任务1：一个ASP.NET
AJAX 程序
• 任务描述 • 本次任务通过创建一个ASP.NET AJAX程序让大家直观了 解页面局部刷新。当点击“标准回发”按钮时，整个页面 会被PostBack,服务器传回数据后，浏览器将刷新整个页 面。当点击“异步回发”按钮时，仅阴影部分被刷新。
单击更新整个页面