JavaWeb淺入瞭解

學問是光明,矇昧是黑暗。唸書吧。與你共勉。

目錄

1、HTML

1.1、HTML是什麼

1.2、HTML的結構

1.3、HTML語法

1.3.1、html標籤

1.3.2、html屬性

1.3.3、html註釋

1.3.4、html空格和換行

1.4、HTML標籤

2、CSS

2.1、CSS簡介

2.2、CSS在HTML中的引入

2.3、CSS選擇器

2.4、常用屬性總結

3、JavaScript

3.1、JavaScript簡介

3.2、特性

3.3、HTML中使用JS的方法

3.4、JS語法

3.4.1、註釋

3.4.2、數據類型

3.4.3、變量聲明

3.4.4、運算符

3.4.5、js語句

3.4.6、js數組

3.4.7、js函數

3.5、js如何獲取元素

4、JQuery

4.1、簡介

4.2、特點

4.3、JQuery的引入

4.4、JQuery的選擇器

4.5、創建一個表格

4.6、總結

5、HTTP

5.1、什麼是HTTP協議

5.2、HTTP協議詳解

5.3、GET和POST的區別

6、Servlet

6.1、簡介

6.2、如何開發一個Servlet程序

6.2.1、創建工程

6.2.2、Servlet在web.xml中的配置

6.2.3、運行程序進行測試

6.3、Servlet的繼承關係

6.4、Request和Response

6.4.1、request

6.4.2、請求轉發

6.4.3、response

6.4.4、重定向

7、JSP

7.1、JSP簡介

7.2、JSP執行過程

7.3、JSP語法

7.3.1、模板元素

7.3.2、JSP表達式

7.3.3、JSP腳本

7.3.4、註釋

7.3.5、JSP指令

7.4、EL表達式

7.5、Jstl


1、HTML

1.1、HTML是什麼

HTML稱爲超文本標記語言,是一種標識性的語言。它包括一系列標籤.通過這些標籤可以將網絡上的文檔格式統一,使分散的Internet資源連接爲一個邏輯整體。HTML文本是由HTML命令組成的描述性文本,HTML命令可以說明文字圖形動畫聲音表格鏈接等。哈哈哈哈,是不是感覺太官方了,那就看下面:

(1) HTML是一門標記(也叫做標籤或元素)語言,不是編程語言

(2) HTML是一門標記語言,是利用標記來組織網頁結構的

(3) 使用html開發的網頁文件,以".html"或".htm "(.shtml)爲後綴

(4) 使用html開發的網頁文件,由瀏覽器負責解析並執行(即顯示在瀏覽器中)

(5) HTML是文檔的一種,例如:word pdf txt…

1.2、HTML的結構

<!DOCTYPE HTML> 文檔聲明, 用來聲明HTML文檔所遵循的HTML規範和版本,上面是html5.0的聲明, 也是目前最常用的版本

<head></head> 頭部分, 用來存放HTML文檔的基本屬性信息, 比如網頁的標題, 文檔使用的編碼等, 這部分信息會被瀏覽器優先加載.

<body></body> 體部分, 用來存放網頁可視化數據. 即真正的網頁數據

<title></title> 聲明網頁的標題

<meta charset="utf-8"/> 用來通知瀏覽器使用哪一個編碼來打開HTML文檔, 這個編碼一定要和文件保存時的編碼保持一致, 纔不會出現中文亂碼問題.

1.3、HTML語法

1.3.1、html標籤

HTML是一門標記語言,標記也叫做元素/標籤,標籤分爲開始標籤和結束標籤。

<body></body>      <table></table>       <form></form>

如果標籤內沒有內容要修飾,可以合併成一個自閉標籤。

<meta/> <br/> <hr/> <input/> <img/>等等

1.3.2、html屬性

標籤都可以具有屬性,屬性可以有多個,多個屬性之間用空格隔開

<font size="7" color="red" face="華文琥珀">文本內容…</font>

提示:屬性的值用單引號或雙引號引起來,或者不用引號。通常使用雙引號引起來

1.3.3、html註釋

<!-- 註釋內容 -->,注意html註釋不能交叉嵌套

1.3.4、html空格和換行

<br/>     換行
&nbsp;    空格
&emsp;    中文狀態下的空格

1.4、HTML標籤

1)、圖像標籤

img標籤用於在網頁中插入一幅圖片

<img src="img/1.jpg" width="70%" border="5px"/>

src屬性:用來指定圖片的url地址(即圖片的所在路徑)

