推薦：XML時(shí)代我們擁有.Net
盡管不久微軟將再次接受是否被一分為二的裁決，但微軟主席比爾.蓋茨并沒有因此而放棄壟斷網(wǎng)絡(luò)市場的野心。 蓋茨現(xiàn)在已經(jīng)將大部分公司日常管理事務(wù)交給微軟CEO巴爾默及其團(tuán)隊(duì)來管理，他所負(fù)責(zé)

描述 嵌入在你的web頁面中的導(dǎo)航元素能夠降低你的搜索引擎評(píng)價(jià)排名并且降低你的網(wǎng)站的響應(yīng)性能。本文作者想同你一起探討如何使用AJAX技術(shù)來解決這兩個(gè)問題。

許多設(shè)計(jì)良好的web站點(diǎn)都包含大量的與實(shí)際內(nèi)容相聯(lián)系的可導(dǎo)航信息。用于導(dǎo)航的HTML標(biāo)記能影響你的搜索引擎評(píng)價(jià)，而且能夠改進(jìn)訪問者的頁面下載體驗(yàn)感。在本文中，你會(huì)看到如何使用AJAX來創(chuàng)建更為集中的更快速加載的web頁面。

一、分離導(dǎo)航與內(nèi)容

讓我們使用一個(gè)例子作為開始。請考慮你現(xiàn)在閱讀的文章，它有下列一些內(nèi)容：

· 一個(gè)其上有一些預(yù)定義的到Informit的各個(gè)部分的鏈接的頁眉。

· 在頁眉下有一行，把本文放到Informit的目錄結(jié)構(gòu)之中（實(shí)際上，這是唯一的與目錄相關(guān)的可導(dǎo)航元素）。

· 一個(gè)位于右首的側(cè)欄，其中有一些連接到流行文章和推薦內(nèi)容的鏈接。

· 一個(gè)頁腳，還有一些永遠(yuǎn)不會(huì)改變的鏈接。

上面的"混合"很可能會(huì)影響搜索引擎索引你的數(shù)據(jù)的方式：

· 因?yàn)樗阉饕�擎不能區(qū)別內(nèi)容與導(dǎo)航文本，所以它們會(huì)把它們在你的頁面中找到的一切進(jìn)行索引。既然目錄中的關(guān)鍵字與不相關(guān)的可導(dǎo)航關(guān)鍵字混合在一起，那么內(nèi)容之間的關(guān)聯(lián)大大減少。一些搜索引擎宣稱，它們能夠在被搜索到的頁面(例如，固定的頁眉和頁腳)中發(fā)現(xiàn)重復(fù)的文本并且刪除它們。但是，不要依賴這種可能性；即使它們實(shí)現(xiàn)了這種技術(shù)，也很可能不會(huì)一直可靠。

· web頁面中的外向鏈接影響你的內(nèi)容的頁面評(píng)價(jià)。盡管這可能提高流行的文章的評(píng)價(jià)排名（因?yàn)樵S多頁面都鏈接到它們），但是所有的頁面都鏈接到的內(nèi)容(例如，隱私策略)通常得到最高的頁面評(píng)價(jià)-這可能不是你一直關(guān)心的問題。在我的一個(gè)web站點(diǎn)中，最高的評(píng)價(jià)頁面是用于把消息發(fā)送到web管理員的表單-而不是你想讓用戶首先在Google上找到的內(nèi)容。

注意

即使你不使用站點(diǎn)地圖，你也可以通過Google的站點(diǎn)地圖用戶接口來了解一下你的頁面的頁面排名情況。

添加到一個(gè)web頁面的可導(dǎo)航元素還可能影響使用低速互聯(lián)網(wǎng)存取的用戶，而如果web頁面不使用DIV元素（Informit使用之）而使用表格時(shí)更是如此。在這種情況中，在把它顯示給用戶之前，整個(gè)表格必須被加載到一些web瀏覽器中。

