16.1 AJAX基础

  在C/S应用程序的开发过程中,很容易做到无“刷新”样式控制,因为C/S应用程序往往是安装在本地的,所以C/S应用程序能够维持客户端状态,对于状态的改变能够及时捕捉。相比之下,Web应用属于一种无状态的应用程序,在Web应用程序操作过程中,需要通过POST等方法进行页面参数传递,这样就不可避免的产生页面的刷新。

16.1.1 什么是AJAX
  在传统的Web开发过程中,浏览者浏览一个Web页面,并进行相应的页面填写时,就需要使用表单向服务器提交信息。当用户提交表单时,就不可避免的会向服务器发送一个请求,服务器接受该请求后并执行相应的操作后将生成一个页面返回给浏览者。
  然而,在服务器处理表单并返回新的页面的同时,浏览者第一次浏览时的页面(这里可以当作是旧的页面)和服务器处理表单后返回的页面在形式上基本相同,当大量的用户进行表单提交操作时,无疑是增加了网络的带宽,因为处理前和处理后的页面基本相同。
  在C/S应用程序开发中,C/S应用程序往往安装在本地,这样响应用户事件的时间非常的短,而且C/S应用程序可以算的上是有状态的应用程序,能够及时捕捉和相应用户的操作。而在Web端,由于每次的交互都需要向服务器发送请求,服务器接受请求和返回请求的过程就依赖于服务器的响应时间,所以给用户造成感觉要比在本地慢的多。
  为了解决这一问题,通过在用户浏览器和服务器之间设计一个中间层——即AJAX层能就能够解决这一问题,AJAX改变了传统的Web中客户端和服务器的“请求——等待——请求——等待”的模式,通过使用AJAX应用向服务器发送和接收需要的数据,从而不会产生页面的刷新。
  AJAX应用通过使用SOAP或其他一些基于XML的web service接口,并在客户端采用JavaScript处理来自服务器的响应,从而减少了服务器和浏览器之间的“请求——回发”操作,从而减少了带宽。当服务器和客户端之间的信息通信减少之后,浏览者就会感觉到Web应用中的操作就更快了。
  AJAX将一些应用的处理交付给客户端,让服务器端原本应该运行的操作和需要处理的事务分布给客户端,这样服务器端的处理时间也减少了。
  相对于传统的Web开发,AJAX提供了更好的用户体验,AJAX也提供了较好的Web应用交互的解决方案,相对于传统的Web开发而言,AJAX技术也减少了网络带宽。Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中就被引入了,它是一种支持异步请求的技术。简而言之,XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应,而不会影响客户端的信息通信。传统的Web应用和AJAX应用模型如图16-1所示。
传统Web应用和AJAX Web应用模型
图16-1 传统Web应用和AJAX Web应用模型
  AJAX Web应用模型的优点在于,无需进行整个页面的回发就能够进行局部的更新,这样能够使Web服务器能够尽快的响应用户的要求。而AJAX Web应用无需安装任何插件,也无需在Web服务器中安装应用程序,但是AJAX需要用户允许JavaScript在浏览器上执行,如图用户不允许JavaScript在浏览器上执行,则AJAX可能无法运行。但是随着AJAX的发展和客户端浏览器的发展,先进的所有的浏览器都能够支持AJAX,包括最新的IE8、Firefox 4以及Opera等。
  AJAX包含诸多优点,同样也包含缺点。AJAX无法维持刚刚的“历史”状态,当用户在一个页面进行操作后,AJAX将破坏浏览器的功能中的“后退”功能,当用户执行了AJAX操作之后,当单击浏览器的后退按钮时,则不会返回到AJAX操作前的页面形式,因为浏览器仅仅能够记录静态页面的状态,而使用AJAX进行页面操作后,并不能改变本身页面的状态,所以单击后退按钮并不能返回操作前的页面状态。
  在使用AJAX进行Web应用开发的过程中,另一个缺点就是容易造成用户体验变差。虽然AJAX能够极大的方便用户体验,但是当服务器需求变大时,当用户进行一个操作而AJAX无法及时相应时,可能会造成相反的用户体验。
  例如用户阅读一个新闻时,当用户进行评论时,页面并没有刷新,但是评论这个操作已经在客户端和浏览器之间发生了,用户可能很难理解为什么页面没有显式也没有刷新,这样容易让用户变得急躁和不安,使得用户可能产生非法操作从而降低用户体验。为了解决这个问题,可以在页面明显的位置提示用户已经操作或提示请等待等操作,让用户知道页面正在运行。
  相比于传统的Web应用,AJAX的另一个缺点就是对移动设备的支持不够好。在当今IPhone和GPhone等智能移动设备逐渐普及的同时,AJAX并不能很好的支持这些设备,这也需要等待AJAX技术的进一步发展。

