官术网_书友最值得收藏!

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

主站蜘蛛池模板: 旬邑县| 宜州市| 漾濞| 沁源县| 屏东县| 肃宁县| 玛纳斯县| 江达县| 诏安县| 淮安市| 宁强县| 会昌县| 长子县| 修水县| 孟连| 宝山区| 平远县| 镇康县| 六枝特区| 庄河市| 华容县| 西林县| 旬邑县| 保亭| 霍林郭勒市| 曲水县| 明水县| 南充市| 阜平县| 长治县| 台东市| 裕民县| 兴隆县| 萝北县| 辉南县| 土默特左旗| 高密市| 桓台县| 故城县| 阿城市| 宜黄县|