第2章 Java Web應(yīng)用開發(fā)基礎(chǔ)知識_第1頁
第2章 Java Web應(yīng)用開發(fā)基礎(chǔ)知識_第2頁
第2章 Java Web應(yīng)用開發(fā)基礎(chǔ)知識_第3頁
第2章 Java Web應(yīng)用開發(fā)基礎(chǔ)知識_第4頁
第2章 Java Web應(yīng)用開發(fā)基礎(chǔ)知識_第5頁
已閱讀5頁，還剩35頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報或認(rèn)領(lǐng)

文檔簡介

第2章JavaWeb應(yīng)用開發(fā)基礎(chǔ)知識2.1項目結(jié)構(gòu)與服務(wù)器目錄2.2頁面設(shè)計基礎(chǔ)2.3Web應(yīng)用開發(fā)常用機(jī)制2.4本章小結(jié)

課后習(xí)題

在上一章中介紹了如何新建一個JavaWeb項目，以及如何利用Tomcat服務(wù)器運行項目。在學(xué)習(xí)具體的開發(fā)技術(shù)之前，首先來了解一下JavaWeb項目的結(jié)構(gòu)與Tomcat服務(wù)器目錄。2.1項目結(jié)構(gòu)與服務(wù)器目錄以第1章Chapt_01項目為例，典型的JavaWeb項目目錄結(jié)構(gòu)主要包含src、build、WebContent文件夾以及項目引入的JRE類庫和Tomcat服務(wù)器運行所需的jar包。該目錄結(jié)構(gòu)如圖2-1所示。

該目錄結(jié)構(gòu)對應(yīng)著Eclipse的workspace路徑下的Chapt_01文件夾。如圖2-2所示。2.1.1JavaWeb項目結(jié)構(gòu)圖2-1典型的JavaWeb項目目錄結(jié)構(gòu)圖2-2Chapt_01文件夾的目錄結(jié)構(gòu)2.1.1JavaWeb項目結(jié)構(gòu)JavaWeb項目的目錄組織結(jié)構(gòu)。src目錄：源代碼的編寫。build目錄：類編譯后的class文件。WebContent目錄：JavaWeb應(yīng)用系統(tǒng)的根目錄，包含META-INF以及WEB-INF文件夾。（1）META-INF文件夾：包含MANIFEST.MF文件，由系統(tǒng)自動生成，用于系統(tǒng)信

息的描述。（2）WEB-INF文件夾：包含lib文件夾以及web.xml文件。①lib文件夾：存放項目中外部引入的jar包，比如用于數(shù)據(jù)庫訪問的驅(qū)動jar包。②web.xml：該Web項目的配置文件。其他目錄：根據(jù)應(yīng)用系統(tǒng)網(wǎng)站的需求，生成一些目錄。（1）靜態(tài)文件：靜態(tài)文件包括靜態(tài)HTML文件、CSS文件以及JS文件、圖片文件等。（2）動態(tài)網(wǎng)頁文件：JSP文件，可以直接存放在WebContent根路徑下或者子文件夾下。

Eclipse設(shè)置Tomcat服務(wù)器后，在PackageExplorer下出現(xiàn)了一個名為Servers的項目，如圖2-3所示。

Servers項目目錄下Tomcatv9.0serveratlocalhost-config文件夾包含一些配置文件，對應(yīng)著本機(jī)Tomcat安裝路徑下conf文件夾里的文件，如圖2-4所示。2.1.2Tomcat服務(wù)器目錄圖2-3Servers項目目錄結(jié)構(gòu)圖2-4Tomcat目錄結(jié)構(gòu)1.Tomcat主要目錄及文件的用途（1）bin目錄：存放Tomcat服務(wù)器的可執(zhí)行腳本文件。（2）conf目錄：存放Tomcat服務(wù)器的配置信息文件。①context.xml：指定了Web應(yīng)用需要加載的資源及文件的配置信息。

②server.xml：服務(wù)器的主要配置文件，包含Service,Connector,

Engine,Hosts等主要組件的配置，常見的配置如服務(wù)器的名稱、默認(rèn)的端口號等。③tomcat-usert.xml：服務(wù)器用戶的信息，可以在文件中配置用戶名、密碼及權(quán)限。

