3.2 电子商务与Web技术（课件）《电子商务概论（第2版）》（中国水利电力出版社）
2024-07-23
|
55页
|
36人阅读
|
1人下载
普通
内容正文：
第3章电子商务的技术基础
3.2 电子商务与Web技术
3.2.1 关于Web的基本概念
3.2.2 HTML语言
3.2.3 网页相关技术
3.2.4 动态网页技术
3.2.1 关于Web的几个基本概念
1．超级链接和超文本
超级链接（Hyperlink）是文件中一些特殊的文字和图形，用鼠标单击这些文字和图形时，会从一个文本跳到到另一个文本。含有超级链接的文本称超文本（Hypertext）。超文本形式上仍然是ASCII文件，可以用一般的文字处理软件进行编辑、处理。
HTTP协议（Hypertext Transfer Protocol，超文本传输协议）是TCP／IP协议集中包含的一个协议，是用于规范WWW服务器和浏览器之间超文本传输的基本协议，所以，有时称WWW服务器为HTTP服务器。
2．HTML与网页
HTML（Hyper Text Markup Language，超文本标记语言），是用于编写超文本文件的语言。用HTML编写的超文本文件称为HTML文件，以 .htm或 .html为文件扩展名。
网页（Web）是在WWW服务器上发布的HTML文件，网站的首页称“主页”（Home Page）。
3．URL（ Uniform Resource Locator,统一资源定位器）地址
URL地址的格式为：
协议：// 服务器主机名．域名 [：端口号]／目录名／…／html文件名
例如：http://www.microsoft.com／home.htm ，是微软公司主页的URL地址。
图3-14 Web的工作过程
4．Web的工作过程
Web是基于客户机／服务器（client/server）工作方式的，用户通过客户机软件（WWW浏览器）向WWW服务器发出URL地址服务请求，服务器执行客户机的请求，调出HTML文件发回给客户机，在客户机浏览器上显示Web页面，其工作过程见。
3.2.2 HTML语言
HTML是用于编写超文本文件的技术规范。超文本文件是一种含有特殊标记的文本文件，用户通过浏览器浏览WWW服务器发来的HTML文件时，浏览器首先对其中的标记进行解释，然后以特定的方式在用户屏幕上显示出来。HTML的作用就是定义超文本文件中的标记符号及其作用。
超文本文件中的标记均用〈 〉括起来，〈 〉内的内容称为标记元素。标记一般成对出现，如〈标记〉和<／标记>，分别称为起始标记和结束标记。起始标记和结束标记之间的内容是该标记作用的对象。大部分的标记可以嵌套。
1．HTML文件的基本结构
HTML文件的基本形式如下：
<html>
<head>
<title> HTML文件标题</title>
</head>
<body>
HTML文件内容
</body>
</html>
2．常用的HTML标记
（1）段落标记<p>和</p>
<p>标记表示段落的开始，浏览器先插入一个空行，再从新插入的行开始显示。</p>标记表示段落的结束，一般可省略。
（2）字体变换标记<font>和</font>
以下标记在浏览器上显示红色“电子商务概论”字体：
<font size=5 color=red face=黑体>
电子商务概论
</font>
（3）超级链接标记<a href>和<／a>
以下标记在浏览器上显示超级链接“微软公司网站”：
<a href="http://www.microsoft.com">微软公司网站</a>
（4）插入图片标记<img>
以下标记将Picture目录中的p1.jpg图片文件插入页面：
<img src="picture/p1.jpg"
alt="这是我的图片" 图片说明
width=60 图片宽度
height=50> 图片高度
图3-15 Example.htm文件的显示效果
<html>
<head>
<title> 电子商务概论</title>
</head>
<body>
<font size=5 color=red face=黑体>
电子商务概论
</font>
<a href="http://www.microsoft.com">
<p>微软公司网站</p>
</a>
<p>
<img src="picture/p1.jpg"
alt="这是我的图片"
width=60
height=50>
</body>
</html>
3.2.3 网页相关技术
虽然大部分静止网页可以用HTML来设计，但对于有特殊效果要求的网页，HTML就无能为力了。由此，在网页设计中又出现了一些用于改善网页外观效果，增加网页交互性的相关技术。
用于改进网页效果、增加网页功能的技术可以分为两类，一类用于改善网页的外观效果（如增加网页内容的动感和交互性）或为网页增加一些简单的数据处理功能；另一类则用于实现网页与数据库和其他应用程序相连接，在服务器端完成数据处理后，再将处理结果“动态”生成HTML文件传给客户端浏览器。一般将后者称为“动态网页设计技术”。关于动态网页设计技术将在稍后讨论。
1．Java和Java Applet
Java 是由 Sun 公司开发而成的一种编程语言，Sun公司将Java定义为一种“简单、面向对象、分布式、可解释性、跨平台、可移植、安全”等特性的语言。
Java 应用于网页中的程序称做 Java Applet，嵌在HTML中的Applet在Web服务器端被编译成字节代码通过网络传送到客户端，在客户端，浏览器除了要支持HTML外，还要附加一个Java字节码的解释器，以解释执行包含Java字节码的HTML文件。无论你使用的是哪一种 WWW 浏览器，哪一种计算机，哪一种操作系统，只要WWW浏览器注明了“支持Java”，你就可以看到增加了交互性和动感的页面。
以下是一个用Java Applet嵌入网页的例子。
<html>
<title>An Example Homepage </title>
<applet code= "e1.class" width=300 hight=30>
</applet>
<html>
图3-16 Java Applet的例子
上例中<applet code= "e1.class" width=300 hight=30></applet>语句包含了编译文件e1.class，而e1.class是由Java程序e1.java编译而得，e1.java代码如下：
import java.awt.Graphics;
import java.applet.Applet;
public class e1 extends Applet {
public String s;
public void init() {
s=new String("这是通过JAVA APPLET写进来的文字");
}
public void paint(Graphics g){
g.drawString(s,25,25);
}
}
2．JavaScript
JavaScript是网景（Netscape）公司的Live Script语言和Sun公司的Java语言结合的产物。但是JavaScript和Java是不同的语言，两者的区别表现在：
1）JavaScript是一种解释性编程语言，可由浏览器直接解释执行；而Java与其他程序设计语言（如C/C++）一样，必须先进行编译和连结成字节代码，再传送到浏览器中解释执行。
2）编写在HTML文件中JavaScript代码是与HTML紧密相连的文本格式，直接查看网页的源文件，就可以看到JavaScript程序；而Java应用在网页的程序Java Applet是和HTML文件分开的。
3）JavaScript的结构较为自由松散；而Java的结构较为严谨。
4）JavaScript不具备读写文件及网络控制等功能；而Java则具有这些功能。
图3-17 JavaScript的例子
以下是一个用JavaScript编写的简单网页的例子：
<html>
<head>
<script language="LiveScript">
<!-- Hiding
function hello( )
{alert("你好!");
}
</script>
</head>
<body>
<a href="" onMouseOver="hello()">
请将鼠标移到此处</a>
</body>
</html>
图3-18 VBScript的例子
3．VBScript
以下是一个用VBScript编写的简单网页的例子：
<HTML>
<HEAD><TITLE>一个简单首页<／TITLE>
<SCRIPT LANGUAGE="VBScript">
<!--
Sub Button1_OnClick
MsgBox "你好！"
End Sub
-->
<／SCRIPT>
<／HEAD>
<BODY>
<FORM><INPUT NAME="Button1" TYPE="BUTTON" VALUE="单击此处"><／FORM>
<／BODY>
<／HTML>
4．CSS（Cascading Style Sheets，层叠样式表）
CSS跟 HTML 一样也是一种标记语言，甚至很多属性都是来源于HTML。利用 CSS 技术，可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。
一个样式表由样式规则组成，以告诉浏览器怎样去呈现一个文档。
<HEAD>
<TITLE>CSS例子<／TITLE>
<STYLE TYPE="text／css">
H1 { font-size: x-large; color: red }
H2 { font-size: large; color: blue }
<／STYLE>
<／HEAD>
上述样式表告诉浏览器用加大、红色字体显示一级标题；用大、蓝色字体显示二级标题。
5．Flash
Flash 是 Macromedia 公司出品的一个矢量动画制作软件，用它做出来的动画就叫Flash动画，其特点是：① 动画具有很强的交互性，甚至可以完全使用 Flash 来制作一个网站；② 采用“准”流（Stream）式的设计，就是说，可以一边下载动画文件一边欣赏动画；③ 由于它是基于矢量的图形系统，因而只要使用得当，就可以大大地减少文件的数据存储量，所占空间比位图少得多，非常适合在网络上使用。同时，矢量图像可以做到真正的无级放大，这样，无论用户的浏览器使用多大的窗口，图像始终可以完全显示，并且不会降低画面质量。
6．DHTML
DHTML 即我们常说的动态 HTML，是微软公司提出的HTML加强版。很多人都以为 DHTML 是一种语言，其实 DHTML 仅仅是一个通过各种技术的综合发展而得以实现的概念，这些技术包括 JavaScript，VBScript，和 CSS 等。 DHTML 的目的在于加强网页的交互性，与HTML不同的是DHTML的每个标记都会被当成对象（Object），并分别赋予属性以供VBScript在执行阶段控制这些对象，因此DHTML文件中的元素都具有动态的能力，对用户的操作在本地就可做实时处理，从而得到更快的用户响应，使网页的界面更丰富多变，使页面设计者可以随心所欲地表达自己的构思。
7．XML
XML是可扩展标记语言（eXtensible Markup Language）。标记是指计算机所能理解的信息符号，通过此种标记，计算机之间可以处理包含各种信息的文章等。如何定义这些标记，既可以选择国际通用的标记语言，比如HTML，也可以使用象XML这样由相关人士自由决定的标记语言，这就是语言的可扩展性。XML是从SGML（Standard Generalized Markup Language，标准通用置标语言）中简化修改出来的，SGML是一种元语言，它能够描述任何结构复杂的信息，是标识数字化资料的常用手段。
简单地说，XML就是一种数据的描述语言，虽然它是语言，但是通常情况下，它并不具备常见语言的基本功能即不能被计算机识别并运行。只有依靠另一种语言，来解释它，使它达到你想要的效果或被计算机所接受。XML是一种抽象的语言，不如传统的程序语言那么具体。
XML的应用场合主要有以下几种：
（1）数据交换
（2）Web服务
（3）内容管理
（4）Web集成
（5）配制
3.2.4 动态网页技术
所谓动态网页，是指用户浏览器向服务器发出请求，Web服务器接到请求后，在服务器端调用后台程序进行相应处理，并将处理的结果以HTML形式传回用户浏览器显示处理结果的页面。由于浏览器端显示的页面是根据服务器后台程序运行结果“动态”产生的，故称为动态网页技术，这里的“动态”是针对网页信息内容而言的。Web服务器要与数据库服务器进行交互，必须通过中间件才能实现，这里的中间件就包括动态网页技术。
常用的动态网页技术有：CGI、ASP、PHP、JSP等。
1．CGI
CGI（Common Gateway Interface，公共网关接口）是一种编程标准，它规定了Web服务器调用其他可执行程序（CGI程序）的接口协议标准，为Web服务器提供了一种与外部应用程序交互、共享信息的方法。CGI程序通常用于查询、搜索、或其他的一些交互式的应用。例如用HTML是无法将用户在网页中输入的信息存到服务器的硬盘上的，CGI则弥补了HTML的不足，可以将用户通过网页提供的信息存入服务器的硬盘。
（1）CGI的工作过程
用户通过浏览器向Web服务器提出请求，激活服务器端的一个CGI程序，CGI程序将交互网页中输入的信息传给外部应用程序并启动外部应用程序，外部应用程序的处理结果通过CGI程序传给Web服务器，再以HTML形式传给用户，CGI过程结束。例如许多网页上的留言簿的工作过程是：用户在客户端浏览器输入自己的留言信息，按下“提交”按钮，浏览器将这些信息传送到服务器的CGI目录下特定的CGI程序，CGI程序在服务器上按预定的方法进行处理，将用户提交的信息存入指定的文件中，然后CGI程序向客户端发送一个信息，表示请求的任务已经完成，此时用户在浏览器将看到如“留言结束”字样的信息，整个过程结束。
（2）CGI的作用
1）扩展了Web服务器的功能，使网页增加了交互性和动态性。
2）在不同工作平台之间进行沟通，按照CGI标准编写的程序可以在任何服务器上运行。
3）可以实现Web服务器与外部程序的连接，服务器可以向CGI程序发送信息，CGI程序也可向服务器发回信息。
（3）CGI 程序的编制与调用
CGI程序可以用任何程序设计语言编写，如Perl、C、C++、Java、Visual Basic等，其中最为流行的是Perl 。CGI程序要先编译成可执行程序，存放在服务器的CGI目录下（一般为cgi-bin目录）。CGI程序的调用方式有两种，一种是通过交互网页调用CGI，另一种是直接在浏览器的地址栏中输入URL调用。
CGI程序的缺点在于一个CGI程序只能由一个用户调用，并独占一个CPU进程。如果同时有许多用户请求CGI程序，会造成CGI的效率低下，因为这个原因，目前CGI的应用已逐渐被新发展的其他动态网页技术所取代。
2．ASP
（1）ASP执行过程
ASP程序是嵌入了某种脚本语言（如VBScript或JavaScript）程序的HTML文件，存放于Web服务器上以 .asp为扩展名。当浏览器请求调用ASP文件时，由Web服务器调用ASP文件，解释并执行其中的每一条命令，根据程序执行结果“动态”生成一个HTML页面并传回到浏览器显示。
与常见的在客户端实现动态网页的脚本编程技术不同，ASP中的命令和Script语句都是由服务器来解释执行的，执行结果产生动态生成的HTML页面，这是不含任何ASP程序的HTML页面，浏览器收到的就是这种处理过的页面。
（2）ASP的特点
1）简单方便。ASP实际是ASCII文件，使用 VBScript或JScript配合HTML，即可快速简单地编制网站应用程序。
2）无须人工编译、连接，可在服务器端直接执行。
3）与客户浏览器无关。由于ASP是在服务器端解释执行，开发者可以不必考虑浏览器是否支持ASP。
4）ASP源程序在服务器端执行，开发者也不必担心别人下载程序从而窃取编程逻辑，提高了程序和网站的安全性。
5）支持多种其他网络技术，可方便地与网络数据库连接、支持其他语言所建立的服务器对象。
（3）ASP的开发过程
1）ASP的运行平台。ASP是微软公司提供的，目前仅限于在微软公司的下列平台上使用：
Windows NT 4.0＋ IIS3.0
Windows 2000（含IIS 4.0）
Windows 98 ＋ PWS（Personal Web Server）
2）编辑ASP文件。ASP文件可以包括HTML与VBScript和JavaScript的任意组合，程序代码用“<％”和“％>”嵌入HTML文件中，编辑完成后以 .asp扩展名保存于Web服务器的虚拟目录中。
3）调试。在浏览器的地址栏中输入ASP文件的URL进行浏览调试。
（4）ASP简单实例test.asp
< HTML>
< BODY>
< FONT COLOR="Green">
< % If Time < #12:00:00# And Time >= #00:00:00# Then %>
早上好，今天天气不赖啊 !
< % ElseIf Time < #19:00:00# And Time >= #12:00:00# Then %>
下午好 !
< % Else %>
Hello ! 今晚你没有去聊天？
< % End If %>
< ／BODY>
< ／HTML>
3．PHP
动态网页技术中，CGI存在编程复杂、数据库功能弱、运行效率低的缺点。ASP虽然具有编程简单、运行速度快、数据库操作功能强大等优点，但它只能运行于Windows NT的IIS 环境，对大多数运行于UNIX或Linux平台的大中型网站还不能采用ASP。
PHP（PHP Hypertext Preprocessor）意思是“超文本预处理器”，是一种类似于ASP可嵌入HTML的新型CGI编程语言，它混合了C、Java、Perl 以及 PHP 式的新语法，可以比传统CGI更快速的执行动态网页。
相对于传统的CGI语言，PHP拥有下列特性：
（1）易学易用
（2）运行速度快
（3）跨多个平台
（4）极其强大的数据库支持功能
（5）先进的扩展功能
（6）完全免费
下面是一个最简单的PHP程序：
<HTML>
<HEAD>
<TITLE>最简单的PHP程序</TITLE>
</HEAD>
<BODY>
<?PHP
echo “嗨，PHP向你问好！
”；
?>
</BODY>
</HTML>
4．JSP
目前在国内PHP与ASP应用最为广泛。而JSP是一种较新的技术，国内采用的较少。但在国外，JSP已经是比较流行的一种技术，尤其是电子商务类的网站，多采用JSP。JSP的内置脚本语言是基于Java编程语言的，而且所有的JSP页面都被编译成为Java Servlet，JSP页面就具有Java技术的所有好处，包括健壮的存储管理和安全性。作为Java平台的一部分，JSP拥有Java编程语言“一次编写，各处运行”的特点。
总的来讲，JSP具有以下特点:
（1）将内容的生成和显示进行分离
（2）强调可重用的组件
（3）采用标识简化页面开发
表3-2 常用动态网页编程技术性能对比
编程技术 PHP ASP JSP
操作系统 均可 Win32 均可
Web服务器 多种 IIS 多种
执行效率 快 快 极快
稳定性 好 中等 非常好
开发时间 短 短 中等
编程语言 PHP VBScript JAVA
与网页结合 好 好 好
学习难度 低 低 较高
函数支援 多 少 多
系统安全性 好 差 极好
使用网站 很多 多 目前一般
5．Web与数据库的连接技术
电子商务网站中许多网页的内容是经常变化的，例如网上商店所陈列商品的信息要随时根据进货、库存、价格、销售等情况而变化，如果采用固定网页，就无法正确反映网站的商品变化。对此，一般是将商品信息存入网络数据库中，由网页动态地从数据库中提取商品信息，送到客户端浏览器显示，这样，对于商品信息的变化，只需修改数据库中的记录而不必修改网页。
目前网络数据库的主流产品有：Oracle、Informix、Sybase及微软公司的Access、SQL Server等。其中微软公司的数据库产品只能在Windows NT/2000平台上运行，其他公司的产品可以在多平台上运行。
（1）网页数据库编程的几个概念
1）ODBC（Open Data Base Connectivity）是一个标准的数据库接口，它提供应用程序访问数据库的标准方法。不同数据库之间的数据转换由ODBC完成，通过ODBC，应用程序不必关心使用的是何种数据库，只需向ODBC创建的数据源DSN（Data Source Name）存取数据就行了。
2）SQL（Structured Query Langusge，结构化查询语言）是一种标准的数据库语言，可以使用很少的命令和简单直观的语法，方便地对数据库进行操作。ASP.NET网页编程中，用ADO.NET的Connection对象的Execute方法执行SQL命令。
3）ADO.NET（ActiveX Data Object）组件是ASP.NET最重要的内置组件，所有支持ASP.NET的Web服务器都有ADO.NET组件。ADO.NET的功能非常多，ASP.NET使用其中的“Connection对象”来建立网页与数据源的连接，用“Recordset”对象处理返回的结果。
ADO.NET提供了两套类库，一套用于存取所有基于OLE DB提供的数据库（包括SQL Server数据库），另一套专门用于存取SQL Server数据库。
ADO.NET实际上是基于ODBC的一种应用程序，它提供了面向对象的数据调用方式，在ADO.NET和ODBC之间使用OLEDB进行连接，可以提高数据的访问性能。
（2）ASP网页数据库编程步骤
1）建立网页数据库编程的软件环境。
☆ 系统平台
要正确运行ASP.NET，服务器端必须安装如下软件：
△ Windows 2000 Professional或更高版本，其Windows 2000系列需要安装Service Pack 2.0;
△ IIS 5.0（Internet信息服务管理器5.0）；
△ .NET Freamwork（.NET框架）；
△ MDAC 2.7（Microsoft 数据访问组件 2.7）。
☆ 数据库系统
任何支持ODBC的数据库系统均可。从软件产品的一致性考虑，可采用微软的产品，如SQL Server 7.0、SQL Server 2000 或Access 2000（本节的例子中使用SQL Server 2000数据库）。
2）建立数据库。
3）创建ODBC的数据源。
4）建立ASP网页，在网页中使用ADO的对象和SQL命令对数据库进行操作。
5）调试ASP网页。
图3-20 SQL Server服务管理器
（3）ASP.NET网页数据库实例
步骤1：在SQL Server 2000中创建数据库文件book。
1）首先打开SQL Server服务管理器，如图3-20所示；
图3-21 新建数据库
2）打开企业管理器，依次展开控制台根目录，在数据库或右边空白区域点鼠标右键，选择“新建数据库”菜单，如图3-21所示；
图3-22 数据库属性
3）在对话框中填入数据库名称“book”，其他采用默认设置，然后点击“确定”，如图3-22所示；
图3-23 在企业管理器中查看book数据库
4）可以在企业管理器中看到已经建立的数据库，如图3-23所示；
图3-24 新建表
5）建立表，在“表”菜单上点右键，选择“新建表”菜单，如图3-24所示；
图3-25 创建表
6）在表设计器中填入列名，数据类型等信息，设置“ID”为主键，然后保存为“TABLE1”，如图3-25所示；
图3-26 保存数据库
7）在表中填入数据，关闭就保存了。如图3-26所示；
步骤2：建立显示数据库所有记录的ASP.NET网页文件Book.ASPX（含注释）。
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.Sqlclient" %>
<script language="VB" runat="server">
Sub Page_Load(Sender As Object, E As EventArgs)
'建立Connection对象，用户名UID和密码PWD都采用默认
Dim conn As New SqlConnection("Server=localhost;Database=book;Uid=sa;Pwd=")
'建立Command对象
Dim cmd As New SqlCommand("select * from TABLE1", conn)
'打开数据库连接
conn.Open()
'建立DataReader对象
Dim dr As SqlDataReader = cmd.ExecuteReader()
'指定数据源，使用DataGrid控件显示结果
MyDataGrid.DataSource = dr
'执行绑定
MyDataGrid.DataBind()
'关闭数据库连接
conn.Close()
End Sub
</script>
<html>
<title>ASP.NET演示</title>
<body>
<h4 align="center">图书目录</h4>
<ASP:DataGrid id="MyDataGrid" HeaderStyle-BackColor="#CDCDCD" runat="server"/>
</body>
</html>
图3-27 ASP.NET网页的测试效果
步骤3：调试ASP.NET网页
将Book.ASPX文件存于Web服务器的Inetpub\wwwroot目录中，在浏览器的地址栏中输入“http://服务器名/Book.ASPX”，屏幕上应显示如图3-27所示的数据库内容。如果修改数据库的内容，网页的显示内容也会随之修改，表现出“动态”网页的特性。
TCP/IP网络
浏览器发出URL请求
WWW服务器返回HTML页面
用户浏览器
WWW服务器
中间件
HTML
数据库
应用程序
用户浏览器
Web服务器
TCP/IP网络
$$
资源预览图
1
2
3
4
5
6
由于学科网是一个信息分享及获取的平台，不确保部分用户上传资料的 来源及知识产权归属。如您发现相关资料侵犯您的合法权益，请联系学科网，我们核实后将及时进行处理。