《电子商务的应用开发技术》-第4章.ppt

《《电子商务的应用开发技术》-第4章.ppt》由会员分享，可在线阅读，更多相关《《电子商务的应用开发技术》-第4章.ppt（85页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、第四章第四章.Web应用客户端开发技术应用客户端开发技术对外经济贸易大学信息学院对外经济贸易大学信息学院第四章内容第四章内容l第一节第一节.C/S结构向结构向B/S结构演化结构演化 l第二节第二节.基于基于HTML的客户端开发技术的客户端开发技术l第三节第三节.基于基于JavaScript的客户端开发技术的客户端开发技术l第四节第四节.其它客户端开发技术其它客户端开发技术第四章内容lC/S结构向结构向B/S结构演化结构演化 l基于基于HTML的客户端开发技术的客户端开发技术 l基于基于JavaScript的客户端开发技术的客户端开发技术 l其它客户端开发技术其它客户端开发技术 第一节 C/S结

2、构向B/S结构演化 随着网络技术的发展，应用软件的结构也随着网络技术的发展，应用软件的结构也在不断发展，目前，典型的应用结构有在不断发展，目前，典型的应用结构有C/S（Client/Server,客户客户/服务器）结构、服务器）结构、B/S(Browser/Server，浏览器，浏览器/服务器服务器)结结构。其中构。其中B/S结构作为结构作为Web应用的一种主应用的一种主流技术得到广泛使用，单独的流技术得到广泛使用，单独的C/S应用相应用相对来说越来越少，而是更多地和对来说越来越少，而是更多地和B/S结合结合起来使用，以便满足大多数复杂应用的要起来使用，以便满足大多数复杂应用的要求。求。1.C

3、/S结构结构 C/S结构指的是客户结构指的是客户/服务器结构。这种结构的应用程序在服务器结构。这种结构的应用程序在结构上一般分为两部分，一部分称为客户端程序，通常结构上一般分为两部分，一部分称为客户端程序，通常安装在单独的一台机器上，这台机器被称为客户机，用安装在单独的一台机器上，这台机器被称为客户机，用户通过它来使用应用软件；另一部分称为服务器端程序，户通过它来使用应用软件；另一部分称为服务器端程序，一般部署在另一台独立的机器上，这台机器被称为服务一般部署在另一台独立的机器上，这台机器被称为服务器。客户端和服务器通过网络通讯，多台客户端可以同器。客户端和服务器通过网络通讯，多台客户端可以同时

4、访问一台服务器。时访问一台服务器。C/S结构的理念是胖客户端（客户端功能较强），它同时结构的理念是胖客户端（客户端功能较强），它同时利用了客户端机器和服务器的硬件计算能力，所有的业利用了客户端机器和服务器的硬件计算能力，所有的业务逻辑都是基于客户端的实现，客户端接受用户的请求，务逻辑都是基于客户端的实现，客户端接受用户的请求，并向数据库服务提出请求，后端的数据服务器完成数据并向数据库服务提出请求，后端的数据服务器完成数据的集中存储和管理。它响应客户的请求将数据提交给客的集中存储和管理。它响应客户的请求将数据提交给客户端，客户端再对数据进行集中处理和计算，然后将结户端，客户端再对数据进行集中处理

5、和计算，然后将结果显示给用户。在这种结构中，客户端机器要求有一定果显示给用户。在这种结构中，客户端机器要求有一定的计算能力，服务器的硬件也必须具有足够的处理能力。的计算能力，服务器的硬件也必须具有足够的处理能力。两层结构的应用程序（参见图两层结构的应用程序（参见图4-1）就是早期的）就是早期的C/S结构应结构应用程序模型，它主要由完成业务逻辑的客户机和存储业用程序模型，它主要由完成业务逻辑的客户机和存储业务数据的数据库服务器组成。务数据的数据库服务器组成。CS结构在技术上应用已经很成熟，如结构在技术上应用已经很成熟，如下是它的一些主要优点：下是它的一些主要优点：l交互性强：供用户使用的客户端交

6、互界交互性强：供用户使用的客户端交互界面功能较强，客户程序和服务器程序的面功能较强，客户程序和服务器程序的交互方便。交互方便。l网络通信量低：客户端和服务器端只传网络通信量低：客户端和服务器端只传输有效数据输有效数据,利于处理大量数据利于处理大量数据.l响应速度较快响应速度较快:这种应用一般在局域网内这种应用一般在局域网内使用，加上网络通信量低，所以服务器使用，加上网络通信量低，所以服务器对客户端的响应较快。对客户端的响应较快。尽管基于尽管基于CS结构可以开发出功能强的应用程序，结构可以开发出功能强的应用程序，但是但是C/S结构的应用程序也具有以下缺点：结构的应用程序也具有以下缺点：l软件维护