④web.xml：Tomcat服務(wù)器如何運行和處理的配置文件，如Servlet、過濾器、監(jiān)聽器

等Web組件的配置以及像歡迎頁面、錯誤頁面的設(shè)置。（3）lib目錄：存放服務(wù)器以及部署的Web項目所需要的jar包。（4）logs目錄：存放服務(wù)器的日志記錄文件。（5）temp目錄：存放服務(wù)器的臨時文件。（6）webapps目錄:當(dāng)web項目運行后，會在此目錄下生成一個和項目名同名的文件夾，存放項目運行所需的文件。（7）work目錄：服務(wù)器的工作目錄，在Web項目運行后，當(dāng)頁面第一次被訪問時，會被編譯并保存在work目錄下對應(yīng)項目的文件夾下。2.1.2Tomcat服務(wù)器目錄2.修改項目默認(rèn)部署路徑（1）打開Eclipse的Servers窗口，如果沒有找到Servers窗口，可依次選擇Windows→showView→Other→Server→Servers命令打開該窗口。如圖2-5所示。（2）清除Tomcat已部署的項目。右擊Tomcatv9.0serveratlocalhost，選擇clean命令清除服務(wù)器信息。鼠標(biāo)雙擊Tomcatv9.0serveratlocalhost，就可以看到Tomcat服務(wù)器的Overview配置頁面。如圖2-6所示。（3）選中Serverlocations下的UseTomcatinstallation選項，并在Deploypath右側(cè)的輸入框中將部署路徑名稱改為webapps。如圖2-7所示。（4）關(guān)閉Tomcat服務(wù)器的Overview配置頁面，并選擇保存。然后重新運行項目。2.1.2Tomcat服務(wù)器目錄圖2-5Servers窗口圖2-6Tomcat服務(wù)器的Overview配置頁面

圖2-7修改項目部署路徑2.2頁面設(shè)計基礎(chǔ)

當(dāng)用戶訪問Web應(yīng)用系統(tǒng)網(wǎng)站進(jìn)行相應(yīng)操作時，需要訪問不同的頁面。即使是嵌入了Java代碼的JSP的動態(tài)頁面，也是最終輸出為HTML標(biāo)簽，通過瀏覽器解釋并顯示頁面內(nèi)容。同時瀏覽器還能解析CSS（CascadingStyleSheets，層疊樣式表）文件，從而使頁面呈現(xiàn)不同的布局和顯示效果。運行在客戶端的JavaScript腳本也能提供更多的交互和動態(tài)效果，從而提高用戶體驗。因此本節(jié)介紹HTML、CSS以及JavaScriptDom在網(wǎng)頁設(shè)計中的使用。2.2.1HTMLHTML標(biāo)準(zhǔn)由Web聯(lián)盟組織下的HTML工作組進(jìn)行制定和維護(hù)，目前最新的版本為5。1.HTML文件結(jié)構(gòu)HTML文件是由不同標(biāo)簽組成的文本文件，后綴名為.html或者.htm。瀏覽器通過解析這些標(biāo)簽進(jìn)行頁面內(nèi)容的顯示。一個典型的HTML5文件由文檔說明類型聲明<!DOCTYPEhtml>、<html>標(biāo)記，<head>標(biāo)記部分、以及<body>標(biāo)記部分組成。（1）<!DOCTYPEhtml>：該標(biāo)記表明文檔按照HTML5新標(biāo)準(zhǔn)進(jìn)行解釋并顯示，如果刪除，則由瀏覽器按照默認(rèn)規(guī)則進(jìn)行顯示。（2）<html>標(biāo)記：該標(biāo)記為HTML文檔的根標(biāo)記，表示文檔的開始。該標(biāo)簽內(nèi)部嵌入<head>標(biāo)記部分以及<body>標(biāo)記部分。以</html>標(biāo)記作為文檔的結(jié)束。（3）<head>標(biāo)記部分：該標(biāo)記稱作頭標(biāo)記。以<head>標(biāo)簽開始，以</head>標(biāo)簽結(jié)尾。該部分用來定義HTML文件的頭部信息，在內(nèi)部還可以嵌入<title>、<meta>、<link>、<style>等標(biāo)簽。該部分定義的內(nèi)容不會呈現(xiàn)給用戶。（4）<body>標(biāo)記部分：該標(biāo)記部分為HTML文件的主體部分，以<body>標(biāo)簽開始，以</body>標(biāo)簽結(jié)尾。該部分用來定義文檔頁面的顯示內(nèi)容。在其內(nèi)部可以嵌入不同的標(biāo)簽元素，如文本段落、圖像、音頻、視頻、區(qū)塊等。用戶在瀏覽器看到的內(nèi)容都是由<body>內(nèi)部嵌入的標(biāo)簽元素決定。2.2.1HTML

