JavaWeb

時間 2019-11-20

標籤 javaweb 欄目 Java 简体版

原文原文鏈接

JavaWeb

軟件架構

C/S (client/server 客服端/服務端)

優勢：用戶體驗好缺點：開發、部署、安裝、維護麻煩javascript

B/S （Browser/Server 瀏覽器/服務器端）

資源分類php
- 靜態資源css
  
  使用靜態網頁開發技術發佈的資源特色：一、全部用戶訪問，獲得的結果是同樣的（如：文本、圖片、音頻、視頻、HTML、css、JavaScript）二、若是用戶請求的是靜態資源，那麼服務器會直接將靜態資源發送給瀏覽器。瀏覽器中內置了靜態資源的解析引擎，能夠展現靜態資源html
- 動態資源前端
  
  使用動態網頁即時發佈的資源特色：一、全部用戶訪問，獲得的結果可能不同（如：jsp/servlet,php,asp...）二、若是用戶請求的是動態資源，那麼服務器會執行動態資源，轉換爲靜態資源，再發送給瀏覽器html5

前端

HTML（Hyper Text MarKup Language）超文本標記語言

圍堵標籤java

有開始和結束標籤的標籤node
自閉合標籤mysql

開始標籤和結束標籤在一塊兒的標籤jquery
標籤能夠嵌套

須要正確嵌套，不能你中有我，我中有你

CSS 指層疊樣式表 (Cascading Style Sheets)

經常使用屬性
- boder
  
  boder-top 邊框頂邊 boder-left 邊框左邊 boder-right 邊框右邊 boder-bottom 邊框底邊 boder-widht 邊框寬度 boder-color 邊框顏色 boder-style 邊框樣式 boder-radius 邊框圓角
- margin
  
  margin-top 上外邊距 margin-left 左外邊距 margin-right 右外邊距 margin-bottom 下外邊距
- padding
  
  padding-top 上外邊距 padding-left 左外邊距 padding-right 右外邊距 padding-bottom 下外邊距
- background
  
  background-size 背景（圖片）大小 background-color 背景顏色 background-image 背景圖片
- font
  
  font-family 字體 font-size 字體大小
- 文本
  
  color 顏色 text-align 水平居中 line-height 行高（設置爲父級同樣高度垂直居中） vertical-align 垂直居中
- 尺寸
  
  width 寬度 height 高度 max-width 最大寬度 max-height 最大高度
- 表格
  
  border-collapse 規定是否合併表格邊框 border-spacing 規定相鄰單元格邊框之間的距離

JavaScript

經常使用對象方法
- BOM對象
  - window窗口對象
    
    Window 對象表示瀏覽器中打開的窗口。若是文檔包含框架（<frame> 或 <iframe> 標籤），瀏覽器會爲 HTML 文檔建立一個 window 對象，併爲每一個框架建立一個額外的 window 對象。
  - Navigator瀏覽器對象
    
    Navigator 對象包含有關瀏覽器的信息。
  - Screen顯示器屏幕對象
    
    Screen 對象包含有關客戶端顯示屏幕的信息。
  - History歷史記錄對象
    
    History 對象包含用戶（在瀏覽器窗口中）訪問過的 URL。 History 對象是 window 對象的一部分，可經過 window.history 屬性對其進行訪問。
  - Location地址欄對象
    
    Location 對象包含有關當前 URL 的信息。 Location 對象是 window 對象的一部分，可經過 window.Location 屬性對其進行訪問。
  - 經常使用方法
    - alert() 顯示帶有一段消息和一個確認按鈕的警告框（彈窗）
    - confirm() 顯示帶有一段消息以及取人按鈕和取消按鈕的對花括
      
      若是用戶點擊確認按鈕，則方法返回true 若是用戶點擊取消按鈕，則方法返回false
    - prompt() 顯示可提示用戶輸入的對話框
    - close() 關閉瀏覽器
    - open() 打開一個新的瀏覽器窗口
    - setTimeout() 在指定的毫秒數後調用函數或計算表達式
    - clearTimeout() 取消由setTimeout() 方法設置的timout
    - setInterval() 按照指定的週期（以毫秒計）來調用函數或計算表達式
    - clearInterval() 取消由setInterval()設置的timout
    - reload() 從新載入當前文檔
    - back() 加載 history 列表中的前一個 URL
    - forward() 加載 history 列表中的下一個 URL
    - go() 加載 history 列表中的某個具體頁面
- DOM對象
  - Document文檔對象
  - Element元素對象
  - Attribute屬性對象
  - Text文本對象
  - Comment註釋對象
  - 事件（Event）對象
    - 點擊
      - onclick單擊
      - ondblclick雙擊
    - 焦點
      - onblur失去焦點
      - onfocus得到焦點
    - 加載
      - onload一張圖片或頁面完成加載
    - 鼠標事件
      - onmousedown鼠標按鈕被按下
      - onmouseup鼠標按鍵被鬆開
      - onmousemove鼠標被移動
      - onmouseover鼠標移動到某元素上
      - onmouseout鼠標從某元素移開
    - 鍵盤事件
      - onkeydown某個鍵盤按鍵被按下
      - onkeyup某個鍵盤按鍵被鬆開
      - onkeypress某個鍵盤按鍵被按下並鬆開
    - 選擇和改變
      - onchange域的內容被改變
      - onselect文本內容被選中
    - 表單事件
      - onsubmit確認按鈕被點擊
      - onreset重置按鈕被點擊
經常使用方法
- 刪除
  - removeAttribute()刪除屬性
  - removeChild() 刪除（並返回）當前節點的指定節點
- 獲取指定對象
  - docunment.getElementById()返回對擁有指定id的第一個對象的引用
  - document.getElementsByName() 返回指定名稱的對象集合
  - document.getElementsByTagName() 返回指定標籤名的對象集合
  - document.getElementsByClassName() 返回指定class屬性名稱的對象集合
- 建立
  - document.createElement()建立元素節點
  - document.createTextNode()建立文本節點
  - documend.createAttribute()建立屬性節點
  - innerHTML建立新的節點及內容
- 替換
  - replaceChild() 用新節點替換一個節點

JQuery

jQuery是一個快速、簡潔的JavaScript框架，是繼Prototype以後又一個優秀的JavaScript代碼庫（或JavaScript框架）。jQuery設計的宗旨是「write Less，Do More」，即倡導寫更少的代碼，作更多的事情。它封裝JavaScript經常使用的功能代碼，提供一種簡便的JavaScript設計模式，優化HTML文檔操做、事件處理、動畫設計和Ajax交互。 JavaScript框架：本質上就是一些js文件，封裝了js的原生代碼而已

jQuery-xxx.js與jquery-xxx.min.js區別

一、jQuery-xxx.js：開發版本。給程序員看的，有良好的縮進和註釋。體積較大二、jQuery-xxx.min.js：生產版本。程序中使用，沒有縮進。體積較小。程序加載更快
版本區別

目前jQuery有三個大版本： 1.x：兼容ie678,使用最爲普遍的，官方只作BUG維護，功能再也不新增。所以通常項目來講，使用1.x版本就能夠了，最終版本：1.12.4 (2016年5月20日) 2.x：不兼容ie678，不多有人使用，官方只作BUG維護，功能再也不新增。若是不考慮兼容低版本的瀏覽器可使用2.x，最終版本：2.2.4 (2016年5月20日) 3.x：不兼容ie678，只支持最新的瀏覽器。除非特殊要求，通常不會使用3.x版本的，不少老的jQuery插件不支持這個版本。目前該版本是官方主要更新維護的版本。最新版本：3.2.1（2017年3月20日）
jQuery對象和js對象區別與轉換

一、jQuery對象在操做時，更加方便二、jQuery對象和js對象方法不通用三、互相轉換 jq-->js：jq對象[索引] 或者 jq對象.get(索引) js-->jq：$(js對象)
人口函數

//複雜寫法 $(document).ready(function(){ ... })

//簡單寫法 $(function(){ ... })
- 與JavaScript人口函數的區別
  
  JavaScript人口函數：一、若是定義多個，只有最後一個會生效二、在頁面渲染完成纔會執行 jQuery人口函數：一、能夠定義多個，都會生效二、dom樹在內存中加載完成就會執行
樣式控制

在 jQuery 中，提供了一個名爲 css()的函數來操做 css 樣式
1. 獲取 css 樣式的屬性值 jq對象.css("屬性名");
2. 設置 css 樣式的屬性值設置單個樣式 jq對象.css("屬性名","屬性值"); 同時設置多個樣式 jq對象.css({屬性名:屬性值,屬性名2:屬性值2});

常見選擇器

基本選擇器

標籤選擇器

語法： $("html標籤名") 得到全部匹配標籤名稱的元素
id選擇器

語法： $("#id的屬性值") 得到與指定id屬性值匹配的元素
類選擇器

語法： $(".class的屬性值") 得到與指定的class屬性值匹配的元素
並集選擇器

語法： $("選擇器1,選擇器2....") 獲取多個選擇器選中的全部元素

代碼示例

<script type="text/javascript"> $(function () { // <input type="button" value="改變 id 爲 one 的元素的背景色爲 紅色" id="b1"/> $("#b1").click(function () { $("#one").css("backgroundColor","red"); });
        // <input type="button" value=" 改變元素名爲 <div> 的全部元素的背景色爲 紅色"  id="b2"/>
        $("#b2").click(function () {
           $("div").css("backgroundColor","red");
        });

        // <input type="button" value=" 改變 class 爲 mini 的全部元素的背景色爲 紅色"  id="b3"/>
        $("#b3").click(function () {
           $(".mini").css("backgroundColor","red");
        });
        // <input type="button" value=" 改變全部的<span>元素和 id 爲 two 的元素的背景色爲紅色"  id="b4"/>
        $("#b4").click(function () {
           $("span,#two").css("backgroundColor","red");
        });
    });

</script>

層級選擇器

層級選擇器

語法：$("A B")選擇A元素內部的全部B元素
子選擇器

語法：$("A>B")選擇A元素內部的全部B子元素

代碼示例

 1   <script type="text/javascript">
 2         $(function () {
 3             // <input type="button" value=" 改變 <body> 內全部 <div> 的背景色爲紅色"  id="b1"/>
 4             $("#b1").click(function () {
 5                 $("body div").css("backgroundColor","red");
 6             });
 7             // <input type="button" value=" 改變 <body> 內子 <div> 的背景色爲 紅色"  id="b2"/>
 8             $("#b2").click(function () {
 9                $("body>div").css("backgroundColor","red");
10             });
11             // <input type="button" value=" 改變 id爲 two的下一個 div 兄弟背景色爲 紅色"  id="b3"/>
12             $("#b3").click(function () {
13                 $("#two+div").css("backgroundColor","red");
14             });
15             // <input type="button" value=" 改變 id爲 two的後面的 div 兄弟背景色爲 紅色"  id="b4"/>
16             $("#b4").click(function () {
17                $("#two~div").css("backgroundColor","red");
18             });
19         });
20 </script>

屬性選擇器

屬性名稱選擇器

語法：$("A[屬性名]")包含指定屬性的選擇器
屬性選擇器

語法：$("A[屬性名='值']")包含指定屬性等於指定值的選擇器
複合屬性選擇器

語法：$("A屬性名='值'...")包含多個屬性的選擇器