width屬性:指定圖片的寬度,單位可以爲px(像素)或者%(百分比)

height屬性:指定圖片的高度,單位可以爲px(像素)或者%(百分比)

2)、超鏈接

用於創建指向另外一個文檔的超鏈接(點擊後可以跳轉到另外一個文檔)

<a href="http://www.baidu.com" target="_blank">百度一下,你就不知道</a>

href屬性:用來指定點擊超鏈接後將要跳轉到的url地址

target屬性:用來指定以何種方式打開超鏈,其常用取值爲:

_self:默認值,在當前窗口打開超鏈接

_blank:在新的窗口中打開超鏈接

3)、表格標籤

<table>
	<tr>
		<td>11</td>
		<td>12</td>
		<td>13</td>
	</tr>
	<tr>
		<td>21</td>
		<td>22</td>
		<td>23</td>
	</tr>
	<tr>
		<td>31</td>
		<td>32</td>
		<td>33</td>
	</tr>
</table>

table – 用來定義一個表格

tr – 用來定義表格中的行

td – 用來定義表格中的單元格

th – 用來定義表頭

4)、表單標籤

表單的作用是向服務器發送數據。

<form action="http://www.baidu.com" method="GET"></form>

action 必須存在的屬性,用來指定表單提交的目的地地址

method 可選屬性,用來指定以何種方式來提交表單,如果不指定,默認是GET提交

5)、表單項標籤

表單中可以有多個輸入項,輸入項必須有name屬性纔可以被提交,如果輸入項沒有name屬性,則表單在提交時會忽略它

a、input元素

<-- 普通文本輸入框-->
<input type="text" name="username" value="設置默認值"/>
<-- 密碼輸入框-->
<input type="password" name="password" value="設置默認值"/>
<-- 單選框   value用來指定選項被提交時的值, 如果不設置value, 選項被提交時, 值爲on.-->
<input type="radio" name="gender" value="man"/>
<-- 複選框-->
<input type="checkbox" name="like" value="lanqiu"/>
<-- 提交按鈕   用來提交表單用的-->
<input type="submit" value="按鈕上顯示的文本">
<-- 普通按鈕-->
<input type="button" value="按鈕上顯示的文本">

b、textarea多行文本輸入

<textarea name="description" cols="寬度" rows="高度">請輸入個人描述..</textarea>

cols屬性:設置輸入框寬度

      rows屬性:設置輸入框高度

c、下拉選框

<select name="city">
		<option value="bj">北京</option>
		<option value="sh">上海</option>
		<option value="gz" selected="selected">廣州</option>
</select>

其中selected屬性用來設置該選項默認被選中

value屬性用來設置選項被提交時的值

 

6)、表單細節問題

a、提交表單時,表單中的數據怎麼沒有被提交?

在表單中,每一個要提交數據的表單項標籤都要具有name屬性

b、如何讓多個單選框只有一個被選中?

設置這多個單選框的name屬性值相同,如果name相同,這多個單選框就默認是一個組,一個組就只能選中一個選項。

c、爲什麼單選框、複選框提交後的值都是on?

如果單選框或複選框沒有設置value屬性,選擇任何一個選項最終提交的值都是on,這樣服務器無法區分用戶到底選擇是什麼選項。

d、如何設置單選框、複選框默認選中一項?

只需要在單選框或複選框上面添加一個屬性: checked="checked",

e、如何設置下拉選框默認選中一項?

如果不設置,下拉選框默認選中的第一個選項,可以通過 selected="selected"屬性設置某一項默認被選中

f、下拉選框中的option選項上的value屬性的作用是什麼?

選中某一個option,在表單提交時,如果option上沒有value屬性,就提交option標籤的內容;如果option上有value屬性,就提交value屬性的值。

2、CSS

2.1、CSS簡介

層疊樣式表(英文全稱:Cascading Style Sheets)是一種用來表現HTML標準通用標記語言的一個應用)或XML(標準通用標記語言的一個子集)等文件樣式的計算機語言。CSS不僅可以靜態地修飾網頁,還可以配合各種腳本語言動態地對網頁各元素進行格式化。 [1] 

CSS 能夠對網頁中元素位置的排版進行像素級精確控制,支持幾乎所有的字體字號樣式,擁有對網頁對象和模型樣式編輯的能力

html的作用: 通過html標籤組織網頁的結構

css的作用: 渲染網頁、美化網頁

2.2、CSS在HTML中的引入