7、和功能升级较困难软件维护和功能升级较困难 由于应用逻辑和用户界面等代码混杂在一起，代码由于应用逻辑和用户界面等代码混杂在一起，代码的维护和功能升级比较困难，修改一些小的地方可的维护和功能升级比较困难，修改一些小的地方可能都会影响很大，增加新的功能也需要仔细考虑和能都会影响很大，增加新的功能也需要仔细考虑和原有的代码在结构上如何共存。原有的代码在结构上如何共存。l部署及维护困难，不利于扩展部署及维护困难，不利于扩展 CS结构的应用程序，要求在每个客户端都安装客结构的应用程序，要求在每个客户端都安装客户端应用程序，不能实现快速部署安装和配置，同户端应用程序，不能实现快速部署安装和配置，同时难于维护

8、，难于适应集中管理的要求，要求具有时难于维护，难于适应集中管理的要求，要求具有一定专业水准的技术人员去完成安装和维护。通常一定专业水准的技术人员去完成安装和维护。通常这种结构多用于小型局域网，不利于扩展。这种结构多用于小型局域网，不利于扩展。l数据安全性不好数据安全性不好 因为客户端程序可直接访问服务器上的数据库（很因为客户端程序可直接访问服务器上的数据库（很多应用都是这样），那么，在客户端计算机上的其多应用都是这样），那么，在客户端计算机上的其他应用程序也可以非法访问数据库，这样数据库的他应用程序也可以非法访问数据库，这样数据库的安全性受到威胁。安全性受到威胁。2.多层多层C/S结构结构 软

9、件多层结构一般将用户界面功能、业务逻辑软件多层结构一般将用户界面功能、业务逻辑功能和数据库的数据处理等功能分散在不同软功能和数据库的数据处理等功能分散在不同软件层次上，每个层次上关注的功能不同，典型件层次上，每个层次上关注的功能不同，典型的如三层的如三层C/S结构将应用分成三层：用户界面结构将应用分成三层：用户界面层、应用逻辑层和数据库层（参见图层、应用逻辑层和数据库层（参见图4-2）。用）。用户界面层主要完成用户的交互式界面，用于系户界面层主要完成用户的交互式界面，用于系统输入和输出；应用逻辑层一般部署在应用服统输入和输出；应用逻辑层一般部署在应用服务器上，完成应用逻辑和控制等功能，系统的务

10、器上，完成应用逻辑和控制等功能，系统的复杂性也主要体现在这一层；最后的数据库服复杂性也主要体现在这一层；最后的数据库服务器存储大量的数据信息和数据逻辑，所有与务器存储大量的数据信息和数据逻辑，所有与数据有关的安全、完整性控制、数据的一致性、数据有关的安全、完整性控制、数据的一致性、并发操作等都由它完成。并发操作等都由它完成。多层结构设计给软件开发带来以下好处：多层结构设计给软件开发带来以下好处：l可重用性可重用性 因为有了业务层的独立存在，业务层中的各种业务因为有了业务层的独立存在，业务层中的各种业务单元可以被不同的应用程序使用单元可以被不同的应用程序使用,可复用性强。可复用性强。l配置的灵活

11、性配置的灵活性 软件系统被分成了独立的多层，可以根据企业对于软件系统被分成了独立的多层，可以根据企业对于业务的功能需求和性能需求灵活地配置各层次的物业务的功能需求和性能需求灵活地配置各层次的物理位置，各层的硬件要求也可以根据应用规模的变理位置，各层的硬件要求也可以根据应用规模的变化独立调整。化独立调整。l开发并行性开发并行性 只要事先设计好各层之间的接口，各层就可以在约只要事先设计好各层之间的接口，各层就可以在约定好的接口下进行并行开发。定好的接口下进行并行开发。l系统升级容易，软件维护难度小系统升级容易，软件维护难度小 当软件需求变更时或技术进步时，只需要更改相应当软件需求变更时或技术进步时

12、，只需要更改相应层中的组件，在保证接口不变的情况下，不会影响层中的组件，在保证接口不变的情况下，不会影响系统的其他部分。系统的其他部分。当业务规则变化时，只要更新单当业务规则变化时，只要更新单一的业务层，对其他层影响不大，软件维护成本较一的业务层，对其他层影响不大，软件维护成本较低。低。3.B/S结构结构 B/S（Browser/Server）结构代表浏览器和服务器结构。）结构代表浏览器和服务器结构。它是随着它是随着Internet技术的兴起，对技术的兴起，对C/S结构的一种改进的结构的一种改进的结构。在结构。在B/S结构下，用户工作界面是通过结构下，用户工作界面是通过Web浏览器来浏览器来实

