通过连接客户端和服务器端执行来理解Ajax应用程序.docx

《通过连接客户端和服务器端执行来理解Ajax应用程序.docx》由会员分享，可在线阅读，更多相关《通过连接客户端和服务器端执行来理解Ajax应用程序.docx（38页珍藏版）》请在优知文库上搜索。

1、通过连接客户端和服务器端执行来理解Ajax应用程序可以追溯到AndyZaidmanNickMatthijssen-Margaret-AnneStoreyArievanDeursen在线发布:2012年3月4日作者2012。本文发表于编辑:GiUliOAntOniol和KeithBrianGallagher摘要基于ajax的Web应用程序是一种新型的高度交互、高度动态的Web应用程序。尽管AjaX允许开发人员创建富Web应用程序，但AjaX应用程序可能难以理解，因此难以维护。出于这个原因，我们创建了FireDetective,这是一个在客户端（浏览器）和服务器端使用动态分析的工具，以促进对Aja

2、x应用程序的理解。我们使用测试前-测试后用户研究和现场用户研究来评估FireDetective0初步证据表明，FireDetective工具是努力理解Ajax应用程序的Web开发人员的有效辅助工具。关键词Ajax:Web应用：程序理解：逆向工程；动态分析；执行轨迹在过去的十年中，Web开发已经从创建静态Web站点发展到创建丰富且高度交互的Web应用程序。用于创建这些交互式Web应用程序的启用技术之一是Ajax(异步Javascript和XML)是现11技术的总称，如JaVaSCript、文档对象模型(DOM)的动态操作和JaVaSCriPt的XMLHttpRequest对象。自从AjaX这个术

3、语在2005年被创造出来以来(Garrett2005),大量支持Ajax的Web站点出现了，大量Ajax框架被创建，“大量的文章出现在开发者网站和专业杂志上(Mesbah和vanDeursen2008)0一个著名的Ajax应用程序示例是Gmail,它使用Ajax技术在您打开电子邮件对话时仅更新页面的一部分，并在您输入时提示最近通讯员的电子邮件地址。不幸的是，AjaX也使Web开发更加复杂。经典的Web应用程序基于多页面界面模型，其中交互基于页面序列范式(MeSbah和VanDeUrSen2008)。AjaX改变了这一点，它允许在页面加载后发出异步请求，并允许JaVaSCriPt代码在浏览器中更

4、新页面的部分内容，有效地进行增量更新，而无需重新加载整个页面。在Ajax出现之前，Hassan和Holt已经指出“Web应用程序是未来的遗留软件和维护这样的系统是有问题的”(HaSSan和Holt2002)o我们期望Ajax增加的交互性和复杂性肯定不会改善这种情况。软件维护从建立理解开始，然后进行必要的修改。众所周知，这个理解步骤的成本非常高，Corbi报告称，维护任务中有多达50%的时间花在理解上。然而，正如Cornelissen等人(2009a)所观察到的那样，专注于专门针对Ajax应用程序的程序理解的论文很少。这些观察结果，加上支持AjaX的Web应用程序的数量迅速增长，促使我们研究支持

5、Web开发人员维护这种新型Web应用程序的方法。在本文中，我们特别研究了Web开发人员在理解Ajax应用程序时遇到的问题，以及如何利用动态分析(BalII999)来更好地支持Web开发人员理解Ajax应用程序。我们之所以选择动态分析，是因为Ajax应用程序在整个应用程序中跟踪控制流的潜在困难。这源于这样一个事实，即Ajax应用程序由一组异构资源组成，例如Web模板、客户端脚本和服务器端脚本，这些资源相互依赖，所有这些资源都对应用程序有贡献。这些工件之间的链接通常在运行时建立。接下来，HTML页面可以动态生成和更新，客户端脚本可以动态生成和执行。最后，所使用的语言本身是高度动态的，如JaVaSC

