- JSP動態(tài)網(wǎng)站開發(fā)案例指導(dǎo)
- 余芳 林美 夏躍偉等編著
- 3508字
- 2019-01-01 07:16:20
1.1 Web動態(tài)網(wǎng)站概述
Internet最初起源于美國國防部高級研究項目署(ARPA)在1969年建立的一個實驗性網(wǎng)絡(luò)ARPANET。該網(wǎng)絡(luò)將美國許多大學(xué)和研究機構(gòu)中從事國防研究項目的計算機連接在一起,成為一個廣域網(wǎng)。1974年ARPA研究并開發(fā)了一種新的網(wǎng)絡(luò)協(xié)議,即TCP/IP協(xié)議(Transmission Control Protocol/Internet Protocol:傳輸控制協(xié)議/互連協(xié)議),使得連接到網(wǎng)絡(luò)上的所有計算機能夠相互交流信息。
網(wǎng)絡(luò)的出現(xiàn),改變了人們使用計算機的方式;而Internet的出現(xiàn),又改變了人們使用網(wǎng)絡(luò)的方式。Internet使計算機用戶不再被局限于分散的計算機上,同時,也使他們脫離了特定網(wǎng)絡(luò)的約束。任何人只要進(jìn)入了Internet,就可以利用網(wǎng)絡(luò)和各種計算機上的豐富資源。
隨著網(wǎng)絡(luò)的不斷發(fā)展,單純的靜態(tài)網(wǎng)頁已經(jīng)不能滿足人們的需要。因為靜態(tài)是用單純的HTML語言組成的,它沒有交互性。因此,為了滿足實際的需要,動態(tài)網(wǎng)頁技術(shù)就產(chǎn)生了,比如PHP、ASP、JSP等,分別對應(yīng)的網(wǎng)頁文件擴(kuò)展名為“.php”、“.asp”、“.jsp”。
1.1.1 Web網(wǎng)站工作原理
Web網(wǎng)站主要由一些靜態(tài)網(wǎng)頁、動態(tài)的網(wǎng)頁(php、jsp、asp)、圖片和CSS樣式組成。它們的工作方式是客戶通過瀏覽器發(fā)送請求,服務(wù)器收到客戶請求,根據(jù)請求進(jìn)行相應(yīng)的業(yè)務(wù)邏輯處理,同時把處理結(jié)果發(fā)送給客戶,客戶收到服務(wù)器的處理請求后,瀏覽器會將請求信息友好地顯示給用戶,如圖1-1所示。

圖1-1 Web動態(tài)網(wǎng)站工作原理
1.1.2 HTML技術(shù)
HTML是超文本標(biāo)記語言(Hyper Text Markup Language)的縮寫。
HTML文件的開頭和結(jié)尾由<HTML>和</HTML>來標(biāo)記的。所有HTML文件都可以分為兩個部分——標(biāo)題和正文。每一部分用特定的標(biāo)記標(biāo)出:在HTML語言中規(guī)定<head>和</hedad>標(biāo)記標(biāo)題部分,用<body>和</body>標(biāo)記正文部分。
應(yīng)用范例
XX網(wǎng)上購物系統(tǒng)的標(biāo)題為“XX網(wǎng)上購物系統(tǒng)”,頁面顯示“XX網(wǎng)上購物系統(tǒng)”。
程序清單
程序1-1.jsp清單如下:
1 <html> 2 <head> 3 <title>XX網(wǎng)上購物系統(tǒng)</title> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 </head> 6 <body> 7 <h1>XX網(wǎng)上購物系統(tǒng)</h1> 8 </body> 9 </html>
范例解析
第1行的<html>標(biāo)記是HTML網(wǎng)頁的開始;第9行的</html>標(biāo)記是HTML網(wǎng)頁的結(jié)束;第2行的<head>標(biāo)記是HTML網(wǎng)頁的頭部標(biāo)記的開始;第5行的</head>標(biāo)記是HTML網(wǎng)頁頭部標(biāo)記的結(jié)束;第3行的<title>標(biāo)記是標(biāo)題標(biāo)記的開始,</title>標(biāo)記是標(biāo)題標(biāo)記的結(jié)束,中間的“XX網(wǎng)上購物系統(tǒng)”是標(biāo)題的名稱;第4行的<meta>標(biāo)記是HTML網(wǎng)頁的元標(biāo)記,用于設(shè)置網(wǎng)頁的MIME類型和字符編碼;第6行的<body>標(biāo)記是HTML網(wǎng)頁的主體標(biāo)記的開始;第8行的</body>標(biāo)記是HTML網(wǎng)頁的主體標(biāo)記的結(jié)束;第7行用于在網(wǎng)頁上顯示“XX網(wǎng)上購物系統(tǒng)”。關(guān)于HTML詳細(xì)的內(nèi)容請讀者查找閱讀相關(guān)的書籍。
范例結(jié)果演示
打開IE,運行1-1.html,運行結(jié)果如圖1-2所示。