1)、通過標籤的style屬性引入

<div style="border:2px solid red;font-size:26px;background:pink;">
	這是一個div...
</div>

2)、通過style標籤引入

放在head裏面

<style type="text/css">
	/* ****** CSS樣式 ****** */
	span{
		border:2px solid green;
		font-size:30px;
		font-weight:bolder;
	}
</style>

3)、通過link鏈接引入外部的CSS文件

放在head裏面

<link  rel="stylesheet" href="demo.css"/>

2.3、CSS選擇器

1)、標籤名選擇器

根據標籤(元素)的名稱來選擇指定名稱的元素進行樣式的修飾,格式:標籤名{ css屬性… }

如:

span{
	background:#DDA0DD;
	font-size:24px;
	font-weight:bolder;
}

2)、class選擇器

通過標籤上通用的屬性class,可以爲標籤指定所屬的類(組)進行樣式的修飾。格式:.類名{ css屬性… }

如:

.c1{ /* 表示選中所有class值爲c1的元素 */
	background: #b1eb0a;
	color: #0b190b;
}
.c2{ /* 表示選中所有class值爲c2的元素 */
	background:#f3db09;
	color: blue;
}

如果說一個標籤上有多個類選擇器,而這多個選擇器的樣式有相同的修飾屬性,那麼後面的樣式會覆蓋前面的樣式。

3)、id選擇器

通過標籤上通用的屬性id,可以爲標籤設置唯一的標識,格式:#id值{ css屬性…

如:

#p1{ /* 選中id爲p1的元素 */
	font-size:28px;
	color: red;
	text-indent: 20px;
}

4)、後代選擇器

選中父元素內部的指定後代元素,格式:父選擇器  後代元素{CSS樣式}

p span{/* 選中所有p元素內部的所有span元素 */
	font-size: 20px;
	color:green;
	background: cyan;
}

5)、屬性選擇器

根據屬性條件選中元素進行修飾,格式:選擇器[屬性]{CSS樣式}

input[type='text'][name='user']{
	/* 匹配元素名爲input的並且type的值爲text的元素 */
	background:pink;
	font-size:30px;
	text-indent:30px;
}

2.4、常用屬性總結

此處,奉上一個大佬的總結

https://blog.csdn.net/yjn1995/article/details/90709767

3、JavaScript

3.1、JavaScript簡介

JavaScript(簡稱“JS”) 是一種具有函數優先的輕量級,解釋型或即時編譯型的高級編程語言。雖然它是作爲開發Web頁面的腳本語言而出名的,但是它也被用到了很多非瀏覽器環境中,JavaScript 基於原型編程、多範式的動態腳本語言,並且支持面向對象、命令式和聲明式(如函數式編程)風格。

嵌入在html網頁中的一門腳本語言,專門用於實現網頁的交互。JS嵌入在網頁中,由瀏覽器負責解析並執行。爲網頁添加各式各樣的動態效果或爲表單添加校驗,爲用戶提供更好的瀏覽體驗。

3.2、特性

1)、是一種解釋性腳本語言(代碼不進行預編譯

2)、主要用來向HTML標準通用標記語言下的一個應用)頁面添加交互行爲。

3)、可以直接嵌入HTML頁面,但寫成單獨的js文件有利於結構和行爲的分離

4)、跨平臺特性,在絕大多數瀏覽器的支持下,可以在多種平臺下運行(如WindowsLinuxMacAndroidiOS等)。

5)、Javascript腳本語言同其他語言一樣,有它自身的基本數據類型,表達式和算術運算符及程序的基本程序框架。

6)、可以實現web頁面的人機交互。

3.3、HTML中使用JS的方法

1)、在script標籤內部直接書寫JS

<head>
	...
	<!-- 第一種引入JS的方式 -->
	<script>
		alter("引入JS的第一種方式...");
	</script>
</head>

可以放在head和body中

2)、通過標籤引入外部的JS文件

創建一個後綴爲js的文件,引入即可

<head>
	...
	<!-- 第二種引入JS的方式 -->
	<script src="demo.js"></script>
</head>

注:如果標籤引入了外部的文件,那麼這個標籤內部不要再寫js,因爲寫了也不會執行

<script src="demo.js">
    alert(333);//此處的代碼執行不到
</script>

3.4、JS語法

3.4.1、註釋

與Java一樣,//單行註釋   /*多行註釋*/

3.4.2、數據類型

