Web程序设计 - 万水书苑-出版资源网

第一部分 

Web

前端设计基础

l 第一章 概述 l 第二章 搭建开发环境 l 第三章 HTML 制作 l 第四章 级联样式表（CSS）技术 l 第五章 JavaScript 编程基础 l 第六章 流程控制 l 第七章 数组 l 第八章 函数 l 第九章 对象编程与事件驱动 l 第十章 窗口与文档对象

1

第一章 概述

随着网络的普及，Java 在网站和企业级应用的开发上越来越得到重视，Java  Web 开发 已经成为 Java 企业级解决方案中不可或缺的重要组成部分。为此，很多的程序员或是编程 爱好者开始学习 Java Web 的应用开发。通过本章的学习，您可以： l 了解 C/S 结构和 B/S 结构 l 理解 Web 应用程序的工作原理 l 了解 Web 应用的客户端应用技术 l 了解 Web 应用的服务器端应用技术 

1.1 程序开发体系结构

1.1.1  C/S 体系结构介绍  C/S 是 Client/Server 的缩写，即客户端/服务器结构。在这种结构中，服务器通常采用高 性能的 PC 机或工作站，并采用大型数据库系统（如 Oracle 或 SQL Server），客户端则需要 安装专用的客户端软件，如图 1.1 所示。这种结构可以充分利用两端硬件环境的优势，将任 务合理的分配到客户端和服务器，从而降低了系统的通信开销。在 2000 年以前，C/S 结构 占据网络程序开发领域的主流。传统的  C/S  体系结构虽然采用的是开放模式，但这只是系 统开发级别的开放性，在特定的应用中无论是客户端还是服务端都还需要特定的软件支持。 由于没能提供用户真正期望的开放环境， C/S 结构的软件需要针对不同的操作系统开发不同 版本的软件，加之现今软件产品的更新换代频率增大，已经很难适应局域网大量的用户同 时使用，而且代价高，效率低。 图 1.1  C/S 体系结构  1.1.2  B/S 体系结构介绍  B/S 是 Brower/Server 的缩写，即浏览器/服务器结构。在这种结构中，客户端不需要开 网络 数据库 客户端应 用程序 请求 响应 响应 请求 客户机 服务器

发特定的用户界面支持，而是统一采用 IE、Firefox 等浏览器，通过 Web 浏览器向 Web 服 务器发送请求，由 Web 服务器进行处理，并将处理结构逐级传回客户端，如图 1.2 所示。 这种结构利用不断成熟和普及的浏览器技术实现原来需要复杂专用软件才能实现的强大 功能，从而节约了开发成本。这种全新的软件体系结构已经成为当今应用软件的首选体系 结构。 图 1.2  B/S 体系结构  1.1.3  两种体系结构的比较  C/S  结构和  B/S  结构是当今世界网络程序开发体系结构的两大主流。目前，这两种结 构都有自己的市场份额和客户群。但是，这两种体系结构又各有自己的优缺点。  1．开发和维护成本方面  C/S  结构的开发和维护成本都比 B/S 高。采用 C/S  结构时，对于不同客户端要开发不 同的程序，而且软件的安装、调试和升级均需要在所有的客户机上进行。例如，如果一个 企业共有 10 个客户站点使用一套 C/S 结构的软件，则这 10 个客户站点都需要安装客户端 程序。当这套软件进行了哪怕很微小的改动后，可能导致系统维护员将客户端原有的软件 卸载，再安装新的版本并进行配置，最可怕的是客户端的维护工作必须不折不扣的进行  10  次。若某个客户端忘记进行这样的更新，则该客户端将会因软件版本不一致而无法正常工 作。而  B/S  结构的软件，则不必在客户端进行安装和维护，只需要管理服务器就行了，所 有的客户端只是浏览器，根本不需要做任何的特殊性维护。无论用户的规模有多大，有多 少分支机构都不会增加任何维护升级的工作量，所有的操作只需要针对服务器进行；如果 是异地，只需要把服务器连接专网即可，实现远程维护、升级和共享。如果将前面企业的  C/S 结构换成 B/S 结构，这样在软件升级后，系统维护人员只需将服务器的软件升级到最新 版本，对于其他客户端，只需要重新登录系统即可使用最新版本的软件。  2．客户端负载  C/S 结构的客户端不仅负责与用户的交互，收集用户信息，而且还需要完成通过网络向 服务器请求对数据库、电子表格或文档等信息的处理工作。由此可见，应用程序的功能越 复杂，客户端程序也就越庞大，这也给软件的维护工作带来了很大的困难。对于 B/S 架构， 由于管理软件只安装在服务器端（Server）上，网络管理人员只需要管理服务器就行了，用 户界面主要事务逻辑在服务器（Server）端完全通过  WWW  浏览器实现，极少部分事务逻 辑在前端（Browser）完成，所有的客户端只有浏览器，网络管理人员只需要做硬件维护。 浏览器 网络 数据库 请求 响应 请求 响应 服务器

