65.9K
CodeProject 正在变化。 阅读更多。
Home

Web 服务器创作动态 JavaScript

David Donovan
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.23/5 (4投票s)

2006年6月12日

9分钟阅读

viewsIcon

42621

downloadIcon

308

这是一系列关于抽象编程的短文。这一部分详细介绍了如何在运行时使用抽象编程来创建 JavaScript，该 JavaScript 将作为 .NET DataSet，仅存在于客户端。

引言

这是一系列关于抽象编程的短文。本系列文章分为三部分。第一部分概述了抽象编程，以及一个程序如何以及何时编写另一个程序。第二部分将介绍 C# 代码在设计时编写 JavaScript 文件。第三部分详细介绍了如何使用抽象编程在运行时创建 JavaScript，该 JavaScript 将作为 .NET DataSet，仅存在于客户端。通过使用抽象编程，您可以消除不必要的 postbacks，并实现应用程序程序离线运行的可能性。

本系列中使用的方法旨在创建可在所有浏览器中运行的解决方案。这些示例在 Internet Explorer 和 Netscape 中都进行了测试，但所有开发都是使用 Internet Explorer 完成的。这些示例和练习是使用 .NET 2.0 Framework、Visual Studio 2005 和 SQL Server 2005 开发的，但抽象编程的概念独立于任何特定技术。这个三部分的短文系列是使用本系列中描述的技术创建的。

概述

对于 .NET Web 应用程序开发人员来说，最大的谜团是如何创建一个自主的应用程序。Web 应用程序如何才能不从服务器获取数据来执行其功能？换句话说，是否有可能在不执行 postback 到服务器的情况下运行？是的！可以，但当然，在某个时候，您需要从服务器获取数据，但这些数据肯定可以缓存在客户端计算机上，而且无需添加 Java、ActiveX 或 AJAX 等特殊组件。仔细想想……每次需要数据都去服务器，就像把遥控器放在电视机顶上一样。本部分描述了一个抽象编程模型，该模型将减少甚至可能消除到服务器进行 postback 的需要。

我们可以通过服务器编写的动态 JavaScript 来创建一个“虫洞”（快速通道）到客户端计算机。此设计模式的关键组件是：一个datecode.js 和一个datatable.js，它们都是服务器编写的动态 JavaScript 模型中的 DScript。

穿透另一边

爱因斯坦-罗森桥设计模仿了几个简单的设计模式和几个基本概念。它也是本三部分文章中提出的最先进的抽象编程模型。第一个概念是数据表存储在客户端。第二个概念是只有当数据表表示的数据发生变化时，才需要替换数据表。这会带来什么好处？一切！现在，您不再需要为数据表访问服务器，因此处理速度会快得多。事实上，您可以访问数据并离线运行您的应用程序。嗯…

工作原理如下

当 Web 应用程序启动时，它会将客户端计算机上的数据表的日期代码与服务器上的日期代码进行比较。如果日期代码不同，它将下载最新的datatable.js 和datecode.js。然后它将开始使用最新的数据表。数据表当然是数据行的集合，等同于DataSet 中的DataTable。日期代码表示数据表在服务器上最后一次修改的时间。更准确地说，日期代码表示数据库最后一次更改的时间，这将影响客户端上这个特定的数据表。

穿过罗森桥

服务器动态编写两个 JavaScript 文件，即datecode.js 和datatable.js。datecode.js 和datatable.js 的实际文件名需要是唯一的，以便于应用程序和域。但对于本文，我们将仅将这些文件称为datecode.js 和datatable.js。在此设计中，Web 应用程序无需访问服务器数据库。事实上，datatable.js 可以在完全不同的进程中编写。另外，如果您需要实时查看数据表，您的客户端 JavaScript 可以轮询datacode.js 来检测服务器上数据的更新，而无需进行 postback。如果服务器上存在更新的datecode.js，则该过程将下载并使用新的datatable.js。

编写 datatable.js 文件

这是最棘手的部分……当数据库发生更改并影响 Web 应用程序的数据表时，将生成新的datatable.js，然后使用DateTime.Now.Ticks 为新的datecode.js 打上时间戳。下次 Web 应用程序启动时，它会比较其日期代码，如果不同，则获取datatable.js 的新副本。

其他值得关注的点

datatable.js 是在运行时在服务器上创建的，或者完全由另一个进程创建。这通过编写包含基本架构信息、数据行集合、列布局等的 .js 文件来实现。请注意，没有转换为 XML 或任何其他传输格式。数据直接转换为浏览器在 JavaScript 中使用的对象。典型的 Web 应用程序将使用几个datatable.js。每个datatable.js 都会有一个单独的datecode.js 文件与之关联。这样，只需下载带有新日期代码的datatable.js，这还可以减少下载量并加快访问速度。请注意另一点……除了 .NET 和 JavaScript，没有使用其他技术。没错。这种方法适用于任何浏览器，并且不使用 Java、ActiveX、AJAX、COM 或任何其他插件。

罗森桥使用的组件

CStorage1.0.0.0.js 的 DScript

此 DScript 是实际的 JavaScript 文件，也称为datatable.js，由服务器控件“CStorage”编写。此 DScript 是一个数据表，表示服务器数据库查询的结果（数据集）。此 DScript 将实例化一个来自 JavaScript 类CDataTable 的对象，并填充其数据表成员。这是一个典型datatable.js 文件

