Ajax之一 简介篇

[学习目标]

F使用Asp.NetAjax核心组件实现无刷新和局部更新效果

F掌握AutoComplete控件的使用，并利用其实现自动完成功能

【本章简介】

Ajax基于那些已经广泛使用的浏览器技术，包括异步JavaScript和XML。Ajax这个概念出现后不久就开始风靡起来，因为它使Web应用程序的功能和用户界面(UI)变得更加接近于桌面应用程序。

Ajax的主要思想是使Web页可以在后台（或者说是异步的）发送HTTP请求，而不需要重新读取整个页面（用Asp.Net的话来说，就是不需要往返行程或回发）。Ajax允许使用JavaScript、Dom(文档对象模型)、Css（层叠样式表）等。

1.1 Ajax概述

1.1.1 Ajax典型应用

 

在推进Ajax技术发展的过程中，Google公司起到了非常大的作用，它的很多网上应用都大量地采用了Ajax技术，例如：Google Suggest、Google Maps等。下面我看两个具体的例子。

1.Google Suggest（搜索建议）

 

 

有了搜索建议后，我们只需要输入关键字的前几个字或拼音，就可以把相关的热门关键字都显示出来。剩下的关键字部分就可以通过选择来完成。例如，输入“Ajax”四个字母，搜索建议会立即给出“ajax技术、ajax基础教程”等选择项。这种无刷新的方式，和我们传统的浏览、输入、提交、刷新的方式是完全不同的。

 

2.Google Maps（地图）

 

 

同样地，Google地图也提供了非常方便的地图缩放、拖曳等功能，如图1-2所示,它的无刷新数据更新方式大大改善了用户体验。要提醒大家注意的是，我们每次拖曳或者缩放操作带来的数据更新，都是从远程服务器上获取的。这种效果，对于传统的Web应用来说是不可思议的。

 

1.1.2 Ajax相关基础知识

 

要想通过客户端编程以创建Ajax页面，需要先了解JavaScript、Dom以及XMLHttpRequest对象（它处理那些从客户端发送到服务器的请求）的相关知识。本书使用的是Asp.Net AJAX框架，可以适当的简化在.Net环境下ajax的编程。Asp.Net AJAX的目的就是尽量避免编写冗余的的代码以及将客户端开发人员的经验与Asp.Net2.0(3.5)开发人员的经验结合起来；另外将OOP的可以提高效率的优点带到JavaScript中。

虽然Asp.NetAJAX为需要创建Ajax应用程序的客户端脚本的开发人员提供了一大堆的好处，但它却不只是编写JavaScript以对服务器端发出异步调用那么简单。由于Asp.Net AJAX是由Asp.Net开发团队创建的，因此它的突出特点就是与Asp.Net 2.0集成。

就像Asp.Net本身那样，你不需要掌握Ajax技术就可以得到一些Ajax的功能，因为设计Asp.Net Ajax就是为了帮助你完成这些工作。就像Asp.Net可以帮你管理HTTP的功能那样，Asp.Net AJAX也可以管理Ajax的功能，比如回发、状态管理以及使Asp.Net正常运转所需要的那些客户端脚本等。

 

1.1.3 Asp.NetAJAX 的包

 

Asp.Net AJAX的主页（https://ajax.asp.net）上提供了很多不同的包，它们所关注的焦点各有不同。

nAsp.Net AJAX扩展(Asp.Net AJAX Extensions)

也称为“Asp.Net AJAX Core”，这是Asp.Net AJAX的所有包中最重要的一个。它完全由微软维护，包含了Asp.Net AJAX的基础结构。

nAsp.Net AJAX控件集(Asp.Net AJAX Control Toolkit)

这个包中包含了大量的服务器组件，它们可以让你不费吹灰之力就得到令人吃惊的Ajax功能。为了保证质量，微软控制着整个项目，不过这个控件集却是开源的。

nAsp.Net AJAXFutures

在这个包中，我们可以窥视到一些可能在将会（也可能不会^.^）成为Asp.Net和Asp.NetAJAX一部分的功能。

n微软Ajax库

这个一个纯JavaScript的库。

 

微软提供了Asp.Net AJAX的全部源码，可以在https://ajax.asp.net/下载。

1.2 安装Asp.Net AJAX及控件包

一.Asp.NetAJAX安装过之后会集成到IDE中，VS2008可以直接使用。在Asp.Net AJAX的主页上（https://ajax.asp.net）,你可以找到Microsoft Asp.Net 2.0 AJAX Extensions1.0的安装程序，它是一个名为ASPAJAXExtSetup.msi的安装包，点击下载安装。

二.安装完毕后，Visual Studio中就会显示一个新的用于创建Asp.Net AJAX网站的选项。这是开始学习Asp.Net AJAX技术的最好途径，因为它将所有需要的文件都放到了适当的目录中了。如图1-3所示：

 

 

 

 

1.3 Asp.Net AJAX的组成原理

 

Ajax实际上是JavaScript、CSS、DOM、XmlHttpRequest四种技术的集合体，其中，XmlHttpRequest是Ajax技术的核心对象，可以说，正是通过它实现了以异步方式获取服务器数据；DOM是文档对象模型，通过Dom，我们可以方便地定位一个Html/Xml文档任意部分并执行相关操作。