傳統(tǒng)地，web設(shè)計(jì)者一般都使用框架集或通過構(gòu)建整套的導(dǎo)航架構(gòu)（廣泛使用JavaScript代碼）來實(shí)現(xiàn)導(dǎo)航與內(nèi)容的分離。這兩條途徑都存在其缺點(diǎn)；因此，許多大型網(wǎng)站避免使用框架集就不足為奇了。

借助于在AJAX框架中使用的技術(shù)，你可以為這一問題提供一種方案：

· 每一個(gè)web頁面僅包含可導(dǎo)航元素和實(shí)際內(nèi)容的占位符。

· 在web頁面通過嵌入式框架(IFRAME)或使用XmlHttpRequest對象加載后，再裝載這些可導(dǎo)航元素。

· 然后，可導(dǎo)航元素的內(nèi)容被合并到web頁面內(nèi)容中，從而產(chǎn)生一個(gè)不嵌入任何幀的干凈的頁面。

在使用這種方法重新設(shè)計(jì)你的web頁面之前，你需要考慮下列問題：

· 搜索引擎僅將看到初始的web頁面。你必須確保，該頁面中包含到相關(guān)頁面或到一個(gè)網(wǎng)站地圖的鏈接。Informit網(wǎng)站中文章頁眉上方的導(dǎo)航線和在頁面的文章信息部分中的鏈接正好可以較好地實(shí)現(xiàn)這一目的。

· 在他們的瀏覽器中禁止調(diào)用JavaScript的訪問者將具有與搜索引擎相同的頁面視圖。你必須確保他們有受限的視圖不會(huì)給你的網(wǎng)站的功能造成較大影響。

· 你可能想在你的頁面上保留一些靜態(tài)內(nèi)容。例如，Informit標(biāo)識(shí)和版權(quán)信息必須一直顯示給所有的訪問者。

當(dāng)你確定好應(yīng)該把你的導(dǎo)航結(jié)構(gòu)哪些部分依附到頁面上以及哪些部分應(yīng)該與之分開之后，你就可以開始下一步驟了。

二、 設(shè)計(jì)你的Web頁面

實(shí)現(xiàn)分離內(nèi)容和導(dǎo)航的第一步是，在web頁面上創(chuàng)建將插入可導(dǎo)航元素的占位符。對于每一個(gè)可導(dǎo)航元素的連續(xù)區(qū)域，你應(yīng)該創(chuàng)建一個(gè)具有唯一id的獨(dú)立DIV元素；這樣以來，以后你可以在你的JavaScript代碼中標(biāo)識(shí)它。為了防止過度晃動(dòng)，在創(chuàng)作頁面期間，目錄上方或右邊的DIV元素的尺寸應(yīng)該調(diào)整到非常接近你的可導(dǎo)航元素的實(shí)際大小；這樣，當(dāng)你使用希望的HTML代碼來代替它們時(shí)內(nèi)容就不會(huì)移動(dòng)位置。為此，一種最巧妙的方法是把一個(gè)空的適當(dāng)大小的DIV元素插入到該占位符處。

對于Informit網(wǎng)站來說，其頁面結(jié)構(gòu)已經(jīng)是良好設(shè)計(jì)的，且DIV元素已經(jīng)非常到位。

你僅需要從可導(dǎo)航DIV元素中刪除內(nèi)容并且插入一個(gè)空框，頁眉將會(huì)出現(xiàn)在這里(為了簡短起見，我們將忽略把公司標(biāo)識(shí)和版權(quán)信息嵌入到每一個(gè)頁面中的討論)。下面是相應(yīng)的代碼：

以下為引用的內(nèi)容： ＜div id="header"＞ ＜div style="height: 100px; width: 100%"＞＜/div＞ ＜/div＞ ＜div id="contentArticle"＞ ＜div id="firstCol"＞ ... article content .... ＜/div＞ ＜div id="secondCol" ＞＜/div＞ ＜/div＞ ＜div id="footer"＞＜/div＞

注意

如果你的web頁面使用表格來實(shí)現(xiàn)所希望的頁面布局，那么請不要把表格單元格重用作占位符；而把DIV元素放到表格單元格內(nèi)比較好一些。