datatable.js

CStorage1_dt = new CDataTable();
CStorage1_dt.sql_id = 0;
CStorage1_dt.datecode = '632818039432854577';
CStorage1_dt.columns = 'row_id' + delim1A + 'col1' + 
                       delim1A + 'col2' + delim1A + 'col3';
CStorage1_dt.rows[0] = '0' + delim1A + 'alpha' + delim1A + 
                       'baker' + delim1A + 'columns';
CStorage1_dt.rows[1] = '1' + delim1A + 'A' + delim1A + 'B' + delim1A + 'C';
if(CStorage_onloads != null) CStorage_ontable_loaded('CStorage1');

CStorage1_datecode.0.0.0.js 的 DScript

此 DScript 是datecode.js，也由服务器控件“CStorage”编写。此 DScript 是DateTime.Now.Ticks 值的日期代码，用 JavaScript 封装。它表示数据库在服务器数据库上最后一次更新的时间。

它看起来大致是这样的...

if(CStorage_onloads != null)
 CStorage_datecode_comparator('CStorage1', '632818039432854577');

CDataTable.js JavaScript

这是一个用 JavaScript 编写的类。它用于存储有关数据表的信息。其成员是行和列的集合。它还有一个日期代码和一个“isDirty”标志。这个 JavaScript 文件是一个静态库类。

示例

function CDataTable()
{
   this.rows = new Array();
   this.columns = "";
   this.datecode = ""; 
   this.isDirty = false; 
}

CStorage.cs

这个特定的抽象编程模型的核心是CStorage.cs。它负责编写两个 DScript 文件（CStorage1.0.0.0.js 和CStorage1_datecode.0.0.0.js）。它将 .NET DataTable 对象转换为 DScript 文件，并维护一个简单的数据库来存储它维护的数据表的最新日期代码。

CStorage.mdf

这个 SQL Server 2005 数据库在一个名为dscript（多么贴切）的表中存储查询以及与这些查询相关的日期代码。这个数据库表（dscript）仅由CStorage.cs 访问，不应直接访问。表“dscript”中的日期代码是您与客户端的日期代码进行比较以确认客户端拥有最新数据表的日期代码。请注意，每个数据表都有一个关联的日期代码。

数据表 dscript

CStorage 实际运行的快速演示

首先，按照解压的Abstract_Programming.zip 文件中提供的readme.txt 文件中的说明，将项目下载并安装到相应的位置。readme.txt 文件将详细说明要求并提供一些快速安装说明。安装后，打开“Unplugged”解决方案，并将“TestControls”设置为启动项目。接下来，在CStorage 文件夹中，将“default.aspx”设置为默认启动页面，然后按 F5 运行页面进行调试。您应该会看到三个链接，分别打开三个不同的 .NET WebForms。今天，我们将重点关注Data_Entry/Default.aspx 和Real_Time/Default.aspx。

Data_Entry/Default.aspx

更改 col1、col2 或 col3 后，单击 Update 按钮。发生这种情况时，您将在服务器上更新数据库（Database.mdf）并创建新的datatable.js 和datecode.js 文件。使用 Web 应用程序Real_Time/Default.aspx 来实时查看这些更改。

Real_Time/Default.aspx

使用此页面查看Data_Entry/Default.aspx 更改的结果。这些更改实时发生，无需进行服务器 postback。

演示数据库 - Database.mdf

此数据库仅用于演示，不属于罗森桥模型。当此数据库中的数据发生更改时，我们将使用最新的日期代码更新CStorage.mdf 数据库，罗森桥将编写新的datatable.js 和datecode.js。

命名约定

如果还不够明显，DScript 文件的命名方式很重要。为什么这很重要？因为您需要了解哪些组将使用您的 DScript。如果您希望每个人都以相同的方式查看 DScript 的结果，那么您只需要一个 DScript 文件。顺便说一句，CClock 练习在第二部分中就是这种情况。但在这种情况下，当您创建对每个用户唯一的 DScript 时，需要仔细选择命名约定。这到底意味着什么？这意味着您需要在 DScript 文件名中包含用户 ID 或组 ID 之类的内容，以确保一个用户不会覆盖为另一个用户创建的 DScript。另外，请考虑在 DScript 文件名中使用表名或表 ID。

摘要

这是对最先进的抽象编程模型的初步了解。它描述了罗森桥模型，并详细介绍了 Web 应用程序如何使用缓存并在客户端计算机上驻留的数据表。这些数据表是由服务器编写并存储在 DScript 文件中的对象。此 DScript 在浏览器看来与其他 JavaScript 没有区别，但实际上，它代表了数据库中的值。通过使用一个更简单、更小的 DScript 文件“datecode.js”，提供了一种检查最新数据的方法。JavaScript 将在不进行服务器 postback 的情况下下载datecode.js。如果datacode.js 与服务器上存储的datecode.js 不同，客户端 JavaScript 将在不进行 postback 的情况下下载最新的datatable.js。这种方法适用于任何浏览器，并且不使用 Java、ActiveX、AJAX、COM 或任何其他插件。通过将这两种技术（ASP.NET 和 JavaScript）结合起来，可以创建一个自主的离线解决方案。

使用源代码

下载 Zip 文件，然后按照Install.Readme.txt 中的说明将其解压到您的C:\Inetpub\wwwroot。按照说明设置和使用源代码以及设置浏览器。

© . All rights reserved.