1. HTML

HTML指的超文本標(biāo)記語言(Hyper Text Markup Language), 是一種用來描述網(wǎng)頁的語言.
HTML: 結(jié)構(gòu), 決定網(wǎng)頁的結(jié)構(gòu)和內(nèi)容
CSS: 表現(xiàn), 設(shè)定網(wǎng)頁的表現(xiàn)樣式
JavaScript: 行為, 控制網(wǎng)頁的行為

2. servlet

Servlet是Sun公司制定的一套技術(shù)標(biāo)準(zhǔn), 包含與Web應(yīng)用相關(guān)的一系列接口, 是Web應(yīng)用實現(xiàn)方式的宏觀解決方案. 而具體的Servlet容器負(fù)責(zé)提供標(biāo)準(zhǔn)的實現(xiàn).
可以簡單的理解servlet就是用來處理客戶端請求的.

請求與servlet的對應(yīng), 是通過在web.xml配置中servlet-mapping生效, 詳見文章最后.

一次請求經(jīng)過的流程:
一次請求request ==>
過濾器(如果有)==>
到對應(yīng)的servlet中根據(jù)發(fā)送的get或者post請求然后執(zhí)行相應(yīng)的doGet或者doPost方法(此處可以可以編碼繼承HttpServlet, 重寫相應(yīng)的方法來實現(xiàn), 也可以直接重寫service方法) ==>
根據(jù)Servlet具體的行為, 執(zhí)行響應(yīng)的動作, 例如可能返回response, 可能轉(zhuǎn)發(fā), 可能重定向等 ==> end

public class LoginServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 處理get請求
    }
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 處理post請求
    }
    @Override
    public void service(ServletRequest req, ServletResponse res) throws ServletException, IOException {
        // 也可以同時在這里處理request 和 response
    }
}

關(guān)于請求參數(shù)HttpServletRequest其功能是:

• 可以從該對象獲取請求參數(shù)
• 在請求域中綁定數(shù)據(jù)
• 將請求轉(zhuǎn)發(fā)給另外一個URL地址

響應(yīng)結(jié)果HttpServletResponse其功能是:

• 使用PrintWriter對象向瀏覽器輸出數(shù)據(jù)
• 實現(xiàn)請求的重定向

設(shè)置重定向:

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

servlet收到瀏覽器請求后, 可以進(jìn)行一定處理后, 交給服務(wù)器內(nèi)部的別的servlet進(jìn)行處理, 即轉(zhuǎn)發(fā)請求:
因為轉(zhuǎn)發(fā)是在服務(wù)器內(nèi)部進(jìn)行的, 所以用戶是無感知的.

RequestDispatcher rd = req.getRequestDispatcher("轉(zhuǎn)發(fā)的地址");
// req還是用的原來的req, 所以在req到達(dá)下一個servlet后, 其中綁定的數(shù)據(jù)依然可以使用
rd.forward(req, resp);

JSP技術(shù)

其本質(zhì)是一種servlet技術(shù), 主要用于頁面顯示

JSP全稱Java Server Pages, 顧名思義就是運行在java服務(wù)器中的頁面, 也就是在我們JavaWeb中的動態(tài)頁面, 其本質(zhì)就是一個Servlet.(經(jīng)過轉(zhuǎn)化后就是一個java文件, 其中的網(wǎng)頁源代碼文件就是java程序通過不斷的打印輸出 HTML 的代碼實現(xiàn))

一般情況下, 都是Servlet處理完的數(shù)據(jù), 轉(zhuǎn)發(fā)到JSP, JSP負(fù)責(zé)顯示數(shù)據(jù)的工作(因為其擅長顯示的工作)
我們可以在jsp頁面匯總寫java代碼:

<%
// java代碼
System.out.println("Hello JSP");
String str = "content";
%>
<%-- 可以通過以下的jsp表達(dá)式竞滓，使用java變量 --%>
<%=str%>

jsp中隱含的對象有以下幾個，可以直接使用：
① out（JspWriter）：相當(dāng)于response.getWriter()獲取的對象吹缔，用于在頁面中顯示信息商佑。
② config（ServletConfig）：對應(yīng)Servlet中的ServletConfig對象。
③ page（Object）：對應(yīng)當(dāng)前Servlet對象厢塘，實際上就是this莉御。
④ pageContext（PageContext）：當(dāng)前頁面的上下文，也是一個域?qū)ο蟆?br> ⑤ exception（Throwable）：錯誤頁面中異常對象
⑥ request（HttpServletRequest）：HttpServletRequest對象
⑦ response（HttpServletResponse）：HttpServletResponse對象
⑧ application（ServletContext）：ServletContext對象
⑨ session（HttpSession）：HttpSession對象