JS的基本數據類型一共有五種,分別爲數值類型(number)、字符串類型(string)、布爾類型(boolean)、undefined、null。

數值類型:底層是浮點型,但是在需要時會在整型與浮點型轉換

字符串類型:可以用單引號或雙引號包裹

布爾類型:true和false

undefined:定義了變量卻沒有賦值

null:就只有一個值  null,表示空值。

3.4.3、變量聲明

1)、在js中用var聲明變量

var a = 10; //聲明變量,賦值爲數值10
var b = true; //聲明變量,賦值爲布爾值true
var c = "Hello JS"; //聲明變量,賦值爲字符串"Hello JS"

2)、在JS中聲明的變量不區分類型,可以指向任意的數據類型

3.4.4、運算符

算術運算符: +,-,*,/,%,++,--

賦值運算符: =,+=,-=,*=,/=,%=

比較運算符: ==,!=,>,>=,<,<=

位運算符: & , |

邏輯運算符: && ,||

前置邏輯運算符: ! (not)

三元運算符: 表達式 ? 表達式 : 表達式

3.4.5、js語句

if分支   switch  for循環  while循環

3.4.6、js數組

聲明數組的方法

var arr1 = new Array();
var arr2 = new Array(88,"Hello" ,true , 100);
var arr3 = [];
var arr4 = [88,"Hello" ,true , 100];

3.4.7、js函數

function funName([參數1,參數2,…]){
	需要執行的代碼
}

如圖,函數就是一個代碼塊,可以重複使用。

組成:function   方法名稱(參數){方法體}

函數的調用:方法名稱(參數)

3.5、js如何獲取元素

document.getElementById( id值 )                 -- 通過元素的id值,獲取一個元素。返回的是表示該元素的js對象。

document.getElementsByTagName( 元素名 )          -- 通過元素名稱獲取當前文檔中的所有指定名稱的元素,返回的是一個數組

document.body                                            -- 獲取當前文檔中的body元素

ele.parentNode                                           -- 獲取當前元素的父元素。obj表示當前元素

document.createElement( 元素名稱 )         -- 根據元素名稱創建指定名稱的元素,返回的是表示新創建元素的js對象

parent.appendChild( child )                        -- 通過父元素添加子元素,其中parent表示父元素,child表示子元素

parent.removeChild( child )                         -- 通過父元素刪除子元素,其中parent表示父元素,child表示子元素

ele.innerHTML                                             -- 獲取當前元素的html內容(從開始標籤到結束標籤之間的所有內容)

                                                                    -- 或者, 還可以設置當前元素的html內容(如果元素內部有內容,將會覆蓋原有內容)

4、JQuery

4.1、簡介

jQuery是一個快速、簡潔的JavaScript框架,是繼Prototype之後又一個優秀的JavaScript代碼庫(或JavaScript框架)。jQuery設計的宗旨是“write Less,Do More”,即倡導寫更少的代碼,做更多的事情。它封裝JavaScript常用的功能代碼,提供一種簡便的JavaScript設計模式,優化HTML文檔操作、事件處理、動畫設計和Ajax交互。

jQuery的核心特性可以總結爲:具有獨特的鏈式語法和短小清晰的多功能接口;具有高效靈活的css選擇器,並且可對CSS選擇器進行擴展;擁有便捷的插件擴展機制和豐富的插件。jQuery兼容各種主流瀏覽器,如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等

4.2、特點

  • 快速獲取文檔元素
  • 提供漂亮的動態頁面效果
  • 創建AJAX刷新網頁
  • 提供對js的增強
  • 更改網頁內容
  • 增強的事件處理

4.3、JQuery的引入

使用JQuery的話,引入JQuery的函數庫即可,而JQuery函數庫就是一個js文件,裏面是大量的js函數。

<script src="js/jquery-1.8.3.js"></script>

使用JQuery時一定要注意代碼的位置,舉個栗子:

<script type="text/javascript">
	/* 獲取id爲d1的元素的內容 */
	//1.獲取id爲d1的元素
	var h1 = document.getElementById("d1");
	//2.獲取h1的內容(innerHTML)
	alert( h1.innerHTML );
</script>
<body>
	<h1 id="d1">引入jquery示例...</h1>
<body>

這段代碼運行的話會報錯,因爲代碼是由上往下運行的,在執行獲取id爲d1的元素時, h1元素還沒有被瀏覽器加載到,所以獲取不到h1元素。

解決辦法:

第一種:可以將js代碼放到h1元素的下面,讓瀏覽器先加載h1元素,再執行獲取h1的代碼。就可以正常執行。