13、现，一般实现，一般Web浏览器和浏览器和HTML文档以及一些脚本等共文档以及一些脚本等共同完成用户界面功能，主要的业务逻辑在同完成用户界面功能，主要的业务逻辑在Web 服务器端实现服务器端实现(Web服务器也可能扩充，比如一些支持服务器也可能扩充，比如一些支持Java技术的容器技术的容器)。用户通过浏览器向分布在网络上的。用户通过浏览器向分布在网络上的Web服务器发出请求，服务器发出请求，Web服务器处理请求，可能会执行服务器处理请求，可能会执行其它的应用程序，或者访问数据库并完成数据处理、最其它的应用程序，或者访问数据库并完成数据处理、最后将结果返回给后将结果返回给Web浏览器。浏览器。B/

14、S结构的应用一般采用结构的应用一般采用3层结构，分别是用户界面层，层结构，分别是用户界面层，应用层和数据库层应用层和数据库层(参见图参见图4-3三层三层)。用户界面层在浏览。用户界面层在浏览器中执行。器中执行。B/S三层结构和三层三层结构和三层C/S体系结构的一个很大体系结构的一个很大不同点是用户界面层的区别，在不同点是用户界面层的区别，在B/S结构中，用户界面层结构中，用户界面层一般在一般在Web服务器上部署，而三层服务器上部署，而三层C/S结构它一般在客户结构它一般在客户机本地。另外，机本地。另外，B/S三层结构采用了三层结构采用了Web服务器。服务器。B/S结构主要优点如下：结构主要优点

15、如下：l分布性强、维护方便：所有的应用程序都在分布性强、维护方便：所有的应用程序都在Web服务器上安装，且只有一份。大大简化了服务器上安装，且只有一份。大大简化了客户端，只要装上操作系统、网络协议软件以客户端，只要装上操作系统、网络协议软件以及浏览器即可。及浏览器即可。l已经形成了标准的开发技术（已经形成了标准的开发技术（JAVA技术，技术，.Net技术），广泛的应用服务器支持，相对技术），广泛的应用服务器支持，相对B/S应用来说，开发应用的难度已经降低。应用来说，开发应用的难度已经降低。lB/S结构提供了异种机、异种网、异种应用服结构提供了异种机、异种网、异种应用服务的联机、联网、统一服务的

16、开放性技术基础。务的联机、联网、统一服务的开放性技术基础。B/S结构也有如下缺点：结构也有如下缺点：l数据安全性需要单独解决数据安全性需要单独解决l数据传输速度慢数据传输速度慢l软件的个性化特点明显降低软件的个性化特点明显降低l某些功能较难实现：例如大量的数据输某些功能较难实现：例如大量的数据输入、报表制作等。入、报表制作等。4.C/S和和B/S结合使用结合使用 B/S技术尽管得到广泛认同，成为软件开发技术的主流，但是传统的技术尽管得到广泛认同，成为软件开发技术的主流，但是传统的C/S体系结构并非一无是处，很多时候，体系结构并非一无是处，很多时候，C/S和和B/S可以结合使用，这可以结合使用，

17、这样充分发挥二者的优势，弥补彼此的不足。样充分发挥二者的优势，弥补彼此的不足。一般信息发布多采用一般信息发布多采用B/S结构，保持了结构，保持了B/S结构瘦客户端的优点。客户结构瘦客户端的优点。客户机只需要具有机只需要具有WWW浏览器就可以访问应用。浏览器就可以访问应用。数据库访问多采用数据库访问多采用C/S结构。实际上，前面提到的三层结构。实际上，前面提到的三层BS结构中，结构中，Web服务器中的应用逻辑本身就是使用了服务器中的应用逻辑本身就是使用了C/S技术和数据库交互。在技术和数据库交互。在Web服务器上并不存在完全采用服务器上并不存在完全采用C/S结构带来的客户端维护工作量大结构带来的

18、客户端维护工作量大等缺点。在这里（等缺点。在这里（Web服务器中应用逻辑）采用服务器中应用逻辑）采用C/S结构可以构造非结构可以构造非常复杂的应用。常复杂的应用。另外，如果浏览器（另外，如果浏览器（A方）的一个业务请求到达方）的一个业务请求到达Web服务器，在服务器，在Web服务器端的程序（服务器端的程序（B方）还需要和其他应用（方）还需要和其他应用（C方）交互，以获取需方）交互，以获取需要的信息而完成这个业务请求，这时，由于要的信息而完成这个业务请求，这时，由于Web服务器端的程序服务器端的程序（B）是没有界面的程序，它一般不会采用）是没有界面的程序，它一般不会采用B/S结构去和其他应用结构