但是，如此可能导致应用服务器运行数据负荷较重，一旦发生服务器“崩溃”等问题，后 果不堪设想。因此，应用中大多备有数据库存储服务器，以防万一。  3．安全性  C/S  结构适用于专人使用的系统，可以通过严格的管理派发软件，达到保证系统安全 的目的，通常面向相对固定的用户群，对信息安全的控制能力很强。对于高度机密的信息 系统采用 C/S 结构适宜，部分可公开信息可以通过 B/S 发布。  B/S  建立在广域网之上，面向的是不可知的用户群，使用人数多，不固定。对安全的 控制能力相对弱。 由此可见，B/S 相对于 C/S 来说具有更多的优势，但需要强调的是，C/S 和 B/S 并没有 本质的区别：B/S 是基于特定通信协议（HTTP）的 C/S 架构，也就是说 B/S 包含在 C/S 中， 是特殊的 C/S 架构。之所以在 C/S 架构上提出 B/S 架构，是为了满足“瘦”客户端、一体 化客户端的需要，最终目的是节约客户端更新、维护等的成本，及广域资源的共享。 说明： （1）B/S 属于 C/S，浏览器只是特殊的客户端。 （2）C/S 可以使用任何通信协议，而 B/S 这个特殊的 C/S 架构规定必须实现 HTTP 协议。 （3）浏览器是一个通用客户端，本质上利用浏览器，还是实现一个 C/S 系统。 

1.2  Web 应用程序的工作原理 

Web 应用程序大体上可以分为两种，即静态网站和动态网站。早期的 Web 应用主要是 静态页面的浏览，即静态网站。这些网站使用 HTML 语言来编写，放在 Web 服务器上，用 户使用浏览器通过 HTTP 协议请求服务器上的 Web 页面，服务器上的 Web 服务器将接受到 的用户请求处理后，再发送给客户端浏览器，显示给用户。整个过程如图 1.3 所示。 图 1.3  静态网站的工作流程 随着网络的发展，很多线下业务开始向网上转移，使得基于  Internet  的  Web  应用也变 得越来越复杂。因此用户所访问的资源已不能只局限于服务器上保存的静态网页，更多的 内容需要根据用户的请求动态生成页面信息，即动态网站。这些网站通常使用 HTML 语言 和动态脚本语言（如 JSP、ASP、PHP  等）来编写，并将编写后的程序部署到  Web  服务器 浏览器 客户机 服务器 Web服务器 静态页面 网络 请求 响应

上，由 Web 服务器对动态脚本代码进行处理，并转化为浏览器可以解析的 HTML 代码，返 回给客户端浏览器，显示给用户。整个过程如图 1.4 所示。 图 1.4  动态网站的工作流程 说明：对于初学者，经常会错误地认为带有动画效果的网页就是动态网页，其实不然， 动态网页是指具有交互性、内容可以自动更新，并且内容会根据访问的时间和访问者而改 变。这里所说的交互性是指网页可以根据用户的要求动态改变或响应。 

1.3  Web 应用技术

