论文部分内容阅读
[摘 要] 在传统的Web应用程序中,把所有的处理都放到服务器来完成,由服务器进行运行管理,这在相当的程度上受到了服务器处理能力和网络带宽的制约。Ajax技术方便的运用在.Net框架中,给用户带来了一套全新的快速响应的Web应用模型。本文主要介绍了Ajax的基本原理,在Asp.Net框架中,对Ajax组件的设计方法也进行了阐述和分析。
[关键词] AJAX ASP.NET WEB 异步通信
一、引言
在浏览网页时,浏览者经常会遇到网页打开很慢的问题。用户使用“打开,刷新,再打开,再刷新”的方式浏览网页,当用户提交一个网页中填写的表单内容时,用户向服务器发出请求,服务器接到Http请求后,需要完成分析请求与处理内容的过程后才将响应回复给客户端用户,这样用户的每个操作都要接收一次数据,并刷新整个页面。随着服务器同时访问用户的增多,服务器的处理任务就急速增加,此时,用户的客户端大部分都在等待响应。这样既给服务器带来巨大的运行负担,也没有利用起客户端空闲等待的时间。在目前众多的web应用中,如Java applet和Servlet结构,都未能很好的解决这个问题。Ajax技术的提出,给网络Web应用带来了新模型,较好的解决了客户端和服务器端的通信问题。
二、AJAX技术
1.AJAX的含义
Ajax指异步JavaScript与XML技术,是Asynchronous JavaScript and XML首字母的缩写。它不是一种新的编程语言和技术,实际是由几项技术按一定的方式组合在共同的协作中发挥各自的作用的结果。Ajax主要将HTML(或XHTML)和层叠样式表作为表达信息,利用文档对象模型(DOM)、JavaScript动态地显示和与页面进行交互,通过XMLHttpRequest对象与Web服务器异步交换和处理数据,是一种创建交互式Web应用程序的开发技术。
2.AJAX的工作原理和特点
Ajax实际是在用户和服务器之间加了一个中间层,使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像一些数据验证和数据处理等都交给Ajax引擎来做,只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。
Ajax的根本理念是“按需取数据”,只和服务器交换有用的数据,而不是包括用户界面在内的整个页面,最大可能地减少了冗余请求和响应对服务器造成的负担。Ajax的特点有:(1)浏览器与服务器进行异步数据交互;(2)使用XML封装数据,便于使用XML文档对象模型(DOM)分析处理处理数据;(3)基于JavaScript脚本,从服务器端获取数据,解析数据,渲染用户界面,响应用户事件的任务全部使用JavaScript完成;(4)根据XML数据及用户事件更新局部页面元素,使Web中的界面和应用程序分离;(5)利用这种技术,在服务器端和用户客户端都减少等待时间,因此对于用户和营运商来说是双赢的。
3. AJAX模型与传统模型对比
传统的Web应用,每一次请求都需要服务器返回完整的Http页面,即用户都要时间来等待整个页面的更新,而用户实际想得到的数据量只是网页的一小部分。为了保持服务器和用户客户端的同步通信,它们两者有相当一部分时间都在等待中。传统的Web模式不仅降低了用户的浏览速度,而且极大地浪费了本来就不宽裕的网络带宽。
在新型的Ajax异步通信模型中,用户的客户端不必等服务器响应完毕才开始下一步操作,而是随时随地都可以发出第二个请求,大大提高了效率。传统同步Web应用模式和新型异步通信Web应用模式的比较如图1所示。
三、ASP.NET中AJAX的新模型架构
1.ASP.NET编程模型
传统的ASP.NET采用较简单易用的基于服务端编程模型。而ASP.NET AJAX模型有两大类:基于服务端模型和新的基于客户端的模型,许多人认为基于服务端模型控件已经能够实现相当大部分的AJAX应用程序了。而这里新提出的基于客户端编程模型,它的新理念将强烈挑战基于服务端编程模型。而这两种ASP.NET AJAX的编程模型又对传统的ASP.NET编程模型是种强烈的冲击。
下面以数据表格页面翻页功能为例,逐一对比ASP.NET 传统编程模型、AJAX的基于服务端编程模型和基于客户端编程模型。
(1)传统的ASP.NET编程模型。在传统的ASP.NET编程模型中,实现数据表格页面一般选择数据网格GridView(对于ASP.NET 1.x来讲,是DataGrid)控件,客户端和服务器端的模型如图2所示。客户端只是一段普通的HTML代码而已,用户的每一次操作都将导致浏览器中的所有内容刷新一遍。而服务器端则有非常繁重的任务,它将负责根据客户端的请求得到数据,并生成包括数据和表现内容的完整一页发送给客户端。
在数据表格页面中,点击数据表格上的“下一页”按钮时,客户端仅仅把“下一页”这个信息告诉服务器。然后,服务器完成后续所有数据计算操作,同时还重新生成了页面中其他重复内容,最后将这个全新页面的完整HTML代码都发送回客户端。
(2)AJAX基于服务器端编程模型。在AJAX基于服务器端编程模型中,UpdatePanel控件是核心,它将数据表格包围起来,让页面拥有“异步回送、局部更新”的Ajax特性。在使用UpdatePanel控件实现的Ajax数据表格页面中,客户端多了一个用来管理页面局部更新的JavaScript组件。对于服务器端,则基本和传统的ASP.NET编程模型没有什么区别,依然是先根据客户端的请求计算并取得相应的数据,但在页面呈现时,ASP.NET AJAX将只呈现UpdatePanel中的内容,并将这部分内容发送给客户端。如图3所示。
在数据表格页面中,点击数据表格上的“下一页”按钮时,客户端同样仅仅把“下一页”这个信息通知给服务器,不过这种通知是采用XMLHttpRequest对象以“柔和”的异步方式进行的。然后,服务器如同普通ASP.NET页面一样,来完成所有数据计算操作。但在最后的页面呈现环节中,服务器不再生成整个页面内容,而是只生成UpdatePanel控件中的那部分内容发送回客户端。客户端的局部更新管理器将用其替换页面上原有的那个UpdatePanel中内容,实现数据表格的翻页。
(3)运用AJAX基于客户端编程模型。在AJAX基于客户端的编程模型中,客户端承担了非常重要的职责,负责将用户的操作转化为对服务器端的请求,并用指定的样式呈现出服务器端返回的数据。而服务器端的职责则明显少,只为客户端提供数据,不包含任何数据的表现样式。如图4所示。
在数据表格页面中,点击数据表格上的“下一页”按钮,ASP.NET AJAX将在客户端根据当前数据表格的状态计算出信息,并发送给服务器,而不只光发送“下一页”命令。服务器端中的Web 服务接收到这个内容范围之后,可以很容易地根据该信息从数据库中取得所需的数据,并直接将这个数据发送回客户端,而并不需要发送HTML代码。客户端在得到服务器端的响应之后,使用基于客户端的数据网格控件把这一段数据按照一定的样式进行格式化,并显示到页面中。
2.分析与设计
经过三种模型的比较,我们提出的AJAX基于客户端编程模型,它是一种组件化、封装良好的数据访问模型。大大减轻了服务端的工作,提高了服务器响应能力,无论是服务器端的DataService,还是客户端的离线数据源,都是以组件的形式提供给编程者的。
AJAX基于客户端编程模型中组件化数据访问可以分为两大部分:
(1)服务端的DataService组件:为配合客户端数据源组件,新模型的服务端封装了普通的WebService,负责数据的常规操作,包含了数据选择、插入、更新、删除等一系列的统一接口。同时DataService组件还负责与数据库等存储介质的通信和数据保存。
(2)客户端系列组件:①离线数据源组件:该数据源组件用于和服务端DataService进行通信,以方便从用户端获取数据或将修改后的数据提交给DataService,并给服务端的数据提供了良好的缓存。同时它还为客户端数据访问的上层组件(DataView以及数据绑定界面控件)作好数据桥梁的工作。主要包括DataSource控件、XMLDataSource控件。②DataView组件(数据浏览组件):它使用上面数据源组件所提供的原始数据,和其他组件做好配合,对数据作好必要的修饰,如分页、排序、筛选等。最后把这些提供给数据绑定界面控件。主要包括DataNavigator控件、SortBehavior控件和DataFilter控件。③数据绑定UI控件(数据绑定界面控件):它主要负责从DataView组件中,取得数据,另一种方法是它直接和数据源组件通信,获得数据。再将数据以预定义的格式显示给用户。同时,它还能从用户处得到数据经过更改、维护后,传回到下层DataView组件或数据源组件。主要包括ListView控件、ItemView控件和XSLTView控件。
上面的这些组件均定义于ASP.NET中的Microsoft.Web.Preview.dll程序集中的PreviewScript.js脚本文件中。然后利用ScriptManager的声明将其引入客户端:
有了这样良好分层的模型,再借助于绑定技术的强大功能,其中的各个组件即可各司其职,在给用户带来更丰富、更友好、更方便的用户体验的同时,也大大提高了系统性能和开发效率。
四、总结与展望
ASP.NET 中AJAX基于客户端编程模型实现了用户与程序异步方式的交互——不用等待服务器的通讯。在使用此模型的WEB应用中,充分利用了客户端的计算能力,对客户端动作的响应几乎是立即的,不用等待页面刷新。同时,AJAX的客户端编程模型与以前的服务器端编程模型并不是完全排斥的,将二者合理地结合起来,既关注了程序的开发效率,也保证了其执行效率。在今后的web应用程序中,灵活、强大且对用户友好的客户端Ajax应用程序必将越来越多,飞速发展。
参考文献:
[1]Ryan Asleson,Nathaniel T.Schutta, 金灵译:Ajax基础教程.人民邮电出版社,2006年,第26~55页
[2]Dave Crane,Eric Pascarello,Darren Jame:Ajax in Action[M],America:Manning Publications co,2006年,第32-33页。
[3]陈黎平:ASP.NET AJAX程序设计.人民邮电出版社,2007年,第39~146页
[4]徐丽丽 张永胜:AJAX技术及其应用研究,计算机时代,2007(3),第56~57页
[5]薛胜军 倪 俊:基于AJAX的Web应用互交方式的研究,电脑知识与技术,2007(2),第390~391页
注:本文中所涉及到的图表、注解、公式等内容请以PDF格式阅读原文
[关键词] AJAX ASP.NET WEB 异步通信
一、引言
在浏览网页时,浏览者经常会遇到网页打开很慢的问题。用户使用“打开,刷新,再打开,再刷新”的方式浏览网页,当用户提交一个网页中填写的表单内容时,用户向服务器发出请求,服务器接到Http请求后,需要完成分析请求与处理内容的过程后才将响应回复给客户端用户,这样用户的每个操作都要接收一次数据,并刷新整个页面。随着服务器同时访问用户的增多,服务器的处理任务就急速增加,此时,用户的客户端大部分都在等待响应。这样既给服务器带来巨大的运行负担,也没有利用起客户端空闲等待的时间。在目前众多的web应用中,如Java applet和Servlet结构,都未能很好的解决这个问题。Ajax技术的提出,给网络Web应用带来了新模型,较好的解决了客户端和服务器端的通信问题。
二、AJAX技术
1.AJAX的含义
Ajax指异步JavaScript与XML技术,是Asynchronous JavaScript and XML首字母的缩写。它不是一种新的编程语言和技术,实际是由几项技术按一定的方式组合在共同的协作中发挥各自的作用的结果。Ajax主要将HTML(或XHTML)和层叠样式表作为表达信息,利用文档对象模型(DOM)、JavaScript动态地显示和与页面进行交互,通过XMLHttpRequest对象与Web服务器异步交换和处理数据,是一种创建交互式Web应用程序的开发技术。
2.AJAX的工作原理和特点
Ajax实际是在用户和服务器之间加了一个中间层,使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像一些数据验证和数据处理等都交给Ajax引擎来做,只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。
Ajax的根本理念是“按需取数据”,只和服务器交换有用的数据,而不是包括用户界面在内的整个页面,最大可能地减少了冗余请求和响应对服务器造成的负担。Ajax的特点有:(1)浏览器与服务器进行异步数据交互;(2)使用XML封装数据,便于使用XML文档对象模型(DOM)分析处理处理数据;(3)基于JavaScript脚本,从服务器端获取数据,解析数据,渲染用户界面,响应用户事件的任务全部使用JavaScript完成;(4)根据XML数据及用户事件更新局部页面元素,使Web中的界面和应用程序分离;(5)利用这种技术,在服务器端和用户客户端都减少等待时间,因此对于用户和营运商来说是双赢的。
3. AJAX模型与传统模型对比
传统的Web应用,每一次请求都需要服务器返回完整的Http页面,即用户都要时间来等待整个页面的更新,而用户实际想得到的数据量只是网页的一小部分。为了保持服务器和用户客户端的同步通信,它们两者有相当一部分时间都在等待中。传统的Web模式不仅降低了用户的浏览速度,而且极大地浪费了本来就不宽裕的网络带宽。
在新型的Ajax异步通信模型中,用户的客户端不必等服务器响应完毕才开始下一步操作,而是随时随地都可以发出第二个请求,大大提高了效率。传统同步Web应用模式和新型异步通信Web应用模式的比较如图1所示。
三、ASP.NET中AJAX的新模型架构
1.ASP.NET编程模型
传统的ASP.NET采用较简单易用的基于服务端编程模型。而ASP.NET AJAX模型有两大类:基于服务端模型和新的基于客户端的模型,许多人认为基于服务端模型控件已经能够实现相当大部分的AJAX应用程序了。而这里新提出的基于客户端编程模型,它的新理念将强烈挑战基于服务端编程模型。而这两种ASP.NET AJAX的编程模型又对传统的ASP.NET编程模型是种强烈的冲击。
下面以数据表格页面翻页功能为例,逐一对比ASP.NET 传统编程模型、AJAX的基于服务端编程模型和基于客户端编程模型。
(1)传统的ASP.NET编程模型。在传统的ASP.NET编程模型中,实现数据表格页面一般选择数据网格GridView(对于ASP.NET 1.x来讲,是DataGrid)控件,客户端和服务器端的模型如图2所示。客户端只是一段普通的HTML代码而已,用户的每一次操作都将导致浏览器中的所有内容刷新一遍。而服务器端则有非常繁重的任务,它将负责根据客户端的请求得到数据,并生成包括数据和表现内容的完整一页发送给客户端。
在数据表格页面中,点击数据表格上的“下一页”按钮时,客户端仅仅把“下一页”这个信息告诉服务器。然后,服务器完成后续所有数据计算操作,同时还重新生成了页面中其他重复内容,最后将这个全新页面的完整HTML代码都发送回客户端。
(2)AJAX基于服务器端编程模型。在AJAX基于服务器端编程模型中,UpdatePanel控件是核心,它将数据表格包围起来,让页面拥有“异步回送、局部更新”的Ajax特性。在使用UpdatePanel控件实现的Ajax数据表格页面中,客户端多了一个用来管理页面局部更新的JavaScript组件。对于服务器端,则基本和传统的ASP.NET编程模型没有什么区别,依然是先根据客户端的请求计算并取得相应的数据,但在页面呈现时,ASP.NET AJAX将只呈现UpdatePanel中的内容,并将这部分内容发送给客户端。如图3所示。
在数据表格页面中,点击数据表格上的“下一页”按钮时,客户端同样仅仅把“下一页”这个信息通知给服务器,不过这种通知是采用XMLHttpRequest对象以“柔和”的异步方式进行的。然后,服务器如同普通ASP.NET页面一样,来完成所有数据计算操作。但在最后的页面呈现环节中,服务器不再生成整个页面内容,而是只生成UpdatePanel控件中的那部分内容发送回客户端。客户端的局部更新管理器将用其替换页面上原有的那个UpdatePanel中内容,实现数据表格的翻页。
(3)运用AJAX基于客户端编程模型。在AJAX基于客户端的编程模型中,客户端承担了非常重要的职责,负责将用户的操作转化为对服务器端的请求,并用指定的样式呈现出服务器端返回的数据。而服务器端的职责则明显少,只为客户端提供数据,不包含任何数据的表现样式。如图4所示。
在数据表格页面中,点击数据表格上的“下一页”按钮,ASP.NET AJAX将在客户端根据当前数据表格的状态计算出信息,并发送给服务器,而不只光发送“下一页”命令。服务器端中的Web 服务接收到这个内容范围之后,可以很容易地根据该信息从数据库中取得所需的数据,并直接将这个数据发送回客户端,而并不需要发送HTML代码。客户端在得到服务器端的响应之后,使用基于客户端的数据网格控件把这一段数据按照一定的样式进行格式化,并显示到页面中。
2.分析与设计
经过三种模型的比较,我们提出的AJAX基于客户端编程模型,它是一种组件化、封装良好的数据访问模型。大大减轻了服务端的工作,提高了服务器响应能力,无论是服务器端的DataService,还是客户端的离线数据源,都是以组件的形式提供给编程者的。
AJAX基于客户端编程模型中组件化数据访问可以分为两大部分:
(1)服务端的DataService组件:为配合客户端数据源组件,新模型的服务端封装了普通的WebService,负责数据的常规操作,包含了数据选择、插入、更新、删除等一系列的统一接口。同时DataService组件还负责与数据库等存储介质的通信和数据保存。
(2)客户端系列组件:①离线数据源组件:该数据源组件用于和服务端DataService进行通信,以方便从用户端获取数据或将修改后的数据提交给DataService,并给服务端的数据提供了良好的缓存。同时它还为客户端数据访问的上层组件(DataView以及数据绑定界面控件)作好数据桥梁的工作。主要包括DataSource控件、XMLDataSource控件。②DataView组件(数据浏览组件):它使用上面数据源组件所提供的原始数据,和其他组件做好配合,对数据作好必要的修饰,如分页、排序、筛选等。最后把这些提供给数据绑定界面控件。主要包括DataNavigator控件、SortBehavior控件和DataFilter控件。③数据绑定UI控件(数据绑定界面控件):它主要负责从DataView组件中,取得数据,另一种方法是它直接和数据源组件通信,获得数据。再将数据以预定义的格式显示给用户。同时,它还能从用户处得到数据经过更改、维护后,传回到下层DataView组件或数据源组件。主要包括ListView控件、ItemView控件和XSLTView控件。
上面的这些组件均定义于ASP.NET中的Microsoft.Web.Preview.dll程序集中的PreviewScript.js脚本文件中。然后利用ScriptManager的声明将其引入客户端:
有了这样良好分层的模型,再借助于绑定技术的强大功能,其中的各个组件即可各司其职,在给用户带来更丰富、更友好、更方便的用户体验的同时,也大大提高了系统性能和开发效率。
四、总结与展望
ASP.NET 中AJAX基于客户端编程模型实现了用户与程序异步方式的交互——不用等待服务器的通讯。在使用此模型的WEB应用中,充分利用了客户端的计算能力,对客户端动作的响应几乎是立即的,不用等待页面刷新。同时,AJAX的客户端编程模型与以前的服务器端编程模型并不是完全排斥的,将二者合理地结合起来,既关注了程序的开发效率,也保证了其执行效率。在今后的web应用程序中,灵活、强大且对用户友好的客户端Ajax应用程序必将越来越多,飞速发展。
参考文献:
[1]Ryan Asleson,Nathaniel T.Schutta, 金灵译:Ajax基础教程.人民邮电出版社,2006年,第26~55页
[2]Dave Crane,Eric Pascarello,Darren Jame:Ajax in Action[M],America:Manning Publications co,2006年,第32-33页。
[3]陈黎平:ASP.NET AJAX程序设计.人民邮电出版社,2007年,第39~146页
[4]徐丽丽 张永胜:AJAX技术及其应用研究,计算机时代,2007(3),第56~57页
[5]薛胜军 倪 俊:基于AJAX的Web应用互交方式的研究,电脑知识与技术,2007(2),第390~391页
注:本文中所涉及到的图表、注解、公式等内容请以PDF格式阅读原文