电子商务系统设计与实现(第9章)

1、电子商务系统设计与实现毛郁欣maoyuxin浙江工商大学计算机与信息工程学院课程的主要内容第1章 概论第2章 电子商务系统分析与设计基础第3章 电子商务系统开发基础第4章 电子商务系统规划第5章 电子商务系统分析第6章 电子商务系统设计第7章 电子商务应用系统设计第8章 数据库实现第9章 电子商务网站开发技术第10章 电子商务系统的开发模式第11章 电子商务系统的测试与维护9.1 电子商务网站开发技术9.1 HTML语言9.2 JavaScript9.3 AJAX9.4 Java AppletHTML（超文本标记语言，HyperText Markup Language）是为创建网页而设计的一种

2、标记语言提供了一种描述文档中文本信息结构的方法HTML文件使用.htm或.html作为文件扩展名可用文本编辑软件或所见即所得的网页创作工具来创建HTML文件9.1 HTML语言1. HTML基本语法和用于说明一个HTML文档的开始和结束；和用于说明HTML文档的头信息部分；和用于说明HTML文档的文档体部分； 文档头 文档体 HTML文件的基本结构9.1 HTML语言HTML标记的主要类型 结构性标记：描述HTML文档中文本的意图 标记HTML内容的开始和结束。标记HTML文档头，包含不在正文中显示的关键字、标题和脚本等。标记HTML文档的标题。标记HTML文档正文的开始和结束。9.1 HTM

3、L语言1. HTML基本语法HTML标记的主要类型 外观性标记；描述文字的外观 例如：重要公告 9.1 HTML语言1. HTML基本语法HTML标记的主要类型 超文本标记：将文档的一部分关联到其他文档 例如：搜索引擎 9.1 HTML语言1. HTML基本语法HTML标记的主要类型 注释标记：在文档中插入注释语句 例如：9.1 HTML语言1. HTML基本语法HTML标记的主要类型 框架页面标记：描述网页如何显示框架页面 例如： 9.1 HTML语言1. HTML基本语法统一资源定位器（URL，Uniform Resource Locator） URL格式2. URL与超链接9.1 HTM

4、L语言统一资源定位器URL格式协议：表示访问网络资源的方法和途径。登录信息：包括访问主机的用户名和密码。主机名：目的主机名称或IP地址。端口：目的主机的端口号。路径：指明被访问资源的位置。查询请求：通过URL向服务器传递参数。片段：以“#”开始，用于标识被访问资源中的部分资源。 2. URL与超链接9.1 HTML语言超链接 创建锚链的语法是要显示的文字例：Apache 搜索 2. URL与超链接9.1 HTML语言表格由和标记定义。表格行由和标记定义单元格由和或和标记定义。和标记的width和height属性可用于定义表格和单元格的宽度和高度。标记的colspan和rowspan属性可用于表

5、示单元格的合并。 9.1 HTML语言3. 表格表格示例 9.1 HTML语言3. 表格合并单元格示例 第1行，第1列 第1行的第2、3列 第2行及第3行的第1列 第2行第2列 第2行第3列 第3行第2列 第3行第3列 9.1 HTML语言3. 表格表单由和标记定义基本语法结构 第一节 HTML语言4. 表单与表单元素的属性action：设定处理表单数据的程序的URLmethod：指定数据传送到服务器的方式。name：设定表单的名称。onrest和onsubmit：设定了在按下相应按钮之后要执行的客户端程序。target：指定数据结果显示在哪个窗口。9.1 HTML语言4. 表单与表单元素标记

6、 用于在表单中提供单行文本框、密码框、单选按钮、复选框、普通按钮、提交按钮、重置按钮和隐藏域等表单元素 语法格式 9.1 HTML语言4. 表单与表单元素标记 在表单中插入一个下拉列表 语法格式 9.1 HTML语言4. 表单与表单元素标记 该标记为下拉列表中一个选项语法格式 9.1 HTML语言标记 用于在表单中提供一个可输入多行文本信息的输入框 语法格式 9.1 HTML语言4. 表单与表单元素框架主要被用于规划网页布局 标记决定如何划分框架。 标记用于定义每个框架中放入什么文件 9.1 HTML语言5. 框架框架代码示例 第一节 HTML语言5. 框架混合框架代码示例 9.1 HTML语