圖1-2 HTML技術(shù)
光盤路徑
\code\chap01\1-1.html
1.1.3 CSS技術(shù)
CSS又稱層疊樣式,可以使用HTML標(biāo)簽或命名的方式定義,除可以控制一些傳統(tǒng)的文本屬性外,例如字體、字號、顏色等,還可以控制一些比較特別的HTML屬性,例如圖片、鼠標(biāo)指針等。
CSS樣式表分為三種,分別是內(nèi)嵌樣式、內(nèi)部樣式表和外部樣式表,下面分別介紹三種樣式表的用法,關(guān)于CSS詳細(xì)的內(nèi)容請讀者閱讀相關(guān)書籍。
1. 內(nèi)嵌樣式
內(nèi)嵌樣式是把樣式寫在標(biāo)簽內(nèi)部,只對當(dāng)前標(biāo)簽有效。
應(yīng)用范例
使用內(nèi)嵌樣式,顯示“XX網(wǎng)上購物系統(tǒng)”的字號為30pt.
程序清單
程序1-2.html清單如下:
1 <html> 2 <head> 3 <title>XX網(wǎng)上購物系統(tǒng)</title> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 </head> 6 <body> 7 <p style="font-size:30pt">XX網(wǎng)上購物系統(tǒng)</p> 8 </body> 9 </html>
范例解析
第7行使用標(biāo)記里的<style>屬性定義了字體的大小為30像素。
范例結(jié)果演示
打開IE,運行1-2.html,運行結(jié)果如圖1-3所示。

圖1-3 內(nèi)嵌樣式范例
光盤路徑
\code\chap01\1-2.html
2. 內(nèi)部樣式表
內(nèi)部樣式表的使用方法是在HTML網(wǎng)頁或JSP網(wǎng)頁的開頭使用<style>標(biāo)記定義,然后在主體標(biāo)記顯示內(nèi)容的時候,使用<div>標(biāo)記或<span>標(biāo)記使用。
應(yīng)用范例
使用內(nèi)部樣式,顯示“XX網(wǎng)上購物系統(tǒng)”的字號為30pt.
程序清單
程序1-3.html清單如下:
1 <html> 2 <head> 3 <title>XX網(wǎng)上購物系統(tǒng)</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網(wǎng)上購物系統(tǒng)</span></p> 11 </body> 12 </html>
范例解析
第5至7行定義了內(nèi)部樣式表;第10行,span標(biāo)簽使用了第6行定義的bg樣式。
范例結(jié)果演示
打開IE,運行1-3.html,運行結(jié)果如圖1-4所示。