JSP之EL表達(dá)式

EL是JSP內(nèi)置的表達(dá)式語言, 用以訪問頁面的上下文以及不同作用域中的對象, 取得對象屬性的值, 或執(zhí)行簡單的運算或判斷操作. EL在得到某個數(shù)據(jù)時, 會自動進(jìn)行數(shù)據(jù)類型的轉(zhuǎn)換

EL表達(dá)式用于代替JSP表達(dá)式(<%= %>)在頁面中做輸出操作, 其作用就是讀取數(shù)據(jù). 輸出數(shù)據(jù), 如果數(shù)據(jù)為null, 則不輸出.

$(EL表達(dá)式(可完成取值, 簡單判斷, 簡單的運算等)) 例如:
${emp.email}
${emp.gender==0 ? "女": "男"}

EL取值的四個域:
pageScope: 當(dāng)前頁面有效
requestScope: 一次請求有效
sessionScope: 一次會話有效
applicationScope: 應(yīng)用的全局變量(服務(wù)器不炸, 一直都有, 一般是環(huán)境變量等全局的信息)

JSTL

JSTL（JavaServer Pages Standard Tag Library俗冻，JSP標(biāo)準(zhǔn)標(biāo)簽庫)
提供一些標(biāo)簽, 讓我們少寫java代碼. 頁面更加簡潔.
常用的標(biāo)簽:

<!-- if使用示例 --> 
<c:if test="${! empty employeeList}"></c:if>

<!-- for使用示例 --> 
<c:forEach items="${employeeList}" var="emp">
            <tr align="center">
                <td>${emp.id}</td>
                <td>${emp.lastName}</td>
                <td>${emp.department.deptName}</td>
                <td>
                    <a href="#">Edit</a>
                    &nbsp;&nbsp;
                    <a href="#">Delete</a>
                </td>
            </tr>
</c:forEach>

3. JavaScript

一種腳本語言, 在僅僅需要瀏覽器的支持即可運行(現(xiàn)在瀏覽器應(yīng)該沒有不支持的...), 負(fù)責(zé)網(wǎng)頁的動態(tài)內(nèi)容或者邏輯處理等等.

使用:

<script type="text/javascript">
// 具體代碼
</script>

JavaScript的事件驅(qū)動:
用戶事件: 點擊, 鼠標(biāo)移入, 鼠標(biāo)移出等
系統(tǒng)事件: 由系統(tǒng)觸發(fā)的事件, 如文檔加載完成等

BOM: Borwser Object Model 瀏覽器對象模型, 提供了獨立于內(nèi)容的礁叔、可以與瀏覽器窗口進(jìn)行互動的對象結(jié)構(gòu). Window對象是BOM的頂層對象，其他對象都是該對象的子對象.

DOM: Document Object Model 文檔對象模型, document對象代表當(dāng)前的HTML文檔(可以把HTML文檔看成一個樹狀模型). 獲取document對象的本質(zhì)方法是：window.document迄薄，而“window.”可以省略. (也就是說BOM包含了DOM)

DOM描述了處理網(wǎng)頁內(nèi)容的方法和接口, BOM描述了與瀏覽器進(jìn)行交互的方法和接口.

元素查詢:

// 通過id查詢, 返回一個具體的節(jié)點(id是唯一的)
document.getElementById("id值")
// 通過標(biāo)簽名查詢, 返回元素節(jié)點數(shù)組
document.getElementsByTagName("標(biāo)簽名")
// 根據(jù)name屬性值查詢, 返回元素節(jié)點數(shù)組
document.getElementsByName("name值")

AJAX

AJAX 是 Asynchronous JavaScript And XML 的簡稱. 直譯為, 異步的JS和XML.
AJAX 是一門技術(shù), 它提供了異步更新的機制, 使用客戶端與服務(wù)器間交換數(shù)據(jù)而非整個頁面文檔琅关，實現(xiàn)頁面的局部更新。

異步請求對象: XMLHttpRequest, 用來封裝請求報文. 現(xiàn)在有些瀏覽器已經(jīng)不支持了.

JQuery