第二種:將獲取h1元素的代碼放在文檔就緒事件函數中,文檔就緒事件函數會在瀏覽器加載完整個html文檔後立即執行!

$(function(){
	//在整個文檔被加載完後立即執行...
})

4.4、JQuery的選擇器

元素選擇器

$("div")                                  – 獲取所有div元素

$("span")                               – 獲取所有的span元素

類選擇器

$(".c1")                                – 獲取所有class值爲c1的元素

$("div.c1")                            – 獲取所有class值爲c1的div元素

id選擇器

$("#one")                            – 獲取id爲one的元素

後代選擇器

$("#one span")                       – 匹配id爲one的元素內部的所有span元素

相鄰兄弟元素選擇器

$("#one+span")                      – 匹配id爲one的元素後面緊鄰的span兄弟元素

等價於:

$("#one").next("span")           – 匹配id爲one的元素後面緊鄰的span兄弟元素

$("#one").prev("span")           – 匹配id爲one的元素前面緊鄰的span兄弟元素

$("#one~span")                      – 匹配id爲one的元素後面所有的span兄弟元素

$("#one").nextAll("span")       – 匹配id爲one的元素後面所有的span兄弟元素

$("#one").prevAll("span")       – 匹配id爲one的元素前面所有的span兄弟元素

$("#one").siblings("span")      – 匹配id爲one的元素前、後所有的span兄弟元素

基本過濾選擇器

1、:first | :last

2、:eq(n)

$("div:first") – 匹配所有div中的第一個div元素

$("div:last") – 匹配所有div中的最後一個div元素

$("div:eq(0)") – 匹配所有div中的第一個div元素

$("div").eq(0) – 匹配所有div中的第一個div元素

$("div:eq(-1)") – 匹配所有div中的最後一個div元素

$("div").eq(-1) – 匹配所有div中的最後一個div元素

4.5、創建一個表格

function createTable3(){
	//var rows = $("#rows").val();
	//var cosl = $("#cosl").val();
	var rows = document.getElementById("rows").value;
	var cols = document.getElementById("cols").value;
	var $tab =  $("<table></table>");
	for(var i=0;i<rows;i++){
		var $tr =  $("<tr></tr>");
		for(var j=0; j<cols;j++){
			var $td =  $("<td></td>");
			$td.html("我是td!")
			//將td添加到tr內部
			$tr.append( $td );
		}
		//將tr添加到table內部
		$tab.append( $tr );
	}	
	//將table添加到網頁中
	$("body").append( $tab );
}

4.6、總結

$("<div></div>")                    -- 創建一個div元素,返回的是一個表示div元素的jQuery對象

$("<div>xxxx</div>")            -- 創建一個包含內容的div元素,返回的是一個表示div元素的jQuery對象

$parent.append( $child )      -- 父元素調用方法添加子元素

$("body").append( "<div>我是新來的...</div>" );            -- 往body元素內部追加一個div子元素

$("div").remove()                  -- 刪除所有的div元素

$("div").replaceWith("<p>我是來替換的…</p>")            --替換元素

$("div").html()                       -- 獲取所有div中的第一個div的內容

$("div").html("xxxx")              -- 爲所有div設置內容

$("div").text()                        -- 獲取所有div中的所有文本內容

$("div").text("xxxx")               -- 爲所有div設置文本內容

$("input").val() -- 獲取所有input元素中的第一個input元素的value值

$("input").val(值) -- 爲所有的input元素設置value值

5、HTTP

5.1、什麼是HTTP協議

HTTP是用於規定瀏覽器和服務器通信的方式。

主要規定了瀏覽器向服務器發送的請求信息的格式,

以及規定了服務器向瀏覽器做出的響應信息的格式。

請求只能由瀏覽器發起,服務器被動接收,一次請求對應一次響應。

5.2、HTTP協議詳解

1)、HTTP請求

請求行:GET /news/hello.html HTTP/1.1

GET: 提交方式,在HTTP協議中一共規定了7種提交方式,常用的只用GET和POST。

/news/hello.html: 請求的資源路徑

HTTP/1.1請求所遵循的協議和版本

請求頭:請求頭都是Key-Value結構

請求實體:GET請求的話,請求實體不會有內容,只有是POST請求時,請求實體纔會有內容

2)、HTTP響應

狀態行:

HTTP/1.1:表示響應信息所遵循的協議和版本

