【學習分享】location.hash的用法
location對象：設置或獲取當前URL的信息
使用location對象可以設置或返回URL中的一些信息，一個完整的URL地址的格式為：
協議://主機:端口/路徑名稱?搜索條件#hash標識
其中，協議是URL的起始部分，用於指定該URL地 址所采用的通信協議，比如http、ftp等；主機是指該URL所對應的服務器的名稱；端口用於指定服務器用於通信的端口號，與主機名之間使用冒號隔開； 路徑名稱是指該URL所對應的網頁文件在服務器上的虛擬路徑；如果頁面中含有錨點連接，可以使用hash標志指定頁面中的錨點標志，該標志以“#”開頭； 搜索條件是指URL中所含有的查詢條件，該查詢條件以“?”開頭，以“變量名稱=值”的形式出現，多個查詢條件之間使用連接符“&”連接。比如http://www.webtest.com/help/index.php?act=detail2#h1
利用location對象可以方便地設置或獲取URL中的各種信息，本節將詳細介紹location對象的一些常用屬性和方法。
1．hash屬性
【功能說明】設置或獲取URL中的錨點名稱，如果Web頁面中使用的錨點連接，通過設置location對象的hash屬性可以方便的跳轉到頁面中的不同部分。
【基本語法】location.hash
下面的代碼演示了如何在網頁中使用location對象的hash標志快速定位頁面中的 內容。
<html>
<head><title>home</title></head>
<body>
<a href="#t1">home</a>
<a href="#t2">contact</a>
<a href="#t3">about</a>
<a name="t1">.........</a>
<a name="t2">.........</a>
<a name="t3">.........</a>
</body>
</html>
當點擊home鏈接時頁面會自動跳轉到name="t1"的位置，同理點擊contact,about時頁面會定位到name="t2"或name="t3"的位置。
2.hash屬性在富Ajax頁面中的應用
很多Web應用采用Ajax技術來增強Web體驗，富Ajax應用具有如下優點：
1)減少對服務器端的連接並減輕服務器端的帶寬壓力，頁面中的圖片，腳本，樣式只會被下載一次。
2)減少加載延遲，用戶沒有必要不斷重新加載頁面，所有的Ajax請為都發生在當前頁面中。
當然使用Ajax技術也有很明顯的缺陷。對於Ajax頁面來說的話，一般用一個頁面來處理所有的事務，也就是說，如果你瀏覽到一個Ajax頁面里邊有意思的內容，想將它收藏起來，可是地址只有一個呀，下次你打開這個地址，還是得像以往一樣不斷地去點擊網頁，找到你想要的那個頁面。另外的話，瀏覽器上的“前進”“后退”按鈕也會失效，這於很多習慣了傳統頁面的用戶來說，是一個很大的使用障礙。
那么，怎么用location.hash來解決這兩個問題呢？其實一點也不神秘。如下例中，通過hash調整地址欄的地址，使得瀏覽器里邊的“前進”、“后退”按鈕能正常使用（實質上欺騙了瀏覽器）。然后再根據hash值的不同來顯示不同的內容，這就使得Ajax頁面的瀏覽趨於傳統化了。
------------------------------------------------------------------------------------------------------
hash.html
------------------------------------------------------------------------------------------------------
<html>
<head>
<title>location hash</title>
</head>
<body>
<!-- Just a simple navigation --->
<ul id="navigation">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="service.html">Service</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<div id="content"></div>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery","1.3.2",{uncompressed:true});
</script>
<script>
$(document).ready(function(){
if(window.location.hash!=""){
var hashpage = window.location.hash.split("#");
$("#navigation a").each(function() {
if($(this).attr('href') == hashpage[1]) {
$(this).addClass("curr");
return false;
}
});
$("#content").load(hashpage[1]);
}
//navigation
$("#navigation a").unbind("click").click(function(){
var page = $(this).attr("href");
$("#content").load(page);
window.location.hash="#"+page;
return false;
});
});
</script>
</body>
</html>
------------------------------------------------------------------------------------------------------
about.html
------------------------------------------------------------------------------------------------------
<html>
<head>
<title>about</title>
</head>
<body>
<div id="content">
hi, my name is bill Zhan.
</div>
</body>
</html>
------------------------------------------------------------------------------------------------------
contact.html
------------------------------------------------------------------------------------------------------
<html>
<head>
<title>contact</title>
</head>
<body>
<div id="content">
tel:15986773928
</div>
</body>
</html>
------------------------------------------------------------------------------------------------------
home.html
------------------------------------------------------------------------------------------------------
<html>
<head>
<title>home</title>
</head>
<body>
<div id="content">
Welcome to the Harray Port World!
</div>
</body>
</html>
------------------------------------------------------------------------------------------------------
service.html
------------------------------------------------------------------------------------------------------
<html>
<head>
<title>service</title>
</head>
<body>
<div id="content">
Go,Go,Go.
</div>
</body>
</html>
------------------------------------------------------------------------------------------------------
3.利用hash技術解決以上提到的Ajax的兩個缺陷比較成熟的應用舉例
1)Gmail
Gmail可以說是把Ajax技術用到了極致，Google采用hash來解決Ajax技術的兩大缺陷。
2)Greader
Google Reader同樣采用hash來解決Ajax技術的兩大缺陷。通過分析URL來異步加載頁面元素。