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

1 课程的主要内容 第1章概论第2章电子商务系统分析与设计基础第3章电子商务系统开发基础第4章电子商务系统规划第5章电子商务系统分析第6章电子商务系统设计第7章电子商务应用系统设计第8章数据库实现第9章电子商务网站开发技术第10章电子商务系统的开发模式第11章电子商务系统的测试与维护 2 9 1电子商务网站开发技术 9 1HTML语言9 2JavaScript9 3AJAX9 4JavaApplet 3 HTML 超文本标记语言 HyperTextMarkupLanguage 是为创建网页而设计的一种标记语言提供了一种描述文档中文本信息结构的方法HTML文件使用 htm或 html作为文件扩展名可用文本编辑软件或所见即所得的网页创作工具来创建HTML文件 9 1HTML语言 4 1 HTML基本语法 和用于说明一个HTML文档的开始和结束 和用于说明HTML文档的头信息部分 和用于说明HTML文档的文档体部分 文档头文档体 HTML文件的基本结构 9 1HTML语言 5 HTML标记的主要类型结构性标记 描述HTML文档中文本的意图标记HTML内容的开始和结束 标记HTML文档头 包含不在正文中显示的关键字 标题和脚本等 标记HTML文档的标题 标记HTML文档正文的开始和结束 9 1HTML语言 1 HTML基本语法 6 HTML标记的主要类型外观性标记 描述文字的外观例如 重要公告 9 1HTML语言 1 HTML基本语法 7 HTML标记的主要类型超文本标记 将文档的一部分关联到其他文档例如 搜索引擎 9 1HTML语言 1 HTML基本语法 8 HTML标记的主要类型注释标记 在文档中插入注释语句例如 9 1HTML语言 1 HTML基本语法 9 HTML标记的主要类型框架页面标记 描述网页如何显示框架页面例如 9 1HTML语言 1 HTML基本语法 10 统一资源定位器 URL UniformResourceLocator URL格式 2 URL与超链接 9 1HTML语言 11 统一资源定位器URL格式协议 表示访问网络资源的方法和途径 登录信息 包括访问主机的用户名和密码 主机名 目的主机名称或IP地址 端口 目的主机的端口号 路径 指明被访问资源的位置 查询请求 通过URL向服务器传递参数 片段 以 开始 用于标识被访问资源中的部分资源 2 URL与超链接 9 1HTML语言 12 超链接创建锚链的语法是要显示的文字例 Apache搜索 2 URL与超链接 9 1HTML语言 13 表格由和标记定义 表格行由和标记定义单元格由和或和标记定义 和标记的width和height属性可用于定义表格和单元格的宽度和高度 标记的colspan和rowspan属性可用于表示单元格的合并 9 1HTML语言 3 表格 14 表格示例 9 1HTML语言 3 表格 15 合并单元格示例 第1行 第1列第1行的第2 3列第2行及第3行的第1列第2行第2列第2行第3列第3行第2列第3行第3列 9 1HTML语言 3 表格 16 表单由和标记定义基本语法结构 第一节HTML语言 4 表单与表单元素 17 的属性action 设定处理表单数据的程序的URLmethod 指定数据传送到服务器的方式 name 设定表单的名称 onrest和onsubmit 设定了在按下相应按钮之后要执行的客户端程序 target 指定数据结果显示在哪个窗口 9 1HTML语言 4 表单与表单元素 18 标记用于在表单中提供单行文本框 密码框 单选按钮 复选框 普通按钮 提交按钮 重置按钮和隐藏域等表单元素语法格式 9 1HTML语言 4 表单与表单元素 19 标记在表单中插入一个下拉列表语法格式 9 1HTML语言 4 表单与表单元素 20 标记该标记为下拉列表中一个选项语法格式 9 1HTML语言 21 标记用于在表单中提供一个可输入多行文本信息的输入框语法格式 9 1HTML语言 4 表单与表单元素 22 框架主要被用于规划网页布局标记决定如何划分框架 标记用于定义每个框架中放入什么文件 9 1HTML语言 5 框架 23 框架代码示例 第一节HTML语言 5 框架 24 混合框架代码示例 9 1HTML语言 5 框架 25 JavaScript的特点是一种脚本语言基于对象事件驱动安全平台无关 9 2JavaScript 26 window对象是客户端JavaScript最高层对象之一是其他大部分对象的共同祖先window对象的创建遇到body frameset或frame元素时 会自动建立window对象的实例也可由window open 方法创建 9 2JavaScript 1 JavaScript常用对象 27 screen对象包含一些只读属性 用户可以通过这些属性获取当前屏幕的设置信息 9 2JavaScript 1 JavaScript常用对象 28 9 2 1JavaScript常用对象 navigator对象可让开发人员判断用户使用的浏览器的版本 浏览器能够处理的MIME类型以及浏览器上安装的插件种类等内容 所有属性值都是只读的 不能修改其内容 navigator对象由客户端的JavaScript运行时引擎自动创建 29 document对象包含了当前文档的信息 并且提供了将HTML输出给用户的功能 创建document对象只需要使用标记的标准HTML语法 并在标记中包含JavaScript的事件处理句柄即可 9 2JavaScript 1 JavaScript常用对象 30 表单 Form 是HTML定义的标准表单控件的集合 在特定的表单中可以放入各种表单控件 9 2JavaScript 2 JavaScript中的表单与事件处理 31 请输入你的用户名和密码用户名 密码 一个名为accountBean的表单对象示例 9 2JavaScript 2 JavaScript中的表单与事件处理 32 表单 Form 若一个表单中多个元素的name属性值相同 则系统会自动地以name属性的值来创建一个数组 for i 0 i 4 i document accountBean username i value j2ee i 9 2JavaScript 2 JavaScript中的表单与事件处理 33 Form对象的属性 方法和事件属性action 对应表单的action属性 elements 对应表单中所有表单元素的数组 encoding 对应表单的enctype属性 length 对应表单中元素的数量 method 对应表单的method属性 name 对应表单的name属性 target 对应表单的target属性 9 2JavaScript 2 JavaScript中的表单与事件处理 34 Form对象的属性 方法和事件方法handleEvent 调用特定事件的处理程序 reset 模拟鼠标单击 重置 按钮 submit 提交表单 9 2JavaScript 2 JavaScript中的表单与事件处理 35 9 2 2JavaScript中的表单与事件处理 Form对象的属性 方法和事件事件onReset 当重置事件发生时 触发该事件 onSubmit 当提交事件发生时 触发该事件 36 functioncheckData if document accountBean username value length 6 returntrue else alert 用户名的长度不得小于6个字符 document accountBean username value 不正确 returnfalse 请输入你的用户名和密码用户名 密码 37 利用window对象实现窗口管理 functionconfirmOrder if confirm 您确定要生成该订单吗 order 在窗口中弹出确认信息 9 2JavaScript 3 JavaScript中的窗口管理 38 利用window对象实现窗口管理 n prompt 请输入您要购买的数量 0 在窗口中弹出输入对话框 9 2JavaScript 3 JavaScript中的窗口管理 39 利用window对象实现窗口管理 functionwindowOpener msgWindow window open displayWindow menubar yes msgWindow document write 新消息窗口 msgWindow document write Hello world 打开包含菜单栏的新窗口 9 2JavaScript 3 JavaScript中的窗口管理 40 利用window对象实现窗口管理 打开包含指定URL的新窗口 9 2JavaScript 3 JavaScript中的窗口管理 41 Ajax AsynchronousJavaScriptandXML 是一种Web应用程序开发的手段采用客户端脚本与Web服务器交换数据不必进行完整的页面刷新 就可以动态地更新Web页面 9 3Ajax 42 Ajax的组成HTML用于建立Web表单并确定应用程序其他部分使用的字段 JavaScript其代码是运行Ajax应用程序的核心代码 能够帮助改进与服务器应用程序的通信 动态HTML DynamicHTML DHTML 用于动态更新表单 使用 和其他动态HTML元素来标记HTML 文档对象模型 DocumentObjectModel DOM 用于 通过JavaScript代码 处理HTML结构和服务器返回的XML 9 3Ajax 43 XMLHttpRequest对象是处理所有服务器通信的对象XMLHttpRequest对象可以根据需要自行与服务器进行交互 用户甚至可以完全不知道幕后发生的一切 XMLHttpRequest对象的创建 varxmlHttp newXMLHttpRequest 9 3Ajax 1 Ajax基本技术 44 加入JavaScript代码开发人员可以使用JavaScript代码完成非常基本的任务获取表单数据 JavaScript代码很容易从HTML表单中抽取数据并发送到服务器 修改表单上的数据 很容易利用JavaScript实现从设置字段值到迅速替换图像的表单更新 解析HTML和XML 使用JavaScript代码操纵DOM 处理应用服务器返回的XML数据的结构 9 3Ajax 1 Ajax基本技术 45 加入JavaScript代码 获取 phone 字段的值 并赋值给phone字段varphone document getElementById phone value 使用response 数组的值来设置表单字段document getElementById order value response 0 document getElementById address value response 1 使用JavaScript代码捕获和设置字段值 9 3Ajax 1 Ajax基本技术 46 DOM 文档对象模型是以层次结构组织的节点或信息片断的集合 允许开发人员在层次树中寻找特定信息 主要被用于完成某些高端编程任务 9 3Ajax 1 Ajax基本技术 47 varxmlHttp false try xmlHttp newActiveXObject Msxml2 XMLHTTP catch e try xmlHttp newActiveXObject Microsoft XMLHTTP catch e2 xmlHttp false 在InternetExplorer浏览器上创建XMLHttpRequest对象 9 3Ajax 2 XMLHttpRequest对象的获取 48 varxmlHttp newXMLHttpRequest 在Mozilla和非Microsoft浏览器上创建XMLHttpRequest对象 9 3Ajax 2 XMLHttpRequest对象的获取 49 创建一个新的XMLHttpRequest对象 varxmlHttp false cc on if jscript version 5 try xmlHttp newActiveXObject Msxml2 XMLHTTP catch e try xmlHttp newActiveXObject Microsoft XMLHTTP catch e2 xmlHttp false end if xmlHttp 以支持多种浏览器的方式创建XMLHttpRequest对象 9 3Ajax 50 关于安全性的说明浏览器可能处于安全原因禁止使用JavaScript解决方法为支持JavaScript和不支持JavaScript的浏览器分别开发页面 在检测到客户端不支持JavaScript的情况下 给出提示 让用户启用客户端对JavaScript的支持 9 3Ajax 2 XMLHttpRequest对象的获取 51 发出请求处理服务器响应 9 3Ajax 3 Ajax的请求 响应模型 52 发出请求从Web表单中获取需要的数据 建立要连接的URL 打开到服务器的连接 设置服务器在完成后要执行的函数 发送请求 9 3Ajax 3 Ajax的请求 响应模型 53 9 3 3Ajax的请求 响应模型 functioncallServer 从Web表单中获取city和state数据varcity document getElementById city value varstate document getElementById state value 仅在city和state都有值的情况下继续执行代码if city null city return if state null state return 建立要连接的URLvarurl scripts getZipCode do city escape city Ajax发送请求的流程 54 XMLHttpRequest对象open 方法的参数request type发送请求的类型 典型的值是GET或POST 但也可以发送HEAD请求 url要连接的URL asynch如果希望使用异步连接则为true 否则为false 默认为true username如果需要身份验证 则可以在此指定用户名 password如果需要身份验证 则可以在此指定口令 9 3Ajax 3 Ajax的请求 响应模型 55 处理服务器响应对服务器响应的典型处理 实时改变用户看到的表单中的一部分 functionupdatePage if xmlHttp readyState 4 varresponse xmlHttp responseText document getElementById zipCode value response 处理服务器响应 9 3Ajax 3 Ajax的请求 响应模型 56 处理服务器响应HTTP的五种就绪状态0 请求没有发出 在调用open 之前 1 请求已经建立但还没有发出