已經(jīng)被從web頁面中刪除的可導(dǎo)航的元素必須被重新創(chuàng)建為獨(dú)立的頁面。你應(yīng)該使用靜態(tài)HTML文件來表達(dá)靜態(tài)內(nèi)容(這將允許緩沖內(nèi)容，不管你使用什么樣的web服務(wù)器)和在加載它們的web頁面上創(chuàng)建顯示基于動(dòng)態(tài)元素的服務(wù)器端腳本。對于Informit來說，每一個(gè)web頁面都有唯一一個(gè)文章標(biāo)識(shí)符(在URL中的"p="參數(shù))；因此，你需要?jiǎng)?chuàng)建一個(gè)能夠接受文章標(biāo)識(shí)符并創(chuàng)建右邊的欄目的服務(wù)器端腳本。在大多數(shù)情況中，你可以重用創(chuàng)建嵌入的可導(dǎo)航元素的服務(wù)器端代碼。

在重新設(shè)計(jì)這些web頁面后，接下來，你就可以實(shí)現(xiàn)本方案中的AJAX部分了。與通常一樣，你可以使用嵌入式框架(IFRAME元素)工作，也可以選用一個(gè)XmlHttpRequest對象。

三、嵌入式框架

如果你關(guān)心瀏覽器兼容性的話，你應(yīng)該使用嵌入式框架。一些老式的瀏覽器支持IFRAME元素，但不支持XmlHttpRequest對象。當(dāng)然，使用這種方式還有如下一些理由：

· 被加載到一個(gè)IFRAME中的內(nèi)容在裝載的過程中被顯示于瀏覽器中，這向終端用戶顯示一個(gè)可視化進(jìn)程。

· 頁面緩沖總是使用加載到一個(gè)IFRAME中的內(nèi)容工作。一些版本的Opera還不能較好地使用XmlHttpRequest對象處理經(jīng)緩沖的響應(yīng)。

為此，我們可以把一個(gè)空IFRAME插入到每一個(gè)DIV容器中，并且在每一個(gè)IFRAME后添加一個(gè)簡短的JavaScript語句，如下所示：

以下為引用的內(nèi)容： ＜div id="header"＞ ＜div style="height: 100px; width: 100%"＞＜/div＞ ＜iframe id="header_iframe" style="height: 0px;"＞＜/iframe＞ ＜script＞loadIframe("header"，"/navigation/header.html")＜/script＞ ＜/div＞

IFRAME的id應(yīng)該等于以_iframe為后綴的占位符的id。loadIframe函數(shù)使用了兩個(gè)參數(shù)：占位符的id和要加載到其中的URL。

技巧

如果你想在下載過程中使得IFRAME內(nèi)容可見，那么你應(yīng)該使用一個(gè)適當(dāng)大小的IFRAME元素來替換在占位符內(nèi)的空的DIV框。然而，如果你想使IFRAME保持不可見，那么你應(yīng)該使用style屬性來把它的高度設(shè)置為０以克服一些瀏覽器中的錯(cuò)誤。

啟動(dòng)裝載過程的loadIframe函數(shù)是很簡單的：

以下為引用的內(nèi)容： function loadIframe(id，url) { 　try { 　　var iframeObj = document.getElementById(id "_iframe"); 　　iframeObj.src = url ; 　} catch (err) { 　　alert("cannot load " url " into " id) ; 　} }

注意

本文中所有示例代碼都假定，瀏覽器兼容文檔對象模型(DOM)。

然而，還沒有一種機(jī)制來通知請求頁面所希望的內(nèi)容已經(jīng)被加載到占位符IFRAME中。因此，被裝載的內(nèi)容必須通知父頁面(經(jīng)由一個(gè)JavaScript調(diào)用)可以使用該內(nèi)容了。實(shí)現(xiàn)這一操作的最好時(shí)機(jī)是，在頁面加載完成以后。因此，在IFRAME內(nèi)容中的BODY標(biāo)志應(yīng)該包含一個(gè)onLoad事件：