2.常用HTML標(biāo)簽

HTML標(biāo)簽一般是成對且封閉的，如<body></body>，標(biāo)簽基本的語法格式：<標(biāo)簽名屬性1="屬性值1"屬性2="屬性值2"….>標(biāo)簽內(nèi)容</標(biāo)簽名>。

例如：<ahref="">這是一個超鏈接，單擊后跳轉(zhuǎn)到百度首頁</a>

也有部分空標(biāo)簽如<br>、<hr>等可以不成對出現(xiàn)，基本的語法格式<標(biāo)簽名屬性1="屬性值1"屬性2="屬性值2">。

例如：<imgalt="這是一個圖片"src="a.jpg">

不管標(biāo)簽是否成對，在書寫時，標(biāo)簽名、以及不同屬性之間需要以空格分開。

在實際開發(fā)中，需要在<head>內(nèi)部的標(biāo)簽中對文檔進(jìn)行定義，以及在<body>標(biāo)記中嵌入其他標(biāo)簽用于頁面內(nèi)容的顯示，下面介紹一些常用標(biāo)簽意義以及屬性的使用方法。2.2.1HTML1)<head>內(nèi)部標(biāo)簽（1）<meta>：定義頁面的元數(shù)據(jù)信息。常用的屬性包括charset、

name、http-equiv、content等。①

charset：定義頁面的編碼格式，一般為了兼容性，選擇UTF-8。②name：提供元數(shù)據(jù)名稱，如果沒有定義則使用http-equiv屬性值。③http-equiv：如果沒有name屬性，提供元數(shù)據(jù)名稱。④content：設(shè)置元數(shù)據(jù)的值。例如：<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/>表示該頁面發(fā)送的類型為html格式的文本，頁面編碼格式為UTF-8。（2）<title>：定義頁面的標(biāo)題，在<title></title>之間定義的名稱將會顯示在瀏覽器的標(biāo)題欄上。（3）<link>：引入外部文件，使用最多的是引入外部CSS文件。例如：<linkrel="stylesheet"type="text/css"href="style.css">2.2.1HTML2)用于內(nèi)容顯示的標(biāo)簽（1）<hn>：標(biāo)題標(biāo)簽。n可以是1-6的取值，h1為一級標(biāo)簽最大，h6最小。（2）<br>：換行標(biāo)簽。在代碼中直接換行，瀏覽器是無法直接解析并顯示換行的，需要使用<br>標(biāo)簽表示換行。如果想在頁面中實現(xiàn)空格的效果，必須使用

