jsp頁面渲染

時間  2019-11-30
標籤 jsp 頁面 渲染 欄目 JSP 简体版
原文   原文鏈接

1.jspjavascript

 　　1.jsp腳本和註釋html

　　　　1）<%java代碼%> --------------內部的java代碼翻譯到service方法的內部java

　　　　2）<%=java變量或表達式%>  ----------會被翻譯成service 方法內部 out.print()jquery

　　　　3）<%! java代碼%> -----------------會被翻譯成servlet 的成員的內容web

　　 　jsp註釋：不一樣的註釋可見範圍是不一樣ajax

　　　　1）HTML註釋：<!--註釋內容 -->  ---------可見範圍jsp源碼、翻譯後的servlet、頁面顯示HTML源碼apache

　　　　2）java註釋：//單行註釋  /* 多行註釋*/---------可見範圍 jsp 源碼 翻譯後的servletjson

　　　　3）jsp註釋：<%-- 註釋內容--%> --------可見範圍jsp源碼可見數組

　　2.jsp運行原理-----------------jsp本質就是servlet瀏覽器

 　　　　jsp在第一次訪問時會被Web容器翻譯成servlet，在執行過程：

　　　　　　第一次訪問----->helloServlet.jsp --------helloServlet_jsp.java------>編譯運行

　　　　　　PS：被翻譯後的servlet在Tomcat的work目錄中能夠找到

　　3.jsp指令（3個）

　　　　jsp的指令是指導jsp翻譯和運行的命令，jsp包括三大指令：

　　　　1）page指令 ---- 屬性最多的指令（實際開發中page指令默認）

　　　　　　屬性最多的一個指令，根據不一樣的屬性，指導整個頁面特性

　　　　　　格式：<%@page 屬性名1=「屬性值1」 屬性名2 = 「屬性值2」...%>

　　　　　　經常使用屬性以下：

　　　　　　　　language：jsp 腳本中能夠嵌入的語言種類

　　　　　　　　pageEncoding ：當前jsp文件的自己編碼 --- 內部能夠包含contentType

　　　　　　　　contentType：response.setContentType(text/html;charset = UTF-8)

　　　　　　　　session ：是否jsp在翻譯時自動建立session

　　　　　　　　import ：導入java的包

　　　　　　　　errorPage：當 當前頁面出現錯誤後跳轉到哪一個頁面

　　　　　　　　isErrorPage：當前頁面是一個處理錯誤的頁面

　　　　 2）include 指令

　　　　　　頁面包含（靜態包含）指令，能夠將一個jsp頁面包含到另外一個jsp頁面中

　　　　　　格式：<%@ include file = "被包含的文件地址"%>

　　　　3）taglib 指令

　　　　　　在jsp頁面中引入標籤庫（jstl標籤庫、Struts2標籤庫）

　　　　　　格式：<%@taglib uri = "標籤庫地址" prefix = "前綴"%>

　　4.jsp內置/隱式對象（9個）

　　　jsp被翻譯成servlet以後，service方法中有9個對象定義並初始化完畢，在jsp腳本中能夠直接使用這9個對象

　　　

 　　　1）out對象

　　　　out的類型：JspWriter

　　　　out 做用就是向客戶端輸出內容 --------out.write()

　　　　out 緩衝區默認 8kb 能夠設置成0 表明關閉out緩衝區，內容直接寫到response緩衝器

　　　2）pageContext對象

　　　　jsp頁面的上下文對象，做用以下：

　　　　page對象與pageContext對象不是一回事：

　　　　1）pageContext是一個域對象

　　　　　　setAttribute(String name,Object obj)

　　　　　　getAttribute(String name)

　　　　　　removeAttribute(String name)

　　　　

　　　　pageContext能夠向指定的其餘域中存取數據

　　　　　　setAttribute(String name,Object obj, int scope)

　　　　　　getAttribute(String name,int scope)

　　　　　　removeAttribute(String name,int scope)

　　　　　　findAttribute(String name)-------依次從 pageContext域、request域、session域、application域中獲取屬性，在某個域中獲取後將不在向後尋找