jQuery是一個框架, 它對JS進(jìn)行了封裝, 使其更易于使用.
JQuery對同樣提供了對Ajax的支持, 更易于的進(jìn)行Ajax的開發(fā), 提供的相關(guān)方法有$.get, $.post, $.ajax等

JQuery的對象的本質(zhì)就是dom對象的數(shù)組/集合
JS轉(zhuǎn)JQuery: var jObj = $(dObj)
JQuery轉(zhuǎn)JS: var dObj = jObj[0] 或者 var dObj = jObj.get(0)

jQuery 庫包含以下特性：

• HTML 元素選取
• HTML 元素操作
• CSS 操作
• HTML 事件函數(shù)
• JavaScript 特效和動畫
• HTML DOM 遍歷和修改
• AJAX
• Utilities

一個登陸注冊頁面的例子如下:

$(function () {  // 頁面加載完成會執(zhí)行該函數(shù)內(nèi)容
            // 是否通過密碼測試標(biāo)志
            var passwordFlag = false
            // 是否通過用戶名合法測試標(biāo)志
            var usernameFlag = false

            $("#form").submit(function () {
                return usernameFlag && passwordFlag
            })

            $("#username").focus(function () {
                // alert("聚焦")
                $("#regist_msg").html("")
            })

            $("#re_password").blur(function () {
                // 離開
                var password = $("#password").val()
                var re_password = $("#re_password").val()
                if (password != null && password != "" && password == re_password) {
                    // 可以注冊
                    $("#repassord_msg").html("√")
                    passwordFlag = true
                } else {
                    // 不能注冊
                    $("#repassord_msg").html("X")
                    passwordFlag = false
                }
            })

            $("#username").blur(function () {
                // 離開
                var username = $("#username").val();
                // 發(fā)送異步請求
                $.ajax({
                    url: "checkUsername",
                    type: "POST",
                    data: "username=" + username,
                    success: function (data) {  // 會將服務(wù)器返回的數(shù)據(jù)保存到data中
                        // 設(shè)置到span 元素 的內(nèi)容為data
                        if (data == 0) {
                            // alert("用戶已存在")
                            $("#regist_msg").html("用戶已存在")
                            usernameFlag = false
                        } else {
                            // alert("用戶不存在")
                            $("#regist_msg").html("可以使用")
                            usernameFlag = true
                        }
                    }
                })
            })
        })

4. 一些技術(shù)

Cookie

HTTP是無狀態(tài)協(xié)議, 服務(wù)器不能記錄瀏覽器的訪問狀態(tài), 也就是說服務(wù)器不能區(qū)分中兩次請求是否由一個客戶端發(fā)出.
Cookie就是服務(wù)器在瀏覽器保存的一段信息. 有了Cookie就可以讓瀏覽器每次帶著Cookie進(jìn)行訪問, 瀏覽器就可以根據(jù)其中的內(nèi)容, 判斷是哪個瀏覽器在訪問了.

Cookie的使用

// 設(shè)置cookie, 要返回給瀏覽器
Cookie cookie = new Cookie("id","123321123321");
cookie.setPath("設(shè)置cookie的路徑");
cookie.setMaxAge("設(shè)置cookie保留的時間");
response.addCookie(cookie);

// 讀取cookie, 瀏覽器帶著cookie來訪問
Cookie [] cookies = request.getCookies();

Seesion

Cookie有局限性, 不能太大(否則網(wǎng)絡(luò)傳輸會浪費大量時間), 而且瀏覽器一般會對cookie的大小做出限制.
于是Session出現(xiàn)了, 可以有效的解決這個問題.

Session的用法
就是在服務(wù)器端保存一些用戶的數(shù)據(jù), 然后傳遞給用戶一個名字為 JSESSIONID 的Cookie, 其對應(yīng)服務(wù)器的一個Session對象, 通過它就可以獲取保存用戶信息的Session.

Session的創(chuàng)建時機是在request.getSession()方法第一次被調(diào)用時.
Session創(chuàng)建后, 同時又一個名為JSESSIONID 的Cookie被創(chuàng)建, 這個Cookie的默認(rèn)時效就是當(dāng)前的會話.
Session的機制也是依賴于Cookie來實現(xiàn)的.

Session默認(rèn)有效時間為30分鐘讥蔽，可以在服務(wù)器的web.xml配置中修改.

關(guān)于URL重寫

有時候Cookie會被瀏覽器禁用, 這時可以使用URL重寫. 把會話的JSESSIONID 寫在URL后面.

服務(wù)器的過濾器

