1. #
10年9月，twitter改(gǎi)版。一(yī)個顯著變(biàn)化，就(jiù)是(shì)URL加入了"#!"符(fú)號。比如，改版前(qián)的用戶主(zhǔ)頁網(wǎng)址為(wéi)HTTP://twitter.com/username改版後，就變(biàn)成(chéng)了(liǎo)http://twitter.com/#!/username
這是主流網站(zhàn)第一(yī)次(cì)將"#"大規(guī)模(mó)用於(yú)重要(yào)URL中。這表明井號(hào)（Hash）的作(zuò)用正(zhèng)在被(bèi)重新認(rèn)識(shí)。本文(wén)根(gēn)據HttpWatch的(dí)文(wén)章(zhāng)，整理(lǐ)與(yǔ)井號(hào)有關(guān)的所有重要(yào)知(zhī)識(shí)點(diǎn)。
一，#的涵義
#代表(biǎo)網頁(yè)中(zhōng)的(dí)一個(gè)位置。其(qí)右(yòu)麵的(dí)字(zì)符，就(jiù)是(shì)該位(wèi)置的(dí)標(biāo)識符(fú)。比如，http://www.example.com/index.HTML#print就(jiù)代表(biǎo)網頁index.html的print位置。瀏覽(lǎn)器(qì)讀(dú)取(qǔ)這個(gè)URL後，會(huì)自動將print位置滾動(dòng)至可視區域(yù)。
為(wéi)網頁位(wèi)置(zhì)指定標識(shí)符，有兩(liǎng)個(gè)方(fāng)法(fǎ)。一(yī)是使用(yòng)錨(máo)點，比如(rú)<a name="print"></a>，二是(shì)使用(yòng)id屬性(xìng)，比(bǐ)如<div id="print">。
二(èr)，HTTP請(qǐng)求(qiú)不包括#
#是(shì)用來指導(dǎo)瀏覽(lǎn)器(qì)動作的，對服務器端(duān)完(wán)全無用(yòng)。所以，HTTP請求中不包括(kuò)#。
比(bǐ)如(rú)，訪(fǎng)問下麵(miàn)的網(wǎng)址(zhǐ)，http://www.example.com/index.html#print，瀏覽(lǎn)器實(shí)際發(fā)出的(dí)請求(qiú)是這(zhè)樣(yàng)的：
GET /index.html HTTP/1.1
Host: www.example.com
三，#後(hòu)的字(zì)符
在(zài)第一個#後麵出現(xiàn)的(dí)任(rèn)何字符，都(dū)會被瀏(liú)覽(lǎn)器(qì)解讀為位(wèi)置標識符。這意(yì)味(wèi)著，這些(xiē)字符都不(bù)會被(bèi)發(fā)送到服務器端。
比如，下麵URL的(dí)原意是指(zhǐ)定一(yī)個(gè)顏色(sè)值(zhí)：http://www.example.com/?color=#fff，但(dàn)是(shì)，瀏(liú)覽(lǎn)器(qì)實(shí)際發出(chū)的請求是(shì)：
GET /?color= HTTP/1.1
Host: www.example.com
四，改變(biàn)#不觸發(fā)網(wǎng)頁重載
單單改變#後(hòu)的(dí)部分(fēn)，瀏(liú)覽(lǎn)器隻會滾(gǔn)動(dòng)到(dào)相(xiāng)應位(wèi)置(zhì)，不(bù)會(huì)重(zhòng)新(xīn)加載網(wǎng)頁。
比(bǐ)如(rú)，從http://www.example.com/index.html#location1改成http://www.example.com/index.html#location2，瀏覽器不(bù)會重(zhòng)新(xīn)向服務器請(qǐng)求(qiú)index.html。
五(wǔ)，改變#會(huì)改變(biàn)瀏(liú)覽(lǎn)器的訪(fǎng)問歷(lì)史(shǐ)
每一次(cì)改(gǎi)變#後的(dí)部分，都會在瀏覽器(qì)的訪問歷史(shǐ)中增加(jiā)一(yī)個記(jì)錄(lù)，使用"後退"按鈕，就(jiù)可以回到上一(yī)個(gè)位置(zhì)。這對於(yú)ajax應用程序特別有(yǒu)用，可以用(yòng)不同的#值，表示不(bù)同的訪問狀態，然後向(xiàng)用戶給(gěi)出(chū)可以(yǐ)訪(fǎng)問某(mǒu)個狀態的鏈接。值(zhí)得(dé)注意(yì)的是(shì)，上(shàng)述規(guī)則對IE 6和(hé)IE 7不成(chéng)立，它(tā)們(mén)不會(huì)因(yīn)為#的改(gǎi)變(biàn)而(ér)增加歷史記錄。
六，window.location.hash讀取(qǔ)#值(zhí)
window.location.hash這(zhè)個屬性(xìng)可(kě)讀(dú)可寫。讀(dú)取時，可以用(yòng)來判斷網頁狀態是(shì)否改(gǎi)變；寫入時，則(zé)會在(zài)不(bù)重(zhòng)載網頁的(dí)前提(tí)下(xià)，創造一條訪問(wèn)歷史記錄(lù)。
七，onhashchange事(shì)件
這是(shì)一個(gè)HTML 5新增的事件，當(dāng)#值(zhí)發生(shēng)變化(huà)時，就(jiù)會(huì)觸發(fā)這個事件。IE8+，Firefox 3.6+，Chrome 5+，Safari 4.0+支持該事(shì)件。
它的使(shǐ)用方法有(yǒu)三種(zhǒng)：
window.onhashchange = func;
<body onhashchange="func();">
window.addEventListener("hashchange"， func, false);
對(duì)於不支持(chí)onhashchange的(dí)瀏(liú)覽器，可以用(yòng)setInterval監(jiān)控location.hash的(dí)變化。
默認(rèn)情(qíng)況(kuàng)下(xià)，Google的網絡蜘蛛(zhū)忽視(shì)URL的#部分(fēn)。
但(dàn)是，Google還規定，如(rú)果你(nǐ)希(xī)望(wàng)Ajax生成(chéng)的內容被瀏覽引(yǐn)擎讀(dú)取(qǔ)，那(nà)麼URL中可(kě)以(yǐ)使(shǐ)用"#!"，Google會(huì)自(zì)動將其後麵的內容轉成(chéng)查(chá)詢字符串_escaped_fragment_的值。
比如，Google發現(xiàn)新(xīn)版(bǎn)twitter的URL：http://twitter.com/#!/username
就會(huì)自(zì)動(dòng)抓取另一個(gè)URL：http://twitter.com/?_escaped_fragment_=/username
通過這(zhè)種(zhǒng)機製，Google就(jiù)可以(yǐ)索引(yǐn)動態的Ajax內容(róng)。
注
AJAX = 異步 JavaScript和XML（標(biāo)準通(tōng)用標記(jì)語(yǔ)言的(dí)子集(jí)）。AJAX 是一種(zhǒng)用於(yú)創建(jiàn)快速(sù)動態網頁的技術。
2. ？
1）連接(jiē)作(zuò)用：比如(rú)
http://www.xxx.com/Show.asp?id=77&nameid=2905210001&page=1
2）清(qīng)除(chú)緩存：比(bǐ)如(rú)
http://www.xxxxx.com/index.html
http://www.xxxxx.com/index.html?test123123
兩(liǎng)個(gè)url打開(kāi)的頁麵(miàn)一樣，但是(shì)後(hòu)麵這個有(yǒu)問號，說(shuō)明不調(tiáo)用(yòng)緩(huǎn)存的(dí)內(nèi)容，而認為是一(yī)個(gè)新地(dì)址(zhǐ)，重(zhòng)新(xīn)讀取(qǔ)。
3. &
不同參(cān)數的(dí)間(jiān)隔(gé)符(fú)
轉載請(qǐng)保(bǎo)留原文(wén)地(dì)址(zhǐ): https://antelcom.cn/show-302.html