19、去和其他应用（C）通信，它往往采用）通信，它往往采用C/S结构把自己（结构把自己（B）作为一个客户端，向其）作为一个客户端，向其他应用他应用(C)方发起请求以获取数据，然后把获取的数据返回给浏览器方发起请求以获取数据，然后把获取的数据返回给浏览器（A）。）。B/S和和C/S这两种软件体系结构的有机结合，可以扬长避短，有效地发这两种软件体系结构的有机结合，可以扬长避短，有效地发挥了各自的优势。在应用开发时候要灵活运用它们。挥了各自的优势。在应用开发时候要灵活运用它们。第四章内容第四章内容l第一节第一节.C/S结构向结构向B/S结构演化结构演化 l第二节第二节.基于基于HTML的客户端开发技术的客

20、户端开发技术l第三节第三节.基于基于JavaScript的客户端开发技术的客户端开发技术l第四节第四节.其它客户端开发技术其它客户端开发技术第二节第二节 基于基于HTML的客户端开发的客户端开发技术技术 1.HTML的特点的特点 HTML及其技术具有跨平台性、易用性、以及瘦客户及其技术具有跨平台性、易用性、以及瘦客户端等特性。端等特性。1)跨平台性跨平台性 采用采用HTML制作的网页一般需要发布到制作的网页一般需要发布到WWW服务器服务器供用户访问，无论是供用户访问，无论是UNIX操作系统、操作系统、Windows操作系操作系统还是统还是Linux操作系统，都有很多操作系统，都有很多WWW服务

21、器软件可服务器软件可以在它们之上运行。开发的以在它们之上运行。开发的HTML网页可以发布在任网页可以发布在任何何WWW服务器上，而不受操作系统和服务器上，而不受操作系统和WWW服务器服务器的限制；另外，的限制；另外，HTML的语法是由的语法是由W3C(World Wide Web Consortium)定义和维护的，客户端的浏览器如定义和维护的，客户端的浏览器如IE（Internet Explorer，微软浏览器软件）、，微软浏览器软件）、Navagator（Netscape浏览器软件）和其他的一些浏览浏览器软件）和其他的一些浏览器软件都支持，这样也不受用户浏览器差异的限制器软件都支持，这样也

22、不受用户浏览器差异的限制。2)易用性易用性 易于使用，无论是编写易于使用，无论是编写HTML页面还是访问页页面还是访问页面都比较简单。很多用户和开发人员都乐于放弃面都比较简单。很多用户和开发人员都乐于放弃具有复杂的用户界面的具有复杂的用户界面的C/S结构的应用，而愿意结构的应用，而愿意使用基于使用基于HTML的拥有简单界面的应用。的拥有简单界面的应用。3)瘦客户应用瘦客户应用 采用采用HTML及其扩展技术（如及其扩展技术（如Servlet，JSP，CGI，ASP等）开发的应用，属于典型的瘦客户等）开发的应用，属于典型的瘦客户应用，甚至零客户端应用。用户的机器上除了要应用，甚至零客户端应用。用户

23、的机器上除了要求安装有浏览器（微软操作系统自带浏览器）外求安装有浏览器（微软操作系统自带浏览器）外，不需再安装其他软件。基于，不需再安装其他软件。基于HTML的应用程的应用程序部署成本低而且应用的结构简单。序部署成本低而且应用的结构简单。2.HTML标记在开发中的应用标记在开发中的应用 1)静态信息发布静态信息发布 信息共享、信息发布是信息共享、信息发布是WWW及及HTML技术发明的最技术发明的最初目的，信息发布目前仍然是初目的，信息发布目前仍然是HTML最广泛的应用。最广泛的应用。通过编写包含各种信息的简单的通过编写包含各种信息的简单的HTML脚本，然后将脚本，然后将脚本放到脚本放到WWW服

24、务器上服务器上(发布发布)，客户就可以通过一，客户就可以通过一个被公布的个被公布的URL访问这些信息。很多信息可能就是一访问这些信息。很多信息可能就是一次简单的发布，特别是很多企业或者个人的信息本身次简单的发布，特别是很多企业或者个人的信息本身比较少，对信息发布没有高的要求，对历史信息也不比较少，对信息发布没有高的要求，对历史信息也不需要维护，这种需求单独使用需要维护，这种需求单独使用HTML就可以满足需求。就可以满足需求。如果通过一些网页开发工具（如如果通过一些网页开发工具（如FrontPage，Dreamweaver）可以更加方便的进行信息格式化。更）可以更加方便的进行信息格式化。更为简单

