01情境八任务1：创建AJAX程序

1、 网络技术专业教学资源库WEB 应用开发课程教案学习情境授课班级创建无刷新网页学习任务上课时间能力目标教 学了解什么是 AJAX了解 AJAX 技术的构成了解 ASP .NET AJAX 技术教学内容和教学组织教 学教学内容（工作任务）步 骤教学方法学生行 考核动方式回 顾使用 LINQ 编辑数据点 评提问法通过创建一个 ASP .NET AJAX 程序让大家直观1. 新建 ASP .NET 空 WEB 项目 Task8-1,添加页 任 务 驱归 纳 4. 掌握了在 ASP .NET 应用程序实现局部刷新完成作业作业使用 AJAX 技术完成一个局部刷新页面的制作。提交作业1 网络技术专业教学资

2、源库主要教学内容1.任务1任务描述：一个 ASP .NET AJAX 程序通过创建一个 ASP .NET AJAX 程序让大家直观了解页面局部刷新。当点击标准回发按钮时，整个页面会被 PostBack,服务器传回数据后，浏览器将刷新整个页面。当点击异步回发按钮时，仅阴影部分被刷新。2.基本知识与技能2.1 什么是 AJAXAJAX (Asynchronous JavaScript + XML) 是一种在客户端与服务器端异步通信的技术，通俗点来说就是无刷新的页面请求技术。在 ASP .NET 中，每当用户请求页面时，无论是第一次请求还是页面回发请求，都将导致 Server 端重新生成一个 Web

3、 页面，并被发送到客户端。此时客户端会重新加载一个全新的 Web 页面，浏览器的进度条会显示重新加载时的进度，整个过程都由客户端和服务器端直接通信来完成。AJAX 技术则在客户端和服务器端增加了一个客户端代理层，当客户端需要与服务器端通信时，由客户端代理层向服务器端异步地发出请求。服务器端收到请求，执行一系列行为并传回更新信息给客户端代理，代理层将提取出服务器端返回的信息更新客户端。整个过程由代理异步的在后台完成，客户端不需要进行任何的刷新动作，因此通常有人称 AJAX 页面为无刷新 Web 页面。2.2 AJAX 技术简介AJAX 技术看似非常的复杂，其实 AJAX 并不是新技术，AJAX

4、只是一些老技术的混合体，AJAX 通过将这些技术进行一定的修改、整合和发扬，就形成了 AJAX 技术。这些老技术包括有：2 网络技术专业教学资源库XHTML ：基于 XHTML1.0 规范的 XHTML 技术。CSS ：基于 CSS2.0 的 CSS 布局的 CSS 编程技术。DOM ： HTML DOM ，XML DOM 等 DOM 技术。JavaScript：JavaScript编程技术。XML ：XML DOM 、XSLT 、XPath 等 XML 编程技术。除了上面的一些老技术，AJAX 还包含另一个技术，这个技术就是 XMLHttpRequest 。在AJAX 中，最重要的就是XML

5、HttpRequest 对象，XMLHttpRequest 对象是 JavaScript对象，正是 XMLHttpRequest 对象实现了 AJAX 可以在服务器和浏览器之间通过 JavaScript创建一个中间层，从而实现了异步通信。2.3 ASP.NET AJAX 技术ASP .NET AJAX 是 AJAX 的 Microsoft实现方式，专用于 ASP .NET 开发人员。使用ASP .NET 中的 AJAX 功能，可以生成丰富的 Web 应用程序。与传统的 Web 应用程序相比，基于 ASP .NET AJAX 的 Web 应用程序具有以下优点：局部页刷新，即只刷新已发生更改的网页

6、部分。自动生成的代理类，可简化从客户端脚本调用 Web 服务方法的过程。支持大部分流行的浏览器。因为网页的大部分处理工作是在浏览器中执行的，所以大大提高了效率2.4 ASP.NET AJAX 架构微软公司将 AJAX 技术组合到已有的 ASP .NET 基础架构中，形成了自己的 AJAX 技术开发框架。 ASP .NET AJAX 由客户端脚本库和服务器组件组成，它们一起提供了一个健壮的开发框架。3.任务1 的实施3 网络技术专业教学资源库（1）新建 ASP .NET 空 WEB 项目 Task8-1,添加页面 AjaxTest.aspx，设置页面布局全页面的更新时间局部可更新区域的更新时间（

7、2）为控件进行事件操作编写代码，示例代码如下所示。public partial class AjaxTest : System.Web.UI.Pageprotected 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();pro

8、tected void Button2_Click(object sender, EventArgs e)Label2.Text = DateTime.Now.ToString();4 网络技术专业教学资源库4.任务结果分析在异步更新模式下，服务器端的页面类仍然经历与传统回发一样的生命周期。这就是说：不管是异步回发还是传统回发，服务器端该执行的代码还是会执行，但在发回给浏览器数据时有差别。如果是异步回发，服务器会根据异步回发送来的数据仅发送要更新的那部分页面给浏览器，而传统回发时，服务器则会发回整个页面。当异步回发代码需要访问 UpDatePanel 之外的控件时，注意它对这些控件所修改的值有可能会消失，因为服务器发给浏览器的仅是浏览器更新页面局部所需要的那部分数据而非整个页面，因此这些控件的状态可能不能被正确保存和恢复。5.小结（1）了解了什么是 AJAX 技术（2）了解了 AJAX 实现异步回调的原理（3）了解了 ASP .NET A