WEB資源可能Servlet涣易、JSP、HTML頁面等. 過濾器可以截取客戶端和WEB資源之間的request和response信息.
一個WEB應(yīng)用中可以部署多個過濾器, 多個過濾器就組成了一個過濾器鏈, 請求和響應(yīng)必須在經(jīng)過多個過濾器后才能到達(dá)目標(biāo).

示意圖

過濾器的使用, 通過Filter接口完成過濾器的開發(fā)

public class LoginFilter implements Filter {
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
        System.out.println("LoginFilter 初始化");
    }

    @Override
    public void doFilter(ServletRequest servletRequest, 
                        ServletResponse servletResponse, 
                        FilterChain filterChain) throws IOException, ServletException {
    }

    @Override
    public void destroy() {
        System.out.println("LoginFilter 銷毀方法");
    }
}

同時在web.xml中配置生效.

在線人數(shù)統(tǒng)計

監(jiān)聽到session創(chuàng)建了, 就認(rèn)為一個用戶在線
編寫一個監(jiān)聽器

public class MySessionListener implements HttpSessionListener {
    /**
     * 監(jiān)聽到session創(chuàng)建了, 就認(rèn)為一個用戶在線.
      ServletContext: 很強大, 引用服務(wù)器被創(chuàng)建, 服務(wù)器銷毀此對象才會被銷毀, 聲明周期與服務(wù)器相同, 相當(dāng)于全局變量
     */
    @Override
    public void sessionCreated(HttpSessionEvent se) {
        /* Session is created. */
        ServletContext servletContext = se.getSession().getServletContext();
        // 獲取人數(shù)
        Object count = servletContext.getAttribute("count");
        if(count == null){
            // 沒有則創(chuàng)建
            servletContext.setAttribute("count", 1);
        }else {
            servletContext.setAttribute("count", (Integer)count + 1);
        }
    }
    @Override
    public void sessionDestroyed(HttpSessionEvent se) {
        /* Session is destroyed. */
    }
}

同時在web.xml中添加一個listener即可.

Json

AJAX一開始使用的時XML的數(shù)據(jù)格式, XML的數(shù)據(jù)格式非常簡單清晰, 容易編寫, 但是由于XML中包含了過多的標(biāo)簽, 以及十分復(fù)雜的結(jié)構(gòu), 解析起來也相對復(fù)雜. 所以目前來講, AJAX中已經(jīng)幾乎不使用XML來發(fā)送數(shù)據(jù)了, 取而代之的是一項JSON.

JSON是JavaScript Object Notation 的縮寫冶伞，是JS提供的一種數(shù)據(jù)交換格式.

在服務(wù)器與瀏覽器之間通過JSON字符串傳遞數(shù)據(jù).

JSON字符串轉(zhuǎn)化為Java對象, 常用的工具大概有三種, json-lib, jackson, gson.
而java對象通過json字符串傳送給瀏覽器, js在接受的時候會默認(rèn)直接轉(zhuǎn)化為JSON對象.

web.xml的配置文件

<servlet-mapping> 中的 <servlet-name> 和 <servlet> 中的 <servlet-name> 相同的時候, 二者就關(guān)聯(lián)起來了, 就能通過<servlet-class> 找到對應(yīng)的servlet.
<url-pattern> 則是瀏覽器訪問服務(wù)端匹配的模式, 只要匹配就可以通過<servlet-name>找到<servlet-class>

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">
    <!-- 過濾器的使用 -->
    <filter>
        <filter-name>LoginFilter</filter-name>
        <filter-class>com.jia.login.filter.LoginFilter</filter-class>
    </filter>
    <filter-mapping>
        <filter-name>LoginFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

    <!-- 監(jiān)聽器的配置 -->
    <listener>
        <listener-class>com.jia.login.listener.MySessionListener</listener-class>
    </listener>

    <!-- servlet的配置 -->
    <servlet>
        <servlet-name>loginServlet</servlet-name>
        <servlet-class>com.jia.login.servlet.LoginServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <!-- 客戶端的登錄請求: http://localhost:8888/web01/login -->
        <servlet-name>loginServlet</servlet-name>
        <url-pattern>/login</url-pattern>
    </servlet-mapping>

    <!-- servlet的配置 -->
    <servlet>
        <servlet-name>checkUsername</servlet-name>
        <servlet-class>com.jia.login.servlet.CheckUsername</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>checkUsername</servlet-name>
        <url-pattern>/checkUsername</url-pattern>
    </servlet-mapping>
</web-app>