6、riPt和服务器端脚本语言(如PHP)。Antoniol等人(2004)己经指出，仅靠静态分析对Web应用程序是不够的。我们认为AjaX应用程序中更高程度的动态性使得静态分析对于Ajax应用程序来说也不够。为了便于更好地理解基于ajax的Web应用程序,我们构建了FireDeteClive,这是一个记录客户端(浏览器)和服务器上的执行跟踪的工具，然后以一种组合的方式将它们可视化。本文基于我们之前的工作(MatthijSSenetal2010;MatthijSSen和Zaidman2011)中，我们提出了FireDeteCtive,并使用探索性的前测-后测用户研究实验对其进行评估。在本文中，我们

7、扩展了在两位AjaX开发专家的帮助下，我们添加了一个现场用户研究。这种评估方法使我们能够解决以下研究问题：问题一当前Web开发人员在尝试理解Ajax应用程序时使用哪些策略？问题二我们是否可以使用动态分析，就像FireDeteCtiVe工具所展示的那样,来提高对Ajax应用程序的理解？本文的其余部分组织如下。第二节介绍了FireDeteCtiVe的设计与实现。第3节记录了用户研究的设计，而第4节描述和讨论了该用户研究的结果。第5节和第6节分别描述了我们进行的实验设计和现场用户研究的结果。有效性威胁将在第7节中讨论。第8节讨论了相关工作。最后，第9节提出了我们的结论并确定了未来的机会。2工具设计F

8、ireDetectivel是一个记录在浏览器中执行的JavaScript代码和服务器端代码的执行跟踪的工具。所使用的详细级别是调用级别:该工具记录所有被调用的函数和方法的名称，以及它们被调用的顺序，允许该工具重新构造每个跟踪的调用树表示。从我们自己作为AjaX开发人员的经验来看，我们意识到将这些单独的跟踪彼此关联起来对于通过Ajax应用程序很好地理解控制流非常重要。因此,该工具还记录了特定于Ajax/Web域的抽象信息，例如（AjaX）请求、DOM事件、超时等。这是该工具的一个关键元素:它使我们能够以有意义的方式链接前面提到的执行跟踪。此外，抽象可以作为熟悉的程序理解起点。该工具在一组交互视图

9、中将跟踪和抽象网络呈现给用户。2.1体系结构FireDetective的架构如图1所示。该工具包括一个Firefox插件，用来记录JavaScript跟踪和关于Ajax抽象的信息，以及一个服务器跟踪器，可以连接到JavaEE2Web服务器。这两个组件都将它们记录的数据（通过套接字）转发给可视化工具（FireDeteCtiVe的第三个也是最后一个组件）。然后，可视化器实时处理和可视化数据。这种体系结构的一个好处是它允许用户使用Firefox与Ajax应用程序交互，就像他们通常会做的那样，然后使用FireDeteCtiVe可视化工具来检查“引子下发生了什么。该体系结构还允许组件在不同的机器上运行。

10、目前，该工具是为具有Java+JSP后端的Ajax应用程序构建的，这一决定受到我们为研究选择的目标应用程序的影响（请参阅第3节）。但是，同样的技术也可以应用于具有其他后端（如PHP或RUby）的Ajax应用程序。图2.1FireDetective架构2.2使用抽象链接跟踪我们使用了许多来自Ajax/Web域的抽象，我们将跟踪或跟踪中的调用链接到这些抽象。它们列在下面。一整页请求发生在加载整页时。我们使用一个完整的页面请求来将发生在下一个完整页面请求之前的所有请求和JavaScript跟踪分组到一个按时间顺序排列的列表中。因此，全页请求是加载一个全新HTML（或动态生成的HTML）页面的请求。非

11、ajax请求包含在一个完整的页面请求中。它们还与为特定请求记录的服务器端跟踪相关联。非ajax请求的例子包括在前一类的整个页面之上加载额外的资源：级联样式表（CSS）、JavaScript（js）文件等。顶级脚本加载调用发生在浏览器加载并执行脚本时。这些脚本加载链接到生成的JavaScript跟踪。DOM事件是诸如“元素被点击”或“页面被加载之类的事件。它们与一个或多个JavaScript跟踪相关联，这些跟踪被记录为事件处理程序为相关DoM事件触发的结果。AjaX请求，与其他请求一样，AjaX请求与单个服务器端跟踪相关联。它们还链接到发送请求的JavaScript调用和处理响应时记录的JaVa

