ASP.NET+AJAX解决网页打开等待问题

62 阅读 0 评论 41 点赞

我是靠谱客的博主粗暴大树，最近开发中收集的这篇文章主要介绍ASP.NET+AJAX解决网页打开等待问题，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

提要：ASP.NET为相当耗时的处理提供了几种解决方案。其中，最好的方法之一是把线程与查询方案或AJAX技术进行结合。

　　一、前言

　　人们不得不等待。事实上，用户在操作计算机时，如果等待时间超过大约200毫秒，他们一般都感到厌烦。当你的基于万维网的应用程序使用一个需要耗费许多秒甚至几分钟的进程时，这可能成为一个问题。显然，你不可能仅通过建立一个进度条对话框或一等待光标就算万事大吉。

　　幸好，ASP.NET为此提供了一些不同的解决方案来处理这种相当耗时的进程-具体情况要依赖于要求的交互级别和你愿意处理的复杂程度。本文首先通过一个示例应用程序来说明这个问题并且通过两种方案来运行：一种使用了简单查询技术，而另一种使用一种更高级的AJAX解决方案。

　　千万警惕，在.NET框架中已发现存在一些错误的方式。其中之一就是IAsyncHTTPHandler-乍看来，它似乎有助于较长网页的请求。然而，这个异步HTTP处理器却是被设计用来释放处理器的-尽管，此时在一页面之上的某些任务需耗费一些时间但是并不需要任何CPU。一个好的例子就是在一页面的中间发出Web请求。在这种情况中，异步HTTP处理器是很有效率的。

　　二、问题

　　在本文中，我要讨论一个不同的问题。在本示例应用程序中，我创建了一个页面-它用于为五个不同的机场报告当前的温度、风级和另外一些天气信息。Web服务要花费大约五秒钟来取得每一项数据。因此，如果我让该页面如图1所示运行，那么在服务器返回一页面前要花费大约一分钟-这对于任何用户都是无法接受的等待时间。

图1.等待:最开始的示例应用程序大约需要一分钟来加载页面。

　　这个相当耗时的页面相应的HTML显示于列表1中（详见下载源代码）。

　　页面装载事件代码为数据格子创建一个数据集。然后，迅速处理多个机场并且调用该web服务以得到数据。然后，该方法把数据从web服务填充到该数据集并且把它依附于一个格子控件(见图2)。

图2.基本的：该示例应用程序的Web服务执行一简单的天气状况查询。

　这个web服务的WSDL是 http://www.capeclear.com/AirportWeather.wsdl。它定义了许多不同的方法，我将仅使用其中的一个getSummary方法-它返回一个包括机场的位置、天空条件、风速、可见性甚至更多的数据块。

　　用这种方式，即使单个服务器请求也要比单个页面取回消耗更多的时间。另外一种选择是让一个线程运行于后台来取得数据，而由前端页面连续地监视该线程的输出。

　　三、线程解决方案

　　线程解决方案提供给用户一种更为干净的体验-因为它们可以周期性地得到处理的更新。这里的响应是很容易准备的，尽管在后台的处理可能花一些时间，但是作为响应却可以马上返回。

　　为处理此线程系统，我将使用两个类和一个接口。JobHandler singleton负责维持一个对象集合-它实现IJob接口。这个JobHandler管理系统线程。每添加一个工作创建一个新线程，并且该工作上的Start方法在一个新线程内被调用。一个被用于后面查询工作的ID字符串被返回。

　　该Job系统相应的UML显示于图3。

图3.这个屏幕快照显示出该Job系统相应的UML。

　　　WeatherJob是一个Ijob的实现-它负责从机场中的一个指定集合进行天气查询并且填充一个称作Data的包含天气报告的DataSet。

　　该JobHandler singleton相应的代码显示于列表2（详见下载源代码）-相当直接。唯一有趣的一点是AddJob方法，它为该工作创建一个新的线程并调用Start方法。

　这些工作的接口显示于列表3（详见下载源代码）。其中的构造器为该工作建立数据集合。而且Start方法，通过每个机场，调用WEB请求并且在该数据集合中存储返回的数据。
　　　四、查询解决方案