25、的是，为简单的是，Word字处理软件是使用最广泛的编辑软字处理软件是使用最广泛的编辑软件，使用它可以直接将编辑的内容保存为件，使用它可以直接将编辑的内容保存为HTML格式格式的网页，然后方便地发布。的网页，然后方便地发布。2)HTML与服务器端程序交互与服务器端程序交互 对于有些信息发布应用，出于各种需要，可能需对于有些信息发布应用，出于各种需要，可能需要服务器端的程序进行一些管理和逻辑处理。要服务器端的程序进行一些管理和逻辑处理。HTML主要是通过主要是通过Form标记和链接去和后端服务标记和链接去和后端服务器应用进行交互的。器应用进行交互的。l HTML中的中的Form标记标记 在各种在各

26、种HTML标记里面，标记里面，Form标记（也叫表单标标记（也叫表单标记）是最重要的元素之一。记）是最重要的元素之一。Form标记主要用于接标记主要用于接收用户的输入，同时将接收的输入信息提交给后收用户的输入，同时将接收的输入信息提交给后台的处理程序，处理程序可能是台的处理程序，处理程序可能是CGI程序、程序、JSP或或者者ASP等任意的服务器端程序。在基于浏览器的等任意的服务器端程序。在基于浏览器的Web应用程序中，应用程序中，Form标记是最主要的输入手段，标记是最主要的输入手段，而输入（和输出）是应用程序的重要功能，因此，而输入（和输出）是应用程序的重要功能，因此，设计和开发设计和开发F

27、orm是开发是开发Web应用的主要工作之一。应用的主要工作之一。lHTML中的链接元素中的链接元素 HTML中的链接主要是用于组织页面，链接除了可以中的链接主要是用于组织页面，链接除了可以链接一些静态的网页和图片外，它也可以链接到后台链接一些静态的网页和图片外，它也可以链接到后台的的Servlet，JSP，CGI，ASP等一类的处理程序，所以，等一类的处理程序，所以，链接也是和后台交互的重要手段之一。通过链接和后链接也是和后台交互的重要手段之一。通过链接和后台的交互与通过台的交互与通过Form和后台交互有以下不同：和后台交互有以下不同：链接只能使用链接只能使用Get方式；而方式；而Form通过

28、通过method属性可以属性可以使用使用Get，也可以使用，也可以使用Post。链接提交的信息是固定的，链接里面可能会包含一些链接提交的信息是固定的，链接里面可能会包含一些参数（参数（“名字名字/值值”对，如一个链接的对，如一个链接的URL为为http:/ HTML本身是静态的，用于发布共享的信息。实际应用中，本身是静态的，用于发布共享的信息。实际应用中，Web应用需要提供动态的信息，这时需要服务器端的程序进应用需要提供动态的信息，这时需要服务器端的程序进行一些管理和逻辑处理。比如，应用需要提供以下支持：行一些管理和逻辑处理。比如，应用需要提供以下支持：l应用要根据用户的输入给出响应。应用要根

29、据用户的输入给出响应。l应用的信息来自数据库，而数据库里的数据会定期或者不定应用的信息来自数据库，而数据库里的数据会定期或者不定期变化，每次发布时候都要将数据库最新的数据发布。期变化，每次发布时候都要将数据库最新的数据发布。l应用的有些信息是有权限控制的，不同权限的人看到的信息应用的有些信息是有权限控制的，不同权限的人看到的信息不同，等等。不同，等等。这些需求非常普遍，通过和这些需求非常普遍，通过和Servlet，JSP，CGI，ASP等服等服务器端技术的结合可以实现这些动态的效果。无论是务器端技术的结合可以实现这些动态的效果。无论是Servlet，JSP，CGI还是还是ASP，通过链接或者，

30、通过链接或者Form都可以由客户端都可以由客户端的的HTML调用，在这些服务器端执行的程序（或者脚本）都调用，在这些服务器端执行的程序（或者脚本）都可以通过调用各自的提供的编程接口获取前端提交来的数据，可以通过调用各自的提供的编程接口获取前端提交来的数据，然后对数据进行处理，最后给出处理的响应。针对浏览器提然后对数据进行处理，最后给出处理的响应。针对浏览器提交的请求，响应一般是另一个新的交的请求，响应一般是另一个新的HTML页面，新的页面，新的HTML页面可以包含任何页面可以包含任何HTML标记，并可以继续和后端的应用进标记，并可以继续和后端的应用进行交互。行交互。4.HTML技术的局限性技术

31、的局限性 尽管尽管HTML技术有它与生俱来的优点，但是某些技术有它与生俱来的优点，但是某些应用系统并不完全适合采用应用系统并不完全适合采用HTML技术，如：技术，如：l一些较复杂的应用软件可能要求多次提取网页来一些较复杂的应用软件可能要求多次提取网页来完成一项事务处理，这往往导致交互速度无法接完成一项事务处理，这往往导致交互速度无法接受。受。l一些应用要求有复杂的用户界面。一些应用要求有复杂的用户界面。l一些应用要完成复杂的计算，这也不是一些应用要完成复杂的计算，这也不是HTML的的特长。特长。l使用使用HTML，一些简单的交互活动也可能需要用，一些简单的交互活动也可能需要用很多的脚本来完成。