特殊字符進(jìn)行顯示。（3）<hr>：橫線標(biāo)簽。可以在頁面中顯示一條水平線。并通過size、width、align等屬性設(shè)置寬度、長度以及對齊方式。（4）<font>：字體標(biāo)簽?？梢詫?biāo)簽<font></font>中包含的文字，通過size、face、color等屬性設(shè)置字體大小、類型及顏色。（5）<p>：段落標(biāo)簽?？梢栽?lt;p></p>標(biāo)簽內(nèi)編寫文字，用于段落的顯示，并通過align屬性的值（left、right或者middle）設(shè)置文本對齊方式。（6）<ul>：無序列表標(biāo)簽。在標(biāo)簽內(nèi)部再通過嵌入<li>標(biāo)簽標(biāo)識無序列表項，在項目前會加上●或者■的符號。（7）<ol>：有序列表標(biāo)簽。在標(biāo)簽內(nèi)部再通過嵌入<li>標(biāo)簽標(biāo)示有序列表項，在項目前以數(shù)字進(jìn)行編號。（8）<a>：超鏈接標(biāo)簽。常用的屬性是href，表示鏈接的地址，可以是網(wǎng)站內(nèi)部地址，也可以是外部網(wǎng)址。標(biāo)簽內(nèi)容為超鏈接的顯示文字。（9）<img>：圖片標(biāo)簽。常用屬性為src，標(biāo)識圖片的文件路徑。（10）<table>：表格標(biāo)簽?？梢酝ㄟ^屬性值border設(shè)置表格邊框。在<table></table>標(biāo)簽體內(nèi)部，<caption>表示表格的標(biāo)題，一對<tr></tr>表示表格的一行，<tr>標(biāo)簽內(nèi)部再嵌入若干<td>標(biāo)簽，表示行中表格的單元列。還可以通過<td>標(biāo)簽的rowspan和colspan屬性進(jìn)行表格的行或者列的拆分。2.2.1HTML（11）<form>：表單標(biāo)簽。表單提交是網(wǎng)頁中最常見的功能之一，表單標(biāo)簽<form></form>

中由若干表單元素構(gòu)成。<form>標(biāo)簽常見的屬性有action和method。①

action屬性：其值表示表單提交后的地址。一般是處理用戶表單提交的應(yīng)用程

序，可以是一個servlet或者JSP文件。②

method：表示表單提交的方式，取值為post或者get。（12）<input>：表單元素標(biāo)簽。屬性type的值定義不同的表單元素。常見的表單元素如下。①

text：文本框。文本框的內(nèi)容由<input>標(biāo)簽的value屬性值決定。②

password：密碼框。輸入的密碼內(nèi)容不可見，以*號代替。③

radio：單選框。此時<input>標(biāo)簽的內(nèi)容為選項顯示的名稱，value屬性為選項對應(yīng)的值，name屬性表示單選框元素名稱，可以將多個單選項設(shè)置同一個

name值，表示為一組。checked屬性表示默認(rèn)的選擇項目。④

checkbox：多選框。此時<input>標(biāo)簽的內(nèi)容為選項，name、value和checked

屬性值和單選框的含義相同。一般也是多個多選框組合起來使用。⑤

reset：重置按鈕。單擊該按鈕，將表單中的所有元素設(shè)置為默認(rèn)值。⑥

submit：提交按鈕。單擊該按鈕，可以將表單提交。⑦

button：普通按鈕?？梢酝ㄟ^JS設(shè)置不同事件的響應(yīng)處理函數(shù)。（13）select：下拉框。在<select></select>標(biāo)簽內(nèi)部嵌入若干<option>標(biāo)簽。

<option></option>標(biāo)簽內(nèi)容為選項值。<select>標(biāo)簽的name屬性表示下拉框元素名稱，

size屬性表示下拉菜單顯示數(shù)目，multiple屬性表示可以多選。（14）<div>：區(qū)塊標(biāo)簽。該標(biāo)簽可以定義文檔中的一塊區(qū)域。定義區(qū)塊的作用是可以將文檔分成

若干部分，便于頁面的設(shè)計和布局。2.2.1HTML用于定義樣式及動態(tài)腳本的標(biāo)簽。（1）<style>：定義文檔樣式信息。屬性type的值為"text/css"，例如<styletype="text/css">……</style>，CSS樣式在標(biāo)簽內(nèi)部進(jìn)行定義。（2）<script>：定義腳本文件。一般是引用JavaScript文件，可以直接在標(biāo)簽體內(nèi)部定義，例如<scripttype="text/javascript">……</script>，也可以通過src屬性引入外部JS腳本文件。2.2.1HTML3.在Eclipse下編寫HTML文件Eclipse下編寫HTML文件的操作步驟。（1）打開Eclipse，新建一個DynamicWeb項目Chapt_02。（2）右擊WebContent目錄，選擇New→Other選項，在彈出的對話框中選擇Web→HTMLFile選