　　监视天气工作的第一种解决方案是使用查询。为此，页面将每隔两秒向它自己回寄数据。请求工作在第一个页面中就开始了。此后，该页面将通过钩住工作的数据输送到页面中的数据格子来监视天气工作的输出。浏览器、WEB服务器以及线程之间的关系显示于图4。

图4.查询:查询HTML解决方案显示了浏览器、WEB服务器以及线程之间的关系。

　　针对该查询页面的HTML显示于列表4中（详见下载源代码）。其中，有趣的部分是在标签refreshScript内部的脚本块。当标签是可见的时，将执行该脚本以在页面加载两秒后重新提交表单-这将更新在格子中的数据。

　　该查询HTML背后的代码显示于列表5（详见下载源代码）。这里的重要代码是位于page_load方法中。如果存储在隐藏的表格字段中的请求ID是null或blank，则这是第一次加载页面。在第一次加载页面时，创建该工作并且该工作的ID被放置于隐藏的表单域中。

　　在两秒以后，该Javascript将被激发而该页面将重加载。请求ID将第二次接近该隐藏的输入字段并且该代码将用指定的ID发现该工作并且使用该数据来填充数据格子。

　　五、 AJAX解决方案

　　在Internet Explorer中的页面重载会在页面变成一片空白并等待重载之时造成一次听得见的鼠标击键和一次屏幕闪动。如果它每隔两秒发生一次，这可能相当烦人。AJAX提供了一种选择-只有一个页面加载并且页面中的Javascript请求每隔500毫秒请求状态时，才动态地更新页面(见图5)。

图5.AJAX解决方案:Javascript每500毫秒更新后台的页面数据。

　　该AJAX页面的HTML部分显示于列表6（详见下载源码），其中的大多数代码是Javascript。该Javascript首先激活addField调用-它增加从服务器中以XML形式返回的不同字段。这个startup页面开始第一次到服务器的请求。getData通过调用createHTTPRequest开始一个请求。这个函数通过具有跨平台的代码来构建HTTP请求对象。

　　该HTTP请求是异步的。在请求完成时，调用handleResponse函数-该函数分析XML并且为该数据表格创建一些新的HTML-这个HTML将被放置到"grid"<div>标签中。

　　该页面背后的代码显示于列表7。代码中的page_load启动该工作，然后用数据请求页面的URL设置隐藏的输入字段。

　　这个get_data.aspx页面使用一个请求ID并且返回一个当前数据集合的XML描述。该页面代码显示于下:

//get_data.aspx
＜%@ Page language="c#" Codebehind="get_data.aspx.cs"
AutoEventWireup="false" Inherits="background.get_data" %＞

　　显然，在这种情况下后台的代码更为重要。该代码显示于列表8中（详见下载源码），-它首先把响应的内容类型设置为"text/xml"。如果在浏览器中不存在该AJAX代码，那么就不会从响应中生成一个XML文档。此后，代码得到请求并且要求DataSet生成该XML。然后它稍微改变一下该XML响应来添加"done"字段-这个用于告诉客户请求是否已完成。

　　在该页面第一次启动时，它看上去如图6的样子。

图6.仍是查询：这个屏幕快照显示出仍处于查询中的AJAX页面。

　　当请求完成时，该浏览器将看起来如图7所示。在用AJAX解决方案时，请记住，在创建代码时，你是在设置最小的浏览器要求-并不是所有的浏览器都能创建一HTTP请求。事实上，只是最近的浏览器才能实现它。理想情况下，你的解决方案应该既为更旧的浏览器提供查询版本支持也为新型浏览器提供一个AJAX版本支持。

图7.完成:这个屏幕快照显示出完成后的AJAX页面。

　　 六、小结

　　在最有利的情况下，线程也可能存在问题。而在这种情况下，线程可能比平常更难于监控-因为它运行于服务器的后台。当然，即使没有Web客户在监控它，请求仍有可能将继续保持运行。如果这会是一个问题，那么你应该让WEB监控代码用线程化的过程设置一个时间戳。如果该线程化过程发现一段时间后自己还没有被观看，那么它就可以取消自己。

　　在.NET中有几种方法可以实现后台处理，而本文的线程方法仅是其中的一种。你也可以用ASP.NET缓存工作，或甚至创建一个真正的后台处理进程。

　　通过使用这些不同的技术，你就完全可以把相当耗时的处理等待转变成一种有关过程处理的丰富的回馈式用户体验。