200:狀態碼,表示請求處理的結果。

常見的有:

200:表示服務器處理請求的結果是成功的!

304/307:表示服務器通知瀏覽器使用緩存

400:表示請求參數類型不匹配

404:表示客戶端請求的資源不存在

500:表示服務器端在處理請求的過程中出現了錯誤或異常

若干響應頭:

響應頭的格式也是Key-Value結構

響應實體:

對應的請求內容返回的響應內容。

如果瀏覽器向服務器請求的是一個文件,服務器會將這個文件的內容作爲響應實體發送給瀏覽器.

5.3、GET和POST的區別

(1)GET提交會將請求參數拼接在URL地址的後面,顯示在地址欄中,相對不安全

(2)GET提交將參數顯示在地址欄中,數據量不能太大,不能超過1K或者是4K

(3)POST提交不會將參數拼接在地址欄後面, 而是通過請求實體將參數發送給服務器, 相對來說更加安全!

(4)POST提交通過請求實體傳數據給服務器, 數據量理論上沒有限制!

當向服務器傳輸大量的數據或者傳輸的數據較爲隱私,纔會使用POST提交。

6、Servlet

6.1、簡介

Servlet(Server Applet)是Java Servlet的簡稱,稱爲小服務程序或服務連接器,用Java編寫的服務器端程序,具有獨立於平臺和協議的特性,主要功能在於交互式地瀏覽和生成數據,生成動態Web內容。

狹義的Servlet是指Java語言實現的一個接口,廣義的Servlet是指任何實現了這個Servlet接口的類,一般情況下,人們將Servlet理解爲後者。Servlet運行於支持Java的應用服務器中。從原理上講,Servlet可以響應任何類型的請求,但絕大多數情況下Servlet只用來擴展基於HTTP協議的Web服務器。

因而,Servlet的作用是處理請求

6.2、如何開發一個Servlet程序

6.2.1、創建工程

寫一個類實現Servlet接口,並實現方法,在web應用的web.xml文件中配置Servlet程序對外訪問的路徑。

1)、創建一個Web工程

繼承HttpServlet類,默認會覆蓋doGet方法和doPost方法,兩個方法的作用爲:

* doGet方法:當瀏覽器發送請求的方式爲GET提交時, 將會調用doGet方法來處理請求

* doPost方法:當瀏覽器發送請求的方式爲POST提交時, 將會調用doPost方法來處理請求

6.2.2、Servlet在web.xml中的配置

<servlet>
    <servlet-name>HelloServlet</servlet-name>
    <servlet-class>com.tedu.HelloServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>HelloServlet</servlet-name>
    <url-pattern>/HelloServlet</url-pattern>
  </servlet-mapping>

在通過Eclipse創建Servlet時,會自動在web.xml文件中進行Servlet相關信息的配置

(注意:如果是複製Servlet類文件,需要自己手動添加配置,否則複製的Servlet將無法訪問!)

創建一個Servlet, 就會在web.xml文件中添加兩個標籤:<servlet>和<servlet-mapping>標籤

<servlet>和<servlet-mapping>標籤內的<servlet-name>標籤,內容可以更改,但要求更改後的內容必須一致。

<servlet-class>標籤用於配置Servlet類的全路徑名(即包名+類名)

(注意:如果在創建Servlet後修改了Servlet類的名稱,這裏一定要改,否則將會出現"ClassNotFoundException" 即類找不到異常)

 <url-pattern>標籤用於配置瀏覽器以什麼路徑訪問當前Servlet(即Servlet對外訪問的路徑),默認的路徑是:/類名

6.2.3、運行程序進行測試

第一種方法:如果是第一次運行Servlet項目,需要先創建Tomcat服務器

(1)在服務器上右鍵 --> 點擊 "add and remove" 將當前web項目發佈到服務器中,並點擊完成。

(2)啓動tomcat服務器:在服務器上右鍵 Start 即可啓動服務器

(3)打開本地瀏覽器,通過路徑訪問:http://localhost:8080/項目名稱/HelloServlet即可訪問Servlet程序 

第二種方法:

1)、在運行的Servlet上點擊右鍵 ---> "Run As" ---> "1 Run on Server"

6.3、Servlet的繼承關係

當瀏覽器訪問一個Servlet時,首先調用Servlet類的service方法(從HttpServlet類中繼承過來的),根據請求方式調用對應的doGet方法或者doPost方法,對請求進行處理!

6.4、Request和Response