項，選擇新建HTML文件。（3）在選項卡中設(shè)置HTML文件的創(chuàng)建路徑并填寫名稱。（4）選擇生成的HTML文件的模板。（5）完成test.html文件的創(chuàng)建后，在Eclipse編輯區(qū)域自動生成了HTML模板代碼。（6）在模板的基礎(chǔ)上，在<head>標(biāo)簽中定義文檔的元數(shù)據(jù)，在<body>插入相應(yīng)標(biāo)簽進(jìn)行頁面內(nèi)

容的設(shè)計。

編寫完HTML頁面后，由于只是靜態(tài)頁面，可以直接雙擊文件，系統(tǒng)會打開瀏覽器，顯示其頁面內(nèi)容。2.2.1HTML【例2-1】使用標(biāo)題、段落、字體、文本框以及表格等標(biāo)簽示例。

在項目Chapt_02的WebContent目錄下，新建一個名為test.html的文檔。顯示效果如圖2-12。圖2-12test.html文檔顯示效果2.2.1HTML【例2-2】使用表單及表單元素標(biāo)簽示例。

在項目Chapt_02的WebContent目錄下，新建一個名為test2.html的文檔，顯示效果如圖2-13。圖2-13test2.html文檔顯示效果2.2.2CSS

在上一小節(jié)HTML文檔的顯示效果來看，雖然頁面中的元素都能正常顯示，但是頁面顯得不夠美觀?？梢酝ㄟ^設(shè)置標(biāo)簽中的某些屬性來美化顯示效果，例如table表中的border可以設(shè)置邊框的樣式、粗細(xì)等。但如果HTML文件中混雜過多用于顯示效果的屬性，會使得頁面代碼量過多，難以維護(hù)。因此，在實際開發(fā)中，建議HTML文檔只包含元素及部分必要屬性，將用于顯示效果的部分交給層疊樣式表，即CSS去控制。2.2.2CSS1.CSS標(biāo)準(zhǔn)CSS標(biāo)準(zhǔn)也是由W3C標(biāo)準(zhǔn)化組織制定以及維護(hù)的，目前最新的版本為CSS3。CSS樣式可以針對HTML文檔中的元素，進(jìn)行相關(guān)屬性的設(shè)置，從而達(dá)到對頁面效果的修飾。2.2.2CSS2.CSS語法CSS由元素選擇器、樣式聲明集合組成，其中樣式聲明通過屬性:屬性值的形式表示。每個樣式之間用分號隔開，形成樣式聲明的集合。整個樣式聲明的集合用{}花括號包含其中，具體格式如下所示。選擇器{屬性1:屬性值;屬性2:屬性值；….屬性n:屬性值;}2.2.2CSS

選擇器是指定樣式聲明作用的頁面元素對象，可以是一個具體的對象，也可以是由符合條件的多個對象。常用的選擇器包括：（1）標(biāo)簽選擇器：直接指定某個具體元素，例如，h1{color:red;}，表示h1標(biāo)題的字體顏色為紅色。（2）類選擇器：通過.類名的形式，指定頁面中具有指定class屬性值的元素集合。例如，頁面中的標(biāo)題h1和段落p有相同的class屬性值：<h1class="red">這個標(biāo)題字體顏色為紅色</h1><pclass="red">這個段落字體顏色為紅色</p>那么可以通過.red{color:red;}，將這兩個元素的文字顏色都設(shè)置為紅色。2.2.2CSS（3）id選擇器：通過#id的形式，指定頁面中對應(yīng)id屬性值的唯一元素。例如頁面中包含如下代碼。<pid="center">這個標(biāo)題要居中</p>注意頁面中元素的id值是必須是唯一的，因此可以通過以下語句指定這個段落的文字居中顯示。#center{text-align:center;}（4）通配選擇器：使用*通配符的形式，指定所有類型的元素。一般用于通用樣式的設(shè)置。此外還有通過多個選擇器搭配，從而形成一個組合選擇器，可以更加靈活地選擇指定的元素對象。2.2.2CSS3.CSS樣式按照CSS樣式出現(xiàn)的位置，可以把CSS樣式分為3種。（1）行內(nèi)樣式：直接在元素內(nèi)部以style屬性值設(shè)置的方式聲明。例如：<pstyle="color:red">這個段落字體顏色為紅色</p>此時style屬性指定的樣式僅適用于這一個<p>標(biāo)簽元素。（2）內(nèi)部樣式：在頁面中通過<styletype=="text/css">….</style>標(biāo)簽中指定相應(yīng)的CSS樣式。style標(biāo)簽可以放在head標(biāo)簽里，也可以放在body標(biāo)簽里。例如：<styletype=="text/css">.red{color:red;}#center{text-align:center;}</style>此時該樣式適用于本頁面中指定元素的顯示。（3）外部樣式：在頁面head標(biāo)簽內(nèi)部，通過<link>標(biāo)簽引入外部的CSS文件。<head><linkrel="stylesheet"type="text/css"href="style.css"/></head>可以在多個頁面引用一個外部樣式表，達(dá)到對不同頁面中通用部分元素的樣式進(jìn)行設(shè)置的目的。2.2.2CSSCSS樣式可以通過多種方式對同一個頁面元素進(jìn)行樣式的設(shè)置，此時多個CSS樣式存在優(yōu)先級，一般而言，優(yōu)先級順序為行內(nèi)、內(nèi)部、外部。如果有多個外部樣式文件引入，則采取就近原則，由離元素最近的樣式確定其顯示效果。2.2.2CSS