以下為引用的內(nèi)容： ＜body onload="contentLoaded('header')" style="margin: 0px 0px; padding: 0px 0px"＞

技巧

加載到IFRAME中的內(nèi)容的body部分應(yīng)該總是有零邊距和填充空白；否則，當(dāng)把它集成到父頁面中時(shí)，它將會(huì)輕微地遷移。

在IFRAME的上下文中執(zhí)行的contentLoaded函數(shù)將提取body部分相應(yīng)的HTML內(nèi)容并且把它傳遞到一個(gè)在父頁面上下文中執(zhí)行的函數(shù)，此函數(shù)將使用它來填充相應(yīng)的占位符：

contentLoaded在IFRAME上下文的上下文中執(zhí)行：

以下為引用的內(nèi)容： function contentLoaded(parentID) { 　var myContent = document.body.innerHTML ; 　parent.copyContent(parentID，myContent); }

copyContent在父web頁面的上下文中執(zhí)行：

以下為引用的內(nèi)容： function copyContent(id，content) { 　try { 　　var placeholder = document.getElementById(id) ; 　　placeholder.innerHTML = content; 　} catch (err) { 　　alert("Cannot copy HTML content into " id); 　} }

現(xiàn)在，細(xì)心的讀者應(yīng)該感到疑惑，為什么這么復(fù)雜？在IFRAME元素中加載導(dǎo)航元素不是更簡單一些嗎？事實(shí)證明，對于此方法還要加一些防止誤解的說明為好：

·IFRAME具有固定的高度和寬度。如果內(nèi)容彼此超出，則內(nèi)容將被剪掉或者IFRAME要加上滾動(dòng)條。然而，被復(fù)制到一個(gè)在父頁面中的DIV元素中的HTML標(biāo)記其大小卻總是保持自動(dòng)調(diào)整大小。

·當(dāng)在一個(gè)IFRAME中時(shí)，在導(dǎo)航內(nèi)容中的鏈接(一個(gè)元素)將裝載IFRAME中的新頁面，除非你把target="_parent"添加到每一個(gè)鏈接之后。

·依附到導(dǎo)航元素的JavaScript事件處理器將在IFRAME的上下文中工作（如果還保留這個(gè)上下文的話）。如果你把導(dǎo)航內(nèi)容移動(dòng)主頁面上，那么事件處理器能夠存取在主頁面中定義的函數(shù)和變量。

四、使用XmlHttpRequest

如果你的用戶主要使用Internet Explorer的較新版本或基于Gecko的瀏覽器(Mozilla，F(xiàn)irefox，Netscape 7)，那么你可以決定使用XmlHttpRequest對象來把其它內(nèi)容下載到你的web頁面中。第一步非常類似于前面描述的方式。對于每一個(gè)占位符，你需要一個(gè)JavaScript函數(shù)調(diào)用來啟動(dòng)加載過程：

以下為引用的內(nèi)容： ＜div id="header"＞ ＜div style="height: 100px; width: 100%"＞＜/div＞ ＜script＞loadContent("header"，"/navigation/header.html")＜/script＞ ＜/div＞

然而，loadContent函數(shù)是根本不同的：它創(chuàng)建了一個(gè)新的XmlHttpRequest對象，然后把一個(gè)事件處理器指派給它，并且異步啟動(dòng)裝載過程：

以下為引用的內(nèi)容： function loadContent(id，url) { 　try { 　　var rq = new XMLHttpRequest() ; 　　rq.open("GET"， url， true); 　　rq.onreadystatechange = function() { contentLoaded(rq，url，id) } 　　rq.send(null); 　} catch (err) { 　　alert("cannot load " url " into " id) ; 　} }

注意

每一種主流瀏覽器家族都以一種不同的方式實(shí)現(xiàn)了XmlHttpRequest對象。處理這種兼容性問題的最容易的方法是，使用一個(gè)包裝器庫，例如Sarissa。我們在本文中示例中就使用了這種庫。