request是代表Http請求信息的對象,其中封裝了瀏覽器向服務器發送的請求信息;response對象是代表Http響應信息的對象,其中將會封裝服務器向瀏覽器做出的響應信息。

6.4.1、request

1)、什麼是請求參數

通過瀏覽器向服務器發送請求時,在請求中可以攜帶一些數據,這些數據就稱之爲請求參數

2)、如何獲取參數

request.getParameter(String paramName);                         -- 通過請求參數的名字,獲取對應的參數值。返回值是一個字符串。

request.getParameterValues(String paramName);               -- 通過請求參數的名字,獲取對應的所有參數值組成的數組。

3)、獲取參數時的亂碼問題

Tomcat8.0以後的版本,GET提交方式不涉及亂碼問題

POST提交總會有亂碼,與版本無關,解決方法時在獲取參數的代碼前面加上一行代碼

request.setCharacterEncoding("utf-8");

6.4.2、請求轉發

請求轉發是在服務器端獲取數據的過程中,由訪問的服務器資源跳至另一個資源進行獲取,發生在服務端內部,瀏覽器不知道。

特點:

(1)請求轉發前後是一次請求、一次響應

(2)請求轉發前後,瀏覽器地址欄地址不會發生變化(轉發是服務器內部的跳轉,瀏覽器看不到)

(3)請求轉發前後的request對象是同一個(因爲請求只有一次,服務器根據一次請求,只會創建一個request對象,轉發前後都需要request,所以只能在轉發時,將request對象傳遞給轉發後的那個資源)。

(4)請求轉發只能在同一個web應用內部中的兩個資源之間進行轉發。

即轉發前後的兩個資源必須屬於同一個web應用。

實現方法:

request.getRequestDispatcher("轉發到資源的路徑").forward(req, res);

在進行請求轉發時,request要攜帶數據,此時request作爲域對象使用。

request.setAttribute(String attrName, Object attrValue);

-- 將屬性存入request域中(request對象的map集合裏),其中屬性名只能是字符串,屬性值可以是任意類型。

request.getAttribute(String attrName)

-- 根據屬性名從request域中獲取對應的屬性值。返回值是一個Object。

request域對象的特徵:

生命週期:一次請求開始時,會創建代表請求的request對象,在一次請求結束時(響應已完成),會銷燬request對象。

作用範圍:一次請求範圍內(由於請求轉發前後是一次請求,所以在請求轉發前後可以通過request域帶數據到目的地;如果是重定向,由於重定向前後是兩次請求,request對象也不是同一個,因此在重定向前後不能通過request域帶數據。)

主要功能:帶數據到目的地。

6.4.3、response

向客戶端發送數據

PrintWriter out = response.getWriter();
out.write("hello..");

用字符流發送數據時會出現亂碼,解決方法:

response.setContentType("text/html;charset=utf-8");

PrintWriter out = response.getWriter();
out.write("你好");

6.4.4、重定向

訪問資源的路徑發生變化

特點:

(1)重定向前後是兩次請求,兩次響應

(2)重定向前後,瀏覽器的地址欄地址會發生變化。(因爲兩次請求都是通過瀏覽器發起,瀏覽器知道這個跳轉的過程,因此地址欄地址會變化)

(3)重定向前後的request對象不是同一個(因爲重定向前後是兩次請求,服務器根據兩次請求會創建兩個不同的request對象及response對象)

(4)重定向前後的兩個資源可以是來自不同的web應用,甚至可以是來自不同的服務器。(進行跳轉的兩個資源之間沒有限制)

實現方法:

response.sendRedirect("重定向到資源的地址");

7、JSP

7.1、JSP簡介

JSP(全稱JavaServer Pages)是由Sun Microsystems公司主導創建的一種動態網頁技術標準。JSP部署於網絡服務器上,可以響應客戶端發送的請求,並根據請求內容動態地生成HTMLXML或其他格式文檔的Web網頁,然後返回給請求者。JSP技術以Java語言作爲腳本語言,爲用戶的HTTP請求提供服務,並能與服務器上的其它Java程序共同處理複雜的業務需求。

本質上是一個Servlet程序,因爲JSP在第一次被訪問時,會翻譯成一個Servlet程序。

Servlet適合編寫java程序卻不適合輸出一個網頁,所以有了jsp。

7.2、JSP執行過程

訪問JSP的過程爲: 訪問index.jsp --翻譯-> index_jsp.java(Servlet) --編譯-> index_jsp.class(運行) --結果-> 輸出一個網頁到瀏覽器