16.1.2 ASP.NET AJAX入门
  AJAX技术看似非常的复杂,其实AJAX并不是新技术,AJAX只是一些老技术的混合体,AJAX通过将这些技术进行一定的修改、整合和发扬,就形成了AJAX技术。这些老技术包括有:
1)XHTML:基于XHTML1.0规范的XHTML技术。
2)CSS:基于CSS2.0的CSS布局的CSS编程技术。
3)DOM: HTML DOM,XML DOM等DON技术。
4)JavaScript:JavaScript编程技术。
5)XML:XML DOM、XSLT、XPath等XML编程技术。
  上面的这些技术并不是最新的技术,这些技术已经在现在的开发当中被普遍使用,包括XHTML、CSS和DOM,开发人员能够使用JavaScript进行Web应用中Web编程和客户端状态维护,而通过使用XML技术能够进行数据保存和交换。
  除了上面的一些老技术,AJAX还包含另一个技术,这个技术就是XMLHttpRequest。在AJAX中,最重要的就是XMLHttpRequest对象,XMLHttpRequest对象是JavaScript对象,正式XMLHttpRequest对象实现了AJAX可以在服务器和浏览器之间通过JavaScript创建一个中间层,从而实现了异步通信。如图16-2所示。
XMLHttpRequest对象实现过程
图16-2 XMLHttpRequest对象实现过程
  AJAX通过使用XMLHttpRequest对象实现异步通信,使用AJAX技术后,例如当用户填写一个表单,数据并不是直接从客户端发送到服务器,而是通过客户端发送到一个中间层,这个中间层可以被称为AJAX引擎。
  开发人员无需知道AJAX引擎是如何将数据发送到服务器的。当AJAX引擎将数据发送到服务器时,服务器同样也不会直接将数据返回给浏览器,而是通过JavaScript中间层将数据返回给客户端浏览器。XMLHttpRequest对象使用JavaScript代码可以自行与服务器进行交互。简而言之,AJAX技术是通过使用XHTML、CSS、DOM等实现的,具体实现如下所示。
1)使用XHTML+CSS进行页面表示表示。
2)使用DOM进行动态显示和交互。
3)使用XML和XSLT进行数据交换。
4)使用XMLHttpRequest进行异步数据查询、检索。
5)使用JavaScript进行页面绑定。