回調(diào)函數(shù)contentLoaded負(fù)責(zé)檢查XmlHttpRequest對象是否已經(jīng)準(zhǔn)備好及完成狀態(tài)(如果請求已完成的話)，并且從響應(yīng)中提取HTML標(biāo)記。提取HTML代碼(除非你使用XHTML，這種情況下，你可以使用XMLDOM接口)的最容易的方法是，使用字符串處理函數(shù)來查找＜body＞和＜/body＞標(biāo)志之間的文本：

以下為引用的內(nèi)容： function contentLoaded(rq，url，id) { 　try { 　　if (rq.readyState != 4) { return; } 　　if (rq.status != 200) { alert("failed to load " url); return; } 　　var txt = rq.responseText ; 　　//查找＜body＞標(biāo)記的開始位置 　　var startBodyTag = txt.indexOf("＜body") 　　//查找＜body＞標(biāo)記的結(jié)束，跳過任何屬性 　　var endOfStartTag = txt.indexOf("＞"，startBodyTag 1) 　　//查找＜/body＞標(biāo)記 　　var endBodyTag = txt.indexOf("＜/body") 　　if (endBodyTag == -1) { endBodyTag = txt.length ; } 　　//提取實(shí)際內(nèi)容 　　var bodyContent = txt.substring(endOfStartTag 1，endBodyTag) 　　if (bodyContent) { 　　　var placeholder = document.getElementById(id) ; 　　　placeholder.innerHTML = bodyContent; 　　} 　} catch (err) { 　　alert("cannot load " url " into " id) ; 　} }

與前面描述的基于IFRAME的方法相比，使用XmlHttpRequest對象具有下列好處：

·代碼更干凈，并且不依賴于頁面的上下文切換。

·XmlHttpRequest對象使你能夠檢測和處理錯(cuò)誤（通過它的readyState和status屬性）。而使用IFRAME加載內(nèi)容時(shí)，如果出現(xiàn)錯(cuò)誤，則只能顯示非常粗略的錯(cuò)誤提示，這主要是因?yàn)槿狈�對回調(diào)函數(shù)的調(diào)用。

·你能夠?qū)崿F(xiàn)內(nèi)容元素的平行裝載(如在這一節(jié)中顯示的)或順序化裝載請求以最小化帶寬利用。

五、小結(jié)

在本文中，你學(xué)習(xí)了怎樣實(shí)現(xiàn)把你的web頁面內(nèi)容與包圍該內(nèi)容的可導(dǎo)航元素分離開來。分離導(dǎo)致更為集中地描述搜索引擎要搜索的頁面內(nèi)容，并且也減少了用戶使用低速互聯(lián)網(wǎng)存取的加載時(shí)間（既然是在可導(dǎo)航元素被下載之前把實(shí)際內(nèi)容顯示給用戶）。

當(dāng)重新設(shè)計(jì)你的web頁面來利用這種方案時(shí)，切記，一些基本格式的導(dǎo)航必須保留在頁面上以便允許搜索引擎和決定禁止使用JavaScript的用戶在你的網(wǎng)站的頁面之間進(jìn)行導(dǎo)航。

你可以使用嵌入式框架(IFRAME)或使用在最現(xiàn)代瀏覽器中實(shí)現(xiàn)的XmlHttpRequest對象來實(shí)現(xiàn)可導(dǎo)航元素的延遲裝載。IFRAME方法能夠?yàn)檩^老式的瀏覽器所支持；因此，它可能是你要考慮使用的方法-如果你非常關(guān)心向后兼容問題的話。另一方面，XmlHttpRequest對象的使用使你能夠更為緊密地控制裝載過程并能夠檢測和處理下載錯(cuò)誤。

分享：XSL簡明教程(1)XSL入門
一. XSL入門 1.XSL---XML的樣式表 HTML網(wǎng)頁使用預(yù)先確定的標(biāo)識(shí)(tags)，這就是說所有的標(biāo)記都有明確的含義，例如<p>是另起一行<h1>是標(biāo)題字體。所有的瀏覽器都知道如何解析和顯