圖1-4 內(nèi)部樣式范例
光盤路徑
\code\chap01\1-3.html
3. 外部樣式表
外部樣式表是把樣式(Styles)寫在一個以.css為后綴的CSS文件里,然后在每個需要用到這些樣式(Styles)的網(wǎng)頁里引用這個CSS文件。外部樣式表跟內(nèi)嵌樣式表或內(nèi)部樣式表相比,有以下優(yōu)點:
● 樣式代碼可以復(fù)用。一個外部CSS文件,可以被很多網(wǎng)頁公用。
● 便于修改。如果要修改樣式,只需要修改CSS文件,而不需要修改每個網(wǎng)頁。
● 提高網(wǎng)頁顯示的速度。如果樣式寫在網(wǎng)頁里,會降低網(wǎng)頁顯示的速度,如果網(wǎng)頁引用一個CSS文件,這個CSS文件多半已經(jīng)在緩存區(qū)(其他網(wǎng)頁早已經(jīng)引用過它),
網(wǎng)頁顯示的速度就比較快。
應(yīng)用范例
使用內(nèi)部樣式,顯示“XX網(wǎng)上購物系統(tǒng)”的字號為30pt. 程序清單
樣式1-4.css清單如下:
1 .bg { 2 font-size:30pt; 3 }
程序1-4.html清單如下:
1 <html> 2 <head> 3 <title>XX網(wǎng)上購物系統(tǒng)</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網(wǎng)上購物系統(tǒng)</span></p> 9 </body> 10 </html>
范例解析
樣式1-4.css清單中,1~3行定義了一個樣式bg,其功能是字體大小為30像素。
第5行鏈接外部樣式表;第8行,span標(biāo)簽使用外部定義好的樣式。
范例結(jié)果演示
打開IE,運行1-4.html,運行結(jié)果如圖1-5所示。

圖1-5 外部樣式范例
光盤路徑
\code\chap01\1-4.html
\code\chap01\1-4.css
1.1.4 JavaScript技術(shù)
JavaScript是由Sun公司及網(wǎng)景Netscape公司開發(fā)的。它可以讓你設(shè)計交互的網(wǎng)頁內(nèi)容,但不能單獨執(zhí)行,必須在瀏覽器或服務(wù)器上執(zhí)行。關(guān)于JavaScript詳細(xì)的內(nèi)容請讀者閱讀相關(guān)書籍。
應(yīng)用范例
使用JavaScript在頁面上顯示“XX網(wǎng)上購物系統(tǒng)”。
程序清單
程序1-5.html清單如下:
1 <html> 2 <head> 3 <title>XX網(wǎng)上購物系統(tǒng)</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網(wǎng)上購物系統(tǒng)") 10 </script> 11 </p> 12 </body> 13 </html>
范例解析
第8行的<script>標(biāo)記和第10行</script>標(biāo)記之間的代碼是JavaScript代碼;第9行,使用document.write在頁面上顯示“XX網(wǎng)上購物商城”。
范例結(jié)果演示
打開IE,運行1-5.html,運行結(jié)果如圖1-6所示。