在开发 Web 应用程序时，通常需要应用客户端和服务器两方面的技术。其中，客户端 应用的技术主要用于展现信息内容，而服务器端应用的技术，则主要用于进行业务逻辑的 处理和与数据库的交互等。下面进行详细介绍。  1.3.1  客户端应用的技术 在进行 Web 应用开发时，离不开客户端技术的支持。目前，比较常用的客户端技术包 括 HTML 语言、CSS、Flash 和客户端脚本技术等。 l  HTML 语言  HTML  是超文本标记语言，是客户端技术的基础，主要用于显示网页信息，由浏览器 解释执行，无需编译参与。HTML  语言简单易用，它在文件中加入标签，使其可以显示各 种各样的字体、图形及闪烁效果，还增加了结构和标记，如头元素、文字、列表、表格、 表单、框架、图像和多媒体等，并且提供了与 Internet 中其他文档的超链接。本书第三章将 详细介绍。 l  CSS 

CSS 是级联样式表，也称作层叠样式表（Cascading  Style  Sheets） 。在制作网页时采用 

CSS 样式，可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制。 只要对相对应的代码做一些简单的修改，就可以改变整个页面的风格。CSS  大大提高了开 发者对信息展现格式的控制能力，特别是在目前比较流行的 CSS+DIV 布局的网站中，CSS  浏览器 客户机 服务器 Web服务器 静态页面 网络 请求 响应 动态脚本 程序 _数据库

的作用更是举足轻重。本书第四章将详细介绍。

l  Flash 

Flash  是由  Macromedia  公司推出的交互式矢量图和  Web  动画的标准，它可以包含动 画、音频、视频及应用程序。网页设计者可以使用  Flash  创作出既漂亮又可改变尺寸的导 航界面以及其他奇特的效果，使网页更具表现力。特别是应用 Flash 技术实现动态播放网站 广告或新闻图片，并且加入随机的转场效果。 l 客户端脚本技术 客户端脚本技术是指嵌入到 Web 页面中的程序代码，这些程序代码是一种解释性的语 言，浏览器可以对客户端脚本进行解释。通过脚本语言可以实现以编程的方式对页面元素 进行控制， 从而增加页面的灵活性。 常用的客户端脚本语言有 JavaScript 和 VBScript。 目前， 应用最广泛的客户端脚本语言是 JavaScript。本书第五章将详细介绍。  1.3.2  服务器端应用的技术 在开发动态网站时， 离不开服务器端技术， 目前， 比较常用的服务器端技术主要有 CGI、  ASP、PHP、JSP 和 ASP.NET。 l  CGI  CGI（Common Gateway Interface） ，公共网关接口，是最早用来创建动态网页的一种技 术，可以使浏览器与服务器之间产生互动关系。它允许使用不同的语言来编写适合的  CGI  程序，该程序被放在 Web 服务器上运行。当客户端发出请求给服务器时，服务器根据用户 请求建立一个新的进程来执行指定的 CGI 程序，并将执行结果以网页的形式传输到客户端 的浏览器上显示。CGI  可以说是当前应用程序的基础技术，但这种技术编制方式比较困难 而且效率低下，因为每次页面被请求时，都要服务器重新将 CGI 程序编译成可执行的代码。 在 CGI 中使用最为常见的语言为 C/C++、 Java、 Perl （Practical Extraction and Report Language，

文件分析报告语言）。

l  ASP 

ASP 是动态服务器页面（Active Server Page） ，是微软公司开发的代替 CGI 脚本程序的

一种应用，它可以与数据库和其他程序进行交互，是一种简单、方便的编程工具，在  IIS  （Internet  Information  Services，Internet  信息服务）中运行。它通过在页面代码中嵌入  VBScript 或 JavaScript 脚本语言，来生成动态内容，ASP  文件中的脚本可在服务器上执行。 

ASP  文件的扩展名是 “.asp” 。 当浏览器请求某个  ASP  文件时， IIS 将这个请求传递至引擎。 

ASP  引擎会逐行地读取这个文件， 并执行文件中的脚本。 最后， ASP  文件将以纯  HTML  的 形式返回到浏览器。对于一些复杂的操作，ASP 可以调用存在于后台的 COM 组件来完成。 l  PHP  PHP 原始为 Personal Home Page 的缩写， 已经正式更名为 “PHP: Hypertext Preprocessor” 。  PHP 语法吸收了 C 语言、Java 和 Perl 的特点。是一种被广泛使用的开源脚本语言，PHP  脚 本在服务器上执行。与 ASP 一样可以在页面中加入脚本代码来生成动态内容。对于一些复 杂的操作可以封装到函数或类中。PHP  中提供了很多已经定义好的函数，例如提供的标准

