關於pjax的使用
想把目前的專案優化一下,增加些使用者體驗.得知了Pjax.在網上看了很多例子,也看了官方文件.可是直接到專案裡卻處處碰壁.決定重新寫個demo.網上的坑也比較複雜,所以我直接引用官方的寫法.
本人的環境是spring mvc 使用的是Jsp.
新建兩個jsp頁面,test_mian_page.jsp和test_include_page.jsp.
test_mian_page.jsp:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'MyJsp.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> </head> <body> <div>第一頁</div> <div>第二頁</div> <div id="loadpage"></div> <a href="/include" onclick="javascript:void(0)">點選我</a> <script type="text/javascript" src="assets/js/jquery-2.1.4.min.js"></script> <script type="text/javascript" src="js/jquery.pjax.js"></script> <script type="text/javascript"> $(document).pjax('a','#loadpage'); </script> </body> </html>
test_include_page.jsp:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> This is my JSP page. <br> <script type="text/javascript" src="assets/js/jquery-2.1.4.min.js"></script> <script type="text/javascript" src="js/jquery.pjax.js"></script> <script type="text/javascript"> $(function(){ console.log("載入進來了"); }) </script>
test_include_page.jsp中是沒有<html><head><body>的,經測試如果是完整的頁面,pjax會發送兩個請求,一個是內部ajax請求,一個則會跳轉頁面,即直接進入目標頁面,不是我想要的結果.
後端PjaxController:
@Controller public class PjaxController { @RequestMapping("/mian") public String getMain(){ return "test_mian_page"; } @RequestMapping("/include") public String getInclude(HttpServletRequest request){ return "test_mian_page"; } }
後端程式碼比較簡單,直接返回頁面名稱就可以了.當執行起來後你會發現,點選前進後退是沒有問題的,因為pjax已經使用history中pushState儲存了狀態.(但由於這屬於html5屬性,坑爹的專案應用環境及其簡陋,所以只能放棄使用pjax,掀桌子有木有!).
當點選"重新整理"時,你會懵逼,這特麼是要放棄的節奏麼?!沒關係,Pjax會在Request中Head裡塞入"X-PJAX":true,你只要獲取一下就能判斷是否是pjax請求了.所以擴充套件一下:
@RequestMapping("/include")
public String getInclude(HttpServletRequest request){
String str = request.getHeader("X-PJAX");
if("true".equals(str)){
return "test_include_page";
}
return "test_mian_page";
}
這樣就可以重新整理了,不過效果可能不是很理想.那麼我的解決方案是在session中存好每次訪問的頁面,當重新整理時,通過讀取該session進行pjax請求訪問.當然這只是方案,並沒有得到證實(這是我上班的時候寫的,怕被逼逼就沒有繼續證實了).
如果各位同人有實現了的,請告知一聲,謝謝.
中午抽時間弄了下,按照上面所說的方案,基本能滿足要求,上程式碼:
public class GlobalValue {
//獲取session
public static HttpSession GetSession() {
HttpSession session = ((ServletRequestAttributes) RequestContextHolder.getRequestAttributes()).getRequest().getSession();
session.setMaxInactiveInterval(60*60*6);
return session;
}
public synchronized static void setUrl(String url){
GetSession().setAttribute("RefreshUrl", url);
}
public synchronized static String getUrl(){
return (String) GetSession().getAttribute("RefreshUrl");
}
}
這個類就不多說了.
接下來是test_main_page.jsp:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML>
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'MyJsp.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<body>
<div>第一頁</div>
<div>第二頁</div>
<div id="loadpage"></div>
<a href="/include" onclick="javascript:void(0)">點選我</a>
<script type="text/javascript" src="assets/js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/jquery.pjax.js"></script>
<script type="text/javascript">
$(document).pjax('a','#loadpage');
$(function(){
var url = "";
url = "${RefreshUrl}";
if(url!=""){
$.pjax.reload('#loadpage', url)
}
})
</script>
</body>
</html>
接下來是Controller
@RequestMapping("/main")
public String getMain(){
GlobalValue.setUrl("");
return "test_mian_page";
}
@RequestMapping("/include")
public String getInclude(HttpServletRequest request){
String str = request.getHeader("X-PJAX");
if("true".equals(str)){
GlobalValue.setUrl("");
return "test_include_page";
}
GlobalValue.setUrl("/include");
return "test_mian_page";
}
那麼現在就差不多了,如果有更好的方法,麻煩留言或者聯絡我,謝謝