jsp页面渲染
1.jsp
1.jsp腳本和注釋
1)<%java代碼%> --------------內部的java代碼翻譯到service方法的內部
2)<%=java變量或表達式%> ----------會被翻譯成service 方法內部 out.print()
3)<%! java代碼%> -----------------會被翻譯成servlet 的成員的內容
jsp注釋:不同的注釋可見范圍是不同
1)HTML注釋:<!--注釋內容 --> ---------可見范圍jsp源碼、翻譯后的servlet、頁面顯示HTML源碼
2)java注釋://單行注釋 /* 多行注釋*/---------可見范圍 jsp 源碼 翻譯后的servlet
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"
});
}
總結
- 上一篇: 股东质押股票是好是坏
- 下一篇: 内网渗透之初识域渗透