16.1.3 ASP.NET 2.0 AJAX
  在ASP.NET 3.5之前,ASP.NET并不是原生的支持AJAX应用,所以在ASP.NET 3.5之前使用ASP.NET AJAX并不是一件容易的事情。同时由于国内服务器和主机的限制,导致很多应用无法直接基于ASP.NET 3.5而进行创建和开发。
  ASP.NET 2.0是现在国内最为成熟的.NET技术平台,在ASP.NET 2.0中同样可以使用AJAX技术实现无页面刷新效果。在这之前,首先需要下载一个ASP.NET 2.0 AJAX安装程序,通过此安装程序能够在应用程序中安装AJAX环境,包括AJAX技术以及AJAX控件。
  技巧:ASP.NET 2.0 AJAX安装程序可以通过访问ASP.NET AJAX 中文站点进行下载,(http://www.ajaxasp.net.cn/Download/Files/ASPAJAXExtSetup.msi
下载ASP.NET 2.0 AJAX安装程序后,双击安装程序即可安装,如图16-3所示。安装完成后会在C:\Program Files\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extensions目录下生成文件System.Web.Extensions.dll、System.Web.Extensions.Design.dll以及AJAXExtensionsToolbox.dll等文件。这些文件都是在ASP.NET 2.0中使用AJAX的必要文件,开发人员能够将这些文件复制到Web应用的根目录下再添加引用即可,如图16-4所示。
安装ASP.NET 2.0 AJAX
图16-3 安装ASP.NET 2.0 AJAX
添加ASP.NET 2.0 AJAX引用
图16-4 添加ASP.NET 2.0 AJAX引用
  将这三个DLL文件添加引用到应用程序后,Web.config文件将会更改,示例代码如下所示。
+展开
-XML
    <pages validateRequest="falsebuffer="true">
        <controls>
            <add tagPrefix="aspnamespace="System.Web.UI
            assembly="System.Web.Extensions, Version=1.0.61025.0, 
            Culture=neutral, PublicKeyToken=31bf3856ad364e35
"/>

        </controls>
    </pages>

  添加引用后,可以通过添加工具栏将AJAX控件安装到默认工具栏中。右击工具栏空白区域,在下拉菜单中单击【选择项】选项,则会弹出【选择工具箱项】窗口,如图16-5所示。单击【浏览】选项,可以选择相应的DLL文件以添加工具箱,如图16-6所示。
选择工具箱
图16-5 选择工具箱
选择DLL文件
图16-6 选择DLL文件
  选择完成后,单击【确定】按钮就会发现在工具栏中已经包含了AJAX控件了。引用和工具栏添加完毕后,则需要修改Web.config文件从而实现ASP.NET 2.0对AJAX的支持。
  注意:Web.config文件已经保存在ASP.NET 2.0 AJAX应用程序下载安装包中,读者从上述连接或在官方网站下载ASP.NET 2.0 AJAX安装包后,其中就包含了Web.config文件。

16.1.4 ASP.NET 3.5 AJAX
  在ASP.NET 2.0中,AJAX需要下载和安装,开发人员还需要将相应的DLL文件分类存放并配置Web.config文件才能够实现AJAX功能。而在ASP.NET 3.5中,AJAX已经成为.NET框架的原生功能。创建ASP.NET 3.5 Web应用程序就能够直接使用AJAX功能,如图16-7所示。
ASP.NET 3.5 AJAX
图16-7 ASP.NET 3.5 AJAX
  在ASP.NET 3.5中,可以直接拖动AJAX控件进行AJAX开发。AJAX能够同普通控件一同使用,从而实现ASP.NET 3.5 AJAX中页面无刷新功能。在ASP.NET 3.5中,Web.config文件已经被更改,并且声明了AJAX功能,示例代码如下所示。
+展开
-XML
<pages>
<controls>
<add tagPrefix="aspnamespace="System.Web.UI
assembly="System.Web.Extensions, 
Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35
"/>

<add 
tagPrefix="asp
namespace="System.Web.UI.WebControls
assembly="System.Web.Extensions, 
Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35
"/>

</controls>
</pages>

  在ASP.NET 3.5中,如果需要在Internet信息服务7.0中运行ASP.NET AJAX应用,则需要配置System.webServer配置节,示例代码如下所示。
+展开
-XML
<system.webServer>
<validation validateIntegratedModeConfiguration="false"/>
<modules>
<remove name="ScriptModule"/>
<add 
name="ScriptModule
preCondition="managedHandler
type="System.Web.Handlers.ScriptModule, 
System.Web.Extensions, 
Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35
"/>

</modules>
<handlers>
<remove name="WebServiceHandlerFactory-Integrated"/>
<remove name="ScriptHandlerFactory"/>
<remove name="ScriptHandlerFactoryAppServices"/>
<remove name="ScriptResource"/>
<add name="ScriptHandlerFactoryverb="*path="*.asmxpreCondition="integratedMode
type="System.Web.Script.Services.ScriptHandlerFactory, 
System.Web.Extensions, Version=3.5.0.0, Culture=neutral, 
PublicKeyToken=31BF3856AD364E35
"/>

<add 
name="ScriptHandlerFactoryAppServices
verb="*path="*_AppService.axdpreCondition="integratedMode
type="System.Web.Script.Services.ScriptHandlerFactory, 
System.Web.Extensions, 
Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35
"/>

<add name="ScriptResource
preCondition="integratedMode
verb="GET,HEADpath="ScriptResource.axd
type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, 
Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35
"/>

</handlers>
</system.webServer>

  注意:如果在Internet信息服务7.0下运行ASP.NET AJAX则必须使用system.webServer配置节。对早期版本的 IIS 来说则不需要配置此节。

16.1.5 AJAX简单示例
  虽然AJAX的原理听上去非常的复杂,但是AJAX的使用却是非常方便的。ASP.NET 3.5提供了AJAX控件以便开发人员快速的进行AJAX应用程序开发。在进行AJAX页面开发时,首先需要使用脚本管理控件(ScriptManger),示例代码如下所示。
+展开
-HTML
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>

  开发人员无需对ScriptManger控件进行配置,只需保证ScriptManger控件在UpdatePanel控件之前即可。使用了ScriptManger控件之后,可以使用UpdatePanel用来确定需要进行局部更新的控件,示例代码如下所示。
+展开
-HTML
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:TextBox ID="TextBox1" runat="server" AutoPostBack="True" 
                    ontextchanged="TextBox1_TextChanged">
</asp:TextBox>
                &nbsp;<asp:Button ID="Button1" runat="server" onclick="Button1_Click1" 
                    Text="Button" />

                <br >
                <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
            </ContentTemplate>
        </asp:UpdatePanel>

  上述代码使用了UpdatePanel控件将服务器控件进行绑定,当浏览者操作UpdatePanel控件中的控件实现某种特定的功能时,页面只会针对UpdatePanel控件之间的控件进行刷新操作,而不会进行这个页面的刷新。为控件进行事件操作编写代码,示例代码如下所示。
+展开
-C#
        protected void Page_Load(object sender, EventArgs e)
        {
            Label2.Text = DateTime.Now.ToString();//获取当前时间
        }
        protected void Button1_Click1(object sender, EventArgs e)
        {
            TextBox1.Text = DateTime.Now.ToString();//获取当前时间
        }
        protected void TextBox1_TextChanged(object sender, EventArgs e)
        {
            Label1.Text = TextBox1.Text.Length.ToString();//统计TextBox1中的字符串个数
        }

  当用户单击按钮控件时,TextBox控件将会获得当前时间并呈现到TextBox控件中,当TextBox控件失去焦点时,则能够统计TextBox控件中字符串的个数。在传统的Web开发中,无论是单击按钮还是使用AutoPostBack属性都需要向服务器发送请求,服务器接收请求后执行请求,请求执行完毕再生成一个Web页面呈现在客户端。
  当Web页面再次呈现到客户端时,用户能够很明显的感觉到页面被刷新。使用UpdatePanel控件后,页面只会针对UpdatePanel控件内的内容进行更新,而不会影响UpdatePanel控件外的控件,运行后如图16-8和图16-9所示。
单击按钮获取时间
图16-8 单击按钮获取时间
再次获取时间
图16-9 再次获取时间
  当应用程序运行之后,单击按钮控件能够获取当前时间,当再次单击按钮控件之后,当前时间同样能够被获取并呈现在TextBox中,但是页面并没有再次被更新。在执行过程中,第一次获取的时间为2008/10/1 21:12:04,当再次获取时间时,时间还是2008/10/1 21:12:04,这说明UpdatePanel控件外的页面元素都没有再更新。

加支付宝好友偷能量挖...


评论(0)网络
阅读(136)喜欢(0)Asp.Net/C#/WCF