7.3、JSP語法

7.3.1、模板元素

除了JSP特有的都是模板元素

7.3.2、JSP表達式

格式: <%= 常量/變量/表達式 %>

7.3.3、JSP腳本

格式:<% 若干Java語句 %>

作用:在翻譯後的Servlet中,將腳本片段中的java語句複製粘貼到對應的位置執行

7.3.4、註釋

JSP中註釋有3中,JSP註釋、HTML註釋、Java註釋

JSP註釋在翻譯時直接扔掉,不參與翻譯

Java註釋放在腳本片段中,參與翻譯,但是被java註釋,不會參與執行

HTML註釋當做模板元素髮給瀏覽器,會參與運行,但是不顯示。

7.3.5、JSP指令

指令的格式: <%@ 指令名稱 若干屬性聲明... %>

指令的作用: 用於指揮JSP解析引擎如何將一個JSP翻譯成一個Servlet程序。

<%@ page language="java"%>    指定開發語言

<%@ page import="java.util.Date"%>      導包

<%@ page pageEncoding="UTF-8"%>   指定編碼

以上3個指令可以合在一起放在一個page指令上

7.4、EL表達式

格式: ${ 常量、表達式、變量 } 

注意:這裏的變量想要被獲取,必須要存放到域中

${ "Hello EL" }  Hello EL
${ 100+123 }
<hr/>
<% //聲明一個name變量,並存入request域中
	String name = "林青霞"; 
	request.setAttribute( "n", name );
%>
${ n }
獲取作用域中數組或集合的值
${ ns[0] } <br/>
${ ns[1] } <br/>
${ ns[2] } <br/>
${ ns[3] } <br/>
獲取作用域中map的元素
${ map1.name } <br/>
${ map1.age } <br/>
${ map1.nickname } <br/>
獲取作用域中Javabean對象的屬性
${ user.username } <br/><!-- 底層還是調用getUsername方法 -->
${ user.password } <br/><!-- 底層還是調用getPassword方法 -->
${ user.addr } <br/><!-- 底層還是調用getAddr方法 -->

7.5、Jstl

在使用之前需要:

(1)導入JSTL的開發包

(2)在使用JSTL標籤庫的JSP中引入JSTL

1、<c:set></c:set>     往四大作用域中添加或修改域屬性

<c:set var="name"  value="張三"  scope="request"/>
${ name }
<c:set var="name"  value="張三丰"  scope="request"/>
${ name }

(1)var -- 指定存入作用域中的屬性名稱

(2)value -- 指定存入作用域中屬性的值

(3)scope -- 指定將屬性存入哪一個作用域中

可取值: a)page表示pageContext域 b)request表示request域  c)session表示session域 d)application表示ServletContext域

作用域大小:page<request<session<application

2、<c:if></c:if> -- 構造if…else…語句

<c:set var="score"  value="-58"/>
<c:if test="${ score<=100 && score > 80 }">
	優秀!
</c:if>

test屬性用於指定判斷的條件,注意:JSTL中沒有提供else對應的標籤

3、<c:forEach></c:forEach>   對集合或數組等中元素進行循環遍歷或者是執行指定次數的循環.

遍歷數組
<%
	//聲明一個數組, 並將數組存入域中
	String[] names = {"王海濤","齊雷","陳子樞"};
	request.setAttribute("names", names);
%>
<c:forEach items="${names}" var="name">
	${ name }
</c:forEach>
遍歷map
<%
	//聲明一個Map, 並將Map存入域中
	Map map = new HashMap();
	map.put("name", "關羽");
	map.put("age", "38");
	map.put("addr", "中鼎大廈B座");
	request.setAttribute("map", map);
%>
<c:forEach items="${ map }" var="entry">
	${ entry.key } : ${ entry.value } <br/>
</c:forEach> 

(1)items: 指定需要遍歷的集合或數組

(2)var: 指定用於接收遍歷過程中的元素

(3)begin: 指定循環從哪兒開始

(4)end: 指定循環到哪兒結束

(5)step: 指定循環時的步長, 默認值是1

(6)varStatus: 用於表示循環遍歷狀態信息的對象, 常用屬性有:

first屬性: 表示當前遍歷是否是第一次, 若是, 則返回true;

last屬性: 表示當前遍歷是否是最後一次, 若是, 則返回true;

count屬性: 記錄當前遍歷是第幾次

手過一遍,也是一次小小的回憶知識的過程。

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章