　　　　四大做用域：

　　　　　　page域：當前jsp頁面範圍

　　　　　　request域：一次請求

　　　　　　session域：一次會話

　　　　　　application域：整個web應用

　　　　2）能夠得到其餘8大隱式對象：

　　　　　　例如：pageContext.getRequest()

　　　　　　　　　pageContext.getSession()

　　5.jsp標籤（動做）

　　　1)頁面包含（動態包含）：<jsp:include page = 「被包含的頁面」>

　　　2)請求轉發：<jsp:forward page = "要轉發的資源"/>　　

 ****************************************************************************************************

2. EL技術

　　1.EL表達式：

　　　　el 表達式能夠嵌入在jsp頁面內部，減小jsp腳本的編寫，el出現的目的是要替代jsp頁面中腳本的編寫。

　　2.el從域中取出數據（EL最重要的做用）

　　　　jsp腳本：<%=request.getAttribute（name）%>

　　　　EL表達式替代上面的腳本：${requestScope.name}

 

　　　　el最主要的做用是得到四大域中的數據，格式 ${el表達式}

　　　　el得到pageContext域中的值： ${pageScope.key};

　　　　el得到request域中的值：${requestScope.key};

　　　　el得到session域中的值：${sessionScope.key};

　　　　el得到application域中的值：${applicationScope.key};

　　　　EL從四個域中得到某個值${key};

　　　　　　----一樣是依次從pageContext域、request域、session域、application域中獲取屬性，在某個域中獲取後將不在向後尋找；

　　　　1）得到普通字符串

　　　　2）得到User對象的值

　　　　3）得到List<User> 的值

　　例子：

     <!-- 使用EL表達式得到域中的值 -->
     ${requestScope.company }
     ${sessionScope.user.name }
     ${applicationScope.list[1].name }
     <hr>
     <!-- 使用el表達式 全域查找 -->
     ${company }
     ${user.name}
     ${list[1].name }

3.EL的內置對象（11個）

　　pageScope,requestScope,sessionScope,applicationScope

 　　　　　　　　　　　　　　　　---- 獲取JSP中域中的數據

　　${pageContext.request.contextPath}

　　　　　　　　　　　　　　　　----得到web應用的名稱

4.EL執行表達式：

　　例子：

　　　　${1+1}

　　　　${empty user}

　　　　${user == null?true:false}

********************************************************************************************

1.JSTL技術：

　　jstl(JSP Standard Tag Library),JSP標準標籤庫，能夠嵌入在jsp頁面中使用標籤的形式完成業務邏輯等功能。jstl 的目的同el同樣也是要代替jsp 頁面中的腳本代碼。jstl標準標籤庫有5個子庫，目前常使用的是他的核心庫：

　　

　　2.下載：「http://archive.apache.org/dist/jakarta/taglibs/standard/binaries/」網址下載JSTL的安裝包：jakarta-taglibs-standard-1.1.2.zip

 　　導入：

　　　　

　　使用jsp的taglib指令導入核心標籤庫：

　　　　　　　　

　　3.jstl核心庫的經常使用標籤

　　　　1）<c:if test = "  "> 

　　　　　　其中test是返回boolean 的條件

　　　　2）<c:forEach>

　　　　　　使用方式有兩種組合形式：

　　　　　　<!-- forEach模擬

　　　　　　　　for（int i=0; i<=5 ; i++）{

　　　　　　　　　　syso(i)

　　　　　　　　}

　　　　　　-->

　　　　　　<c:forEach begin="0" end = "5" var = "i">

　　　　　　　　${i}<br/>

　　　　　　</c:forEach>

　　　　　　<!-- 模擬加強for        productList-----List<Product>

　　　　　　　　for(Product product : productList){

　　　　　　　　　　syso(product.getPname());

　　　　　　　　}

　　　　　　-->

　　　　　　<!-- items：一個集合或數組  var ：表明 集合中的某一個元素-->

　　　　　　<c:forEach items = "${productList }"  var = "pro">

　　　　　　　　${pro.pname}