32、很多的脚本来完成。l通过通过Form等和后台交互，等和后台交互，HTML网页只能通过简网页只能通过简单的单的“名字名字/值值”对和服务器端的应用传输数据，对和服务器端的应用传输数据，数据封装能力较差。数据封装能力较差。3.表单标记表单标记 表单是表单是HTML页面和服务器端程序交互的核心。页面和服务器端程序交互的核心。表单相关的常用标记如下：表单相关的常用标记如下：lllll 通过这些标记，可以实现包含各种界面元素的通过这些标记，可以实现包含各种界面元素的用户交互界面，用于用户输入信息，提交给后用户交互界面，用于用户输入信息，提交给后台处理。比如前面提到的，对于台处理。比如前面提到的，对于Fo

33、rm各种标记各种标记的学习，重点要掌握它们的用途，各种属性的学习，重点要掌握它们的用途，各种属性（特别是（特别是name属性，属性，value属性，属性，type属性）及属性）及属性的作用。属性的作用。1)标记对标记对 l作用作用 标记对的作用是定义表单的开始和结束位置，属于处理表单的标记对的作用是定义表单的开始和结束位置，属于处理表单的其它标记都应该放在这对标记之间。由这些标记的适当组合来创建一个表单，用其它标记都应该放在这对标记之间。由这些标记的适当组合来创建一个表单，用户通过户通过Form及其子标记输入信息并提交给服务器端程序处理，在及其子标记输入信息并提交给服务器端程序处理，在Form

34、标记中可标记中可以指定服务器端的处理程序。以指定服务器端的处理程序。l特点特点 标记对要成对使用，标记对要成对使用，标记具有标记具有ACTION、METHOD和和TARGET属性。属性。lACTION属性属性 ACTION指定处理程序，其参数值是该处理程序的程序名及其网络路径（网址或指定处理程序，其参数值是该处理程序的程序名及其网络路径（网址或相对路径相对路径)，如：，如：，当用，当用户提交表单时，服务器将执行网址户提交表单时，服务器将执行网址http:/ METHOD属性用来定义处理程序从表单中获得信息的方式，可取值为属性用来定义处理程序从表单中获得信息的方式，可取值为 GET 和和 POS

35、T 的其中一个。的其中一个。GET方式是处理程序从当前方式是处理程序从当前HTML文档中获取数据，然而这种方式传送的数据量文档中获取数据，然而这种方式传送的数据量是有所限制的，一般限制在是有所限制的，一般限制在1KB以下。以下。POST方式与方式与GET方式相反，它是当前的方式相反，它是当前的HTML文档把数据传送给处理程序，传送的数据量要比使用文档把数据传送给处理程序，传送的数据量要比使用GET方式的大的多。方式的大的多。TARGET属性用来指定目标窗口或目标框架（属性用来指定目标窗口或目标框架（Html的的Frame）。当提交一个请求）。当提交一个请求给服务器后，一般服务器要给客户端一个响

36、应，这个响应可能是一个新的页面，给服务器后，一般服务器要给客户端一个响应，这个响应可能是一个新的页面，新的页面可以在提交窗口显示，并且可以指定显示的框架；响应也可以在一个新新的页面可以在提交窗口显示，并且可以指定显示的框架；响应也可以在一个新的窗口显示，通过的窗口显示，通过TARGET属性可以实现这些功能。属性可以实现这些功能。2)标记标记 l作用作用 好的软件总是会为用户提供方便的操作界面，比如文本框、好的软件总是会为用户提供方便的操作界面，比如文本框、复选框等。复选框等。HTML的的标记就可以提供这样的功标记就可以提供这样的功能，它用来定义一个用户输入区。用户可以使用能，它用来定义一个用户

37、输入区。用户可以使用INPUT标记中的标记中的text，checkbox，hidden，pass word，radio进进行输入，然后提交给服务器端程序处理。类型为行输入，然后提交给服务器端程序处理。类型为submit的的元素用于将输入的表单内容提交给服务器；类型为元素用于将输入的表单内容提交给服务器；类型为reset的的元素将表单内容全部清除，以便重新填写。元素将表单内容全部清除，以便重新填写。l特点特点 标记不是成对使用的。它必须放在标记不是成对使用的。它必须放在标记对之间。标记对之间。标记的标记的TYPE属性的语法为：属性的语法为：l 其引号内应该输入参数值，可以在其引号内应该输入参数值