【例2-3】使用CSS樣式示例。（1）在Chapt_02項目的WebContent下，新建一個test3.html。該文件沒有CSS進(jìn)行樣式的修飾。test3.html顯示效果如圖2-14所示。（2）在WebContet目錄下分別新建一個名為text4.html和style.css的文件。test4.html顯示效果如圖2-16所示。圖2-14沒有引入CSS樣式的test3.html頁面顯示效果圖2-16引入CSS樣式后test4.html的顯示效果2.2.3JavaScriptHTML標(biāo)簽和CSS只提供了靜態(tài)的頁面顯示，交互性操作則需要JavaScript腳本來完成。JavaScript語言是一種基于對象的編程語言。目前在很多領(lǐng)域有著廣泛的應(yīng)用。在本書中，主要討論其作為客戶端腳本語言的使用。JS可以嵌入到HTML文件中，或者以外部文件方式引入。目前主流的瀏覽器都包含負(fù)責(zé)解析JS腳本文件的引擎，客戶端腳本可以被正確的執(zhí)行，實行相應(yīng)的交互效果。2.2.3JavaScriptJavaScript由核心部分（ECMAScript）、DOM（DocumentObjectModel，文檔對象模型）以及BOM（BrowserObjectModel，瀏覽器對象模型）三部分。（1）核心部分：描述JavaScript語言的基本語法和對象。（2）DOM：描述HTML以及XML應(yīng)用程序的接口。在HTMLDOM中，HTML文檔被視作樹結(jié)構(gòu)，頁面中所有元素都是樹中的節(jié)點，Document對象表示整個html頁面文檔。在Web開發(fā)中，主要使用JavaScript中的HTMLDOM接口對頁面中的元素以及相應(yīng)屬性進(jìn)行操作，從而形成動態(tài)交互的效果。（3）BOM：訪問瀏覽器對象的接口。主要包含以下對象。①

window：表示瀏覽器窗口。②

navigator：包含瀏覽器的基本信息。③

history：包含瀏覽器訪問的歷史信息。④

location：包含瀏覽器當(dāng)前訪問的地址信息。⑤

screen：表示瀏覽器顯示屏的信息。2.2.3JavaScript