　　　　　　</c:forEach>　　

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.util.*" %>
<%@ page import="com.itheima.domain.*" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
    <%
        //模擬List<String> strList
        List<String> strList = new ArrayList<String>();
        strList.add("itcast");
        strList.add("itheima");
        strList.add("boxuegu");
        strList.add("shandingyu");
        request.setAttribute("strList", strList);
        
        //遍歷List<User>的值
        List<User> userList = new ArrayList<User>();
        User user1 = new User();
        user1.setId(2);
        user1.setName("lisi");
        user1.setPassword("123");
        userList.add(user1);
        User user2 = new User();
        user2.setId(3);
        user2.setName("wangwu");
        user2.setPassword("123");
        userList.add(user2);
        application.setAttribute("userList", userList);
        
        //遍歷Map<String,String>的值
        Map<String,String> strMap = new HashMap<String,String>();
        strMap.put("name", "lucy");
        strMap.put("age", "18");
        strMap.put("addr", "西三旗");
        strMap.put("email", "licy@itcast.cn");
        session.setAttribute("strMap", strMap);
        
        //遍歷Map<String,User>的值
        Map<String,User> userMap = new HashMap<String,User>();
        userMap.put("user1", user1);
        userMap.put("user2", user2);
        request.setAttribute("userMap", userMap);
        
    %>
    

    <h1>取出strList的數據</h1>
    <c:forEach items="${strList }" var="str">
        ${str }<br/>
    </c:forEach>
    
    <h1>取出userList的數據</h1>
    <c:forEach items="${userList}" var="user">
        user的name：${user.name }------user的password：${user.password }<br/>
    </c:forEach>
    
    <h1>取出strMap的數據</h1>
    <c:forEach items="${strMap }" var="entry">
        ${entry.key }====${entry.value }<br/>
    </c:forEach>
    
    <h1>取出userMap的數據</h1>
    <c:forEach items="${userMap }" var="entry">
        ${entry.key }:${entry.value.name }--${entry.value.password }<br/>
    </c:forEach>
    
</body>
</html>

 ******************************************************************************************************************

1.ajax異步加載+jeson數據格式

　1.ajax概述

　　1）什麼是同步，什麼是異步

　　　　同步現象：客戶端發送請求到服務器端，當服務器返回響應以前，客戶端都處於等待卡死狀態

　　　　異步現象：客戶端發送請求到服務器端，不管服務器是否返回響應，客戶端均可以隨意作其餘事情，不會卡死

　　2）ajax的運行原理

　　　　頁面發起請求，會將請求發送給瀏覽器內核中的Ajax引擎，Ajax引擎會提交請求到服務器端，在這段時間裏，客戶端能夠任意進行任意操做，直到服務器端將數據返回給Ajax引擎後，會觸發你設置的事件，從而執行自定義的js邏輯代碼完成某種頁面功能。

　　

2.Json數據格式

　　json是一種與語言無關的數據交換格式，做用：

　　　　使用ajax進行先後臺數據交換

　　　　移動端與服務端的數據交換

　　1）Json的格式與解析

　　　　json有兩種格式：

　　　　　　1）對象格式：{"key1":obj,"key2":obj,"key3":obj...}

　　　　　　2)數組/集合格式：[obj,obj,obj...]

　　　　例如：user對象  用json數據格式表示：

　　　　　　{"username":"zhangsan","age":28,"password":"123","addr":"北京"}

　　　　　　List<Product> 用json數據格式表示：

　　　　　　[{"pid":"10","pname":"小米4C"},{},{}...]

　　　　　　　　注意：對象格式和數組格式能夠互相嵌套

　　　　　　　　注意：json的key是字符串，json的value是Object

　　　　　json的解析：

　　　　　　json是js的原生內容，也就意味着js能夠直接取出json對象中的數據

　　2）Json的轉換插件

　　　　將java的對象或集合轉換成json形式字符串

　　　　json的轉換插件是經過java的一些工具，直接將java對象或集合轉換成json字符串。

　　　　經常使用的json轉換工具：

　　　　　　1）jsonlib

　　　　　　2)Gson：google

　　　　　　3)fastjson：阿里巴巴

