靜態Include和動態Include測試并總結

主要代碼

hjzgg.css

.center-div{width:auto;margin-left: 40%;margin-right: 40%;display: block;position: absolute;top:0px;left:0px;
}.text-div{margin-top: 80px;
}.hjzgg-div{color:transparent;font-size:20px;font-weight: bold;letter-spacing:2px;-webkit-animation-duration: 3s;-webkit-animation-fill-mode: forwards;-webkit-animation-name: hjzgg-move;float:left;
}.hjzgg-div-delay-1{-webkit-animation-delay: 1s;
}.hjzgg-div-delay-2{-webkit-animation-delay: 2s;
}.hjzgg-div-delay-3{-webkit-animation-delay: 3s;
}.hjzgg-div-delay-4{-webkit-animation-delay: 4s;
}.hjzgg-div-delay-5{-webkit-animation-delay: 5s;
}.hjzgg-div-delay-6{-webkit-animation-delay: 6s;
}@-webkit-keyframes hjzgg-move{from{margin-top: -35px;}to{margin-top: 10px;color:#000000;text-shadow: 2px 2px 3px #222222;}
}

cssTestOne.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"pageEncoding="utf-8"%>
<!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>頁面包含</title>
<link rel="stylesheet" type="text/css" href="css/hjzgg.css" />
<script>var x = "hjzgg_one";
</script>
<style type="text/css">.my-p{color:red;font-size:40px;text-shadow: 2px 2px 3px #222222;text-align: center;}
</style>
</head>
<%String x = "hjzgg_one";
%>
<body><div class="center-div"><div class="hjzgg-div">CSS</div><div class="hjzgg-div hjzgg-div-delay-1">樣</div><div class="hjzgg-div hjzgg-div-delay-2">式</div><div class="hjzgg-div hjzgg-div-delay-3">覆</div><div class="hjzgg-div hjzgg-div-delay-4">蓋</div><div class="hjzgg-div hjzgg-div-delay-5">測</div><div class="hjzgg-div hjzgg-div-delay-6">試</div></div><div class="text-div"><p class="my-p">大家好，我是HJZGG</p></div><%@include file="cssTestTwo.jsp" %><%-- 測試css樣式覆蓋<jsp:include page="cssTestTwo.jsp" flush="true"/><iframe src="cssTestTwo.jsp" style="width:100%;"></iframe> --%><script>alert("<%=x%>");</script>
</body>
</html>

效果圖:

cssTestTwo.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"pageEncoding="utf-8"%>
<!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>頁面包含</title>
<script>var x = "hjzgg_two";
</script>
<style type="text/css">/* .my-p{color:green;font-size:20px;text-align: center;} */
</style>
</head>
<%//測試java同名變量//String x = "hjzgg_one";
%>
<body><div class="text-div"><p class="my-p">大家好，我是HJZGG</p></div><script>alert("<%=request.getParameter("hjzgg")%>");</script>
</body>
</html>

效果圖：

css覆蓋測試：

　　執行cssTestOne.jsp中的<%@include file="cssTestTwo.jsp" %> 或者?<jsp:include page="cssTestTwo.jsp" flush="true"/>，由于cssTestOne.jsp和cssTestTwo.jsp中都定義了.my-p的樣式，被包含進來的頁面中定義的樣式會覆蓋主頁面的樣式。
　　如果不想造成樣式的混亂，最好還是將每個頁面的樣式區分開來。或者通過執行<iframe src="cssTestTwo.jsp" style="width:100%;"></iframe>，不會導致頁面的樣式的覆蓋。

js中同名變量問題：

　　首先在兩個文件<head></head>之間加入同名js變量x，例如：分別加入<script>var x = "hjzgg_one";</script>和<script>var x = "hjzgg_tow";</script>, 然后在主頁面中進行如下操作：include前調用js的alert(x) 以及 include調用后的alert(x)。

　　發現是可以允許有同名的js變量的，無論是<jsp:include page="cssTestTwo.jsp" flush="true"/>，還是<%@include file="cssTestTwo.jsp" %>。如果在include之前訪問同名變量，則訪問的主頁面的變量，否則訪問的被包含頁面的變量。

java同名變量問題：

　　首先在兩個文件<head>和<body>之間加入同名java變量x，例如：分別加入<%String x = "hjzgg_one";%>和<%String x =?"hjzgg_two";%>，然后分別調用<jsp:include page="cssTestTwo.jsp" flush="true"/>和<%@include file="cssTestTwo.jsp" %>。然后在include之后執行alert("<%=x%>");

　　發現在加入<%@include file="cssTestTwo.jsp" %>（靜態包含），編譯器就已經通知有“變量重名的錯誤”。而通過<jsp:include page="cssTestTwo.jsp" flush="true"/>（動態包含）不僅不會，而且正常運行。

　　分析一下：<%@include file="cssTestTwo.jsp" %>引入靜態文本,在JSP頁面被轉化成servlet之前和它融和到一起.先包含，后編譯，不會檢查所含文件的變化，適用于包含靜態頁面，可以理解為純粹是把代碼寫在外面的一種共享方法,所有的變量都是可以和include它的主文件共享, 兩者高度緊密結合,不能有變量同名的沖突。而頁面設置也可以借用主文件的。 <jsp:include page="cssTestTwo.jsp" flush="true"/>引入執行頁面或servlet所生成的應答文本.?被包含的文件先編譯，后包含進來，然后顯示。

　　為了驗證上面的分析，首先找到這樣的一個目錄（即Tomcat jsp生成的java文件位置），先找到你的eclipse workspace，然后會有子目錄：.metadata\.plugins\org.eclipse.wst.server.core\tmp0\work\Catalina\localhost，在這個目錄里會看見你的項目目錄，例如我的項目目錄名是“cssTest”，然后一路的找下去，最終有一個名稱為"jsp"的目錄(最終目錄：F:\eclipseEE_workspace\.metadata\.plugins\org.eclipse.wst.server.core\tmp0\work\Catalina\localhost\cssTest\org\apache\jsp)，這里就是存放jsp轉成servlet(java文件)的地方。

測試1

　　　將之前添加的各種變量語句統統去掉， include語句也去掉，并將剛才找到的目錄的文件刪除，接著在瀏覽器中訪問cssTestOne.jsp這個頁面。目錄里多了兩個文件，如下圖所示：

測試2

　　　再將目錄中的文件刪除，并在主頁面中加入<%@include file="cssTestTwo.jsp" %>，接著在瀏覽器中訪問cssTestOne.jsp這個頁面。目錄中的內容如下圖所示，注意，對應文件的大小發生了變化。

測試3

　　　再將目錄中的文件刪除，刪除<%@include file="cssTestTwo.jsp" %>，并在主頁面中加入<jsp:include page="cssTestTwo.jsp" flush="true"/>，接著在瀏覽器中訪問cssTestOne.jsp這個頁面。目錄中的內容如下圖所示，注意，目錄中多了被包含jsp的.class文件和.java文件。

總結：

　　1.動態include和靜態include都和include它的頁面的request范圍是一致。而<iframe>范圍不一致。

　　2.動態include和靜態include都允許有同名的js變量

　　3.動態include中允許有java的同名變量，而靜態include中不允許有java的同名變量。

動態INCLUDE

　　說明：它總是會檢查所含文件中的變化，適合用于包含動態頁面，并且可以帶參數，先編譯之后再進行處理。

　　原因：1、靜態include的結果是把其他jsp引入當前jsp,兩者合為一體。

　　　　　2、靜態include純粹是把代碼寫在外面的一種共享方法,所有的變量都是可以和include它的主文件共享,兩者高度緊密結合,不能有變量同名的沖突.而頁面設置也可以借用主文件的.

靜態INCLUDE

　　說明：用include偽碼實現,定不會檢查所含文件的變化，適用于包含靜態頁面，直接將內容先包含后處理。

　　原因：1、動態include的結構是兩者獨立,直到輸出時才合并。

　　　　　2、動態include的jsp文件獨立性很強,是一個單獨的jsp文件,需要使用的對象,頁面設置,都必須有自己創建,當然,還好它和include它的頁面的request范圍是一致的。?