代碼示例

 1 <script type="text/javascript">
 2         $(function () {
 3             // <input type="button" value=" 含有屬性title 的div元素背景色爲紅色"  id="b1"/>
 4             $("#b1").click(function () {
 5                 $("[title]").css("backgroundColor","red");
 6             });
 7             // <input type="button" value=" 屬性title值等於test的div元素背景色爲紅色"  id="b2"/>
 8             $("#b2").click(function () {
 9                $("div[title='test']").css("backgroundColor","red");
10             });
11             // <input type="button" value=" 屬性title值不等於test的div元素(沒有屬性title的也將被選中)背景色爲紅色"  id="b3"/>
12             $("#b3").click(function () {
13                 $("div[title!='test']").css("backgroundColor","red");
14             });
15             // <input type="button" value=" 屬性title值 以te開始 的div元素背景色爲紅色"  id="b4"/>
16             $("#b4").click(function () {
17                $("div[title^='te']").css("backgroundColor","red");
18             });
19             // <input type="button" value=" 屬性title值 以est結束 的div元素背景色爲紅色"  id="b5"/>
20             $("#b5").click(function () {
21                 $("div[title$='est']").css("backgroundColor","red");
22             });
23             // <input type="button" value="屬性title值 含有es的div元素背景色爲紅色"  id="b6"/>
24             $("#b6").click(function () {
25                 $("div[title*='es']").css("backgroundColor","red");
26             });
27             // <input type="button" value="選取有屬性id的div元素，而後在結果中選取屬性title值含有「es」的 div 元素背景色爲紅色"  id="b7"/>
28             $("#b7").click(function () {
29                $("div[id][title*='es']").css("backgroundColor","red");
30             });
31         });

過濾選擇器

首元素選擇器

語法：:first得到選擇的元素中的第一個元素
尾元素選擇器

語法：:last得到選擇的元素中的最後一個元素
非元素選擇器

語法：:not(selector)不包括指定內容的元素
偶數選擇器

語法：:even偶數，從0開始計數
奇數選擇器

語法：:odd奇數
等於索引選擇器

語法：:eq(index)指定索引元素
大於索引選擇器

語法：:gt(index)大於指定索引元素
小於索引選擇器

語法：:lt(indext)小於指定索引元素
標題選擇器

語法：:header得到標題（h1~h6）元素，固定寫法

代碼示例

<script type="text/javascript">
        $(function () {
        // <input type="button" value=" 改變第一個 div 元素的背景色爲 紅色"  id="b1"/>
        $("#b1").click(function () {
            $("div:first").css("backgroundColor","red");
        });
        // <input type="button" value=" 改變最後一個 div 元素的背景色爲 紅色"  id="b2"/>
        $("#b2").click(function () {
            $("div:last").css("backgroundColor","red");
        });
        // <input type="button" value=" 改變class不爲 one 的全部 div 元素的背景色爲 紅色"  id="b3"/>
        $("#b3").click(function () {
            $("div:not(.one)").css("backgroundColor","red");
        });
        // <input type="button" value=" 改變索引值爲偶數的 div 元素的背景色爲 紅色"  id="b4"/>
        $("#b4").click(function () {
            $("div:even").css("backgroundColor","red");
        });

        // <input type="button" value=" 改變索引值爲奇數的 div 元素的背景色爲 紅色"  id="b5"/>
        $("#b5").click(function () {
           $("div:odd").css("backgroundColor","red");
        });
        // <input type="button" value=" 改變索引值爲大於 3 的 div 元素的背景色爲 紅色"  id="b6"/>
        $("#b6").click(function () {
           $("div:gt(3)").css("backgroundColor","red");
        });
        // <input type="button" value=" 改變索引值爲等於 3 的 div 元素的背景色爲 紅色"  id="b7"/>
        $("#b7").click(function () {
            $("div:eq(3)").css("backgroundColor","red");
        });
        // <input type="button" value=" 改變索引值爲小於 3 的 div 元素的背景色爲 紅色"  id="b8"/>
        $("#b8").click(function () {
           $("div:lt(3)").css("backgroundColor","red");
        });
        // <input type="button" value=" 改變全部的標題元素的背景色爲 紅色"  id="b9"/>
        $("#b9").click(function () {
           $(":header").css("backgroundColor","red");
        });
        //  <input type="button" value=" 改變class爲two的第一個div子元素的背景色爲 紅色"  id="b10"/>
        $("#b10").click(function () {
            $(".two>div:first").css("backgroundColor","red");
        });
    });

表單過濾選擇器

可用元素選擇器

語法：:enabled得到可用元素
不可用元素選擇器

語法：:disabled得到不可用元素
選中選擇器

語法：:checked得到單選/複選框選中的元元素
選中選擇器

語法：:selected得到下拉框選中的元素

代碼示例

<script type="text/javascript">
        $(function () {
        // <input type="button" value=" 利用 jQuery 對象的 val() 方法改變表單內可用 <input> 元素的值"  id="b1"/>
        $("#b1").click(function () {
            $(":text:enabled").val("改變值")
        });
        // <input type="button" value=" 利用 jQuery 對象的 val() 方法改變表單內不可用 <input> 元素的值"  id="b2"/>
        $("#b2").click(function () {
            $(":text:disabled").val("改變值")
        });
        // <input type="button" value=" 利用 jQuery 對象的 length 屬性獲取複選框沒選中的個數"  id="b3"/>
        $("#b3").click(function () {
            var length = $(":checkbox:not(:checked)").length;
            console.log(length);
        });
        // <input type="button" value=" 利用 jQuery 對象的 length 屬性獲取下拉框選中的個數"  id="b4"/>
        $("#b4").click(function () {
            var length = $("#job>option:selected").length;
            console.log(length);
        });
        //<input type="button" value="找到全部的表單元素，更換背景"  id="b5"/>
        $("#b5").click(function () {
            $(":input").css("backgroundColor","red");
        });
    });

DOM操做

內容操做的方法

html()

獲取/設置元素的標籤體內容(包含字標籤)，若是沒有傳遞參數就是獲取，若是傳遞了參數就是設置至關於傳統 js 中的 innerHTML 屬性內容 --> 內容
text()

獲取/設置元素的標籤體純文本內容，若是沒有傳遞參數就是獲取，若是傳遞了參數就是設置至關於傳統 js 中的 innerText 屬性注意：在設置的時候，會把以前的標籤體所有覆蓋內容 --> 內容
val()

獲取/設置元素的value屬性值，若是沒有傳遞參數就是獲取，若是傳遞了參數就是設置至關於傳統 js 中的 value 屬性

代碼示例