JavaScript腳本也可以通過行內(nèi)、內(nèi)部以及外部文件引入等方式對HTML文檔進(jìn)行操作。下面通過例2-4演示頁面在引入外部JavaScript文件后，能夠?qū)崿F(xiàn)簡單的表單驗證。要求當(dāng)表單提交時，如果有表單項未填寫，阻止表單提交并彈出小窗口進(jìn)行信息提示?！纠?-4】JavaScript腳本實現(xiàn)表單驗證的示例。（1）在text4.html文檔的body標(biāo)簽體內(nèi)部插入下面一行代碼，表示引入當(dāng)前目錄下的formcheck.js文件。<scriptsrc="formcheck.js"></script>（2）在WebContent目錄下新建formcheck.js文件。運行test4.html頁面，未輸入用戶名或者密碼，進(jìn)行提交時彈出提示，分別如圖2-18及2-19所示。圖2-18未輸入用戶名時彈出提示圖2-19未輸入密碼進(jìn)行提交時彈出提示2.3Web應(yīng)用開發(fā)常用機(jī)制每個Web應(yīng)用系統(tǒng)承載和提供的業(yè)務(wù)功能與服務(wù)不盡相同，應(yīng)用場景也千差萬別，但所有的Web應(yīng)用系統(tǒng)都是基于HTTP協(xié)議，這意味著Web應(yīng)用在運行時都有著相同的機(jī)制。本節(jié)將介紹Web應(yīng)用系統(tǒng)開發(fā)中常用的機(jī)制。2.3.1 URL與HTTP協(xié)議用戶在訪問網(wǎng)站或者在頁面中進(jìn)行下載時，需要在瀏覽器中輸入類似或者ftp://:21/file這樣的網(wǎng)址。這些網(wǎng)址被稱為URL（uniformresourcelocator，統(tǒng)一資源定位符號），是運行在Internet上的應(yīng)用程序指定位置的表示方法。一個典型的URL可以由以下部分組成。（1）應(yīng)用協(xié)議：常用的協(xié)議有http、https、ftp、MAILTO等。（2）層級標(biāo)記符號：//標(biāo)記，用于分隔協(xié)議和服務(wù)器。（3）服務(wù)器：可以是域名，也可以是IP地址，代表服務(wù)器在網(wǎng)絡(luò)中的位置。（4）端口號：由服務(wù)器指定端口數(shù)字，如果采用默認(rèn)端口號，可以省略。（5）訪問路徑：以服務(wù)器指定根目錄開始，以/符號進(jìn)行分隔，訪問服務(wù)器中目錄中的資源（應(yīng)用模塊、程序、靜態(tài)頁面、文本文件、音頻、視頻等）。2.3.1 URL與HTTP協(xié)議那么當(dāng)用戶在瀏覽器中輸入URL對服務(wù)器進(jìn)行訪問時，HTTP協(xié)議是如何進(jìn)行工作的呢？事實上HTTP協(xié)議屬于應(yīng)用層協(xié)議，它是基于傳輸層的TCP（TransmissionControlProtocol，傳輸控制協(xié)議）協(xié)議，TCP是一個面向連接的協(xié)議，以下是用戶通過HTTP協(xié)議對服務(wù)器進(jìn)行請求并獲取響應(yīng)的步驟。（1）用戶通過瀏覽器輸入網(wǎng)址，此時瀏覽器程序與服務(wù)器的HTTP端口號（默認(rèn)為80）建立一個TCP套接字連接。（2）通過TCP連接，客戶端和服務(wù)器之間形成了較為穩(wěn)定的傳輸通道，此時客戶端通過不同的方式，向Web服務(wù)器發(fā)送一個請求報文（request），由請求行、請求頭部、空行和請求數(shù)據(jù)組成。（3）服務(wù)器接收請求，根據(jù)URL中地址，以及請求參數(shù)，去定位服務(wù)器中對應(yīng)資源（可能是靜態(tài)頁面或者是一個動態(tài)應(yīng)用程序），行成一個響應(yīng)（response），并通過TCP套接字返還給客戶端。一個響應(yīng)由狀態(tài)行、響應(yīng)頭部、空行和響應(yīng)數(shù)據(jù)組成。（4）完成請求響應(yīng)后，若不再需要繼續(xù)請求資源，則釋放TCP連接。（5）客戶端收到響應(yīng)后，首先查看狀態(tài)行的狀態(tài)碼，如果狀態(tài)碼為200，表示成功獲取響應(yīng)，則根據(jù)響應(yīng)頭部的格式，比如text/html格式的文本文檔，交給客戶端進(jìn)行解析，并在瀏覽器中顯示頁面內(nèi)容。若狀態(tài)碼是其他數(shù)字，則按照狀態(tài)碼的含義在瀏覽器中顯示相應(yīng)的提示信息。2.3.2

request與response

