解決使用 jQuery.getJSON 時 Session 卻過期期的問題
Posted in 六月 20th, 2010 by 阿育 | Filed under Web開發 | Comments (3)當我們在做具有權限控管的網頁時，將會用到Session來做為是否已登入的紀錄及處理，通常在判斷為尚未登入時，將直接顯示錯誤訊息頁面或轉到登入表單頁面，但如果使用jQuery.getJSON()來做AJAX應用的話這樣的處理就不恰當了，因為這樣一來Session因為閒置過久而過期的話 getJSON() 將會得到非預期的結果而導致程式發生錯誤。
當然這種問題的解決的辦法有許多個，我們也可以在getJSON()取得資料後再判斷目前得到的資料是否正確，但這樣一來前端的程式碼將會顯得很囉嗦，因此解決辦法中有一個簡單又實用的就是直接取代 jQuery 的 getJOSN()，並搭配後端的對於不同請求給予不同的回應，來統一簡化整個判斷流程。
這裡主要用到了之前所提「使用 PHP 判斷 jQuery 傳來的 AJAX 請求類型」及「取代jQuery內置函數」兩種技巧。
在Javascript中寫入取代jQuery.getJSON()的函數：
(function($) {
/**
* 取代 jQuery 的 JSON
*/
$.getJSON = function(url,paramData,callback){
if($.isFunction(paramData)) {
callback = paramData;
paramData = null;
}
var opt = {
url: url,
dataType: 'json',
cache: false,
data: paramData,
success: function(data, textStatus, XMLHttpRequest){
if(null === data) return opt.error(XMLHttpRequest,textStatus);
var handleError = false;
if(data.TimeoutError != undefined ){
if(data.TimeoutError == true){
handleError = true;
//提示錯誤訊息
alert('您可能閒置過久，請重新登入系統再重試');
//進一步轉向登入頁面
window.location = '登入頁面URL';
}
}
if(!handleError && callback != undefined) {
callback(data, textStatus, XMLHttpRequest);
}
},
error: function(XMLHttpRequest, textStatus, errorThrown){
//提示錯誤訊息
alert('連線發生錯誤！請檢查您的連線並重新嘗試');
}
};
$.ajax(opt);
};
})(jQuery);
在PHP中給予不同回應：
session_start();
if(!isset($_SESSION['login'])){ // 尚未登入
if('application/json, text/javascript, */*' == $_SERVER['HTTP_ACCEPT']){
//回應給取代後的getJSON()
echo json_encode( array('TimeoutError' => true) );
}else{
//轉向登入頁面表單
header('location: 登入頁面URL');
}
}else{
// 已登入的其他處理......
echo json_encode( array('msg' => '取得訊息') );
}
之後一樣使用jQuery.getJSON()完全不變：
$(function(){
$('#test').click(function(){
// 取得 JSON資料
// 若已登入將顯示「取得訊息」
// 若未登入或Session過期將顯示「您可能閒置過久，請重新登入系統再重試」
$.getJSON('/index.php',function(data){
alert(data.msg);
});
});
});
八月 13, 2010 at 5:50 下午
不知道在干什么
八月 13, 2010 at 5:52 下午
就是就是
八月 13, 2010 at 5:53 下午
好特别的东西