<head>
    <meta charset="UTF-8">
    <title></title>
    <script  src="../js/jquery-3.3.1.min.js"></script>
    <script>
        $(function () {
            // 獲取，設置myinput 的value值
            var val = $("#myinput").val();//張三
            $("#myinput").val("李四");
                    // 獲取，設置mydiv的標籤體內容
        var html_content = $("#mydiv").html();//<p><a href="#">標題標籤</a></p>            $("#mydiv").html("<b>aaaa</b>")//頁面上顯示一個加粗的aaa，以前的標籤體所有被覆蓋
 
        // 獲取，設置mydiv純文本內容
        var text_content = $("#mydiv").text();//獲取到的是"標題標籤"            $("#mydiv").text("<b>aaaa</b>");//頁面上顯示<b>aaaa</b>，以前的標籤體會被所有覆蓋        });
 
</script>
</head>
        // 獲取，設置mydiv的標籤體內容
        var html_content = $("#mydiv").html();//<p><a href="#">標題標籤</a></p>            $("#mydiv").html("<b>aaaa</b>")//頁面上顯示一個加粗的aaa，以前的標籤體所有被覆蓋
 
        // 獲取，設置mydiv純文本內容
        var text_content = $("#mydiv").text();//獲取到的是"標題標籤"            $("#mydiv").text("<b>aaaa</b>");//頁面上顯示<b>aaaa</b>，以前的標籤體會被所有覆蓋        });
 
</script>
</head>
 <body>
    <input id="myinput" type="text" name="username" value="張三" /><br />
    <div id="mydiv"><p><a href="#">標題標籤</a></p></div>
    <input type="checkbox" id="cb1"/>
 </body

屬性操做
- 通用屬性操做
  - attr()
    
    attr(name) 獲取元素的指定屬性名對應的屬性值 attr(name, vlaue) 設置元素的單個屬性 attr({"name1":"value1", "name2":"value2"}) 同時設置元素的多個屬性 removeAttr(name) 根據屬性名移除元素的指定屬性
  - removeAttr()
    
    刪除屬性
  - prop()
    
    prop(name) 獲取元素的指定屬性名對應的屬性值 prop(name, vlaue) 設置元素的單個屬性 prop({"name1":"value1", "name2":"value2"}) 同時設置元素的多個屬性 removeProp(name) 根據屬性名移除元素的指定屬性
  - removeProp()
    
    刪除屬性
  - attr和prop的區別
    1. attr 通常用於操做元素的自定義屬性，prop 通常用於操做元素的固有屬性固有屬性：w3c 文檔中必定描述過的屬性自定義屬性：w3c 文檔中沒有描述過的屬性文檔位置：點擊頂部JavaScript-->點擊左側JavaScript-->點擊參考書-->左側HTML對象（見HTML屬性.jpg）
    2. 在獲取屬性值時，prop 的返回值更爲友好如：獲取元素的 checked 屬性值 attr("checked") 若是設置了 checked 屬性，返回值爲 checked 若是沒有設置 checked 屬性，返回值爲 undeﬁned prop("checked") 若是設置了 checked 屬性，返回值爲 true 若是沒有設置 checked 屬性，返回值爲 false 因此在獲取這種屬性值的時候，建議使用 prop 方法
- 對class屬性操做
  - addClass()添加class屬性值
  - removeClass()刪除class屬性值
  - toggleClass()切換class屬性值
    
    toggleClass("one"): 判斷若是元素對象上存在class="one"，則將屬性值one刪除掉。若是元素對象上不存在class="one"，則添加
  - css()
  - 代碼示例
```
 1 <head>
 2     <meta charset="UTF-8">
 3     <title>Title</title>
 4     <style>
 5         .cls1{
 6             background-color: green;
 7         } 
 8         .cls2{
 9             width: 500px;
10         }
11     </style>
12     <script src="../js/jquery-3.3.1.min.js"></script>    <script>
13     $(function () {
14         $("#btn1").click(function () {
15             $("#d1").addClass("cls2");
16     });
17         
18     $("#btn2").click(function () {
19     $("#d1").removeClass("cls2");
20     });
21         
22     $("#btn3").click(function () {
23          $("#d1").toggleClass("cls2");
24      });
25     })
26     </script>
27 </head>
28 <body>
29     <div class="cls1" id="d1">aaaaa</div>
30     <input id="btn1" type="button" value="添加class值cls2"/>
31     <input id="btn2" type="button" value="移除class值cls2"/>
32     <input id="btn3" type="button" value="切換class值cls2"/>
33 </body>
```

CRUD操做

append()父元素將子元素追加到末尾

對象1.append(對象2): 將對象2添加到對象1元素內部，而且在末尾
prepend()父元素將子元素追加到開頭

對象1.prepend(對象2):將對象2添加到對象1元素內部，而且在開頭
appendTo()

對象1.appendTo(對象2):將對象1添加到對象2內部，而且在末尾
prependTo()

對象1.prependTo(對象2):將對象1添加到對象2內部，而且在開頭
after()添加元素到元素後邊

對象1.after(對象2)：將對象2添加到對象1後邊。對象1和對象2是兄弟關係
before()添加元素到元素的前邊

對象1.before(對象2)：將對象2添加到對象1前邊。對象1和對象2是兄弟關係
insertAfter()

對象1.insertAfter(對象2)：將對象2添加到對象1後邊。對象1和對象2是兄弟關係
insertBefore()

對象1.insertBefore(對象2)：將對象2添加到對象1前邊。對象1和對象2是兄弟關係
remove()移除元素

對象.remove():將對象刪除掉
empty()清空元素的全部後代元素

對象.empty():將對象的後代元素所有清空，可是保留當前對象以及其屬性節點

代碼示例

 1 <script type="text/javascript">
 2     $(function () {
 3          // <input type="button" value="將反恐放置到city的後面"  id="b1"/>
 4 
 5          $("#b1").click(function () {
 6              //append
 7              //$("#city").append($("#fk"));
 8              //appendTo
 9              $("#fk").appendTo($("#city"));
10          });
11          // <input type="button" value="將反恐放置到city的最前面"  id="b2"/>
12          $("#b2").click(function () {
13              //prepend
14              //$("#city").prepend($("#fk"));
15              //prependTo
16              $("#fk").prependTo($("#city"));
17          });
18          // <input type="button" value="將反恐插入到天津後面"  id="b3"/>
19          $("#b3").click(function () {
20              //after
21              //$("#tj").after($("#fk"));
22              //insertAfter
23              $("#fk").insertAfter($("#tj"));
24 
25          });
26          // <input type="button" value="將反恐插入到天津前面"  id="b4"/>
27          $("#b4").click(function () {
28              //before
29              //$("#tj").before($("#fk"));
30              //insertBefore
31              $("#fk").insertBefore($("#tj"));
32 
33          });
34      });

動畫
- 簡單的顯示隱藏
  - show()顯示
  - hide()隱藏
  - toggle()切換
- 滑動顯示和隱藏方式
  - slideDown()
  - slideUp()
  - slideToggle()
- 淡入淡出顯示和隱藏方式
  - fadeIn()
  - fadeOut()
  - fadeToggle()
- 以上函數均可以接收3個參數
  
  通常咱們在使用這些效果函數的時候，只會傳遞參數1
  - 參數1（speed）
    
    動畫的速度：三個預約義的值（「slow」，「normal」，「fast」）或表示動畫時長的毫秒數值
  - 參數2（easing）
    
    用來指定切換效果：默認是「swing」，可用參數「linear」 swing：動畫執行時效果是先慢，中間快，最後又慢 linear：動畫執行的速度是勻速的
  - 參數3（fn）
    
    在動畫完成時執行的函數，每個元素執行一次

JQuery遍歷

jq數組對象.each(function(i,n){ })

一、jq數組對象必須時jQuery對象二、參數i表明索引三、參數n表明索引對應的數組元素四、return true表明跳出本次循環，return false表明結束循環
$.each(數組,function(i,n){})
1. $ 在 jQuery 中被稱之爲【jQuery對象】
2. 參數數組既能夠是 js 對象，也能夠是 jQuery 對象
3. 參數 i 表明索引 4. 參數 n 表明索引對應的數組元素 5. return true 表明跳出本次循環，return false 表明結束循環

代碼示例

 1 <ul id="city">
 2     <li>北京</li>
 3     <li>上海</li>
 4     <li>天津</li>
 5     <li>重慶</li>
 6 </ul>
 7 <script>
 8     //遍歷全部li，輸出索引以及li中的標籤體，若是標籤體是天津則跳出本次循環
 9     $(function () {
10         var lis = $("li");
11         lis.each(function (index, element) {
12             var innerHTML = element.innerHTML;
13             if (innerHTML == "天津") {
14                 return false;
15                 // return true;
16             }
17             alert(index + ":" + innerHTML);
18         })
19     });
20 $(function () {
21     var lis = document.getElementById("li");
22     $.each(lis,function (index, element) {
23         var innerHTML = element.innerHTML;
24         if(innerHTML == "天津"){
25             return false;
26             // return true;
27         }
28         alert(index + ":" + innerHTML);
29     })
30 })
31 </script>

JQuery事件

常見事件
- 格式
  
  jq對象.事件函數(function(){ });
- click(fn)單擊
- focus(fu)獲取焦點
- blur(fu)失去焦點
- mouseover(fn)鼠標放上去
- mouseout(fn)鼠標離開
- keydown(fn)鍵盤按下
- keyup(fn)鍵盤擡起
- change(fn)值改變，通常用於下拉列表
- submit(fn)表單提交（返回true提交，返回false阻止表單提交）
on&off綁定事件
- on函數綁定事件
  
  jq對象.on("事件名稱",function(){ });
- off函數解綁事件
  
  jq對象.off("事件名"); jq對象.off();//沒有參數，表明解綁全部事件
- 給將來元素綁定事件
  
  //給將來建立的按鈕」btn2「綁定單擊事件 $(document).on("click","#btn2",function () { alert("按鈕2被點擊了..."); }) 經過一個非將來元素，給它內部的將來後代元素綁定事件。整個文檔對象 document 確定是預先存在的，全部它是非將來元素， on 函數中的參數解釋以下：參數1：字符串類型的事件名稱，如 click,mouseover,museout.... 參數2：字符串類型的非將來元素對應的選擇器(直接寫選擇器不能加$()) 參數3：回調函數，事件產生之後執行的函

事件切換

toggle(fn1,fn2,fn3...) 1.9版本後被廢棄，徐導入兼容包
hover(fn1,fn2)鼠標懸停切換

代碼示例

 1 <head>
 2     <meta charset="UTF-8">
 3     <title></title>
 4     <script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf8"></script>    <!--引入兼容插件包-->
 5  <script src="../js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script>
 6     <script type="text/javascript">
 7         $(function () {
 8            //獲取按鈕，調用toggle方法
 9            $("#btn").toggle(function () {
10                //改變div背景色backgroundColor 顏色爲 green
11                $("#myDiv").css("backgroundColor","green");
12            },function () {
13                //改變div背景色backgroundColor 顏色爲 pink
14                $("#myDiv").css("backgroundColor","pink");
15            });
16         });
17     </script>
18  </head>
19 
20  <body>
21     <input id="btn" type="button" value="事件切換">
22 
23     <div id="myDiv" style="width:300px;height:300px;background:pink">
24         點擊按鈕變成綠色，再次點擊紅色
25     </div>
26 
27  </body>
28 
29 //表格的鼠標懸停變色
30 var color; $(function () {
31     $("tr").hover(function () {
32         color = $(this).css("backgroundColor");
33         $(this).css("backgroundColor","red");
34     }, function () {
35         $(this).css("backgroundColor",color);
36     });
37  });

JQuery的插件機制

所謂的插件機制指的是，若是咱們以爲 jQuery 提供的方法不夠知足咱們的需求，咱們能夠本身來擴展 jQuer y的功能。也就是給本身在 jQuery 中添加方法。可是這部分工做通常都是一些專業的前端人員纔會涉及到。

擴展jQuery元素對象

// 一次性擴展多個方法 $.fn.extend({ 方法名:function(){ }, 方法名:function(){ } }) // 一次性擴展一個方法 $.fn.方法名=function(){ } 注意：在 jQuery 插件代碼中，this 關鍵字是 jQuery 對象

代碼示例

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>01-jQuery對象進行方法擴展</title>
 6     <script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
 7     <script type="text/javascript">
 8        //使用jquery插件 給jq對象添加2個方法 check()選中全部複選框，uncheck()取消選中全部複選框
 9     //1.定義jqeury的對象插件
10     $.fn.extend({
11         //定義了一個check()方法。全部的jq對象均可以調用該方法
12         check:function () {
13            //讓複選框選中
14 
15             //this:調用該方法的jq對象
16             this.prop("checked",true);
17         },
18         uncheck:function () {
19             //讓複選框不選中
20 
21             this.prop("checked",false);
22         }
23         
24     });
25 
26     $(function () {
27        // 獲取按鈕
28         //$("#btn-check").check();
29         //複選框對象.check();
30 
31         $("#btn-check").click(function () {
32             //獲取複選框對象
33             $("input[type='checkbox']").check();
34 
35         });
36 
37         $("#btn-uncheck").click(function () {
38             //獲取複選框對象
39             $("input[type='checkbox']").uncheck();
40 
41         });
42     });
43     </script>
44     </head>
45 <body>
46 <input id="btn-check" type="button" value="點擊選中複選框" onclick="checkFn()">
47 <input id="btn-uncheck" type="button" value="點擊取消複選框選中" onclick="uncheckFn()">
48 <br/>
49 <input type="checkbox" value="football">足球
50 <input type="checkbox" value="basketball">籃球
51 <input type="checkbox" value="volleyball">排球
52 
53 </body>
54 </html>

擴展全家jQuery對象的方法

所謂的全局 jQuery 對象就是 $ 對象，也就是能夠直接經過 $ 調用的方法，擴展方式以下： // 能夠一次性擴展多個方法 $.extend({ 方法名:function(){ }, 方法名:function(){ } }) // 一次性擴展一個方法 $.方法名=function(){ }

代碼示例

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>01-jQuery對象進行方法擴展</title>
 6     <script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
 7     <script type="text/javascript">
 8         //對全局方法擴展2個方法，擴展min方法：求2個值的最小值；擴展max方法：求2個值最大值
 9     $.extend({
10         max:function (a,b) {
11             //返回兩數中的較大值
12             return a >= b ? a:b;
13         },
14         min:function (a,b) {
15             //返回兩數中的較小值
16             return a <= b ? a:b;
17         }
18     });
19 
20     //調用全局方法
21     var max = $.max(4,3);
22     //alert(max);
23     var min = $.min(1,2);
24     alert(min);
25 </script>
26 </head>
27 <body>
28 </body>
29 </html>

Bootstrap

響應式佈局

同一套頁面能夠兼容不一樣分辨率的設備。實現：依賴於柵格系統：將一行平均分紅12個格子，能夠指定元素佔幾個格子步驟： 1. 定義容器。至關於以前的table 容器分類： 1. container：兩邊留白 2. container-fluid：每一種設備都是100%寬度 2. 定義行。至關於以前的tr 樣式：row 3. 定義元素。指定該元素在不一樣的設備上，所佔的格子數目。樣式：col-設備代號-格子數目設備代號： 1. xs：超小屏幕手機 (<768px)：col-xs-12 2. sm：小屏幕平板 (≥768px) 3. md：中等屏幕桌面顯示器 (≥992px) 4. lg：大屏幕大桌面顯示器 (≥1200px)

注意： 1. 一行中若是格子數目超過12，則超出部分自動換行。 2. 柵格類屬性能夠向上兼容。柵格類適用於與屏幕寬度大於或等於分界點大小的設備。 3. 若是真實設備寬度小於了設置柵格類屬性的設備代碼的最小值，會一個元素沾滿一整行。

基礎模板

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3個meta標籤*必須*放在最前面，任何其餘內容都*必須*跟隨其後！ -->
    <title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
  <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
  </head>
  <body>
          <h1>你好，世界！</h1>
      <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
      </body>
</html>

XML（Extensible Markup Language）可擴展標記語言

可擴展：標籤都是自定義的。功能：存儲數據（配置文件，網絡傳輸）

xml與html的區別

一、XML標籤都是自定義的，HTML標籤是預約義二、XML的語法嚴格，HTML語法鬆散３、XML是存儲數據的，HTML是展現數據
語法

１、XML文檔的後綴名（.xml）二、XML第一行必須定義爲文檔聲明三、XML文檔中有且僅有一個根標籤四、屬性值必須使用引號（單雙均可）引發來五、標籤必須正確關閉六、XML標籤名區分大小寫
- 文檔聲明
  
  一、格式<? xml 屬性列表 ?> 二、屬性列表： version：版本號，必須的屬性 encoding：編碼方式。告知解析引擎當前文檔使用的字符集，默認值：ISO-8859-1 standalone：是否獨立（yes：不依賴其餘文件；no：依賴其它文件）
- 指令
  
  結合css：<? xml-stylesheet type="text/css" href="a.css" ?>
- 標籤
  
  規則：一、名字能夠包含字母、數字及其它的字符二、名稱不能以數字或者標點符號開始三、名稱不能以字母xml(或者XML、Xml等等)開始四、名稱不能包含空格
- 屬性
  
  id屬性值惟一
- 文本
  
  CDATA區：在該區域中的數據會被原樣展現<![CDATA[數據]]> 約束：規定xml文檔的書寫規則
- 約束
  
  約束：規定xml文檔的書寫規則做爲框架的使用者(程序員)： 1. 可以在xml中引入約束文檔 2. 可以簡單的讀懂約束文檔分類： 1. DTD:一種簡單的約束技術 2. Schema:一種複雜的約束技術 DTD：引入dtd文檔到xml文檔中內部dtd：將約束規則定義在xml文檔中外部dtd：將約束的規則定義在外部的dtd文件中本地：<!DOCTYPE 根標籤名 SYSTEM "dtd文件的位置"> 網絡：<!DOCTYPE 根標籤名 PUBLIC "dtd文件名字" "dtd文件的位置URL">
  
  Schema: 引入： 1.填寫xml文檔的根元素 2.引入xsi前綴. xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 3.引入xsd文件命名空間. xsi:schemaLocation="http://www.itcast.cn/xml student.xsd" 4.爲每個xsd約束聲明一個前綴,做爲標識 xmlns="http://www.itcast.cn/xml"
  
  <students xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://www.itcast.cn/xml" xsi:schemaLocation="http://www.itcast.cn/xml student.xsd">
- 解析
  
  解析：操做xml文檔，將文檔中的數據讀取到內存中操做xml文檔 1. 解析(讀取)：將文檔中的數據讀取到內存中 2. 寫入：將內存中的數據保存到xml文檔中。持久化的存儲
  
  解析xml的方式： 1. DOM：將標記語言文檔一次性加載進內存，在內存中造成一顆dom樹優勢：操做方便，能夠對文檔進行CRUD的全部操做缺點：佔內存 2. SAX：逐行讀取，基於事件驅動的。優勢：不佔內存。缺點：只能讀取，不能增刪改
  
  xml常見的解析器： 1. JAXP：sun公司提供的解析器，支持dom和sax兩種思想 2. DOM4J：一款很是優秀的解析器 3. Jsoup：jsoup 是一款Java 的HTML解析器，可直接解析某個URL地址、HTML文本內容。它提供了一套很是省力的API，可經過DOM，CSS以及相似於jQuery的操做方法來取出和操做數據。 4. PULL：Android操做系統內置的解析器，sax方式的。
Jsoup

jsoup 是一款Java 的HTML解析器，可直接解析某個URL地址、HTML文本內容。它提供了一套很是省力的API，可經過DOM，CSS以及相似於jQuery的操做方法來取出和操做數據。
- 使用步驟
  1. 導入jar包
    1. 獲取Document對象
      1. 獲取對應的標籤Element對象
      2. 獲取數據
- 對象
  1. Jsoup：工具類，能夠解析html或xml文檔，返回Document parse：解析html或xml文檔，返回Document parse(File in, String charsetName)：解析xml或html文件的。 parse(String html)：解析xml或html字符串 parse(URL url, int timeoutMillis)：經過網絡路徑獲取指定的html或xml的文檔對象
  2. Document：文檔對象。表明內存中的dom樹獲取Element對象 getElementById(String id)：根據id屬性值獲取惟一的element對象 getElementsByTag(String tagName)：根據標籤名稱獲取元素對象集合 getElementsByAttribute(String key)：根據屬性名稱獲取元素對象集合 getElementsByAttributeValue(String key, String value)：根據對應的屬性名和屬性值獲取元素對象集合
  3. Elements：元素Element對象的集合。能夠當作 ArrayList<Element>來使用
  4. Element：元素對象
    1. 獲取子元素對象 getElementById(String id)：根據id屬性值獲取惟一的element對象 getElementsByTag(String tagName)：根據標籤名稱獲取元素對象集合 getElementsByAttribute(String key)：根據屬性名稱獲取元素對象集合 getElementsByAttributeValue(String key, String value)：根據對應的屬性名和屬性值獲取元素對象集合
    2. 獲取屬性值 String attr(String key)：根據屬性名稱獲取屬性值
    3. 獲取文本內容 String text():獲取文本內容 String html():獲取標籤體的全部內容(包括字標籤的字符串內容)
  5. Node：節點對象是Document和Element的父類

快速查詢

selector:選擇器使用的方法：Elements select(String cssQuery) 語法：參考Selector類中定義的語法
XPath：XPath即爲XML路徑語言，它是一種用來肯定XML（標準通用標記語言的子集）文檔中某部分位置的語言使用Jsoup的Xpath須要額外導入jar包。查詢w3cshool參考手冊，使用xpath的語法完成查詢

代碼示例

  //1.獲取student.xml的path
           String path = JsoupDemo6.class.getClassLoader().getResource("student.xml").getPath();
   //2.獲取Document對象
           Document document = Jsoup.parse(new File(path), "utf-8");
          
  //3.根據document對象，建立JXDocument對象
           JXDocument jxDocument = new JXDocument(document);
          
  //4.結合xpath語法查詢
      //4.1查詢全部student標籤
            List<JXNode> jxNodes = jxDocument.selN("//student");
            for (JXNode jxNode : jxNodes) {
                      System.out.println(jxNode);
            }
          System.out.println("--------------------");
      
  //4.2查詢全部student標籤下的name標籤
         List<JXNode> jxNodes2 = jxDocument.selN("//student/name");
         for (JXNode jxNode : jxNodes2) {
                 System.out.println(jxNode);
         }
      
              System.out.println("--------------------");
      
  //4.3查詢student標籤下帶有id屬性的name標籤
          List<JXNode> jxNodes3 = jxDocument.selN("//student/name[@id]");
          for (JXNode jxNode : jxNodes3) {
                  System.out.println(jxNode);
          }
              System.out.println("--------------------");
  //4.4查詢student標籤下帶有id屬性的name標籤 而且id屬性值爲itcast
      
           List<JXNode> jxNodes4 = jxDocument.selN("//student/name[@id='itcast']");
           for (JXNode jxNode : jxNodes4) {
                  System.out.println(jxNode);
           }

代碼示例

 1     //2.1獲取student.xml的path
 2     String path = JsoupDemo1.class.getClassLoader().getResource("student.xml").getPath();
 3     //2.2解析xml文檔，加載文檔進內存，獲取dom樹--->Document
 4     Document document = Jsoup.parse(new File(path), "utf-8");
 5     //3.獲取元素對象 Element
 6     Elements elements = document.getElementsByTag("name");
 7     System.out.println(elements.size());
 8     //3.1獲取第一個name的Element對象
 9     Element element = elements.get(0);
10     //3.2獲取數據
11     String name = element.text();
12     System.out.println(name);

web服務器軟件

webLogic

webSphere

JBOSS

Tomcat

Apache基金組織，中小型的JavaEE服務器，僅支持少許的Java EE規範servlet/jsp

部署項目的三種方式

瀏覽器訪問項目： https:/127.0.0.1:8080/虛擬目錄/資源路徑.html
- 直接將項目放到webapps目錄下
  
  /hello：項目的訪問路徑-->虛擬目錄簡化部署：將項目打成一個war包，再將war包放置到webapps目錄下（war包會自動解壓縮）
- 配置conf/server.xml文件
  
  在<Host>標籤體中配置 <Context docBase="項目實際路徑" path=「虛擬目錄名" /> docBase：項目存放的路徑 path：虛擬目錄
- 在conf\Catalina\localhost建立任意名稱（虛擬目錄）的xml文件。
  
  在文件中編寫<Context docBase="項目存放的路徑" /> 虛擬目錄：xml文件的名稱
靜態項目和動態項目
- 目錄結構
  
  Java動態目錄：項目的根目錄 WEB-INF目錄： web.xml：該項目的核心配置文件 classes目錄：放置字節碼文件的目錄 lib目錄：放置依賴的jar包

JSP

概念

Java Server Pages： java服務器端頁面能夠理解爲：一個特殊的頁面，其中既能夠指定定義html標籤，又能夠定義java代碼用於簡化書寫！！！

原理

JSP本質上就是一個Servlet xxx.jsp-->xxxServlet.java-->xxx.class

三大腳本

<% %>

定義的java代碼，在service方法中。service方法中能夠定義什麼，該腳本中就能夠定義什麼。
<%! %>

定義的java代碼，在jsp轉換後的java類的成員位置。Servlet時單例的
<%= %>

定義的java代碼，會輸出到頁面上。輸出語句中能夠定義什麼，該腳本中就能夠定義什麼。

三大指令

用於配置JSP頁面，導入資源文件

格式

<%@ 指令名稱屬性名1=屬性值1 屬性名2=屬性值2 ... %>
page配置指令

配置JSP頁面
- ContentType
- import
- errorPage
- isErrorPage
- pageEncoding
- isELIgnore
include頁面包含的

引入一些公共的頁面
taglib標籤庫

引入第三方的標籤庫

註釋

註釋HTMl

xml註釋方式：只能註釋HTML代碼片斷
註釋Java
JSP特有註釋

<%-- --%>能夠註釋全部

九大內置對象

在jsp頁面中不須要獲取和建立，能夠直接使用的對象，來自於.jsp-->.java的Service()的局部變量

變量名	真實類型	做用
pageContext	PageContext	當前頁面共享數據，還能夠獲取其餘八個內置對象
request	HttpServletRequest	一次請求訪問的多個資源(轉發)
session	HttpSession	一次會話的多個請求間
application	ServletContext	全部用戶間共享數據
response	HttpServletResponse	響應對象
page	Object	當前頁面（Servlet）的對象 this
out	JspWriter	輸出對象，數據輸出到頁面上
config	ServletConfig	Servlet的配置對象
exception	Throwable	異常對象

四個域對象
- pageContext能夠獲取其餘8個內置對象
- request
- session
- application
response
out 字符輸出流對象。能夠將數據輸出到頁面上。和response.getWriter()相似 response.getWriter()和out.write()的區別：在tomcat服務器真正給客戶端作出響應以前，會先找response緩衝區數據，再找out緩衝區數據。 response.getWriter()數據輸出永遠在out.write()以前
exception
config
page

MVC架構模式

優勢：

耦合性低，方便維護，能夠利於分工協做重用性高

缺點：

使得項目架構變得複雜，對開發人員要求高

M：Model（模型）

M：Model，模型。JavaBean 完成具體的業務操做，如：查詢數據庫，封裝對象
V：View（視圖）

V：View，視圖。JSP、html 展現數據
C：Controller（控制器）

C：Controller，控制器。Servlet 獲取用戶的輸入調用模型將數據交給視圖進行展現

EL表達式（Expression Language表達式語言）

做用：替換和簡化JSP頁面中Java代碼的編寫注意： jsp默認支持el表達式，若是要忽略el表達式一、設置jsp指令中：isELIgonred="true"忽略當前jsp頁面中全部的el表達式二、{表達式}：忽略當前這個el表達式

運算
1. 算數運算符： + - * /(div) %(mod)
2. 比較運算符： > < >= <= == !=
3. 邏輯運算符： &&(and) ||(or) !(not)
4. 空運算符： empty
功能：用於判斷字符串、集合、數組對象是否爲null或者長度是否爲0 ${empty list}:判斷字符串、集合、數組對象是否爲null或者長度爲0 ${not empty str}:表示判斷字符串、集合、數組對象是否不爲null 而且長度>0

語法：${表達式};

${域名稱.鍵名}; 從指定的域中獲取指定鍵的值

${requestScope.鍵名}中的requestScope是el表達式中的內置對象，表示requset域對象
${鍵名}; 表示一次從最小的域中查找是否有改建對應的值，直到找到爲止

獲取對象、List集合、Map集合的值

從四個域範圍內獲取值

域	el表達式
pageContext	${pageScope.name}	當前頁面
requsert	${HttpServletRequest.name}	一次請求
session	${HttpSession.name}	一次會話
application	${ServletContext.name}	整個web

獲取對象：${域名.鍵名.屬性名};
獲取List集合：${域名鍵名[索引]};
獲取Map集合：${域名.鍵名.key名稱};或者${域名.鍵名["key名稱"]}

11個隱式對象

pageContext：獲取jsp其餘八個內置對象 ${pageContext.request.contextPath}：動態獲取虛擬目錄

JSTL（JavaServer Pages Tag Library）JSP標準標籤庫

經常使用的標籤
- if（Java代碼if語句）
  
  test 必須屬性，接受boolean表達式,若是表達式爲true，則顯示if標籤體內容，若是爲false，則不顯示標籤體內容。通常狀況下，test屬性值會結合el表達式一塊兒使用。
- choose（Java代碼switch語句）
  1. 使用choose標籤聲明至關於switch聲明
  2. 使用when標籤作判斷至關於case
  3. 使用otherwise標籤作其餘狀況的聲明至關於default
- foreach（Java代碼for語句）
  
  items:容器對象； var:容器中元素的臨時變量； begin：開始值； end：結束值； step：步長； varStatus:循環狀態對象： index:容器中元素的索引，從0開始； count:循環次數，從1開始。

Http(Hyper Textsfer Protocol)超文本傳輸協議

傳輸協議：定義了客服端和服務端通信時，發送數據的格式特色：一、基於TCP/IP的高級協議二、默認端口號：80 三、基於請求/響應模型的：一次請求對應一次響應四、無狀態的：每次請求之間相互獨立，不能交互歷史版本： 1.0：每一次請求響應都會創建新的鏈接 1.1：複用鏈接

請求消息的格式

請求行

請求方式請求url 請求協議/版本 GET /login.html HTTP/1.1 請求方式： HTTP協議有7種請求方式，經常使用2種 GET：一、請求參數在請求行中，在url後，二、請求的url長度有限制的（64kb）三、不太安全 POST：一、請求參數在請求體中二、請求的url長度沒有限制三、相對安全
請求頭

客服端瀏覽器告訴服務器一些信息請求頭名稱：請求頭值常見的請求頭：一、User-Agent：瀏覽器告訴服務器，我訪問你使用的瀏覽器版本信息（能夠在服務器端獲取該頭的信息，解決瀏覽器的的兼容性問題）二、Referer：http//localhoset/login.html 告訴服務器，我（當前請求）從哪裏來（防盜鏈，統計）
請求空行

空行：就是用於分割Post請求的請求頭，和請求體的
請求頭

封裝post請求消息的請求參數的

示例

字符串格式：

    POST /login.html	HTTP/1.1
    Host: localhost
    User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:60.0) Gecko/20100101 Firefox/60.0
    Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
    Accept-Language: zh-CN,zh;q=0.8,zh-TW;q=0.7,zh-HK;q=0.5,en-US;q=0.3,en;q=0.2
    Accept-Encoding: gzip, deflate
    Referer: http://localhost/login.html
    Connection: keep-alive
    Upgrade-Insecure-Requests: 1
    username=zhangsan

web三大域

Request一次請求的範圍

Request和Reaponse
- request對象和response對象的原理
  1. request和response對象是由服務器建立的。咱們來使用它們
    1. request對象是來獲取請求消息，response對象是來設置響應消息
- request對象繼承體系結構
  
  ServletRequest -- 接口 | 繼承 HttpServletRequest -- 接口 | 實現 org.apache.catalina.connector.RequestFacade 類(tomcat) 注意：雖然 Tomcat 傳遞的是 RequestFacade 對象，可是咱們會把它當成 HttpServletRequest。由於這個對象的實如今 Tomcat 內部，咱們沒辦法查看。
- request功能
  - 獲取請求信息數據
    - 獲取請求行數據
      
      GET /day14/demo1?name=zhangsan HTTP/1.1 方法：
      1. 獲取請求方式：GET String getMethod()
        
        獲取虛擬目錄：/day14 String getContextPath()
        
        獲取Servlet路徑: /demo1 String getServletPath()
        
        獲取get方式請求參數：name=zhangsan String getQueryString()
        
        獲取請求URI：/day14/demo1 String getRequestURI(): /day14/demo1 StringBuffer getRequestURL() :http://localhost/day14/demo1 URL:統一資源定位符： http://localhost/day14/demo1 中華人民共和國 URI：統一資源標識符 : /day14/demo1 共和國
    - 獲取請求頭數據
      
      方法： (*)String getHeader(String name):經過請求頭的名稱獲取請求頭的值 Enumeration<String> getHeaderNames():獲取全部的請求頭名稱
    - 獲取請求體數據
      
      請求體：只有POST請求方式，纔有請求體，在請求體中封裝了POST請求的請求參數步驟： 1. 獲取流對象 BufferedReader getReader()：獲取字符輸入流，只能操做字符數據 ServletInputStream getInputStream()：獲取字節輸入流，能夠操做全部類型數據在文件上傳知識點後講解
```
			2. 再從流對象中拿數據
```
    - 獲取請求參數
      
      getParameterMap() getParameter("來自表單輸入項的name屬性值") getParameterValues("來自表單輸入項的name屬性值_chaeckbox")
  - 其餘功能
    - 獲取請求參數通用方式
      1. String getParameter(String name):根據參數名稱獲取參數值 username=zs&password=123
        
        String[] getParameterValues(String name):根據參數名稱獲取參數值的數組 hobby=xx&hobby=game
        
        Enumeration<String> getParameterNames():獲取全部請求的參數名稱
        
        Map<String,String[]> getParameterMap():獲取全部參數的map集合
    - 請求轉發
      1. 步驟：
        
        經過request對象獲取請求轉發器對象：RequestDispatcher getRequestDispatcher(String path)
        
        使用RequestDispatcher對象來進行轉發：forward(ServletRequest request, ServletResponse response)
        
        特色：
        
        瀏覽器地址欄路徑不發生變化
        
        只能轉發到當前服務器內部資源中。
        
        轉發是一次請求一次響應
    - 共享數據
      
      域對象：一個有做用範圍的對象，能夠在範圍內共享數據 request域：表明一次請求的範圍，通常用於請求轉發的多個資源中共享數據方法： 1. void setAttribute(String name,Object obj):存儲數據 2. Object getAttitude(String name):經過鍵獲取值 3. void removeAttribute(String name):經過鍵移除鍵值對
    - 中文亂碼問題
      
      get方式：tomcat 8 已經將get方式亂碼問題解決了 post方式：會亂碼解決：在獲取參數前，設置request的編碼request.setCharacterEncoding("utf-8");
      
      Tomcat8以前 get方法：params=new String(req.getParameter("xxx).getBytes("),"utf-8")
    - 動態獲取虛擬目錄
      
      getContextPath();
- response
  - 設置響應行狀態碼
    
    setStatus(int code)
    - 狀態碼
      - 200成功
      - 302重定向
      - 304查找本地緩存
      - 403權限拒絕，拒絕訪問
      - 404請求的資源沒找到（action，href，轉發）
      - 405請求方式不支持（後臺沒有提供相應的doXxx（）方法）
      - 500服務器內部錯誤，後臺Java代碼有異常
  - 響應頭
    
    setHeader(String key,String value) setHeader(「location」,「重定向跳轉地址」) Content-Type 響應體的數據類型&編碼 Content-Disposition響應體的打開方式 in-line（默認） //瀏覽器本身打開 attachment；filename=xxx //以附件形式打開。保存到 setStatus(int status)
  - 響應體
    
    PrintWriter getWriter()字符輸出流 ServletOutputStream getOutpuStream() 字節輸出流使用輸出流將數據輸出到客服端瀏覽器
  - 重定向
    
    //1. 設置狀態碼爲302 response.setStatus(302); //2.設置響應頭location response.setHeader("location","/day15/responseDemo2");
    
    //一行代碼搞定 sendRediect("/虛擬目錄/資源路徑")
  - 解決中文亂碼
    
    response.setCharacterEncoding("utf-8"); response.setHeader("content-type","text/html;charset=utf-8");
    
    或者一行代碼搞定： response.setContentType("test/html;charset=utf-8);
重定向（redirect）和轉發（forward）
- 特色
  
  redirect：一、地址欄發生變化二、重定向能夠訪問其餘站點（服務器）的資源三、重定向是兩次請求。不能使用request對象來共享數據 forward：一、轉發地址欄路徑不變二、轉發只能訪問當前服務器的資源三、轉發是一次請求，可使用request對象來共享數據
- 區別
  
  一、路徑分類一、相對路徑：經過相對路徑不能夠肯定惟一資源如：./index.html 不以/開頭，以.開頭路徑規則：找到當前資源和目標資源之間的相對位置關係（./：當前目錄；../：後退一級目錄）二、絕對路徑：經過絕對路徑能夠肯定惟一資源如：http://localhost/response/responseDemo2 /response/responseDemo2 以/開頭的路徑規則：判判定義的路徑是給誰用的？判斷請求未來從哪兒發出給客戶端瀏覽器使用：須要加虛擬目錄(項目的訪問路徑) 建議虛擬目錄動態獲取：request.getContextPath() <a> , <form> 重定向... 給服務器使用：不須要加虛擬目錄轉發路徑

Session一次會話的範圍

會話技術

一次會話中包含屢次請求和響應。一次會話：瀏覽器第一次給服務器資源發送請求，會話創建，直到有一方斷開爲止功能：在一次會話的範圍內的屢次請求間，共享數據
- 客服端會話技術Cookie
  
  客戶端會話技術，將數據保存到客戶端
  - 建立Cookie對象
    
    new Cookie(String name,String value);
  - 發送Cookie給瀏覽器
    
    response.addCookie(Cookie c)
  - 獲取Cookie
    
    Cookie[] request.getCookies() 遍歷Cookie[] cookie.getName(); cookie.getValue();
  - Cookie存活時間
    
    默認：關閉瀏覽器就銷燬持久化存儲：setMaxAge(int seconds)設置存活時間一、正數：將Cookie數據寫入到硬盤文件中，數據就是存活時間（單位爲秒）二、負數：默認值三、零：刪除cookie信息
  - Cookie存儲中文
    
    在tomcat 8 以前 cookie中不能直接存儲中文數據。須要將中文數據轉碼---通常採用URL編碼(%E3) 在tomcat 8 以後，cookie支持中文數據。特殊字符仍是不支持，建議使用URLEnoder.encode(String str,)編碼存儲，URLDecoder解碼解析
  - Cookie共享
    
    一、默認不能夠二、一個Tomcat，多個項目共享 setPath(String path):設置cookie的獲取範圍。默認狀況下，設置當前的虛擬目錄若是要共享，則能夠將path設置爲"/" 三、不一樣Tomcat，不一樣項目 setDomain(String path);若是設置一級域名相同，那麼多個服務器之間cookie能夠共享 setDomain(".baidu.com"),那麼tieba.baidu.com和news.baidu.com中cookie能夠共享
  - 細節
    
    大小4kb，
- 服務器端會話技術Session
  - Session
    
    服務器端會話技術，在一次會話的屢次請求間共享數據，將數據保存在服務器端的對象中。HttpSession；Session的實現是依賴於Cookie的。
    - 獲取HttpSession對象
      
      HttpSession session = request.getSession(); request中有cookie，cookie有JSESSIONID
    - 使用HttpSession對象
      
      Object getAttribute(String name) 獲取session中名爲name鍵對應的值 void setAttribute(String name, Object value) 向session存儲一個名爲name值爲value的鍵值對 void removeAttribute(String name) 移除session中名爲name鍵對應的值 getid()獲取session的id invalidate()手動銷燬session getServletContext() 用來獲取ServletContext對象
- Cookie和Session區別
  1. session存儲數據在服務器端，Cookie在客戶端
  2. session沒有數據大小限制，Cookie有
  3. session數據安全，Cookie相對於不安全

ServletContext整個web應用的範圍

獲取ServletContext

表明整個web應用，能夠和程序的容器（服務器）來通訊

經過request對象獲取： ServletContext context = request.getServletContext(); 經過HttpServlet獲取： this.getServletContext();
- 獲取MIME類型；（text/html）
  - String getMimeType(String file)
- 域對象：共享數據（範圍最大）
  
  範圍：整個web應用，全部用戶的全部請求都有效
  - request.getAttribute(String name) 從域對象中獲取鍵爲name對應的值
  - request.setAttribute(String name,Objext value)向request域對象中存儲鍵爲name，值爲value的鍵值對數據
  - removeAttribut(String key)
- 獲取文件的真實（服務器）路徑(項目部署路徑)
  - getRealPath(String path)
    
    String b = context.getRealPath("/b.txt");//web目錄下資源訪問 System.out.println(b); String c = context.getRealPath("/WEB-INF/c.txt");//WEB-INF目錄下的資源訪問 System.out.println(c); String a = context.getRealPath("/WEB-INF/classes/a.txt");//src目錄下的資源訪問 System.out.println(a);

web三大組件

Servlet

運行在服務器端的小程序 Servlet就是一個接口，定義了Java類被瀏覽器訪問到（tomcat識別）的規則未來咱們自定義一個類，實現Servlet接口，重寫方法

使用步驟

建立JavaEE項目

定義一個類，實現Servlet接口 public class ServletDemo1 implements Servlet
實現接口中的抽象方法

配置Servlet 在web.xml中配置：

<!--配置Servlet -->
<servlet>
    <servlet-name>demo1</servlet-name>
<servlet-class>cn.itcast.web.servlet.ServletDemo1</servlet-class>
</servlet>

<servlet-mapping>
    <servlet-name>demo1</servlet-name>
    <url-pattern>/demo1</url-pattern>
</servlet-mapping>

執行原理
1. 當服務器接受到客戶端瀏覽器的請求後，會解析請求URL路徑，獲取訪問的Servlet的資源路徑
  1. 查找web.xml文件，是否有對應的<url-pattern>標籤體內容。
  2. 若是有，則在找到對應的<servlet-class>全類名
  3. tomcat會將字節碼文件加載進內存，而且建立其對象
  4. 調用其方法
Servlet中的生命週期
- init建立
  1. 被建立：執行init方法，只執行一次 Servlet何時被建立？默認狀況下，第一次被訪問時，Servlet被建立能夠配置執行Servlet的建立時機。在<servlet>標籤下配置 1. 第一次被訪問時，建立 <load-on-startup>的值爲負數 2. 在服務器啓動時，建立 <load-on-startup>的值爲0或正整數 Servlet的init方法，只執行一次，說明一個Servlet在內存中只存在一個對象，Servlet是單例的多個用戶同時訪問時，可能存在線程安全問題。解決：儘可能不要在Servlet中定義成員變量。即便定義了成員變量，也不要對修改值
- service提供服務
  1. 提供服務：執行service方法，執行屢次每次訪問Servlet時，Service方法都會被調用一次。
- destroy銷燬
  1. 被銷燬：執行destroy方法，只執行一次 Servlet被銷燬時執行。服務器關閉時，Servlet被銷燬只有服務器正常關閉時，纔會執行destroy方法。 destroy方法在Servlet被銷燬以前執行，通常用於釋放資源

註解建立JavaEE項目

Servlet3.0：好處：支持註解配置。能夠不須要web.xml了。步驟：

	1. 建立JavaEE項目，選擇Servlet的版本3.0以上，能夠不建立web.xml

定義一個類，實現Servlet接口
複寫方法

在類上使用@WebServlet註解，進行配置

@WebServlet("資源路徑")
@Target({ElementType.TYPE})
@Retention(RetentionPolicy.RUNTIME)
@Documented
public @interface WebServlet {
    String name() default "";//至關於<Servlet-name>
    String[] value() default {};//表明urlPatterns()屬性配置
    String[] urlPatterns() default {};//至關於<url-pattern>
    int loadOnStartup() default -1;//至關於<load-on-startup>
    WebInitParam[] initParams() default {};
    boolean asyncSupported() default false;
    String smallIcon() default "";
    String largeIcon() default "";
    String description() default "";
    String displayName() default "";
}

IDEA與tomcat的相關配置
1. IDEA會爲每個tomcat部署的項目單獨創建一份配置文件
  - 查看控制檯的log：Using CATALINA_BASE: "C:\Users\fqy.IntelliJIdea2018.1\system\tomcat_itcast"
2. 工做空間項目和 tomcat部署的web項目
  - tomcat真正訪問的是「tomcat部署的web項目」，"tomcat部署的web項目"對應着"工做空間項目" 的web目錄下的全部資源
  - WEB-INF目錄下的資源不能被瀏覽器直接訪問。
3. 斷點調試：使用"小蟲子"啓動 dubug 啓動
Servlet的體系結構

Servlet（接口）-->GenericServlet（抽象類）-->HttpServlet（抽象類） GenericServlet：將Servlet接口中其餘方法作了默認空實現，只將service方法做爲抽象，未來在定義Servlet類時，能夠繼承GenericServlet，實現service()方法便可 HttpServlet：對HTTP協議的一種封裝，簡化操做一、定義類繼承HttpServlet；二、複寫doGet/doPost方法
Servlet相關配置

一、urlPartten：Servlet訪問路徑 1. 一個Servlet能夠定義多個訪問路徑： @WebServlet({"/d4","/dd4","/ddd4"}) 2. 路徑定義規則： 1. /xxx：路徑匹配 2. /xxx/xxx:多層路徑，目錄結構 3. *.do：擴展名匹配
登陸案例
- 需求

實現步驟

準備

一、HTML頁面

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>登陸</title>
  </head>
  <body>
  <form action="/day14_test/loginServlet" method="post">
      用戶名：<input type="text" name="username"><br/>
      密碼：<input type="password" name="password"><br/>
      <input type="submit" value="提交">
  </form>
  </body>
  </html>

二、day14數據庫和user表單

1 create database day14;
2 use day14;
3 create    table user(
4     id int  primary key  auto_increment ,
5     username varchar(32) unioue not null,
6     password varvhar(32) not null
7 );

三、druid.properties配置文件

driverClassName=com.mysql.jdbc.Driver
url=jdbc:mysql:///day14
username=root
    password=root
    initialSize=5
    maxActive=10
    maxWait=3000

四、導包

- User類

package itcast.domain;
  
  public class User {
     private int id;
     private String username;
     private String password;
  
  public int getId() {
      return id;
  }
  
  public void setId(int id) {
      this.id = id;
  }
  
  public String getUsername() {
      return username;
  }
  
  public void setUsername(String username) {
      this.username = username;
  }
  
  public String getPassword() {
      return password;
  }
  
  public void setPassword(String password) {
  this.password = password;
}

@Override public String toString() { return "User{" + "id=" + id + ", username='" + username + ''' + ", password='" + password + ''' + '}'; } } ```

//- 操做數據庫UserDao類
 

  package itcast.dao;
  
  /**
    * 操做數據庫中User表中的類
    */
  
  import itcast.domain.User;
  import itcast.util.JDBCUtils;
  import org.springframework.dao.DataAccessException;
  import org.springframework.jdbc.core.BeanPropertyRowMapper;
  import org.springframework.jdbc.core.JdbcTemplate;
  
  public class UserDao {
  //聲明JDBCTemplate對象共用
  private JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource());
  
  /**
   * 登陸方法
*@param loginUser 只有用戶名和密碼

*@return user包含用戶的所有數據 */
 public User login(User loginUser) { 
try { 
String sql = "select * from user where username = ? and password = ?"; 
User user = template.queryForObject(sql, new BeanPropertyRowMapper<User>(User.class), loginUser.getUsername(), loginUser.getPassword()); return user; 
} catch (DataAccessException e) {
 // e.printStackTrace();
//記錄日誌 return null; 
}
} 
}

- 鏈接池JDBCUtils類

 1   ```java
 2   package itcast.util;
 3   
 4   import com.alibaba.druid.pool.DruidDataSourceFactory;
 5   
 6   import javax.sql.DataSource;
 7   import java.io.IOException;
 8   import java.io.InputStream;
 9   import java.util.Properties;
10   
11   /*JDBC工具類，使用Durid鏈接池*/
12   public class JDBCUtils {
13       private static DataSource ds;
14   static {
15       try {
16           //加載配置文件
17   Properties pro = new Properties();
18   InputStream is = JDBCUtils.class.getClassLoader().getResourceAsStream("druid.properties");
19   pro.load(is);
20   
21           //初始化鏈接池對象
22            ds = DruidDataSourceFactory.createDataSource(pro);
23       } catch (IOException e) {
24           e.printStackTrace();
25       } catch (Exception e) {
26           e.printStackTrace();
27       }
28   }
29   
30   /*獲取鏈接池對象*/
31   public static DataSource getDataSource(){
32       return ds;
33       }
34   }

登陸Servlet

 1 package itcast.web.servlet;
 2 
 3 import itcast.dao.UserDao;
 4 import itcast.domain.User;
 5 import org.springframework.beans.BeanUtils;
 6 
 7 import javax.servlet.ServletException;
 8 import javax.servlet.annotation.WebServlet;
 9 import javax.servlet.http.HttpServlet;
10 import javax.servlet.http.HttpServletRequest;
11 import javax.servlet.http.HttpServletResponse;
12 import java.io.IOException;
13 import java.util.Map;
14 
15 @WebServlet("/loginServlet")
16 public class LoginServlet extends HttpServlet {
17 
18 @Override
19 protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
20     //設置編碼
21     req.setCharacterEncoding("utf-8");
22     //獲取請求參數
23 String username = req.getParameter("username");
24 String password = req.getParameter("password");
25 
26 //將參數進行封裝
27 User loginUser = new User();
28 loginUser.setUsername(username);
29 loginUser.setPassword(password);
30 
31 /*Map<String, String[]> map = req.getParameterMap();
32 User loginUser = new User();
33 BeanUtils.populate(loginUser,map);*/
34 
35 //調用UserDao的login方法
36 UserDao dao = new UserDao();
37 User user = dao.login(loginUser);
38 //判斷user if (user == null) { //登陸失敗 req.getRequestDispatcher("/failServlet").forward(req, resp); } else { //登陸成功 //存儲數據 req.setAttribute("user", user); //轉發 req.getRequestDispatcher("/successServlet").forward(req, resp); } } @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { this.doGet(req, resp); } } ```
39 
40 - 登陸失敗Servlet
41 
42   ```java
43 package itcast.web.servlet;
44 
45 import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException;
46 
47   @WebServlet("/failServlet")
48   public class FailServlet extends HttpServlet {
49       protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
50       //設置編碼
51       response.setContentType("text/html;charset=utf-8");
52       //輸出
53       response.getWriter().write("登陸失敗，用戶名或密碼錯誤！");
54   }
55   
56   protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
57       this.doPost(request, response);
58       }
59   }

- 登陸成功Servlet

 1   package web.servlet;
 2   
 3   import itcast.domain.User;
 4   
 5   import javax.servlet.ServletException;
 6   import javax.servlet.annotation.WebServlet;
 7   import javax.servlet.http.HttpServlet;
 8   import javax.servlet.http.HttpServletRequest;
 9   import javax.servlet.http.HttpServletResponse;
10   import java.io.IOException;
11   
12   @WebServlet("/successServlet")
13   public class SuccessServlet extends HttpServlet {
14       protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
15           //獲取request域中共享的user對象
16           User user = (User) request.getAttribute("user");
17           if(user != null) {
18           //設置編碼
19           response.setContentType("text/html;charset=utf-8");
20           //輸出
21           response.getWriter().write("登陸成功！" + user.getUsername() + "，歡迎您");
22       }
23   }
24   
25   protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
26       this.doPost(request, response);
27       }
28   }

Filter過濾器

使用步驟

一、定義一個類，實現接口Filter 二、複寫方法三、配置攔截路徑（web.xml或註解）

web.xml配置攔截路徑

<filter>
    <filter-name>demo1</filter-name>
    <filter-class>cn.itcast.web.filter.FilterDemo1</filter-class>
</filter>
<filter-mapping>
    <filter-name>demo1</filter-name>
    <!-- 攔截路徑 -->
    <url-pattern>/*</url-pattern>
</filter-mapping>

代碼示例

 1 @WebFilter("/*")//訪問全部資源以前，都會執行該過濾器
 2 public class FilterDemo1 implements Filter {
 3     @Override
 4      public void init(FilterConfig filterConfig) throws ServletException {
 5 }
 6     @Override
 7      public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
 8         System.out.println("filterDemo1被執行了....");                
 9         //放行
10         filterChain.doFilter(servletRequest,servletResponse);
11  }
12  @Override
13  public void destroy() {
14     }
15 }

執行流程

一、執行過濾器二、執行放行後的資源三、回來執行過濾器放行代碼下的代碼

生命週期
- init
- doFilter
- destroy
攔截路徑配置

一、具體資源路徑：/index.jsp 只有訪問index.jsp資源時，過濾器纔會被執行二、攔截目錄：/user/* 訪問/user下的全部資源時，過濾器都會被執行三、後綴名攔截：.jsp 訪問全部後綴名爲jsp資源時，過濾器都會被執行四、攔截全部資源：/ 訪問全部資源時，過濾器都會被執行注意： 1. 既然 Filter 是用來作一些通用的處理的，因此通常咱們配置的都是 /* 2. 在 Filter 中 url-pattern 的配置不存在優先級的問題
攔截方式配置

過濾器默認是攔截請求用的，可是咱們的資源跳轉方式還可能有轉發或者錯誤頁面的跳轉，默認請求 Filter 也只能攔截請求，因此若是但願 Filter 攔截其它的資源跳轉的方式，須要進行配置。資源被訪問的方式註解配置：設置dispatcherTypes屬性一、REQUEST：默認值。瀏覽器直接請求資源二、FORWARD：轉發訪問資源三、INCLUDE：包含訪問資源４、ERROR：錯誤跳轉資源５、ASYNC：異步訪問資源 web.xml配置：設置<dispatcher></dispatcher>標籤便可注意：若是想攔截請求和轉發，那麼 REQUEST 和 FORWARD 都須要配置，若是隻配置 FORWARD 則只能攔截轉發，請求就攔截不了了。
過濾器鏈
- 執行順序
  
  一、註解配置：按照類名的字符串比較規則比較，值小的先執行二、web.xml配置：<filter-mapping>誰定義在上邊，誰先執行注意： 1. web.xml 配置的優先級要高於註解。 2. 過濾器鏈中只有有任何一個過濾器沒有放行，那麼請求都不能到達目標資源，所謂的放行，是放行到過濾器鏈中的下一個過濾器。只有過濾器鏈中的全部過濾器都放行了，請求才能到達目標資源。 3. 請求的過程會按照順序通過過濾器鏈中的每個過濾器，回來的過程也會通過全部過濾器，只不過順序相反。 4. 關於過濾器鏈的相關內容瞭解原理便可，在使用過濾器的時候不用過多考慮過濾器鏈的問題。

Listener監聽器

web開發中的監聽器主要用來監聽Servlet規範中的三個域對象的變化 ServletRequest HttpSession ServletContext

監聽器一共3類8種：第一種實現SercletContextListener接口

主要用來監聽ServletContext的建立和銷燬，其實就是服務器的啓動和關閉
- 一、定義一個類，實現ServletContextListenter接口
- 方法
  
  void contextDestroyed(ServletConextEvent sce) ：ServletvContext對象被銷燬以前會調用該方法 void contextInitialized(ServletContextEvent sce)：ServletContext對象建立後會調用該方法

web.xml配置

在web.xml中配置listener和listener-class標籤：

<!-- 配置全局初始化參數 -->
<context-param>
    <param-name>location</param-name>
    <param-value>/WEB-INF/classes/applicationContext.xml</param-value>
</context-param>

<!--配置監聽器--> 
<listener>
    <listener-class>cn.itcast.web.listener.MyListener</listener-class> 
</listener>

註解配置

只須要在對應的監聽器類上添加@WebListener註解便可： @WebListener public class MyListener2 implements ServletContextListener { ... }

AJAX（ASynchronous JavaScript And XML 異步的JavaScript 和 XML）

Ajax 是一種在無需從新加載整個網頁的狀況下，可以更新部分網頁的技術。 [1] 經過在後臺與服務器進行少許數據交換，Ajax 可使網頁實現異步更新。這意味着能夠在不從新加載整個網頁的狀況下，對網頁的某部分進行更新。傳統的網頁（不使用 Ajax）若是須要更新內容，必須重載整個網頁頁面。

異步和同步

一、若是是同步請求，頁面向服務器發起一個請求後，在服務器沒有完成響應以前，頁面只能等待，不能再進行其它操做。

二、若是是異步，頁面想服務器發起一個請求後，在服務器沒有完成響應以前，頁面無需等待，還能夠進行其它操做，對於用戶來講，體驗沒有中斷

三、能夠用 Java 多線程的思路去理解，異步就是一個新的線程在後臺偷偷作其它事情。（只是這麼理解，本質不是多線程）

四、異步請求還有一個很是大的特色就是局部刷新，不用從新渲染整個頁面。注意： 1. 傳統的 HTTP 同步請求，服務器【最終】響應的數據會被瀏覽器直接渲染

經過 Ajax 發起的異步 HTTP 請求，服務器【最終】響應的數據不會被瀏覽器直接渲染，須要本身經過 JavaScript 處理！！！！！

什麼叫終？

一、好比訪問一個 Servlet，在 Servlet 中經過 response 對象的輸出流直接寫數據響應，並無道別的操做，這是常見的方式, response 寫的數據就是終響應的數據。

二、再好比：訪問一個 Servlet，可是這個 Servlet 本身沒有響應，而是轉發到了其它頁面好比 jsp，那麼終響應的是 jsp 中的內容。

JavaScript實現AJAX

核心對象：XMLHTTPRequest

實現異步請求的核心就是 JavaScript 提供的 XMLHttpRequest 對象，其實早期 JavaScript 語言並不受重視，不少後臺程序員將 JavaScript 代碼戲稱爲 toy code (玩具代碼)，直到 Google 公司率先發現 XMLHttpRequest 對象並經過它實現了搜索框的聯想詞功能。因此說 JavaScript 語言如今這麼流行和受重視，XMLHttpRequest 對象功不可沒！雖然咱們經過其它框架實現 Ajax 不會直接操做 XMLHttpRequest 對象，可是內部的原理都離不開它，因此這個對象須要認識！
實現步驟

一、建立異步對象二、設置請求狀態改變的監聽函數三、設置請求方式，請求路徑，是否異步四、發送請求五、處理響應

代碼示例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script>
 7     //定義方法
 8     function  fun() {
 9         //發送異步請求
10         //1.建立核心對象
11         var xmlhttp;
12         if (window.XMLHttpRequest)
13         {// code for IE7+, Firefox, Chrome, Opera, Safari
14             xmlhttp=new XMLHttpRequest();
15         }
16         else
17         {// code for IE6, IE5
18             xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
19         }
20 
21         //2. 創建鏈接
22         /*
23             參數：
24                 1. 請求方式：GET、POST
25                     * get方式，請求參數在URL後邊拼接。send方法爲空參
26                     * post方式，請求參數在send方法中定義
27                 2. 請求的URL：
28                 3. 同步或異步請求：true（異步）或 false（同步）
29          */
30         xmlhttp.open("GET","ajaxServlet?username=tom",true);
31 
32         //3.發送請求
33         xmlhttp.send();
34 
35         //4.接受並處理來自服務器的響應結果
36         //獲取方式 ：xmlhttp.responseText
37         //何時獲取？當服務器響應成功後再獲取
38 
39         //當xmlhttp對象的就緒狀態改變時，觸發事件onreadystatechange。
40         xmlhttp.onreadystatechange=function(){
41             //判斷readyState就緒狀態是否爲4，判斷status響應狀態碼是否爲200
42             if (xmlhttp.readyState==4 && xmlhttp.status==200){
43                //獲取服務器的響應結果
44                 var responseText = xmlhttp.responseText;
45                 alert(responseText);
46             }
47         }
48     }
49     
50     </script>
51     </head>
52     <body>
53         <input type="button" value="發送異步請求" onclick="fun();"><input>
54     </body>
55 </html>

JQuery實現

$.ajax();

代碼示例

 1      <!DOCTYPE html>
 2   <html lang="en">
 3   <head>
 4       <meta charset="UTF-8">
 5       <title>Title</title>
 6       <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
 7       <script>
 8       //定義方法
 9       function fun() {
10           //使用$.ajax()發送異步請求
11   
12           $.ajax({
13               url: "ajaxServlet", // 請求路徑
14               type: "POST", //請求方式
15               //data: "username=jack&age=23",//請求參數
16               data: {"username": "jack", "age": 23},
17               success: function (data) {
18                   alert(data);
19               },//響應成功後的回調函數
20               error: function () {
21                   alert("出錯啦...")
22               },//表示若是請求響應出現錯誤，會執行的回調函數
23   
24               dataType: "text"//設置接受到的響應數據的格式
25           });
26       }
27   
28       </script>
29       </head>
30       <body>
31           <input type="button" value="發送異步請求" id="btn"><input>
32       </body>
33   </html>

AjaxServlet代碼以下：

 1   package .web.servlet;
 2   
 3   import javax.servlet.ServletException;
 4   import javax.servlet.annotation.WebServlet;
 5   import javax.servlet.http.HttpServlet;
 6   import javax.servlet.http.HttpServletRequest;
 7   import javax.servlet.http.HttpServletResponse;
 8   import java.io.IOException;
 9   
10   @WebServlet("/ajaxServlet")
11   public class AjaxServlet extends HttpServlet {
12       protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
13           //1.獲取請求參數
14           String username = request.getParameter("username");
15           //處理業務邏輯。耗時
16           try {
17               Thread.sleep(5000);
18           } catch (InterruptedException e) {
19               e.printStackTrace();
20           }
21           //2.打印username
22           System.out.println(username);
23   
24           //3.響應
25           response.getWriter().write("hello : " + username);
26   }
27   
28   protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
29       this.doPost(request, response);
30       }
31   }

$.get(url,data,callback,dataType)

代碼示例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script src="js/jquery-3.3.1.min.js"></script>
 7     <script>
 8         //定義方法
 9         function fun() {
10             $.get("ajaxServlet", {username: "rose"}, function (data) {
11                 alert(data);
12             }, "text");
13         }
14     </script>
15 </head>
16 <body>
17 <input type="button" value="發送異步請求" onclick="fun();"><input>
18 </body>
19 </html>

$.post(url,data,callback,dataType)

代碼示例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script src="js/jquery-3.3.1.min.js"></script>
 7     <script>
 8         //定義方法
 9         function fun() {
10             $.post("ajaxServlet", {username: "rose"}, function (data) {
11                 alert(data);
12             }, "text");
13         }
14     </script>
15 </head>
16 <body>
17 <input type="button" value="發送異步請求" onclick="fun();"> <input>
18 </body>
19 </html>

jq表單對象.serialize()

有的時候咱們須要在用戶點擊 form 表單時，阻止表單直接提交，而是將用戶在表單中填寫的數據封裝成 ajax 的請求參數，向後臺發起異步請求，若是本身來封裝表單中的數據很是麻煩，因此 jQuery 提供了一個serialize 方法來幫咱們完成表單參數的封裝。

代碼示例

 1 <head>
 2     <meta charset="UTF-8">
 3     <title>Title</title>
 4     <script src="js/jquery-3.3.1.min.js"></script>
 5     <script>      
 6         $(function () {
 7             $("#form1").submit(function () {
 8                 // 本身發送異步請求
 9                 $.post("/day22/ajaxServlet1",$("#form1").serialize(),function (data) {
10                     alert(data);
11                 }); 
12                 return false;// 阻止表單發起同步提交
13             });
14         })
15     </script>
16 </head>
17 <body>
18     <form id="form1">
19         username:<input type="text" name="username"/><br>
20         password:<input type="text" name="password"/><br>
21         age:<input type="text" name="age"/><br>
22         info:<input type="text"><br>
23         <input type="submit" value="提交">
24     </form>
25 </body>

JSON（JavaScript Object Notation JavaScript對象表示法）

JavaScript Object Notation （JavaScript 對象表示法）,是 JavaScript 中定義對象的一種語法，如今被更普遍的用於網絡傳輸的數據格式。

xml和json

一、和 xml 相比，json 的數據體積更小。因此早期在移動互聯網興起以前，以 xml 做爲數據傳輸的格式比較多，可是移動互聯網興起後，用戶的流量都是比較寶貴的，因此開始愈來愈多的採用 json 這種數據格式。由於它體積小更節約用戶的流量。二、並且 json 還有一個自然的優點，就是它原本就是 JavaScript中描述對象的一種方式，因此能直接被 JavaScript所識別，便於數據的解析（根據 key 獲取 value）

語法規則

一、數據在名稱/值對中：json數據是由鍵值對構成的鍵用引號(單雙都行)引發來，也能夠不使用引號

值得取值類型： 1. 數字（整數或浮點數) 2. 字符串（在雙引號中) 3. 邏輯值（true 或 false） 4. 數組（在方括號中） 5. {"persons":[{},{}]}對象（在花括號中） {"address":{"province"："陝西"....}} 6. null

二、數據由逗號分隔：多個鍵值對由逗號分隔

三、花括號保存對象：使用{}定義json 格式

四、方括號保存數組：[]

值的獲取

 1  <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
 7     <script>
 8         //1.定義基本格式
 9         var person = {"name": "張三", age: 23, 'gender': true};
10         //獲取name的值
11         //var name = person.name;
12         var name = person["name"];
13         // alert(name);
14 
15         //alert(person);
16         //2.嵌套格式   {}———> []
17         var persons = {
18         "persons": [
19             {"name": "張三", "age": 23, "gender": true},
20             {"name": "李四", "age": 24, "gender": true},
21             {"name": "王五", "age": 25, "gender": false}
22             ]
23         };
24        // alert(persons);
25         //獲取王五值
26         var name1 = persons.persons[2].name;
27         // alert(name1);
28        /*
29         $.each(persons.persons,function (i,o) {
30             alert(o.name+":"+o.age+ ":" +o.gender)
31         });*/
32 
33         //2.嵌套格式   []———> {}
34         var ps = [{"name": "張三", "age": 23, "gender": true},
35             {"name": "李四", "age": 24, "gender": true},
36             {"name": "王五", "age": 25, "gender": false}];
37         //獲取李四值
38         // alert(ps);
39         //alert(ps[1].name);
40         /*
41         $(ps).each(function () {
42             alert(this.name)
43         })*/
44         $.each(ps,function (i,o) {
45             alert(o.name)
46         })
47 
48     </script>
49     </head>
50     <body>
51 
52     </body>
53 </html>

JSON數據和Java對象的相互轉換

JSON解析器

常見的解析器：Jsonlib,Gson,fastjson,jackson
JSON轉爲Java對象
1. 導入jackson的相關jar包
2. 建立Jackson核心對象 ObjectMapper
3. 調用ObjectMapper的相關方法進行轉換
  1. readValue(json字符串數據,Class)
Java對象轉換JSON
1. 導入jackson的相關jar包
2. 建立Jackson核心對象 ObjectMapper
3. 調用ObjectMapper的相關方法進行轉換
  1. 轉換方法：
    - writeValue(參數1，obj): 參數1： File：將obj對象轉換爲JSON字符串，並保存到指定的文件中 Writer：將obj對象轉換爲JSON字符串，並將json數據填充到字符輸出流中 OutputStream：將obj對象轉換爲JSON字符串，並將json數據填充到字節輸出流中
  - writeValueAsString(obj):將對象轉爲json字符串
  1. 註解：
  2. @JsonIgnore：排除屬性。
  3. @JsonFormat：屬性值得格式化
  - @JsonFormat(pattern = "yyyy-MM-dd")
  1. 複雜java對象轉換
  2. List：數組
  3. Map：對象格式一致

代碼示例

  1 package itcast.test;
  2 
  3 import itcast.domain.Person;
  4 import com.fasterxml.jackson.databind.ObjectMapper;
  5 import org.junit.Test;
  6 
  7 import java.io.FileWriter;
  8 import java.util.*;
  9 
 10 public class JacksonTest {
 11 //Java對象轉爲JSON字符串
 12 @Test
 13 public void test1() throws Exception {
 14     //1.建立Person對象
 15     Person p  = new Person();
 16     p.setName("張三");
 17     p.setAge(23);
 18     p.setGender("男");
 19 
 20     //2.建立Jackson的核心對象  ObjectMapper
 21     ObjectMapper mapper = new ObjectMapper();
 22     //3.轉換
 23     /*
 24         轉換方法：
 25             writeValue(參數1，obj):
 26                 參數1：
 27                     File：將obj對象轉換爲JSON字符串，並保存到指定的文件中
 28                     Writer：將obj對象轉換爲JSON字符串，並將json數據填充到字符輸出流中
 29                     OutputStream：將obj對象轉換爲JSON字符串，並將json數據填充到字節輸出流中
 30             writeValueAsString(obj):將對象轉爲json字符串
 31 
 32      */
 33     String json = mapper.writeValueAsString(p);
 34     //{"name":"張三","age":23,"gender":"男"}
 35     //System.out.println(json);//{"name":"張三","age":23,"gender":"男"}
 36         //writeValue，將數據寫到d://a.txt文件中
 37     //mapper.writeValue(new File("d://a.txt"),p);
 38 
 39     //writeValue.將數據關聯到Writer中
 40     mapper.writeValue(new FileWriter("d://b.txt"),p);
 41 }
 42 
 43 @Test
 44 public void test2() throws Exception {
 45     //1.建立Person對象
 46     Person p = new Person();
 47     p.setName("張三");
 48     p.setAge(23);
 49     p.setGender("男");
 50     p.setBirthday(new Date());
 51 
 52     //2.轉換
 53     ObjectMapper mapper = new ObjectMapper();
 54     String json = mapper.writeValueAsString(p);
 55 
 56     System.out.println(json);
 57     //{"name":"張三","age":23,"gender":"男","birthday":1530958029263}
 58     //{"name":"張三","age":23,"gender":"男","birthday":"2018-07-07"}
 59 }
 60 @Test
 61 public void test3() throws Exception {
 62     //1.建立Person對象
 63     Person p = new Person();
 64     p.setName("張三");
 65     p.setAge(23);
 66     p.setGender("男");
 67     p.setBirthday(new Date());
 68 
 69     Person p1 = new Person();
 70     p1.setName("張三");
 71     p1.setAge(23);
 72     p1.setGender("男");
 73     p1.setBirthday(new Date());
 74 
 75     Person p2 = new Person();
 76     p2.setName("張三");
 77     p2.setAge(23);
 78     p2.setGender("男");
 79     p2.setBirthday(new Date());
 80         //建立List集合
 81     List<Person> ps = new ArrayList<Person>();
 82     ps.add(p);
 83     ps.add(p1);
 84     ps.add(p2);
 85         //2.轉換
 86     ObjectMapper mapper = new ObjectMapper();
 87     String json = mapper.writeValueAsString(ps);
 88     // [{},{},{}]
 89     //[{"name":"張三","age":23,"gender":"男","birthday":"2018-07-07"},{"name":"張三","age":23,"gender":"男","birthday":"2018-07-07"},{"name":"張三","age":23,"gender":"男","birthday":"2018-07-07"}]
 90     System.out.println(json);
 91 }
 92 
 93 @Test
 94 public void test4() throws Exception {
 95     //1.建立map對象
 96     Map<String,Object> map = new HashMap<String,Object>();
 97     map.put("name","張三");
 98     map.put("age",23);
 99     map.put("gender","男");
100     //2.轉換
101     ObjectMapper mapper = new ObjectMapper();
102     String json = mapper.writeValueAsString(map);
103     //{"name":"張三","age":23,"gender":"男"}
104     System.out.println(json);//{"gender":"男","name":"張三","age":23}
105 }
106 
107 //演示 JSON字符串轉爲Java對象
108 @Test
109 public void test5() throws Exception {
110    //1.初始化JSON字符串
111     String json = "{\"gender\":\"男\",\"name\":\"張三\",\"age\":23}";
112 
113     //2.建立ObjectMapper對象
114     ObjectMapper mapper = new ObjectMapper();
115     //3.轉換爲Java對象 Person對象
116     Person person = mapper.readValue(json, Person.class);
117 
118     System.out.println(person);
119     }
120 }

JavaScript任何識別JSON

雖然 JSON 是 JavaScript 中描述對象的一種方式，可是服務端生成的是一個 JSON 格式的字符串。服務器給 Ajax 異步請求響應之後，這個字符串終會出如今回調函數 function(data){} 的參數中，這個 data 就是服務器響應的 JSON數據。怎麼才能讓 JavaScript不把這個 data 當成普通字符串而是當成對象呢？一般有兩種處理方式：

在客戶端發起異步請求時，指定 dataType 參數值爲 "json"

$.get(url,data,callback,"json"); $.post(url,data,callback,"json");
在服務器向異步請求做出響應式經過 Content-Type 響應頭設置響應數據的類型爲 JSON

response.setContentType("application/json;charset=utf-8");

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

JavaWeb

JavaWeb

軟件架構

C/S (client/server 客服端/服務端)

B/S （Browser/Server 瀏覽器/服務器端）

前端

HTML（Hyper Text MarKup Language）超文本標記語言

CSS 指層疊樣式表 (Cascading Style Sheets)

boder

margin

padding

background

font

文本

尺寸

表格

JavaScript

JQuery

Bootstrap

XML（Extensible Markup Language）可擴展標記語言

web服務器軟件

webLogic

webSphere

JBOSS

Tomcat

JSP

概念

原理

三大腳本

三大指令

註釋

九大內置對象

MVC架構模式

EL表達式（Expression Language表達式語言）

JSTL（JavaServer Pages Tag Library）JSP標準標籤庫

Http(Hyper Textsfer Protocol)超文本傳輸協議

請求消息的格式

web三大域

Request一次請求的範圍

Session一次會話的範圍

ServletContext整個web應用的範圍

web三大組件

Servlet

Filter過濾器

Listener監聽器

AJAX（ASynchronous JavaScript And XML 異步的JavaScript 和 XML）

異步和同步

JavaScript實現AJAX

JQuery實現

JSON（JavaScript Object Notation JavaScript對象表示法）

xml和json

語法規則

值的獲取

JSON數據和Java對象的相互轉換

JSON解析器

JSON轉爲Java對象

Java對象轉換JSON

轉換方法：

註解：

複雜java對象轉換

JavaScript任何識別JSON