在上節(jié)中討論了用戶與服務(wù)器進(jìn)行請求和響應(yīng)的過程。其中提到request是通過特定的方式發(fā)送給服務(wù)器端的，HTTP常用的請求方法有以下八種。（1）GET：向特定的資源發(fā)出請求，也可以用與表單提交。（2）POST：一般用于向服務(wù)器提交數(shù)據(jù)，常用于表單提交。（3）HEAD：與GET類似，但只返回相應(yīng)頭部信息，不返回相應(yīng)數(shù)據(jù)。（4）PUT：從客戶端向服務(wù)器傳送的數(shù)據(jù)取代指定的文檔的內(nèi)容。（5）DELETE：請求刪除對應(yīng)的資源。（6）TRACE：回顯收到的請求，主要用于測試。（7）OPTIONS：返回服務(wù)器針對特定資源所支持的HTTP請求方法。（8）CONNECT：連接管道服務(wù)器。2.3.2

request與response

在實際開發(fā)中，使用得較多的是GET與POST方式。

一般而言，GET方式更傾向于向服務(wù)器請求頁面信息，可以攜帶一些參數(shù)附在資源地址后面，但參數(shù)的類型和長度都是受到限制，并且參數(shù)會通過URL直接顯示在瀏覽器的地址欄上。

POST方式以報文的形式向服務(wù)器提交數(shù)據(jù)，此時數(shù)據(jù)不會暴露在地址欄上，長度和類型不會受到限制。當(dāng)用戶與服務(wù)器進(jìn)行通信時，如果沒有敏感數(shù)據(jù)，比如只是進(jìn)行查詢，一般采用的是GET方式。而當(dāng)要進(jìn)行登錄操作時，要輸入用戶名、密碼等敏感信息，基于安全考慮，應(yīng)該使用POST方式。2.3.2

request與response當(dāng)服務(wù)器返回response后，瀏覽器首先查看的是響應(yīng)的狀態(tài)碼，根據(jù)成功與否決定顯示內(nèi)容。根據(jù)RFC2616文檔的規(guī)定，HTTPresponse狀態(tài)碼由3位數(shù)字組成，以第1個數(shù)字為代表表示不同類型，主要分為以下5類。（1）1xx：請求已被服務(wù)器接收，繼續(xù)處理。（2）2xx：消息以被服務(wù)器處理成功。（3）3xx：消息被服務(wù)器重定向。（4）4xx：請求錯誤。（5）5xx：服務(wù)器錯誤。每一個具體的消息代碼都規(guī)定了一個描述狀態(tài)的短語。比如在實際開發(fā)中，經(jīng)常遇到如下響應(yīng)狀態(tài)碼。（1）200ok，表示服務(wù)器處理完畢，response將正常返回。（2）400badrequest，服務(wù)器無法解析處理URL請求資源，如參數(shù)錯誤。（3）404notfound，請求資源不存在，常見于URL請求的地址有誤。（4）500internalservererror，服務(wù)器出現(xiàn)錯誤，無法處理請求，一般是服務(wù)器代碼出現(xiàn)問題。2.3.2

request與response在開發(fā)中，可以借助瀏覽器的開發(fā)者工具，查看請求和響應(yīng)的具體情況，從而可以很方便地進(jìn)行調(diào)試。主流的瀏覽器都已內(nèi)置了開發(fā)者工具。以剛才百度中搜索獲取結(jié)果的頁面為例，直接單擊鍵盤上的F12，就可以開啟開發(fā)者工具。單擊網(wǎng)絡(luò)監(jiān)視器，在消息頭欄目下，可以看到獲取檢索結(jié)果頁面時，請求與響應(yīng)的消息頭，如圖2-20所示。圖2-20請求與響應(yīng)的消息頭從圖中可以看到request的請求方式為GET，response的狀態(tài)碼為200，返回的類型是HTML文檔類型。response的數(shù)據(jù)部分可以通過單擊響應(yīng)按鈕查看，實際上就是搜索結(jié)果的頁面2.3.3 session與Cookie在訪問web應(yīng)用系統(tǒng)時，考慮以下兩個應(yīng)用場景：（1）當(dāng)用戶在網(wǎng)站購物時，要將不同類型的商

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論