1.1 Web动态网站概述
Internet最初起源于美国国防部高级研究项目署（ARPA）在1969年建立的一个实验性网络ARPANET。该网络将美国许多大学和研究机构中从事国防研究项目的计算机连接在一起，成为一个广域网。1974年ARPA研究并开发了一种新的网络协议，即TCP/IP协议（Transmission Control Protocol/Internet Protocol：传输控制协议/互连协议），使得连接到网络上的所有计算机能够相互交流信息。
网络的出现，改变了人们使用计算机的方式；而Internet的出现，又改变了人们使用网络的方式。Internet使计算机用户不再被局限于分散的计算机上，同时，也使他们脱离了特定网络的约束。任何人只要进入了Internet，就可以利用网络和各种计算机上的丰富资源。
随着网络的不断发展，单纯的静态网页已经不能满足人们的需要。因为静态是用单纯的HTML语言组成的，它没有交互性。因此，为了满足实际的需要，动态网页技术就产生了，比如PHP、ASP、JSP等，分别对应的网页文件扩展名为“.php”、“.asp”、“.jsp”。
1.1.1 Web网站工作原理
Web网站主要由一些静态网页、动态的网页（php、jsp、asp）、图片和CSS样式组成。它们的工作方式是客户通过浏览器发送请求，服务器收到客户请求，根据请求进行相应的业务逻辑处理，同时把处理结果发送给客户，客户收到服务器的处理请求后，浏览器会将请求信息友好地显示给用户，如图1-1所示。
图1-1 Web动态网站工作原理
1.1.2 HTML技术
HTML是超文本标记语言（Hyper Text Markup Language）的缩写。
HTML文件的开头和结尾由＜HTML＞和＜/HTML＞来标记的。所有HTML文件都可以分为两个部分——标题和正文。每一部分用特定的标记标出：在HTML语言中规定＜head＞和＜/hedad＞标记标题部分，用＜body＞和＜/body＞标记正文部分。
应用范例
XX网上购物系统的标题为“XX网上购物系统”，页面显示“XX网上购物系统”。
程序清单
程序1-1.jsp清单如下：
1 ＜html＞
2 ＜head＞
3 ＜title＞XX网上购物系统＜/title＞
4 ＜meta http-equiv="Content-Type" content="text/html;
charset=UTF-8"＞
5 ＜/head＞
6 ＜body＞
7 ＜h1＞XX网上购物系统＜/h1＞
8 ＜/body＞
9 ＜/html＞
范例解析
第1行的＜html＞标记是HTML网页的开始；第9行的＜/html＞标记是HTML网页的结束；第2行的＜head＞标记是HTML网页的头部标记的开始；第5行的＜/head＞标记是HTML网页头部标记的结束；第3行的＜title＞标记是标题标记的开始，＜/title＞标记是标题标记的结束，中间的“XX网上购物系统”是标题的名称；第4行的＜meta＞标记是HTML网页的元标记，用于设置网页的MIME类型和字符编码；第6行的＜body＞标记是HTML网页的主体标记的开始；第8行的＜/body＞标记是HTML网页的主体标记的结束；第7行用于在网页上显示“XX网上购物系统”。关于HTML详细的内容请读者查找阅读相关的书籍。
范例结果演示
打开IE，运行1-1.html，运行结果如图1-2所示。
图1-2 HTML技术
光盘路径
\code\chap01\1-1.html
1.1.3 CSS技术
CSS又称层叠样式，可以使用HTML标签或命名的方式定义，除可以控制一些传统的文本属性外，例如字体、字号、颜色等，还可以控制一些比较特别的HTML属性，例如图片、鼠标指针等。
CSS样式表分为三种，分别是内嵌样式、内部样式表和外部样式表，下面分别介绍三种样式表的用法，关于CSS详细的内容请读者阅读相关书籍。
1. 内嵌样式
内嵌样式是把样式写在标签内部，只对当前标签有效。
应用范例
使用内嵌样式，显示“XX网上购物系统”的字号为30pt.
程序清单
程序1-2.html清单如下：
1 ＜html＞
2 ＜head＞
3 ＜title＞XX网上购物系统＜/title＞
4 ＜meta http-equiv="Content-Type" content="text/html;
charset=UTF-8"＞
5 ＜/head＞
6 ＜body＞
7 ＜p style="font-size:30pt"＞XX网上购物系统＜/p＞
8 ＜/body＞
9 ＜/html＞
范例解析
第7行使用标记里的＜style＞属性定义了字体的大小为30像素。
范例结果演示
打开IE，运行1-2.html，运行结果如图1-3所示。
图1-3 内嵌样式范例
光盘路径
\code\chap01\1-2.html
2. 内部样式表
内部样式表的使用方法是在HTML网页或JSP网页的开头使用＜style＞标记定义，然后在主体标记显示内容的时候，使用＜div＞标记或＜span＞标记使用。
应用范例
使用内部样式，显示“XX网上购物系统”的字号为30pt.
程序清单
程序1-3.html清单如下：
1 ＜html＞
2 ＜head＞
3 ＜title＞XX网上购物系统＜/title＞
4 ＜meta http-equiv="Content-Type" content="text/html;
charset=UTF-8"＞
5 ＜style ＞
6 .bg{font-size:30pt}
7 ＜/style＞
8 ＜/head＞
9 ＜body＞
10 ＜p＞＜span class="bg"＞XX网上购物系统＜/span＞＜/p＞
11 ＜/body＞
12 ＜/html＞
范例解析
第5至7行定义了内部样式表；第10行，span标签使用了第6行定义的bg样式。
范例结果演示
打开IE，运行1-3.html，运行结果如图1-4所示。
图1-4 内部样式范例
光盘路径
\code\chap01\1-3.html
3. 外部样式表
外部样式表是把样式（Styles）写在一个以.css为后缀的CSS文件里，然后在每个需要用到这些样式（Styles）的网页里引用这个CSS文件。外部样式表跟内嵌样式表或内部样式表相比，有以下优点：
● 样式代码可以复用。一个外部CSS文件，可以被很多网页公用。
● 便于修改。如果要修改样式，只需要修改CSS文件，而不需要修改每个网页。
● 提高网页显示的速度。如果样式写在网页里，会降低网页显示的速度，如果网页引用一个CSS文件，这个CSS文件多半已经在缓存区（其他网页早已经引用过它），
网页显示的速度就比较快。
应用范例
使用内部样式，显示“XX网上购物系统”的字号为30pt. 程序清单
样式1-4.css清单如下：
1 .bg {
2 font-size:30pt;
3 }
程序1-4.html清单如下：
1 ＜html＞
2 ＜head＞
3 ＜title＞XX网上购物系统＜/title＞
4 ＜meta http-equiv="Content-Type" content="text/html;
charset=UTF-8"＞
5 ＜link href="1-4.css" type="text/css" rel="stylesheet"＞
6 ＜/head＞
7 ＜body＞
8 ＜p＞＜span class="bg"＞XX网上购物系统＜/span＞＜/p＞
9 ＜/body＞
10 ＜/html＞
范例解析
样式1-4.css清单中，1～3行定义了一个样式bg，其功能是字体大小为30像素。
第5行链接外部样式表；第8行，span标签使用外部定义好的样式。
范例结果演示
打开IE，运行1-4.html，运行结果如图1-5所示。
图1-5 外部样式范例
光盘路径
\code\chap01\1-4.html
\code\chap01\1-4.css
1.1.4 JavaScript技术
JavaScript是由Sun公司及网景Netscape公司开发的。它可以让你设计交互的网页内容，但不能单独执行，必须在浏览器或服务器上执行。关于JavaScript详细的内容请读者阅读相关书籍。
应用范例
使用JavaScript在页面上显示“XX网上购物系统”。
程序清单
程序1-5.html清单如下：
1 ＜html＞
2 ＜head＞
3 ＜title＞XX网上购物系统＜/title＞
4 ＜meta http-equiv="Content-Type" content="text/html;
charset=UTF-8"＞
5 ＜/head＞
6 ＜body＞
7 ＜p＞
8 ＜script＞
9 document.write("XX网上购物系统")
10 ＜/script＞
11 ＜/p＞
12 ＜/body＞
13 ＜/html＞
范例解析
第8行的＜script＞标记和第10行＜/script＞标记之间的代码是JavaScript代码；第9行，使用document.write在页面上显示“XX网上购物商城”。
范例结果演示
打开IE，运行1-5.html，运行结果如图1-6所示。
图1-6 JavaScript范例
光盘路径
\code\chap01\1-5.html
1.1.5 JSP工作原理
JSP文件跟普通的HTML文件区别是，后缀名是.jsp且它里面可以包括java代码。JSP的工作方式是第一次被请求时，JSP引擎把该JSP文件转换成为一个servlet（关于servlet的知识将在第13章进行详细讲解），而这个引擎本身也是一个servlet。
JSP引擎先把该JSP文件转换成一个Java源文件，在转换时如果发现JSP文件有任何语法错误，转换过程将中断，并向服务端和客户端输出出错信息；如果转换成功，JSP引擎用javac把该Java源文件编译成相应的class文件。然后创建一个该servlet的实例，该servlet的jspInit()方法被执行，jspInit()方法在servlet的生命周期中只被执行一次。然后jspService()方法被调用来处理客户端的请求。对每一个请求，JSP引擎创建一个新的线程来处理该请求。如果有多个客户端同时请求该JSP文件，则JSP引擎会创建多个线程。每个客户端请求对应一个线程。以多线程方式执行可大大降低对系统的资源需求，提高系统的并发量及响应时间。但应该注意多线程的编程限制，由于该servlet始终驻于内存，所以响应是非常快的。如果.jsp文件被修改了，服务器将根据设置决定是否对该文件重新编译，如果需要重新编译，则将编译结果取代内存中的servlet，并继续处理过程。虽然JSP效率很高，但在第一次调用时由于需要转换和编译而有一些轻微的延迟。此外，如果在任何时候由于系统资源不足的原因，JSP引擎将以某种不确定的方式将servlet从内存中移去。当这种情况发生时jspDestroy()方法首先被调用，然后servlet实例便被标记加入“垃圾收集”处理。JSP工作原理如图1-7所示，JSP生成的java文件如图1-8所示。
图1-7 JSP工作原理
图1-8 JSP生成java文件工作原理
应用范例
使用JSP，开发一个网页，在页面上显示“XX网上购物商城”。
程序清单
程序1-6.jsp清单如下：
1 ＜%@ page language="java" contentType="text/html; charset=gb2312"
2 pageEncoding="gb2312"%＞
3 ＜html＞
4 ＜head＞
5 ＜title＞XX网上购物商城＜/title＞
6 ＜/head＞
7 ＜body＞
8 ＜%
9 out.println("＜h1＞XX网上购物商城＜h1＞");
10 %＞
11 ＜/body＞
12 ＜/html＞
JSP引擎生成的java文件清单如下：
1 package org.apache.jsp.chap01;
2
3 import javax.servlet.＊;
4 import javax.servlet.http.＊;
5 import javax.servlet.jsp.＊;
6
7 public final class _1_002d6_jsp extends
org.apache.jasper.runtime.HttpJspBase
8 implements org.apache.jasper.runtime.JspSourceDependent {
9
10 private static final JspFactory _jspxFactory =
JspFactory.getDefaultFactory();
11
12 private static java.util.List _jspx_dependants;
13
14 private javax.el.ExpressionFactory _el_expressionfactory;
15 private org.apache.AnnotationProcessor _jsp_annotationprocessor;
16
17 public Object getDependants() {
18 return _jspx_dependants;
19 }
20
21 public void _jspInit() {
22 _el_expressionfactory =
_jspxFactory.getJspApplicationContext(getServletConfig().getServletContex
t()).getExpressionFactory();
23 _jsp_annotationprocessor = (org.apache.AnnotationProcessor)
getServletConfig().getServletContext().getAttribute(org.apache.Annotation
Processor.class.getName());
24 }
25
26 public void _jspDestroy() {
27 }
28
29 public void _jspService(HttpServletRequest request,
HttpServletResponse response)
30 throws java.io.IOException, ServletException {
31
32 PageContext pageContext = null;
33 HttpSession session = null;
34 ServletContext application = null;
35 ServletConfig config = null;
36 JspWriter out = null;
37 Object page = this;
38 JspWriter _jspx_out = null;
39 PageContext _jspx_page_context = null;
40
41
42 try {
43 response.setContentType("text/html; charset=gb2312");
44 pageContext = _jspxFactory.getPageContext(this, request,
response,
45 null, true, 8192, true);
46 _jspx_page_context = pageContext;
47 application = pageContext.getServletContext();
48 config = pageContext.getServletConfig();
49 session = pageContext.getSession();
50 out = pageContext.getOut();
51 _jspx_out = out;
52
53 out.write("\n");
54 out.write("＜html＞\n");
55 out.write(" ＜head＞\n");
56 out.write(" ＜title＞XX网上购物商城＜/title＞\n");
57 out.write(" ＜/head＞\n");
58 out.write(" ＜body＞\n");
59 out.write(" ");
60
61 out.println("＜h1＞XX网上购物商城＜h1＞");
62
63 out.write("\n");
64 out.write(" ＜/body＞\n");
65 out.write("＜/html＞");
66 } catch (Throwable t) {
67 if (!(t instanceof SkipPageException)){
68 out = _jspx_out;
69 if (out != null && out.getBufferSize() != 0)
70 try { out.clearBuffer(); } catch (java.io.IOException e) {}
71 if (_jspx_page_context != null)
_jspx_page_context.handlePageException(t);
72 }
73 } finally {
74 _jspxFactory.releasePageContext(_jspx_page_context);
75 }
76 }
77 }
范例解析
程序1-6.jsp清单中，第8～第10行，使用的是java代码；经过JSP引擎生成的java代码，程序1-6.jsp在java代码为54行至65行。
范例结果演示
打开IE，运行1-6.jsp，运行结果如图1-9所示。
图1-9 jsp工作原理
光盘路径
\code\chap01\1-6.jsp