38、，可以在8个参数值中选择一个，个参数值中选择一个，TYPE属性的不同的值分别提供了八种类型的输入区域，属性的不同的值分别提供了八种类型的输入区域，其各自的参数值、输入区域的类型和形状请看下边其各自的参数值、输入区域的类型和形状请看下边 表TYPE属性的参数值、输入区域的类型和形状属性的参数值、输入区域的类型和形状 3）标记对标记对 l作用作用 标记对用来创建一个下拉列表标记对用来创建一个下拉列表框或可以复选的列表框。用户可以在框或可以复选的列表框。用户可以在SELECT中选择中选择1个或者多个输入项目，提交给服务器端程序处理。个或者多个输入项目，提交给服务器端程序处理。l特点特点 标记对总是成

39、对使用，放在标记对总是成对使用，放在标记对之间。标记对之间。标记具有标记具有MULTIPLE、NAME和和SIZE属性。属性。l的属性的属性 在在的属性中，的属性中，MULTIPLE属性不用赋值，属性不用赋值，直接加入直接加入标记中即可使用，加入了此属性后标记中即可使用，加入了此属性后列表框就成了可多选的了。列表框就成了可多选的了。NAME属性的值是此列表框的名字。属性的值是此列表框的名字。SIZE属性用来设置列表的高度，缺省时值为属性用来设置列表的高度，缺省时值为1，若没有，若没有设置这个属性，显示的将是一个弹出式的列表框。设置这个属性，显示的将是一个弹出式的列表框。4）标记标记 l作用作用

40、 对于对于标记对所创建的列表框，会有多个选标记对所创建的列表框，会有多个选项，其中每个选项显示的具体内容，以及这些选项中的默认选项项，其中每个选项显示的具体内容，以及这些选项中的默认选项都是由都是由标记来规定的。标记来规定的。l特点特点 标记不成对使用，放在标记不成对使用，放在标记对标记对之间。它有之间。它有SELECTED和和VALUE两个属性。两个属性。VALUE属性指定列属性指定列表框多个选项中的一个选项显示的具体内容。表框多个选项中的一个选项显示的具体内容。SELECTED属性指属性指定列表框多个选项中的一个选项作为默认的选项。定列表框多个选项中的一个选项作为默认的选项。标标记的属性值

41、要传送到服务器上，服务器通过调用记的属性值要传送到服务器上，服务器通过调用区域区域的名字的的名字的VALUE属性来获得该区域选中的数据项。使用属性来获得该区域选中的数据项。使用SELECT和和OPTION输入信息并提交给服务器的时候，要特别注意，显示输入信息并提交给服务器的时候，要特别注意，显示的内容和提交的内容可能不同，因为显示和提交的内容分别在两的内容和提交的内容可能不同，因为显示和提交的内容分别在两个位置指定，显示要求直观，容易理解，而提交的被程序处理的个位置指定，显示要求直观，容易理解，而提交的被程序处理的内容没有这些要求。比如在一个内容没有这些要求。比如在一个Form的的SELECT

42、标记中包含了一标记中包含了一个个OPTION标记，定义为：标记，定义为：AC米兰，米兰，用户在界面上看到的用户在界面上看到的“AC米兰米兰”,而如果而如果Form被提交，那么名字为被提交，那么名字为qd的的SELECT提交给服务器端的值为提交给服务器端的值为“ml”，而不是，而不是“AC米兰米兰”。标记示例标记示例 5）标记对标记对 用来创建一个用来创建一个可以输入多行文字的文本框，此标记对用于可以输入多行文字的文本框，此标记对用于标记对之间。标记对之间。具有具有NAME、COLS和和ROWS属性。属性。COLS和和ROWS属性分别用来设置文本属性分别用来设置文本框的列数和行数，这里列与行是以

43、字符数为单框的列数和行数，这里列与行是以字符数为单位的。如果客户端要提交大量的文本信息给服位的。如果客户端要提交大量的文本信息给服务器端，使用务器端，使用TEXTAREA是一个选择。请看是一个选择。请看下边表：下边表：除了上面介绍的标记外，还有一些其他的标记，使用相对较少，限于篇除了上面介绍的标记外，还有一些其他的标记，使用相对较少，限于篇幅，这里不再一一介绍，实际开发中如果使用到，可参考其他资料。另幅，这里不再一一介绍，实际开发中如果使用到，可参考其他资料。另外，外，Form相关元素还有事件这样的属性，比如用户用鼠标单击以下对相关元素还有事件这样的属性，比如用户用鼠标单击以下对象时，会产生象

