- JSP動態網站開發案例指導
- 余芳 林美 夏躍偉等編著
- 3508字
- 2019-01-01 07:16:20
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
- 網站建設與網頁設計從入門到精通Dreamweaver+Flash+Photoshop＋HTML+CSS+JavaScript
- 中文版Flash CC完全自學教程
- Dreamweaver CS5+ASP動態網站設計實用手冊
- 動漫秀場：超級漫畫Q版造型素描技法
- UI動效大爆炸：After Effects移動UI動效制作學習手冊
- 網頁美工
- 速學速通：快學Flash動畫制作
- 中文版Dreamweaver CC+Flash CC+Photoshop CC網頁設計基礎培訓教程
- 網頁設計與制作
- Dreamweaver CC網頁設計從入門到精通（微課精編版）
- Sketch 移動UI與交互設計（視頻講解版）
- Dreamweaver CS3網站制作炫例精講
- Dreamweaver，Flash，Fireworks網頁設計百練成精（CS3版）
- 網站視覺設計
- 網頁設計綜合實踐教程