色胚子部落

解決使用 jQuery.getJSON 時 Session 卻過期期的問題

阿育 — Sun, 20 Jun 2010 10:06:25 +0000

當我們在做具有權限控管的網頁時，將會用到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);
		});
	});

});

檢測訪客瀏覽器對 HTML5 與 CSS3 的支援程度

阿育 — Sun, 23 May 2010 02:26:00 +0000

由於各主流瀏覽器對於 HTML5 與 CSS3 中支援的程度不一，如果我們想要搶先嘗試使用它們的的新功能，卻又想要在各種瀏覽器中保持一定的可用性，那麼勢必要在 Javascript 中撰寫相關的判斷程式碼來進行判斷瀏覽器是否支援新特性，如果訪客的瀏覽器支援，則使用新功能，而反之則執行替代的程式碼或者提示使用者所使用的瀏覽器將會有部分進階功能無法使用。

關於目前各主流瀏覽器的支援情況可參考之前的文章 HTML5 與 CSS3 準備好了嗎？

自行撰寫 Javascript 進行 HTML5 與 CSS3 的檢測

如果我們使用到的 HTML5 與 CSS3 新特性並不多，則可以自行撰寫相關的檢測碼來進行判斷，至於該如何檢測，則可參考：
The All-In-One Almost-Alphabetical No-Bullshit Guide to Detecting Everything

文章中除了羅列一大堆 HTML5 等檢測的片段程式碼，也提到了一個很好用的函式庫 Modernizer。

Modernizr

Modernizr 是一個非常小巧的函式庫 (大約 8 KB，gzip壓縮後大約3.9 KB)，它用於檢測瀏覽器對於 HTML5 與 CSS3 支援程度，其首頁也提供了一份即時的檢測表，當使用不同的瀏覽器進入該網站時，將可看到不同的檢測結果，這個檢測表其實也可以當做一種瀏覽器支援參考，當安裝了新版本的瀏覽器時只要進入這個網站就可以即時知道瀏覽器是否有增加了什麼 HTML5 或 CSS3 的新功能。

先讓 IE 支援 HTML5 的新標籤

由於 IE9 之後才認得 HTML5 的新標籤，因此若要讓舊版本的IE也認得 HTML5的新標籤，則可以使用html5shiv來讓 IE 支援 HTML5 的新標籤，使用方式為加入以下的語法於之間。

使用 Modernizr

Modernizr 的使用方式很簡單，只需於之間使用

接著我們就可以在 Javascript 或 CSS 中做相對應的判斷及處理。

在 Modernizr 中使用 Javascript 判斷

Modernizr 載入後，即可使用 Modernizr.特性名稱的方式來判斷瀏覽器的支援，例如以下為判斷瀏覽器是否支援 canvas。

if (Modernizr.canvas) { //判斷瀏覽器是否支援 canvas
	alert("支援");
}else{
	alert("不支援");
}

在 Modernizr 中使用 CSS 判斷

Modernizr 使用了一個非常聰明的方法來達成 CSS 判斷的功能，它在載入完成後將會自動檢測瀏覽器的支援情況並將其寫入標籤的 class 屬性，其類別名稱的格式為：

支援：特性名稱

不支援：no-特性名稱

例如當瀏覽器支援支援 canvastext 時，標籤的 class 屬性中將會有一個 canvastext 值。

相反的當瀏覽器不支援 canvastext 時，標籤的 class 屬性中將會有一個 no-canvastext值。

如此一來我們就可以輕易的使用 CSS Selector 來做出相對應的判斷，例如，在 HTML 中：




	
	Modernizr Test
	
	
	


	
		 
		 瀏覽器支援 canvastext
		 瀏覽器不支援 canvastext！

在 style.css 中，透過以下的 CSS，在支援 canvastext 中將顯示「瀏覽器支援 canvastext」，反之則顯示「瀏覽器不支援 canvastext！」。

#canvasContainer p{
	display: none;
}

.canvastext #canvasContainer .supported {
	display: block;
}

.no-canvastext #canvasContainer .noSupported {
   display: block;
}

點我觀看 Modernizr CSS Selector 檢測範例

同理，若要利用 CSS 判斷瀏覽器是否支援 video 則可使用「.video / .no-video」兩個 CSS 類別。

更多 Modernizr 支援的 HTML5 與 CSS3 特性檢測，請參閱其使用手冊。

需注意的事情

Modernizr 只能提供檢測而不能替瀏覽器增加新功能以達成兼容。
若要兼容 video 可使用 video4all來達成，更多詳情可參考開始HTML5 – Video。
若要讓 IE 6, 7, 8 支援 CSS3 可使用CSS3 support for IE來達成。

HTML5 與 CSS3 準備好了嗎？

阿育 — Sun, 16 May 2010 04:20:35 +0000

HTML5 與 CSS3 不斷出現各種令人驚艷的應用，引起了業界的高度關注，它把許多原本屬於 Flash 的特殊應用搬到了 Web 標準中，而標準化的好處在哪我想不需要我多說了，但 HTML5 與 CSS3 真的準備好了嗎？

從 HTML & CSS3 Readiness 這份圖表可以很容易看出一些關鍵，它把 HTML5 與 CSS3 從 2008 年到 2010 年各個主流瀏覽器的支援情形以扇形區色塊圖的方式呈現，每個瀏覽器及渲染引擎都有自己的色系。

目前支援度最高的新特性為 Drag and Drop / @font-face / contenteditable 。
目前支援度最佳的瀏覽器為 Chrome 與 Safari。
目前支援度最差的瀏覽器為 IE 系列。

HTML & CSS3 Reandiness

HTML5 與 CSS3 現在最需要什麼？

良好的集成式開發環境

我想對於開發人員而言，最需要的還是工具，因為純手工編製複雜的 Web 應用可真是一件吃力不討好的工作，但我相信只要有市場便不怕沒工具，之前 Adobe CTO Kevin Lynch 也已經說要為HTML5開發工具了，我也相信在公開的標準規範之下將會有更多軟體開發商投入精力創造出更好用的產品。

廣泛的普及

既然工具的問題排除了，那麼剩下的便是普及性的問題了，但很顯然的它們仍然還沒完全準備好，在 When can I use 裡面列出了目前HTML5個主流瀏覽器的支援情況，雖然這是一個支援度比較表，但命名更像是在抱怨。

幾種 HTML5 與 CSS3 支援度參考資料

有趣的 jQuery 快速顯示隱藏元素技巧

阿育 — Fri, 14 May 2010 10:54:00 +0000

今天在 Now you see me… show/hide performance 一文中，看到該文作者分析了各種jQuery顯示、隱藏的作法及其效能比較，最後還提到了一個非常有趣的好方法，他利用禁用、啟用

接著在將該

這個元素預設會因為樣式而隱藏

執行範例：

延伸思考

透過禁用、啟用

色胚子部落

解決使用 jQuery.getJSON 時 Session 卻過期期的問題

檢測訪客瀏覽器對 HTML5 與 CSS3 的支援程度

自行撰寫 Javascript 進行 HTML5 與 CSS3 的檢測

Modernizr

先讓 IE 支援 HTML5 的新標籤

使用 Modernizr

在 Modernizr 中使用 Javascript 判斷

在 Modernizr 中使用 CSS 判斷

需注意的事情

相關連結與參考文章

HTML5 與 CSS3 準備好了嗎？

HTML5 與 CSS3 現在最需要什麼？

良好的集成式開發環境

廣泛的普及

幾種 HTML5 與 CSS3 支援度參考資料

有趣的 jQuery 快速顯示隱藏元素技巧

延伸思考