的数据库接口，使得数据库连接方便，扩展性强。PHP  可以被多个平台支持，但被广泛应 用于 UNIX/Linux 平台。由于 PHP 本身的代码对外开放，并且经过许多软件工程师的检测， 因此到目前为止该技术具有公认的安全性能。 l  JSP  JSP（JavaServer  Pages）是基于 Java 的技术，用于创建可支持跨平台及跨 Web 服务器 的动态网页。JSP 页面中的 HTML 代码用来显示静态内容部分，嵌入到页面中的 Java 代码 与 JSP 标记用来生成动态的内容部分。 JSP 允许程序员编写自己的标签库来完成应用程序的 特定要求。JSP 可以被预编译，提高了程序的运行速度。另外，JSP 开发的应用程序经过一 次编译后，便可随时随地运行。所以在绝大部分系统平台中，代码无需做修改即可在支持  JSP 的任何服务器中运行。 l  ASP.NET  ASP.NET  是一个开发框架，用于通过  HTML、CSS、JavaScript  以及服务器脚本来构 建网页和网站。使用 Visual Basic.NET、C#、J#、ASP.NET、页面（Web Forms）进行编译， 可以提供比脚本语言更出色的性能表现。Web Forms 允许在网页基础上建立强大的窗体。当 建立页面时，可以使用  ASP.NET 服务端控件来建立常用的  UI 元素，并对它们编程来完成 一般的任务。这些控件允许开发者使用内建可重用的组件和自定义组件来快速建立  Web  Forms，使代码简单化。 

1.4 常用网上资源

为了方便读者学习，下面推荐一些学习 Java Web 应用开发的相关资源。使用这些资源， 可以帮助读者找到精通 Java Web 应用开发的捷径。  1.4.1  常用资源下载网 在开发 Java Web 应用程序时，通常需要到相关资源的官网中下载，下面给出一些常用 资源的下载网站。 l  JDK 官方网站  http://java.sun.com  l  Web 服务器 Tomcat 的官方网站  http://tomcat.apache.org  l  IDE 工具 Eclipse 的官方网站  http://www.eclipse.org  l 开源数据库 MySQL 的官方网站  http://www.mysql.com  l  JSTL 标准标签库的下载网站  http://java.sun.com/products/jsp/jstl  l  Struts 的官方网站  http://struts.apache.org  l  Spring 的官方网站  http://www.springframework.org  l  Hibernate 的官方网站  http://www.hibernate.org  l  iBatis 的官方网站  http://ibatis.apache.org

1.4.2  技术社区 为了方便 Java Web 程序员间的交流和学习，网上提供了很多技术社区。通过登录相关 的技术社区，读者可以很好地吸取他人的经验技巧，快速提高自己的编程水平。 l  CSDN 社区中心  http://bbs.csdn.net  l 开源中国社区  http://www.oschina.net  l  Java 中文站社区  http://www.java­cn.com  1.4.3  图书网站 下面提供一些国内比较大的图书网站，内容丰富、信息全面、查阅方便，是读者了解  Java Web 图书信息的窗口。 l 京东商城  http://www.jd.com  l 亚马逊  http://www.amazon.cn  l 中国互动出版社  http://www.china­pub.com  l 华初网  http://www.huachu.com.cn  l 当当图书网  http://book.dangdang.com

本章小结 

1．B/S 和 C/S 两种体系结构的优缺点 开发和维护成本方面：B/S 较低； 客户端负载：B/S 较低； 安全性：C/S 结构安全性较高。  2．Web 客户端技术  HTML 语言、CSS 样式表、Flash、Javascript 脚本语言。  3．服务端技术 几种服务端技术 CGI、ASP、PHP、JSP 和 ASP.NET 简介。

本章习题

简答题  1．简述 B/S 和 C/S 两种体系结构的优缺点。  2．简述 Web 的特点及应用。  3．请列举主要的动态网页设计技术。  4．试描述 Web 服务器向浏览器提供服务的基本过程。