Ajax的基本原理为：XmlHttpRequst从服务器（数据服务器或Web服务器）获取数据到客户端的内存中，然后JavaScript根据实际需要对这些资源进行处理，并通过CSS和DOM实现界面布局呈现给浏览器，如下图所示：

 

 

 

1.4 Asp.Net AJAX页面的生命周期 图1-7说明了ASP.Net AJAX的基本结构。使用AJAX的网页可以持续地跟服务器交换数据，而标准的网页则需要由两个步骤（一个是请求，另一个是响应）来完成这个工作。Asp.Net AJAX对通信的双方都有帮助。客户端脚本库（比如由ScriptManager控件动态读入的那一些，你很快就会看到相关的内容了）不仅能够帮助浏览器与Web服务器之间进行通信，而且还能使客户端编程更加简单。Asp.Net AJAX服务器端程序集不仅接收和处理XMLHttpRequest调用，而且还实现了一些方便使用的服务器端控件。因此，程序员不必花大力气就可以让客户端与服务器端交换数据了。

 

 

 

 

在第一次请求某个使用了Asp.Net AJAX的页面时（图1-7的一步和第二步），Asp.Net AJAX客户端框架（图1-7客户端组件中最下面的那一层）就会从服务器发送到浏览器上。此后从该AJAX应用程序的同一个页面向服务器发送的请求就可以做成能够返回文本或Xml的Http请求了（图1-7中的第三步和第四步）。Asp.Net页面可以使用整页回发或异步请求这两种方式来完成不同的任务。

 

项目一：建立没有AJAX的简单的Asp.Net页面 首先建立一个没有使用AJAX功能的简单页面，该页面只需要一个标签控件和一个服务器端按钮控件。页面图1-8所示：

 

 

 

点击按钮页面上的按钮后会显示当前计算机日期和时间

按钮的代码如下：

this.Label1.Text=DateTime.Now.ToString();

在单击按钮之前，页面的代码如程序清单1-1所示。

程序清单1-1 没有使用AJAX页面的输出

 

 

 

 

先不使用Ajax~ ~

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Label

 

 

 

 

 

这段代码没有什么可以解释的，它有几个ViewState和传送回Default.apsx页面的普通窗体。终端用户单击页面上的按钮时，会执行服务器回传的完整过程，重新处理整个页面，并返回给客户的浏览器。

项目二：建立没有AJAX的简单的Asp.Net页面

1.在项目一的基础上，需要添加两个服务器控件：一个是标签控件Label2,一个是按钮控件Button2。除此之外，还需要添加两个Asp.Net AJAX控件。

从Visual Studio 2005的工具箱的AJAX Extensio选项卡上，把一个ScriptManager服务器控件添加到页面的顶部;另外添加一个UpdatePanel控件，在UpdatePanel中包含第二个标签控件和按钮控件。

 

UpdatePanel控件是一个模板服务器控件，允许在其中包含任意多项（与其他Asp.Net 模板服务器控件一样）。

 

建立好的页面如图1-9所示：

 

 

 

按钮二的单击事件代码为：

Label2.Text=DateTime.Now.ToString();

 

1.在运行程序后，查看页面源码，会看到元素会被下面的代码替换掉（那些URL在系统中可能会有所不同）。

<scriptsrc="/1-2/WebResource.axd?d=fOO_tIUYLZr0MQe-ihoh8w2&t=633869615980000000"type="text/javascript"></script>

 

<scriptsrc="/1-2/ScriptResource.axd?d=Ysmd6E17nA_vGxCDNUyY9K0gWQte7RXhxn4gtGSEVxCAmqJc6AuQI_z6wyjQ4dhukF3hI8QkjBsfpSLMbjanHM43_GvFMX58f9j5k7cYojg1&t=634051109080000000"type="text/javascript"></script>

<script src="/1-2/ScriptResource.axd?d=Ysmd6E17nA_vGxCDNUyY9K0gWQte7RXhxn4gtGSEVxCAmqJc6AuQI_z6wyjQ4dhukF3hI8QkjBsfpSLMbjanHKMNeNF_n2zX19hbq55X-OWMm6W9r4fna9Gax_LKmJkf0&t=634051109080000000"type="text/javascript"></script>

Asp.Net AJAX生成了一些用来初始化Ajax框架某些部分的JavaScript代码。

ScriptManager控件必须放在任何一个要使用Asp.Net AJAX的页面上。

 

2.运行效果：如果单击Button1，进行整个页面的会送，就会在响应中得到这些代码,后退按钮会变绿；如果单击Button2，则会部分刷新页面，后退按钮不会刷新，仍然为灰色。

 

@本章总结

1.本章介绍了Asp.Net AJAX，解释了它与Ajax以及Asp.Net 2.0之间的关系。

2.指导如何安装相关Ajax软件和添加类库集。

3.编写了一个使用Ajax的web应用程序，并学习了两个关键服务器控件ScriptManager控件和UpdatePanel控件。