Page 1
商务表达平台技术基础
? 在 WEB发展的早期,WEB服务器只提供静态的 HTML页面，随着应用需求的增长和相关
技术的发展，业务数据存储与 WEB页面的集成变成了现实，从而推动了 WEB应用从单一
的信息提供发展为电子商务工具，电子商务应用的发展也反过来促进了动态内容生成技
术的发展。
?电子商务信息分享架构
?静态页面表达及其技术基础
?动态页面表达及其技术基础
?用户界面体系结构的选择
Page 2
2.3 动态页面表达及其技术
? 2.3.1 动态网页技术基础
? 2.3.2 客户端应用体系结构及其技术
? 2.3.3 客户端脚本体系结构及其技术
? 2.3.4 服务器端逻辑体系结构及其技术
交互功能？
Page 3
2.3.1 动态网页技术基础
? 这里的“动态”重点不在于如何获得数据（属数据层技术）、更不在于如何构建复杂的
业务逻辑，而是实现用户与应用程序的通信，以及如何将所获得的数据显示在网页中，
主要目标仍然在网页上，在信息的表达上，特别信息的双向交互上。这种技术上的区别
，也正反映的电子商务网站和电子商务系统在系统建设上设计思路与技术基础的不同。
? CGI, 通过用编程语言例如 C,Perl甚至是 Visual Basic开发的应用程序
来产生，这对于访问数据库或服务器上其他的大型或不同的信息资源
是非常适用的。
? Script,脚本（嵌入 HTML语句中的程序语言）首次引人到 Web浏览
器时，使用的是 Netscape 2.0。该脚本语言是由 Java的语法派生而来的
，故被称作 JavaScript。 Microsoft为了增强客户端脚本的能力，其开发
了基于 Visual Basic的 Script语言，即 VBscript。后来，兼容，微软又开
发了类似 JavaScript的语言，叫做 JScript。
? 服务器端脚本：服务器端执行的脚本程序。
Page 4
脚本与服务器端脚本
? 服务器端脚本程序来说，解释的工作是由服务器在将页面发出到浏览
器之前完成的。
<HTML>
<HEAD>
<TITLE>Today's Date</TITLE>
</HEAD>
<BODY>
<P>Today's Date is
<?php
echo( date("l,F dS Y.") );
>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Today's Date</TITLE>
</HEAD>
<BODY>
<P>Today's Date is
Wednesday,June 7th 2000.
</BODY>
</HTML>
Page 5
脚本比较
? 脚本：
– 使一个站点中的网页对终端的用户响应性更好，来执行基本的逻辑
操作和编程。
– 更多的简单操作, 例如验证用户在一个字端中输入数据, 或者是浏
览器端的其他一些交互式的操作, 通过服务器的程序来判断并不是
一种好的解决方案 。
? 服务器端：
（ 不存在浏览器兼容的问题 。
（ 可以访问服务器端的资源 。
（ 简化了客户端的装载 。
Page 6
2.3.2 客户端应用体系结构及其技术
?客户端应用体系结构
?客户端应用程序
?Java Applets
?ActiveX
Page 7
客户端应用体系结构
客户机（浏览器）
用户开始应用程序
控制逻辑
通信逻辑
内容构建逻辑
Applet
应
用
服务器
下载 +版本控制
通信逻辑
商业逻辑
下载
请求
传输必要
的网络数据，
而不需要传输
HTML数据内容。
Page 8
客户端应用程序
? Java应用程序是运行在客户端系统上的独立应用程序, 这
种客户端系统与浏览器无关 。
? 每次站点访问的下载或者将这个应用程序放在用户的高速
缓存中,
Page 9
Java Applets
? Java Applet 是由 Java 语言编写的包含在网页里的, 小
应用程序,, 它不能独立运行, 而必须嵌入一个 HTML文件
之中, 由浏览器解释之后作为网页的一部分来执行 。
请求
响应
HTML
Socket 连接
图 1-9 客户端执行逻辑示意图
Client
(浏览器 )
Web Server
HTML
页面
Applet 后台
数据源
Page 10
ActiveX
? Microsoft将 ActiveX定义为一组综合技术, 这些技术使得用任何语言
写的软件构件在网络环境中都能相互操作 。 在这些技术当中, ActiveX
控件与 Web设计的关系最密切 。 基本上, 一个 ActiveX控件是一个下载
到 IE,唯一支持这种技术的浏览器, 并在客户端执行的功能完全的程
序 。 ActiveX与 Microsoft’ s Windows操作系统一起工作, 这可以提供
比 Java applet更强大的功能, 但它只能在 Windows环境下工作 。 不像
独立于平台的 Java语言, ActiveX控件以二进制代码发放, 并且必须针
对目标机器的操作系统分别编译 。
Page 11
小结
?WEB应用特征并不明显
?用户响应快
?对客户断要求多
?Applet应用广泛
– 键盘、鼠标响应
– 声音播放及图像显示
– 动画制作
– 读取文件
Page 12
2.3.2 客户端脚本体系结构及其技术
?客户端脚本体系结构
?JavaScript
?Jscript
?ECMAScript
?VBScript
Page 13
客户端脚本体系结构
客户机
浏览器
用户请求页面切换
产生
页面 /简单
控制逻辑
内容修改
服务器
切换 /复杂控制逻辑
商业逻辑
内容构建 +逻辑嵌入
响应
Page 14
浏览器支持
? 在这种结构中, 程序在浏览器上执行, WEB服务器必须把程序代码传下
来给浏览器, 而浏览器也要能够执行服务器所传下来的程序代码 。
程序 IE可否执行 NC可否执行
Java √ √
JavaScript √ √
VB Script √ ╳
ActiveX控件 √ ╳
Page 15
分析
?这种体系结构的好处是,服务器与用户的通信比
较少, 需要的服务器资源比较少 （ 由于在客户端
执行一些业务逻辑 ）, 可以对用户动作作更多的
响应 （ 如鼠标移动 ） 。 支持这种体系结构的技术
包 括, ECMAScript/JavaScript/Jscript,
VBScript和 DHTML等 。
Page 16
ECMAScript
? ECMASCript是一种脚本语言, 已经由 ECMA（ 欧洲计算机制造商协会 ）
标准化, 并以 ECMA－ 262语言规范的形式发布 。 这种语言是由 Brendan
Eich在网景公司发明的, 并在 Navigator 2.0浏览器中首次出现 。 现
在, 它已经被 Netscape和 IE3,0以后的浏览器所支持 。
? ECMAScript有许多面向对象编程语言的特点, 用来在主机环境内执行
计算并操纵计算对象 。
? ECMAScript最初是作为 Web脚本语言而设计的 。 作为基于 Web的客户 /服
务器结构的一部分, 它提供了一种机制用来丰富浏览器中的 Web页面和
执行服务器端的计算 。 到目前为止, ECMAScript规范没有被完整地实
现 。 Netscape和 Microsoft在开发自己的实现时, 都对其作了扩充和限
制 。
Page 17
JavaScript
?透过它可以做到回应使用者的需求事件（如：
form的输入）而不用任何的网路来回传输资料，
所以当一位使用者输入一项资料时，它不用经过
传给服务器（ server）处理，再传回来的过程，
而直接可以被客户端（ client）的应用程式所处
理。也可以想像成有一个可执行程式在自己的客
端上执行一样，它是 Java与 HTML折衷的选择。
可以嵌入 HTML页
的基于对象的
解释性脚本语言
Page 18
Javascript在网页的用法
? Javascript加入网页有两种方法：
? 直接加入 HTML文档：
? 引用方式：如果已经存在一个 Javascript源文件 （ 以 js为扩展名 ）,
则可以采用这种引用的方式, 以提高程序代码的利用率 。
? <script src＝ "Script.js" language="Javascript"></script> 。
<script language="Javascript">
<!--
document.writeln("这是 Javascript！ 采用
直接插入的方法 ！ ");
//-Javascript结束 -->
</script>
Page 19
JavaScript的基本语法
? JavaScript 代 码 由 ＜ Script Language=”JavaScript” ＞ …… ＜／
Script＞说明, 在标识之间就可加入 JavaScript脚本 。 通过＜ ！
…… //一＞标识说明：若不认识 JavaScript代码的浏览器, 则所有在
其中的标识均被忽略；若认识, 则执行其结果 。
? JavaScript脚本语言同其他语言一样, 有它自身的基本数据类型, 表
达式和算术运算符以及程序的基本框架结构 。
? JavaScript脚本语言的基本构成是由控制语句、函数、对象,方法和属
性等来实现编程的 。
Page 20
JavaScript基本特点
? 是一种脚本语言, 它采用小程序段的方式实现编程 。
? 基于对象的语言 。
? 简单性, 主要体现在：首先它是一种基于 Java基本语句和控制流之上
的简单而紧凑的设计, 从而对于学习 Java是一种非常好的过渡 。 其次
它的变量类型是采用弱类型, 并未使用严格的数据类型 。
? 安全性, 它不允许访问本地的硬盘, 并不能将数据存入到服务器上,
不允许对网络文档进行修改和删除, 只能通过创览器实现信息测览或
动态交互 。 从而有效地防止数据的丢失 。
? 动态性, 它可以直接对用户或客户输入做出响应, 无须经过 Web服务程
序 。 它对用户的反映响应, 是采用以事件驱动的方式进行的 。
? 跨平台性 。
Page 21
JavaScript与 JAVA的比较
? 是两个公司开发的不同的两个产品 。
? 基于对象和面向对象
? 解释和编译 。
? 强变量和弱变量 。
? 代码格式不一样 。
? 嵌入方式不一样 。
? 静态联编和动态联编 。
Integer x;
String y;
x=1234;
y=4321;
x=1234;
y＝ "4321";
Page 22
示例
<html>
<head>
<Script Language ="JavaScript">
// JavaScript Appears here.
alert("这是第一个 JavaScript例子 !");
alert("欢迎你进入 JavaScript世界 !");
alert("今后我们将共同学习 JavaScript知识 ！ ");
</Script>
</Head>
</Html>
Page 23
Jscript
? Jscript是 Microsoft对 ECMAScript语言规范的实现 。 据 Microsoft讲,
,它是一种完全的实现, 并增加了一些可以利用微软 IE优点的功能,
。 到现在为止, 它的版本是 5.0。
? Jscript只有在 Microsoft IE或 Microsoft IIS的解释器下才能运行 。
Jscript和 Javascript在某种程度上很相似, 因为两者都有和
ECMAScript语言规范相同的部分 。
? 另一方面, 它们也有一些重要的差异, 这使得开发跨平台的应用相当
困难 。 这些差异体现在：各自附加对象的差异, 例如与 ActiveX控件的
交互或者对客户文件系统的访问；在 COM层次结构中的对象访问路径的
差异：对象属性的差异 。
Page 24
VBScript
? VBScript（ Microsoft Visual Basic Scripting Edition） 是 Microsoft Visual
Basic家族的新成员 。 VBScript为 IE带来了, 动态脚本,, 它同样也被
Windows脚本主机和 Microsoft IIS所支持 。 在基于浏览器技术的 Web开
发环境中, VBScript与 JScript的特征非常的相似 （ 包括与 ActiveX的紧
密集成 ）, 但是它有自己的来自 Visual Basic的语法 。 因此, VBScript
除了 IE以外不被其他公司的浏览器支持 。
Page 25
2.3.4 服务器端逻辑体系结构及其技术
?服务器端逻辑体系结构
?服务器端技术基础概述
Page 26
1、服务器端逻辑体系结构
? 这个体系结构完全依靠服务器来提供用户界面内容, 它的构造逻辑以
及与用户的相互作用如图 2-4所示 。
浏览器
控制逻辑
业务逻辑
内容构建
用户动作
内容和控制
的产生
请求
响应
Page 27
服务器端的操作
? 控制逻辑：服务器收到客户端的请求, 取出传递的参数并确定相应的
,业务对象,, 并进行适当的, 业务动作, 。
? 业务逻辑：业务逻辑属于应用逻辑的一个部分 （ 对各种特定应用处理
的总和 ）, 它处理特定业务知识, 并且与几乎所有的相关技术代码相
分离, 这些技术代码包括分析和生成数据格式, 数据库和 I／ O处理,
或内存和进程处理 。
? 内容构建：执行业务逻辑之后的结果会被格式化, 并且可以辅之于布
局和其他一些客户端显示所需要的信息 。
? 这种体系结构的好处是：所需的客户端资源很少, 应用逻辑不用装入
,启动用户交互所需的网络通信量很少, 动态内容完全由服务器端的
可执行代码完成, 仅仅将 HTML页面返回客户端, 这样服务器端的应用
程序就不必考虑浏览器和客户平台的差异 。
? 支持这种体系结构的技术很多, 包括,ASP,JSP,PHP等 。
Page 28
2,服务器端表达技术基础概述
? 服务器端的技术从商务表达层的需要来看, 就是如何接收用户的输入, 并构造传递给客
户端的页面代码 。 构造过程本身, 包括了数据接收, 业务处理和信息返回, 与传统客户 /
服务器开发不同的是, 这里不能只返回结果数据, 而必须返回一个能够反映结果的页面
。 也就是说, 服务器端需要完成数据描述的构造工作 。 在应用开发中, 会涉及到程序设
计的各类语言和方法 。
? 因此, 从物理上说, 这部分的工作在后台服务器上完成, 但从逻辑上讲, 它仍旧服务于
前台表示 。 在不同的书里, 对这部分的技术讲述有不同的视角, 有些在前端的网页制作
中讲述, 有些在后台的逻辑处理中进行分析, 各自都有其合理性, 因为象 ASP这种应用程
序中, 它本身在一个程序中就包括了前台表达, 后台逻辑处理, 以及后端的数据库访问
所有功能 。 对于简单的应用, 比如电子商务网站, 在技术上进行细致的层次划分是没有
多少意义的, 但从发展的角度看, 随着应用系统复杂性的增强, 即使是同一个程序语言
,为了不同的逻辑层次的需要, 其技术也有一些不同的增长点, 比如前台更丰富的表现
力, 后台逻辑处理的复杂性和灵活性处理, 异种平台的互联与访问 。
? 本书也以此作为技术讲解中的层次划分标准, 比如在对程序语言, 如 ASP,JAVA的讲解中
,在表示层主要描述如何构建 HTML页面, 如何完成与用户的交互；在商务逻辑层介绍如
何利用组件技术 （ 微软的 ActiveX和 SUN的 Servlets和 EJB） 设计扩展的分布式应用系统,
完成商务逻辑处理；而在后端数据层, 则主要分析不同的数据库访问机制和技术 。
Page 29
6、服务器端逻辑的深化
? 随着商务逻辑的复杂, 以及三层体系结构的出现, 服务器端的处理逻
辑进一步丰富和细化, 更多的商业逻辑独立于表示逻辑, 由应用服务
器上的应用程序执行, 并将结果返回 WEB服务器, 组装成最终的显示页
面返回客户机 。 基于 JAVA技术的服务器端执行逻辑如图所示 。
请求
响应
HTML
可执行代码 （ 如 Servlet）
Client
(浏览器 )
Web
Server
Plug-
In
后台
数据源
App
Server
Page 30
小结
?服务器端脚本
– 程序与 HTML标记混编。
– 引擎解释程序语句，直接插入 HTML文本中。
– 通过一些对象完成通讯：接收请求，发送响应。
Page 31
2.4 用户界面体系结构的分析
? 2.4.1 商务表达平台体系结构的比较
– 结构：客户端应用、客户端脚本、服务器端脚本
– 指标：易用性、性能、安全性、平台兼容性
? 2.4.2 商务表达平台体系结构的综合比较
? 2.4.3 跨平台策略
– Internet平台差异性
– 处理不兼容性
– 测试方法
Page 32
易用性
? 不需要任何方面的训练就可以使用这些程序。
? 在 Internet环境下：隐语的使用、清晰、统一、定位和导航功能。
? 服务器端逻辑体系结构：很简单的用户界面 —— 超链接或表单，而且
，每一次与用户的交互都需要与服务器进行交互，另一方面，仅仅通
过静态的表现，如图标，而没有相关行为的描述是很难创造出直觉上
的隐语。
? 客户端脚本体系结构：提供更加复杂的导航和定位帮助，然而，提供
精巧界面单元的脚本语言工具显得有一点点简陋，
? 客户端应用体系结构：更复杂的语言元素和标准库使得客户端应用比
脚本支持更复杂的逻辑行为，然而，需要在界面设计方面有相当丰富
的经验，仅仅使用大量的 GUI控件本身会隐藏着危险。
? 多媒体内容：真正的多媒体应用是在提供隐语、导航及定位方面达到
最高境界。
Page 33
性能 -1
? 分布在客户端和服务器端的计算及相互间的通信都会对性能产生至关
重要的影响 。
? 性能瓶颈包括：初始化时间, 直到第一个用户交互可以完成 （ 下载时
间 ） ；客户端处理一个用户交互所需的时间 （ 客户装入 ） ；需要与服
务器交互的次数 （ 服务器依赖度 ） ；从客户端向服务器传输消息及反
馈结果所需的时间 （ 网络传输时间 ） ；服务器处理用户交互所璧氖奔
洌 ǚ （ 服务器装入
? 服务器端逻辑体系结构：
– 非常短的初始化下载时间 。
– 而且因为客户不承担任何的计算, 所以只需要很少的用户资源 。
– 所以这对服务器的依赖程度相当高 。
– 导致客户同服务器之间的大量信息的传输 。 最后, 服务器不得不自
己实现所有的计算 （ 服务器装入 ） 。
– 导致了大量的响应时间, 一般用于用户交互需要较少的应用中 。
Page 34
性能 -2
? （ 2） 客户端脚本体系结构
– 通过脚本, 用户事件可以获得较快的时间回应,
– 与服务器之间的交互也只要较少的时间 。
– 服务器调用只是在不大的程度上得以提高 。
– 大量的脚本需要一个相当可观的下载时间
– 一个缺点是对用户资源, 例如主存, 的需求更大了 。
? （ 3） 客户端应用体系结构
– 提供了最好的响应效果 。
– 与服务器的交流也就更少了 （ 适度的服务器依赖 ）
– 仅仅网络数据 （ 无需布局信息 ） 需要在服务器和客户之间进行传送 。
– 主要缺点是在 在第一次交互前需要比较长的下载时间 。
– 比前一个方法需要更多的客户机资源 。
? （ 4） 多媒体内容
– 但却需要一个很大的下载时间和一些安装程序,
– 对于音频, 视频等多媒体内容, 都需要非常巨大的网络带宽
Page 35
安全性
? 包括多个层次的安全问题, 下面主要从客户端的安全性来比较：一旦
动态内容进入, 客户端的完整性可能会遭到恶意服务器的破坏,
? 服务器端逻辑体系结构：几乎没有什么安全漏洞 。
? 客户端脚本体系结构：主要是 JavaScript（ JScript） 的安全性
Page 36
平台兼容性
? 要支持各种不同的浏览器和操作系统平台 。
? （ 1） 服务器端逻辑体系结构：这种体系结构能生产出可预见的内容和
行为, 平台差异和 bug总是存在的, 但它们对应用功能影响是很小的 。
? （ 2） 客户端脚本体系结构：使用客户端脚本体系结构, 将有许多不兼
容问题出现 。
? （ 3） 客户端应用体系结构,JAVA的兼容性比较好 。
? （ 4） 多媒体内容：用户需要安装额外的插件, 因此, 并没有客户端软
件限制问题, 因为不管怎样用户都得升级自己的系统 。
Page 37
综合比较
特性 客户端应用 客户端脚本 服务器端逻辑
导航, 定位 效果好 比较强, 稍显简陋 能力差
客户端资源 大 较多 少
服务器资源 少 （ 适度依赖 ） 较高 高
响应时间快 第一次下载量大 较快, 下载时间长 长
信息传输少 无布局信息 较少 大量
安全性 少量控制 较安全
兼容性 少量问题 许多问题 最好
应用特点 用户群稳定 用户范围广
界面业务复杂 交互少
应用举例 企业内部网应用 掌上电脑
Page 38
Internet平台差异性
? Internet应用程序最明显的特点是使用的普遍性, 这些设备存在着巨
大的差异, 比如操作系统, 浏览器软件, 运行时的环境语言 （ 如 JVM或
脚本引擎 ）, 国家语言环境 （ 如特殊的字库 ） 以及屏幕分辨率等 。
? 在 Internet发展早期时大家已经意识到这个问题, 几个组织和委员会
建立了上网计算机之间的数据交换标准 。
? 标准并没有规定每一样东西, 如 DOM,也并不能被所有人所完全地实现
,浏览器仍是坚持一种操作系统的外观每个浏览器提供商都有自己的
增强部分, 浏 览 器 的 最 新 消 息 可 以 在
http://browerwatch.internet.com上查到 。
Page 39
处理不兼容性
? 不同平台上产生的兼容性有以下原因：浏览器版本的特殊功能, 如
CSS支持；操作系统特性, 如字体映射； bug,如 JavaScript eval()函
数使 16位 windows上的 Navigator崩溃；语言级的不兼容性, 如在
Navigator 4,0和 IE4.0之间不同的 JavaScript事件处理模式；浏览
器无法处理所选择的技术, 如客户方 XML目前为止只被 IE 5,0支持
。 因此, 在开始设计, 开发一个 Web用户界面之前, 一定要很好地确定
目标平台, 并采用一些处理不兼容性的策略 。
? 最少通用途径
? 特定平台的用户界面
? 服务器端逻辑的兼容性
? 特性测试：检测平台上是否有正要使用的特性
? 失败的优雅性
? 跨平台框架
Page 40
测试方法
? 每一个应用程序的开发, 都需要进行测试 。 一般来说, 这种测试可以
分成几个阶段：设计和指定测试样本；拟定测试计划；建立测试样本；建立测试环境；进行单元, 集成, 系统以及接受测试 。 针对 Web用户
界面, 下面给出各测试阶段中应注意的事项 。
? （ 1） 接受测试样例的设计：接受测试样例依据项目主持者的构思建立
起来, 其目的是就最终系统的验收达成一致 。
? （ 2） 集成和系统测试样例的设计
? 最好能确认在集成测试阶段或系统测试阶段覆盖所有主要的用户操作
系统, 甚至包括那些不是接受测试的部分, 还要包括主流浏览器中一
些不同的版本 。
Page 41
小结
?技术更多
?需要考虑的问题更多
?解决问题的能力更高
商务表达平台技术基础
? 在 WEB发展的早期,WEB服务器只提供静态的 HTML页面，随着应用需求的增长和相关
技术的发展，业务数据存储与 WEB页面的集成变成了现实，从而推动了 WEB应用从单一
的信息提供发展为电子商务工具，电子商务应用的发展也反过来促进了动态内容生成技
术的发展。
?电子商务信息分享架构
?静态页面表达及其技术基础
?动态页面表达及其技术基础
?用户界面体系结构的选择
Page 2
2.3 动态页面表达及其技术
? 2.3.1 动态网页技术基础
? 2.3.2 客户端应用体系结构及其技术
? 2.3.3 客户端脚本体系结构及其技术
? 2.3.4 服务器端逻辑体系结构及其技术
交互功能？
Page 3
2.3.1 动态网页技术基础
? 这里的“动态”重点不在于如何获得数据（属数据层技术）、更不在于如何构建复杂的
业务逻辑，而是实现用户与应用程序的通信，以及如何将所获得的数据显示在网页中，
主要目标仍然在网页上，在信息的表达上，特别信息的双向交互上。这种技术上的区别
，也正反映的电子商务网站和电子商务系统在系统建设上设计思路与技术基础的不同。
? CGI, 通过用编程语言例如 C,Perl甚至是 Visual Basic开发的应用程序
来产生，这对于访问数据库或服务器上其他的大型或不同的信息资源
是非常适用的。
? Script,脚本（嵌入 HTML语句中的程序语言）首次引人到 Web浏览
器时，使用的是 Netscape 2.0。该脚本语言是由 Java的语法派生而来的
，故被称作 JavaScript。 Microsoft为了增强客户端脚本的能力，其开发
了基于 Visual Basic的 Script语言，即 VBscript。后来，兼容，微软又开
发了类似 JavaScript的语言，叫做 JScript。
? 服务器端脚本：服务器端执行的脚本程序。
Page 4
脚本与服务器端脚本
? 服务器端脚本程序来说，解释的工作是由服务器在将页面发出到浏览
器之前完成的。
<HTML>
<HEAD>
<TITLE>Today's Date</TITLE>
</HEAD>
<BODY>
<P>Today's Date is
<?php
echo( date("l,F dS Y.") );
>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Today's Date</TITLE>
</HEAD>
<BODY>
<P>Today's Date is
Wednesday,June 7th 2000.
</BODY>
</HTML>
Page 5
脚本比较
? 脚本：
– 使一个站点中的网页对终端的用户响应性更好，来执行基本的逻辑
操作和编程。
– 更多的简单操作, 例如验证用户在一个字端中输入数据, 或者是浏
览器端的其他一些交互式的操作, 通过服务器的程序来判断并不是
一种好的解决方案 。
? 服务器端：
（ 不存在浏览器兼容的问题 。
（ 可以访问服务器端的资源 。
（ 简化了客户端的装载 。
Page 6
2.3.2 客户端应用体系结构及其技术
?客户端应用体系结构
?客户端应用程序
?Java Applets
?ActiveX
Page 7
客户端应用体系结构
客户机（浏览器）
用户开始应用程序
控制逻辑
通信逻辑
内容构建逻辑
Applet
应
用
服务器
下载 +版本控制
通信逻辑
商业逻辑
下载
请求
传输必要
的网络数据，
而不需要传输
HTML数据内容。
Page 8
客户端应用程序
? Java应用程序是运行在客户端系统上的独立应用程序, 这
种客户端系统与浏览器无关 。
? 每次站点访问的下载或者将这个应用程序放在用户的高速
缓存中,
Page 9
Java Applets
? Java Applet 是由 Java 语言编写的包含在网页里的, 小
应用程序,, 它不能独立运行, 而必须嵌入一个 HTML文件
之中, 由浏览器解释之后作为网页的一部分来执行 。
请求
响应
HTML
Socket 连接
图 1-9 客户端执行逻辑示意图
Client
(浏览器 )
Web Server
HTML
页面
Applet 后台
数据源
Page 10
ActiveX
? Microsoft将 ActiveX定义为一组综合技术, 这些技术使得用任何语言
写的软件构件在网络环境中都能相互操作 。 在这些技术当中, ActiveX
控件与 Web设计的关系最密切 。 基本上, 一个 ActiveX控件是一个下载
到 IE,唯一支持这种技术的浏览器, 并在客户端执行的功能完全的程
序 。 ActiveX与 Microsoft’ s Windows操作系统一起工作, 这可以提供
比 Java applet更强大的功能, 但它只能在 Windows环境下工作 。 不像
独立于平台的 Java语言, ActiveX控件以二进制代码发放, 并且必须针
对目标机器的操作系统分别编译 。
Page 11
小结
?WEB应用特征并不明显
?用户响应快
?对客户断要求多
?Applet应用广泛
– 键盘、鼠标响应
– 声音播放及图像显示
– 动画制作
– 读取文件
Page 12
2.3.2 客户端脚本体系结构及其技术
?客户端脚本体系结构
?JavaScript
?Jscript
?ECMAScript
?VBScript
Page 13
客户端脚本体系结构
客户机
浏览器
用户请求页面切换
产生
页面 /简单
控制逻辑
内容修改
服务器
切换 /复杂控制逻辑
商业逻辑
内容构建 +逻辑嵌入
响应
Page 14
浏览器支持
? 在这种结构中, 程序在浏览器上执行, WEB服务器必须把程序代码传下
来给浏览器, 而浏览器也要能够执行服务器所传下来的程序代码 。
程序 IE可否执行 NC可否执行
Java √ √
JavaScript √ √
VB Script √ ╳
ActiveX控件 √ ╳
Page 15
分析
?这种体系结构的好处是,服务器与用户的通信比
较少, 需要的服务器资源比较少 （ 由于在客户端
执行一些业务逻辑 ）, 可以对用户动作作更多的
响应 （ 如鼠标移动 ） 。 支持这种体系结构的技术
包 括, ECMAScript/JavaScript/Jscript,
VBScript和 DHTML等 。
Page 16
ECMAScript
? ECMASCript是一种脚本语言, 已经由 ECMA（ 欧洲计算机制造商协会 ）
标准化, 并以 ECMA－ 262语言规范的形式发布 。 这种语言是由 Brendan
Eich在网景公司发明的, 并在 Navigator 2.0浏览器中首次出现 。 现
在, 它已经被 Netscape和 IE3,0以后的浏览器所支持 。
? ECMAScript有许多面向对象编程语言的特点, 用来在主机环境内执行
计算并操纵计算对象 。
? ECMAScript最初是作为 Web脚本语言而设计的 。 作为基于 Web的客户 /服
务器结构的一部分, 它提供了一种机制用来丰富浏览器中的 Web页面和
执行服务器端的计算 。 到目前为止, ECMAScript规范没有被完整地实
现 。 Netscape和 Microsoft在开发自己的实现时, 都对其作了扩充和限
制 。
Page 17
JavaScript
?透过它可以做到回应使用者的需求事件（如：
form的输入）而不用任何的网路来回传输资料，
所以当一位使用者输入一项资料时，它不用经过
传给服务器（ server）处理，再传回来的过程，
而直接可以被客户端（ client）的应用程式所处
理。也可以想像成有一个可执行程式在自己的客
端上执行一样，它是 Java与 HTML折衷的选择。
可以嵌入 HTML页
的基于对象的
解释性脚本语言
Page 18
Javascript在网页的用法
? Javascript加入网页有两种方法：
? 直接加入 HTML文档：
? 引用方式：如果已经存在一个 Javascript源文件 （ 以 js为扩展名 ）,
则可以采用这种引用的方式, 以提高程序代码的利用率 。
? <script src＝ "Script.js" language="Javascript"></script> 。
<script language="Javascript">
<!--
document.writeln("这是 Javascript！ 采用
直接插入的方法 ！ ");
//-Javascript结束 -->
</script>
Page 19
JavaScript的基本语法
? JavaScript 代 码 由 ＜ Script Language=”JavaScript” ＞ …… ＜／
Script＞说明, 在标识之间就可加入 JavaScript脚本 。 通过＜ ！
…… //一＞标识说明：若不认识 JavaScript代码的浏览器, 则所有在
其中的标识均被忽略；若认识, 则执行其结果 。
? JavaScript脚本语言同其他语言一样, 有它自身的基本数据类型, 表
达式和算术运算符以及程序的基本框架结构 。
? JavaScript脚本语言的基本构成是由控制语句、函数、对象,方法和属
性等来实现编程的 。
Page 20
JavaScript基本特点
? 是一种脚本语言, 它采用小程序段的方式实现编程 。
? 基于对象的语言 。
? 简单性, 主要体现在：首先它是一种基于 Java基本语句和控制流之上
的简单而紧凑的设计, 从而对于学习 Java是一种非常好的过渡 。 其次
它的变量类型是采用弱类型, 并未使用严格的数据类型 。
? 安全性, 它不允许访问本地的硬盘, 并不能将数据存入到服务器上,
不允许对网络文档进行修改和删除, 只能通过创览器实现信息测览或
动态交互 。 从而有效地防止数据的丢失 。
? 动态性, 它可以直接对用户或客户输入做出响应, 无须经过 Web服务程
序 。 它对用户的反映响应, 是采用以事件驱动的方式进行的 。
? 跨平台性 。
Page 21
JavaScript与 JAVA的比较
? 是两个公司开发的不同的两个产品 。
? 基于对象和面向对象
? 解释和编译 。
? 强变量和弱变量 。
? 代码格式不一样 。
? 嵌入方式不一样 。
? 静态联编和动态联编 。
Integer x;
String y;
x=1234;
y=4321;
x=1234;
y＝ "4321";
Page 22
示例
<html>
<head>
<Script Language ="JavaScript">
// JavaScript Appears here.
alert("这是第一个 JavaScript例子 !");
alert("欢迎你进入 JavaScript世界 !");
alert("今后我们将共同学习 JavaScript知识 ！ ");
</Script>
</Head>
</Html>
Page 23
Jscript
? Jscript是 Microsoft对 ECMAScript语言规范的实现 。 据 Microsoft讲,
,它是一种完全的实现, 并增加了一些可以利用微软 IE优点的功能,
。 到现在为止, 它的版本是 5.0。
? Jscript只有在 Microsoft IE或 Microsoft IIS的解释器下才能运行 。
Jscript和 Javascript在某种程度上很相似, 因为两者都有和
ECMAScript语言规范相同的部分 。
? 另一方面, 它们也有一些重要的差异, 这使得开发跨平台的应用相当
困难 。 这些差异体现在：各自附加对象的差异, 例如与 ActiveX控件的
交互或者对客户文件系统的访问；在 COM层次结构中的对象访问路径的
差异：对象属性的差异 。
Page 24
VBScript
? VBScript（ Microsoft Visual Basic Scripting Edition） 是 Microsoft Visual
Basic家族的新成员 。 VBScript为 IE带来了, 动态脚本,, 它同样也被
Windows脚本主机和 Microsoft IIS所支持 。 在基于浏览器技术的 Web开
发环境中, VBScript与 JScript的特征非常的相似 （ 包括与 ActiveX的紧
密集成 ）, 但是它有自己的来自 Visual Basic的语法 。 因此, VBScript
除了 IE以外不被其他公司的浏览器支持 。
Page 25
2.3.4 服务器端逻辑体系结构及其技术
?服务器端逻辑体系结构
?服务器端技术基础概述
Page 26
1、服务器端逻辑体系结构
? 这个体系结构完全依靠服务器来提供用户界面内容, 它的构造逻辑以
及与用户的相互作用如图 2-4所示 。
浏览器
控制逻辑
业务逻辑
内容构建
用户动作
内容和控制
的产生
请求
响应
Page 27
服务器端的操作
? 控制逻辑：服务器收到客户端的请求, 取出传递的参数并确定相应的
,业务对象,, 并进行适当的, 业务动作, 。
? 业务逻辑：业务逻辑属于应用逻辑的一个部分 （ 对各种特定应用处理
的总和 ）, 它处理特定业务知识, 并且与几乎所有的相关技术代码相
分离, 这些技术代码包括分析和生成数据格式, 数据库和 I／ O处理,
或内存和进程处理 。
? 内容构建：执行业务逻辑之后的结果会被格式化, 并且可以辅之于布
局和其他一些客户端显示所需要的信息 。
? 这种体系结构的好处是：所需的客户端资源很少, 应用逻辑不用装入
,启动用户交互所需的网络通信量很少, 动态内容完全由服务器端的
可执行代码完成, 仅仅将 HTML页面返回客户端, 这样服务器端的应用
程序就不必考虑浏览器和客户平台的差异 。
? 支持这种体系结构的技术很多, 包括,ASP,JSP,PHP等 。
Page 28
2,服务器端表达技术基础概述
? 服务器端的技术从商务表达层的需要来看, 就是如何接收用户的输入, 并构造传递给客
户端的页面代码 。 构造过程本身, 包括了数据接收, 业务处理和信息返回, 与传统客户 /
服务器开发不同的是, 这里不能只返回结果数据, 而必须返回一个能够反映结果的页面
。 也就是说, 服务器端需要完成数据描述的构造工作 。 在应用开发中, 会涉及到程序设
计的各类语言和方法 。
? 因此, 从物理上说, 这部分的工作在后台服务器上完成, 但从逻辑上讲, 它仍旧服务于
前台表示 。 在不同的书里, 对这部分的技术讲述有不同的视角, 有些在前端的网页制作
中讲述, 有些在后台的逻辑处理中进行分析, 各自都有其合理性, 因为象 ASP这种应用程
序中, 它本身在一个程序中就包括了前台表达, 后台逻辑处理, 以及后端的数据库访问
所有功能 。 对于简单的应用, 比如电子商务网站, 在技术上进行细致的层次划分是没有
多少意义的, 但从发展的角度看, 随着应用系统复杂性的增强, 即使是同一个程序语言
,为了不同的逻辑层次的需要, 其技术也有一些不同的增长点, 比如前台更丰富的表现
力, 后台逻辑处理的复杂性和灵活性处理, 异种平台的互联与访问 。
? 本书也以此作为技术讲解中的层次划分标准, 比如在对程序语言, 如 ASP,JAVA的讲解中
,在表示层主要描述如何构建 HTML页面, 如何完成与用户的交互；在商务逻辑层介绍如
何利用组件技术 （ 微软的 ActiveX和 SUN的 Servlets和 EJB） 设计扩展的分布式应用系统,
完成商务逻辑处理；而在后端数据层, 则主要分析不同的数据库访问机制和技术 。
Page 29
6、服务器端逻辑的深化
? 随着商务逻辑的复杂, 以及三层体系结构的出现, 服务器端的处理逻
辑进一步丰富和细化, 更多的商业逻辑独立于表示逻辑, 由应用服务
器上的应用程序执行, 并将结果返回 WEB服务器, 组装成最终的显示页
面返回客户机 。 基于 JAVA技术的服务器端执行逻辑如图所示 。
请求
响应
HTML
可执行代码 （ 如 Servlet）
Client
(浏览器 )
Web
Server
Plug-
In
后台
数据源
App
Server
Page 30
小结
?服务器端脚本
– 程序与 HTML标记混编。
– 引擎解释程序语句，直接插入 HTML文本中。
– 通过一些对象完成通讯：接收请求，发送响应。
Page 31
2.4 用户界面体系结构的分析
? 2.4.1 商务表达平台体系结构的比较
– 结构：客户端应用、客户端脚本、服务器端脚本
– 指标：易用性、性能、安全性、平台兼容性
? 2.4.2 商务表达平台体系结构的综合比较
? 2.4.3 跨平台策略
– Internet平台差异性
– 处理不兼容性
– 测试方法
Page 32
易用性
? 不需要任何方面的训练就可以使用这些程序。
? 在 Internet环境下：隐语的使用、清晰、统一、定位和导航功能。
? 服务器端逻辑体系结构：很简单的用户界面 —— 超链接或表单，而且
，每一次与用户的交互都需要与服务器进行交互，另一方面，仅仅通
过静态的表现，如图标，而没有相关行为的描述是很难创造出直觉上
的隐语。
? 客户端脚本体系结构：提供更加复杂的导航和定位帮助，然而，提供
精巧界面单元的脚本语言工具显得有一点点简陋，
? 客户端应用体系结构：更复杂的语言元素和标准库使得客户端应用比
脚本支持更复杂的逻辑行为，然而，需要在界面设计方面有相当丰富
的经验，仅仅使用大量的 GUI控件本身会隐藏着危险。
? 多媒体内容：真正的多媒体应用是在提供隐语、导航及定位方面达到
最高境界。
Page 33
性能 -1
? 分布在客户端和服务器端的计算及相互间的通信都会对性能产生至关
重要的影响 。
? 性能瓶颈包括：初始化时间, 直到第一个用户交互可以完成 （ 下载时
间 ） ；客户端处理一个用户交互所需的时间 （ 客户装入 ） ；需要与服
务器交互的次数 （ 服务器依赖度 ） ；从客户端向服务器传输消息及反
馈结果所需的时间 （ 网络传输时间 ） ；服务器处理用户交互所璧氖奔
洌 ǚ （ 服务器装入
? 服务器端逻辑体系结构：
– 非常短的初始化下载时间 。
– 而且因为客户不承担任何的计算, 所以只需要很少的用户资源 。
– 所以这对服务器的依赖程度相当高 。
– 导致客户同服务器之间的大量信息的传输 。 最后, 服务器不得不自
己实现所有的计算 （ 服务器装入 ） 。
– 导致了大量的响应时间, 一般用于用户交互需要较少的应用中 。
Page 34
性能 -2
? （ 2） 客户端脚本体系结构
– 通过脚本, 用户事件可以获得较快的时间回应,
– 与服务器之间的交互也只要较少的时间 。
– 服务器调用只是在不大的程度上得以提高 。
– 大量的脚本需要一个相当可观的下载时间
– 一个缺点是对用户资源, 例如主存, 的需求更大了 。
? （ 3） 客户端应用体系结构
– 提供了最好的响应效果 。
– 与服务器的交流也就更少了 （ 适度的服务器依赖 ）
– 仅仅网络数据 （ 无需布局信息 ） 需要在服务器和客户之间进行传送 。
– 主要缺点是在 在第一次交互前需要比较长的下载时间 。
– 比前一个方法需要更多的客户机资源 。
? （ 4） 多媒体内容
– 但却需要一个很大的下载时间和一些安装程序,
– 对于音频, 视频等多媒体内容, 都需要非常巨大的网络带宽
Page 35
安全性
? 包括多个层次的安全问题, 下面主要从客户端的安全性来比较：一旦
动态内容进入, 客户端的完整性可能会遭到恶意服务器的破坏,
? 服务器端逻辑体系结构：几乎没有什么安全漏洞 。
? 客户端脚本体系结构：主要是 JavaScript（ JScript） 的安全性
Page 36
平台兼容性
? 要支持各种不同的浏览器和操作系统平台 。
? （ 1） 服务器端逻辑体系结构：这种体系结构能生产出可预见的内容和
行为, 平台差异和 bug总是存在的, 但它们对应用功能影响是很小的 。
? （ 2） 客户端脚本体系结构：使用客户端脚本体系结构, 将有许多不兼
容问题出现 。
? （ 3） 客户端应用体系结构,JAVA的兼容性比较好 。
? （ 4） 多媒体内容：用户需要安装额外的插件, 因此, 并没有客户端软
件限制问题, 因为不管怎样用户都得升级自己的系统 。
Page 37
综合比较
特性 客户端应用 客户端脚本 服务器端逻辑
导航, 定位 效果好 比较强, 稍显简陋 能力差
客户端资源 大 较多 少
服务器资源 少 （ 适度依赖 ） 较高 高
响应时间快 第一次下载量大 较快, 下载时间长 长
信息传输少 无布局信息 较少 大量
安全性 少量控制 较安全
兼容性 少量问题 许多问题 最好
应用特点 用户群稳定 用户范围广
界面业务复杂 交互少
应用举例 企业内部网应用 掌上电脑
Page 38
Internet平台差异性
? Internet应用程序最明显的特点是使用的普遍性, 这些设备存在着巨
大的差异, 比如操作系统, 浏览器软件, 运行时的环境语言 （ 如 JVM或
脚本引擎 ）, 国家语言环境 （ 如特殊的字库 ） 以及屏幕分辨率等 。
? 在 Internet发展早期时大家已经意识到这个问题, 几个组织和委员会
建立了上网计算机之间的数据交换标准 。
? 标准并没有规定每一样东西, 如 DOM,也并不能被所有人所完全地实现
,浏览器仍是坚持一种操作系统的外观每个浏览器提供商都有自己的
增强部分, 浏 览 器 的 最 新 消 息 可 以 在
http://browerwatch.internet.com上查到 。
Page 39
处理不兼容性
? 不同平台上产生的兼容性有以下原因：浏览器版本的特殊功能, 如
CSS支持；操作系统特性, 如字体映射； bug,如 JavaScript eval()函
数使 16位 windows上的 Navigator崩溃；语言级的不兼容性, 如在
Navigator 4,0和 IE4.0之间不同的 JavaScript事件处理模式；浏览
器无法处理所选择的技术, 如客户方 XML目前为止只被 IE 5,0支持
。 因此, 在开始设计, 开发一个 Web用户界面之前, 一定要很好地确定
目标平台, 并采用一些处理不兼容性的策略 。
? 最少通用途径
? 特定平台的用户界面
? 服务器端逻辑的兼容性
? 特性测试：检测平台上是否有正要使用的特性
? 失败的优雅性
? 跨平台框架
Page 40
测试方法
? 每一个应用程序的开发, 都需要进行测试 。 一般来说, 这种测试可以
分成几个阶段：设计和指定测试样本；拟定测试计划；建立测试样本；建立测试环境；进行单元, 集成, 系统以及接受测试 。 针对 Web用户
界面, 下面给出各测试阶段中应注意的事项 。
? （ 1） 接受测试样例的设计：接受测试样例依据项目主持者的构思建立
起来, 其目的是就最终系统的验收达成一致 。
? （ 2） 集成和系统测试样例的设计
? 最好能确认在集成测试阶段或系统测试阶段覆盖所有主要的用户操作
系统, 甚至包括那些不是接受测试的部分, 还要包括主流浏览器中一
些不同的版本 。
Page 41
小结
?技术更多
?需要考虑的问题更多
?解决问题的能力更高