12、SCriPt跟踪。超时（在JavaScript中）可以设置为在特定时间段过后触发一个超时处理程序。我们将超时链接到作为超时处理程序被调用的结果而记录的JaVaSCriPt跟踪，以及开始和停止特定超时的JavaScript调用。Web模板调用不是AjaX特有的，在许多Web应用程序中都有使用。在本例中，我们使用的是JSP模板。由于这些模板是在使用之前编译的，因此它们不会以原始形式出现在跟踪中。因此，我们从原始跟踪重构JSP调用，并将它们链接到它们发生的跟踪中的点。跟踪/调用和抽象之间的一些链接表示因果关系，例如，一些JaVaSCriPt调用导致AjaX请求,然后导致服务器端和（当收到响应时）Ja

13、vaScript跟踪被创建。通过沿着一个方向跟踪这些链接，工具用户能够回答什么？”和怎么做？”关于程序的问题，例如“这个DOM事件是如何处理的？”此外，链接还可以反向跟踪，使工具用户能够回答为什么？”的问题，例如“为什么会出现这个AjaX请求？这些抽象是通过我们自己作为AjaX开发人员的经验确定的。在第4节中，我们提供了这个列表的可能补充。我们使用不同的机制来记录和重建这些抽象,并将它们链接到相关的跟踪。这些机制将在2.6节中简要介绍。2.3交互可视化可视化工具将跟踪和抽象的集合显示给用户。其界面如图2所示。可视化的设计松散地基于指导方针Shneiderman(1996)概述:信息可视化工具应

14、该允许创建概览、缩放、过滤和按需提供细节。这种设计与自上而下的理解策略相关联(VonMayrhauser和Vans1995)。图2.2可视化工具使用了三个主要视图，每个视图显示不同级别的细节。第一个视图是高级视图，它显示了前面提到的抽象的树形表示(模板调用除外)。可展开的树节点可以揭示更多细节，例如，展开Ajax请求节点可以显示其与特定跟踪和调用的关系，即请求的生命周期。第二个视图是跟踪视图，每次显示一个执行跟踪，作为一个调用树(这也意味着对相同函数的不同调用是分开表示的)。每个树节点代表一个单独的调用，带有可扩展的子调用。第三个视图是标准源代码视图。这三个视图是链接的：在第一个视图中选择高级

15、实体将在跟踪视图中显示相关跟踪，在跟踪视图中选择调用将显示相关代码。还有一个侧视图，其中包含AjaX应用程序资源（例如，代码文件）的树形表示。单击资源将在代码视图中显示该文件。可以对视图进行筛选，以只显示用于当前页面的文件，这大大减少了显示的文件数量，并允许工具用户快速查看当前页面中涉及哪些资源。用户还可以选择一个代码块（例如，一个JaVaSCriPt函数），以突出显示并在高级视图和跟踪视图中循环调用该代码块。执行跟踪的一个缺点是它们可以迅速增长到巨大的规模。为了减少痕迹的大小，我们使用了两种简单的、众所周知的痕迹减少机制（COrneIiSSenetal2008a）o第一种方法是过滤掉所有库调

16、用，只保留特定于正在分析的AjaX应用程序的调用。客户端库（如DojO4）和服务器端库（如JavaEE服务器内部）都被过滤掉。第二个机制涉及允许用户启动和停止跟踪记录。这允许用户对AjaX应用程序进行时间切片，例如，了解如何处理与AjaX应用程序的特定交互。2.4与FireBug的关系FireBUg5是一个流行的FirefoX插件，允许编辑，调试和监控CSS,HTML,DOM和JaVaSCript。本质上，它经常被用作AjaXWeb应用程序的“调试器”，在这种情况下，它也经常用作程序理解工具（Lerner2007）0虽然FireBug目前是典型Web开发人员标准工具库的一部分，但FireBug和FireDeteCtiVe的目标并不十分相似。FireBUg只显示一个（AjaX）请求列表，与之相反，FireDetective还能够将这些请求与相关的代码片段联系起