7、言5. 框架JavaScript的特点是一种脚本语言 基于对象 事件驱动 安全 平台无关 9.2 JavaScriptwindow对象 是客户端JavaScript最高层对象之一 是其他大部分对象的共同祖先 window对象的创建遇到 body、frameset或frame元素时，会自动建立window对象的实例也可由window.open()方法创建 9.2 JavaScript1. JavaScript常用对象screen对象包含一些只读属性，用户可以通过这些属性获取当前屏幕的设置信息。 9.2 JavaScript1. JavaScript常用对象9.2.1 JavaScript常用对象

8、navigator对象 可让开发人员判断用户使用的浏览器的版本，浏览器能够处理的MIME类型以及浏览器上安装的插件种类等内容。所有属性值都是只读的，不能修改其内容。navigator对象由客户端的JavaScript运行时引擎自动创建。document对象 包含了当前文档的信息，并且提供了将HTML输出给用户的功能。 创建document对象只需要使用标记的标准HTML语法，并在标记中包含JavaScript的事件处理句柄即可。 9.2 JavaScript1. JavaScript常用对象表单（Form）是HTML定义的标准表单控件的集合，在特定的表单中可以放入各种表单控件。9.2 Java

9、Script2. JavaScript中的表单与事件处理 请输入你的用户名和密码 用户名： 密码： 一个名为accountBean的表单对象示例9.2 JavaScript2. JavaScript中的表单与事件处理表单（Form）若一个表单中多个元素的name属性值相同，则系统会自动地以name属性的值来创建一个数组。 用户名1： 用户名2： 用户名3： . 用户名n：for (i=0;i4;i+) document.accountBean.usernamei.value=j2ee+i; 9.2 JavaScript2. JavaScript中的表单与事件处理Form对象的属性、方法和事件

10、属性action：对应表单的action属性。elements：对应表单中所有表单元素的数组。encoding：对应表单的enctype属性。length：对应表单中元素的数量。method：对应表单的method属性。name：对应表单的name属性。target：对应表单的target属性。9.2 JavaScript2. JavaScript中的表单与事件处理Form对象的属性、方法和事件方法handleEvent：调用特定事件的处理程序。reset：模拟鼠标单击【重置】按钮。submit：提交表单。9.2 JavaScript2. JavaScript中的表单与事件处理9.2.2 Ja

11、vaScript中的表单与事件处理Form对象的属性、方法和事件事件onReset：当重置事件发生时，触发该事件。onSubmit：当提交事件发生时，触发该事件。function checkData() if (document.accountBean.username.value.length = 6) return true; else alert(用户名的长度不得小于6个字符， + document.accountBean.username.value + 不正确。); return false; 请输入你的用户名和密码 用户名： 密码： 利用window对象实现窗口管理function