圖1-6 JavaScript范例
光盤路徑
\code\chap01\1-5.html
1.1.5 JSP工作原理
JSP文件跟普通的HTML文件區(qū)別是,后綴名是.jsp且它里面可以包括java代碼。JSP的工作方式是第一次被請求時,JSP引擎把該JSP文件轉(zhuǎn)換成為一個servlet(關(guān)于servlet的知識將在第13章進(jìn)行詳細(xì)講解),而這個引擎本身也是一個servlet。
JSP引擎先把該JSP文件轉(zhuǎn)換成一個Java源文件,在轉(zhuǎn)換時如果發(fā)現(xiàn)JSP文件有任何語法錯誤,轉(zhuǎn)換過程將中斷,并向服務(wù)端和客戶端輸出出錯信息;如果轉(zhuǎn)換成功,JSP引擎用javac把該Java源文件編譯成相應(yīng)的class文件。然后創(chuàng)建一個該servlet的實例,該servlet的jspInit()方法被執(zhí)行,jspInit()方法在servlet的生命周期中只被執(zhí)行一次。然后jspService()方法被調(diào)用來處理客戶端的請求。對每一個請求,JSP引擎創(chuàng)建一個新的線程來處理該請求。如果有多個客戶端同時請求該JSP文件,則JSP引擎會創(chuàng)建多個線程。每個客戶端請求對應(yīng)一個線程。以多線程方式執(zhí)行可大大降低對系統(tǒng)的資源需求,提高系統(tǒng)的并發(fā)量及響應(yīng)時間。但應(yīng)該注意多線程的編程限制,由于該servlet始終駐于內(nèi)存,所以響應(yīng)是非??斓摹H绻?jsp文件被修改了,服務(wù)器將根據(jù)設(shè)置決定是否對該文件重新編譯,如果需要重新編譯,則將編譯結(jié)果取代內(nèi)存中的servlet,并繼續(xù)處理過程。雖然JSP效率很高,但在第一次調(diào)用時由于需要轉(zhuǎn)換和編譯而有一些輕微的延遲。此外,如果在任何時候由于系統(tǒng)資源不足的原因,JSP引擎將以某種不確定的方式將servlet從內(nèi)存中移去。當(dāng)這種情況發(fā)生時jspDestroy()方法首先被調(diào)用,然后servlet實例便被標(biāo)記加入“垃圾收集”處理。JSP工作原理如圖1-7所示,JSP生成的java文件如圖1-8所示。

圖1-7 JSP工作原理

圖1-8 JSP生成java文件工作原理
應(yīng)用范例
使用JSP,開發(fā)一個網(wǎng)頁,在頁面上顯示“XX網(wǎng)上購物商城”。
程序清單
程序1-6.jsp清單如下:
1 <%@ page language="java" contentType="text/html; charset=gb2312" 2 pageEncoding="gb2312"%> 3 <html> 4 <head> 5 <title>XX網(wǎng)上購物商城</title> 6 </head> 7 <body> 8 <% 9 out.println("<h1>XX網(wǎng)上購物商城<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網(wǎng)上購物商城</title>\n"); 57 out.write(" </head>\n"); 58 out.write(" <body>\n"); 59 out.write(" "); 60 61 out.println("<h1>XX網(wǎng)上購物商城<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代碼;經(jīng)過JSP引擎生成的java代碼,程序1-6.jsp在java代碼為54行至65行。
范例結(jié)果演示
打開IE,運行1-6.jsp,運行結(jié)果如圖1-9所示。

圖1-9 jsp工作原理
光盤路徑
\code\chap01\1-6.jsp
- Photoshop電商網(wǎng)頁廣告設(shè)計實戰(zhàn)從入門到精通(超值版)
- 網(wǎng)頁設(shè)計與制作:HTML+CSS+JavaScript標(biāo)準(zhǔn)教程
- Adobe Dreamweaver CS5中文版經(jīng)典教程
- 網(wǎng)頁設(shè)計與制作(Dreamweaver CS6)
- 網(wǎng)頁制作實用教程(第3版)
- 動態(tài)網(wǎng)頁設(shè)計(第2版)
- 網(wǎng)頁美工
- HTML+CSS+JavaScript網(wǎng)頁設(shè)計與布局:從新手到高手
- 網(wǎng)頁設(shè)計與制作Dreamweaver CS6標(biāo)準(zhǔn)教程(第2版)
- 速學(xué)速通:快學(xué)Flash網(wǎng)頁動畫
- ADOBE DREAMWEAVER CS6 標(biāo)準(zhǔn)培訓(xùn)教材
- 動態(tài)網(wǎng)頁設(shè)計與制作(HTML5+CSS3+JavaScript)(第3版)
- Vue應(yīng)用程序開發(fā)
- 在實戰(zhàn)中成長:JSP開發(fā)之路
- Web程序設(shè)計