44、时，会产生onClick事件：事件：button（按钮对象）（按钮对象）checkbox（复选按钮）（复选按钮）radio（单选按钮）（单选按钮）reset buttons（重新填写（重新填写Form按钮）按钮）submit buttons（提交按钮）（提交按钮）其他的事件包括：其他的事件包括：文本框内容改变会引发事件文本框内容改变会引发事件onChange 当当Text或或TextArea对象中的文字被加亮后，引发对象中的文字被加亮后，引发onSelect事件事件当用户单击当用户单击Text或或TextArea以及以及select对象时，此时该对象成为激活对象。对象时，此时该对象成为激活对象

45、。产生产生onFocus获得焦点事件获得焦点事件当当Text对象、对象、TextArea对象及对象及select对象不再拥有焦点，引发失去焦点对象不再拥有焦点，引发失去焦点onBlur事件事件 类似的事件发生时，可以在属性中指定调用类似的事件发生时，可以在属性中指定调用JavaScript脚本动态处理，在脚本动态处理，在JavaScript中可以操作中可以操作Form对象并提交对象并提交Form内容给服务器，进一步的说内容给服务器，进一步的说明，请参看明，请参看JavaScript部分。部分。4.综合示例综合示例 下面给出一个售书网站的前端购物流程中下面给出一个售书网站的前端购物流程中的典型的

46、的典型的HTML页面。包括：新用户注册，页面。包括：新用户注册，商品搜索，购物综合面。商品搜索，购物综合面。1）新用户注册）新用户注册 对许多网站而言，在使用其提供的功能的对许多网站而言，在使用其提供的功能的时候，都需要先注册，新用户注册是用户时候，都需要先注册，新用户注册是用户常用的一个功能，有很多种形式，以下是常用的一个功能，有很多种形式，以下是一种常见的注册方式，其界面见图，它可一种常见的注册方式，其界面见图，它可以用页面开发工具，或者采用手工编码来以用页面开发工具，或者采用手工编码来实现。下面采用实现。下面采用HTML来编写其程序。来编写其程序。l下面是其下面是其HTML代码，其网页见

47、图代码，其网页见图4-4：lll客户信息客户信息llll l 会员名称：会员名称：l *l l l 密码：密码：l *密码为一个密码为一个 4-8位的数字或英文字母位的数字或英文字母l l l 重复输入密码：重复输入密码：l *l l l 真实姓名：真实姓名：l *ll l l 性别：性别：l l l 男男l 女女l l l l l l 联系电话：联系电话：l *l l l 移动电话：移动电话：l l l l E-Mail：l *l ll 所在地区：所在地区：l ll请选择请选择.l北京北京l广东广东l香港香港l澳门澳门l台湾台湾l中国以外地区中国以外地区l*l l l l 详细地址：详细地址

48、：l *l （为方便我们及时将书送到您手上，请您提（为方便我们及时将书送到您手上，请您提供尽可能详细的地址及所在单位名）供尽可能详细的地址及所在单位名）l l l l 邮政编码：邮政编码：l *l l l 工作单位：工作单位：l l l l l l l l l l l ll l 客服电话：客服电话：(010)64491861 ；(010)64491862l 传真：传真：(010)-64491863   客户服务客户服务 E-mail： l l llll 2)商品搜索商品搜索 商品搜索也是用户常用的一个功能，有商品搜索也是用户常用的一个功能，有很多种搜索形式，以下以

49、通过关键字搜很多种搜索形式，以下以通过关键字搜索的前端页面作为示例。它可以用页面索的前端页面作为示例。它可以用页面开发工具，或者手工编码实现。下面是开发工具，或者手工编码实现。下面是采用采用HTML编写的程序，其界面见下图。编写的程序，其界面见下图。llllll l l 商品搜索商品搜索l l l l 类别：类别：l l l 所有类别所有类别l 图书图书l 影视影视l 音乐音乐l 游戏游戏l 软件软件l 虚拟卡虚拟卡l 时尚时尚l 专卖专卖l l l l l 关键字：关键字：l l l l l l l l l l llll订单查询界面可以采用类似的界面，输入订单号查询处理情订单查询界面可以采用

50、类似的界面，输入订单号查询处理情况。另外，可以输入会员号码查询该会员所有的订单情况。况。另外，可以输入会员号码查询该会员所有的订单情况。3）购物综合页面）购物综合页面 当客户访问到一个网站的主页面，可以当客户访问到一个网站的主页面，可以通过页面合理的导航功能，点击其上的通过页面合理的导航功能，点击其上的链接完成购物功能，一般购物主页面都链接完成购物功能，一般购物主页面都包含许多购物链接。我们看一下简化后包含许多购物链接。我们看一下简化后的新浪商城的购物主页面，复杂的页面的新浪商城的购物主页面，复杂的页面实际是前面介绍的各类标记的综合运用，实际是前面介绍的各类标记的综合运用，特别是特别是TABL