12、 confirmOrder() if (confirm(您确定要生成该订单吗？) order(); 在窗口中弹出确认信息 9.2 JavaScript3. JavaScript中的窗口管理利用window对象实现窗口管理n = prompt(请输入您要购买的数量:, 0); 在窗口中弹出输入对话框 9.2 JavaScript3. JavaScript中的窗口管理利用window对象实现窗口管理function windowOpener() msgWindow = window.open(,displayWindow,menubar=yes); msgWindow.document.write

13、 (新消息窗口); msgWindow.document.write (Hello, world!); 打开包含菜单栏的新窗口 9.2 JavaScript3. JavaScript中的窗口管理利用window对象实现窗口管理 打开包含指定URL的新窗口 9.2 JavaScript3. JavaScript中的窗口管理Ajax（Asynchronous JavaScript and XML）是一种Web应用程序开发的手段采用客户端脚本与Web服务器交换数据不必进行完整的页面刷新，就可以动态地更新Web页面 9.3 Ajax走进AJAXJesse James Garrett2005年的2月 A

14、jax: A New Approach to Web Applications XMLAJAXsynchronous avaScript nd MLAjax的组成HTML用于建立Web表单并确定应用程序其他部分使用的字段。JavaScript其代码是运行Ajax应用程序的核心代码，能够帮助改进与服务器应用程序的通信。动态HTML（Dynamic HTML，DHTML）用于动态更新表单。使用、和其他动态HTML元素来标记HTML。文档对象模型（Document Object Model，DOM）用于（通过JavaScript代码）处理HTML结构和服务器返回的XML。9.3 Ajax走进AJAX

15、(1)使用XHTML和CSS的基于标准的表示技术 (2)使用DOM进行动态显示和交互 (3)使用XML和XSLT进行数据交换和处理 (4)使用XMLHttpRequest进行异步数据检索 (5)使用Javascript将以上技术融合在一起 老技术，新思想走进AJAXGOOGLE走进AJAXGOOGLE Map走进AJAX(1)改善表单验证方式，不再需要打开新页面，也不再需要将整个页面数据提交 (2)不需刷新页面就可改变页面内容，减少用户等待时间 。 (3)按需获取数据，每次只从服务器端获取需要的数据 。 (4)读取外部数据，进行数据处理整合 。(5)异步与服务器进行交互，在交互过程中用户无需等

16、待，仍可继续操作与传统的web应用比较 图1 Web的传统模型。客户端向服务器发送一个请求，服务器返回整个页面，如此反复图2 在Ajax模型中，数据在客户端与服务器之间独立传输。服务器不再返回整个页面Ajax：一种不用刷新整个页面便可与服务器通讯的办法Ajax的工作原理图xhtmlcssJavaScriptXMLHttpRequest对象是处理所有服务器通信的对象XMLHttpRequest对象可以根据需要自行与服务器进行交互，用户甚至可以完全不知道幕后发生的一切。XMLHttpRequest对象的创建 var xmlHttp = new XMLHttpRequest(); 9.3 Ajax1

17、. Ajax基本技术加入JavaScript代码 开发人员可以使用JavaScript代码完成非常基本的任务获取表单数据：JavaScript代码很容易从HTML表单中抽取数据并发送到服务器。修改表单上的数据：很容易利用JavaScript实现从设置字段值到迅速替换图像的表单更新。解析HTML和XML：使用JavaScript代码操纵DOM，处理应用服务器返回的XML数据的结构。 9.3 Ajax1. Ajax基本技术加入JavaScript代码 / 获取phone字段的值，并赋值给phone字段 var phone = document.getElementById(phone).value

18、; / 使用response数组的值来设置表单字段 document.getElementById(order).value = response0; document.getElementById(address).value = response1; 使用JavaScript代码捕获和设置字段值 9.3 Ajax1. Ajax基本技术DOM文档对象模型是以层次结构组织的节点或信息片断的集合。允许开发人员在层次树中寻找特定信息。主要被用于完成某些高端编程任务。 9.3 Ajax1. Ajax基本技术 var xmlHttp = false; try xmlHttp = new ActiveX

19、Object(Msxml2.XMLHTTP); catch (e) try xmlHttp = new ActiveXObject(Microsoft.XMLHTTP); catch (e2) xmlHttp = false; 在Internet Explorer浏览器上创建XMLHttpRequest对象 9.3 Ajax2. XMLHttpRequest对象的获取 var xmlHttp = new XMLHttpRequest(); 在Mozilla和非Microsoft浏览器上创建XMLHttpRequest对象 9.3 Ajax2. XMLHttpRequest对象的获取 /* 创建

20、一个新的XMLHttpRequest对象 */ var xmlHttp = false; /*cc_on */ /*if (_jscript_version = 5) try xmlHttp = new ActiveXObject(Msxml2.XMLHTTP); catch (e) try xmlHttp = new ActiveXObject(Microsoft.XMLHTTP); catch (e2) xmlHttp = false; end */ if (!xmlHttp & typeof XMLHttpRequest != undefined) xmlHttp = new XMLHt

21、tpRequest(); 以支持多种浏览器的方式创建XMLHttpRequest对象 9.3 Ajax关于安全性的说明 浏览器可能处于安全原因禁止使用JavaScript解决方法为支持JavaScript和不支持JavaScript的浏览器分别开发页面。在检测到客户端不支持JavaScript的情况下，给出提示，让用户启用客户端对JavaScript的支持。 9.3 Ajax2. XMLHttpRequest对象的获取发出请求处理服务器响应 9.3 Ajax3. Ajax的请求/响应模型发出请求 从Web表单中获取需要的数据。建立要连接的URL。打开到服务器的连接。设置服务器在完成后要执行的函

22、数。发送请求。9.3 Ajax3. Ajax的请求/响应模型9.3.3 Ajax的请求/响应模型function callServer() / 从Web表单中获取city和state数据 var city = document.getElementById(city).value; var state = document.getElementById(state).value; / 仅在city和state都有值的情况下继续执行代码 if (city = null) | (city = ) return; if (state = null) | (state = ) return; / 建立

23、要连接的URL var url = /scripts/getZipCode.do?city= + escape(city) + &state= + escape(state); / 打开到服务器的连接 xmlHttp.open(GET, url, true); / 设置服务器在完成后要执行的函数 xmlHttp.onreadystatechange = updatePage; / 发送请求 xmlHttp.send(null); Ajax发送请求的流程 XMLHttpRequest对象open()方法的参数request-type发送请求的类型。典型的值是GET或POST，但也可以发送HEAD

24、请求。url要连接的 URL。asynch如果希望使用异步连接则为true，否则为false。默认为 true。username如果需要身份验证，则可以在此指定用户名。password如果需要身份验证，则可以在此指定口令。9.3 Ajax3. Ajax的请求/响应模型处理服务器响应对服务器响应的典型处理：实时改变用户看到的表单中的一部分。function updatePage() if (xmlHttp.readyState = 4) var response = xmlHttp.responseText; document.getElementById(zipCode).value = re

25、sponse; 处理服务器响应 9.3 Ajax3. Ajax的请求/响应模型处理服务器响应HTTP的五种就绪状态 0：请求没有发出（在调用open()之前）。1：请求已经建立但还没有发出（调用send()之前）。2：请求已经发出正在处理之中。3：请求已经处理，响应中通常有部分数据可用，但是服务器还没有完成响应。4：响应已完成，可以访问服务器响应并使用它。9.3 Ajax3. Ajax的请求/响应模型在此过程中：一个JavaScript方法用于获取用户输入表单的信息并将其发送到服务器；另一个JavaScript方法用于监听和处理来自服务器端的响应，并在响应返回时设置表单字段的值。代码的运行实际

26、上依赖于调用第一个JavaScript方法 9.3 Ajax4. 连接HTML表单 城市: 省份: 邮政编码: 启动一个Ajax过程 9.3 Ajax4. 连接HTML表单综合实例-简易的google suggest：onkeyup=completeText(event)“keyCode = myEvent.keyCode;keyCode表48-90 8 38，40 13综合实例-简易的google suggest：var left = textNode.offsetLeft;var tmp = textNode.offsetParent; while(tmp) left += tmp.off

27、setLeft; tmp = tmp.offsetParent;tipNode.style.left = left + px;综合实例-简易的google suggest：使用对象直接量传递数据var tipArray = eval(responseText);综合实例-简易的google suggest：tdNode.onmousemove = function() this.style.backgroundColor = red;tdNode.onmouseout = function() this.style.backgroundColor = #FFFAFA;tdNode.onclic

28、k = function() textNode.value = this.firstChild.nodeValue; clearTbody();Ajax的缺陷AJAX不是完美的技术。使用AJAX，它的一些缺陷不得不权衡一下：由Javascript和AJAX引擎导致的浏览器的兼容页面局部刷新，导致后退等功能失效。对流媒体的支持没有FLASH、Java Applet好。一些手持设备（如手机、PDA等）支持性差。AJAX参考书籍JavaScript Professional ProjectsDHTML手册.chmAJAX参考书籍DOM文档对象中文手册.chmAJAX参考书籍CSS中文手册.chmAJ

29、AX参考书籍CSS中文手册.chmAJAX参考书籍Professional Ajax（AJAX高级程序设计）：本书目前已有翻译版在国内销售。本书除了介绍AJAX的基本知识以外，在跨浏览器实现XML处理和Webservice处理上做了详细介绍，也有一个如何建立自己的Gmail的示例，另外还介绍了三个分别为PHP，JAVA和.NET平台服务的AJAX服务器端框架。AJAX参考书籍Foundations Of AJAX（AJAX基础教程）：号称国内第一本AJAX的图书，在国外也很受欢迎的一本书。个人认为书中比较有用的是介绍了很多AJAX开发的辅助工具，同时有过个实用的AJAX示例。 AJAX参考书籍

30、Pragmatic AJAX（AJAX修炼之道-Web2.0入门）：国内已有此书的翻译版。本书比较短小精悍，其中比较特色的是介绍了如何建立一个自己的Google Maps，并在AJAX UI方面做了较多描述，另外简要介绍了一些浏览器端AJAX框架，以及AJAX和PHP联合开发的问题。AJAX参考书籍AJAX For DUMMIES（AJAX傻瓜教程）：本书编排和版面设计上比较有特色。内容上即介绍了AJAX的基本知识，也介绍了AJAX的一些框架。比较有特色的部分是给出了AJAX开发的十个需要了解的问题以及一些有用的AJAX资源。AJAX参考书籍AJAX In Action（AJAX实战）：国内已有此书的翻译版本。一本将近700页的AJAX图书，和其他AJAX图书相比分量很重，介绍内