　　jsonlib工具使用：

　　　  1.導包

　　　　　　

　　　　2.

　　　　　　//使用json的轉換工具將對象或集合轉成json格式的字符串
        JSONArray fromObject = JSONArray.fromObject(productList);
        String string = fromObject.toString();
        System.out.println(string);

　　jsonlib工具使用：

　　　　1.導包：

　　　　　　

　　　　2.

　　　　 Gson gson = new Gson();
        String json = gson.toJson(productList);
        System.out.println(json);
        
        response.setContentType("text/html;charset=UTF-8");
        
        response.getWriter().write(json);

4.Jquery 的Ajax技術

　jQuery是一個優秀的js框架，天然對js原生的ajax進行了封裝，封裝後的ajax的操做方法更簡潔，功能更強大，與ajax操做相關的jQuery方法，開發中經常使用三種：

　　1）$.get(url,[data],[callback],[type])

　　2)  $.post(url,[data],[callback],[type])

　　　　其中：

　　　　　　url：表示請求的服務器地址

　　　　　　data：表示請求服務器端的數據（能夠是key=value 形式 也能夠是json格式）

　　　　　　callback：表示服務器成功響應所觸發的函數（只有正常成功返回才執行）

　　　　　　type：表示服務器端返回的數據類型（jQuery會根據指定的類型自動類型轉換）

　　　　　　　　經常使用的返回類型：text、json、html

例子代碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript">
    function fn1() {
    
        //get訪問服務器
        $.get(
            "/WEB22/ajaxServlet2",//url地址        
            {"name":"張三","age":25},//請求參數，get提交若是有中文，需在提交的servlet中解決編碼問題
                                    //須要先編碼，再解碼
            function(data){ //執行成功後的回調
                //{\"name\":\"tom\",\"age\":21}
                alert(data.name);
            },
            "json"
        );
    }
    
    
    function fn2() {
        //post訪問服務器
        $.post(
            "/WEB22/ajaxServlet2",//url地址        
            {"name":"lisi","age":25},//請求參數 post提交若是有中文，不需在提交的servlet中解決編碼問題
                                    //request.setCharacterEncoding("UTF-8");該代碼無影響
            function(data){ //執行成功後的回調
                //{\"name\":\"tom\",\"age\":21}
                alert(data.name);
            },
            "json"
        );
    }
    
    
</script>

</head>
<body>
    
    <input type="button" value = "get訪問服務器端" onclick="fn1()"><span id="span1"></span>
    <input type="button" value = "post訪問服務器端" onclick="fn2()"><span id="span2"></span>
    
</body>
</html>
package com.itheima.ajax02;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class AjaxServlet2 extends HttpServlet {

    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        String name = request.getParameter("name");
        String age = request.getParameter("age");
        
        System.out.println(name + "  " + age);
        
        //java代碼只能返回json格式的字符串
        //{"name":"tom","age":21}
        //需用轉義{\"name\":\"tom\",\"age\":21}
        
        
        //若是返回的json字符串中含有中文，需設置編碼問題
        response.setContentType("text/html;charset=UTF-8");
        response.getWriter().write("{\"name\":\"湯姆\",\"age\":21}");
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        doGet(request, response);
    }
}

 

　　3)$.ajax({option1:value1,option2:value2...});

　　　　經常使用的option：

　　　　　　async：是否異步，默認是true，表明異步

　　　　　　data：發送到服務器的參數，建議使用json格式

　　　　　　dataType：服務器端返回的數據類型，經常使用text和json

　　　　　　success：成功響應執行的函數，對應的類型是function類型

　　　　　　type：請求方式，POST/GET

　　　　　　url：請求服務器端地址

 例子代碼：

function fn3() {
        //ajax訪問服務器
        $.ajax({
            url:"/WEB22/ajaxServlet2",
            async:true,
            type:"POST",
            //能夠是字符串格式，能夠是json格式
            data:{"name":"lucy","age":18},
            success:function(data){
                alert(data.name);
            },
            error:function(){
                alert("請求失敗！！");
            },
            dataType:"json"
            
        });
    }
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程