下面是通過(guò)AJAX技術(shù)異步響應(yīng)來(lái)優(yōu)化頁(yè)面代碼來(lái)提高搜索引擎友好排名及用戶體驗(yàn)的相關(guān)內(nèi)容，文章教程主要講述與AJAX 異步 響應(yīng) 優(yōu)化 搜索引擎 排名 用戶體驗(yàn) 相關(guān)的一些技術(shù)與知識(shí)，更多的內(nèi)容歡迎大家訪問(wèn)http://www.survivalescaperooms.com,獲取更多最新教程,下面是教程講解：

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

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

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

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

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

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

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

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

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

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

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

　　注意

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

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

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

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

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

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

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

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

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

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

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

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

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

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

　　對(duì)于Informit網(wǎng)站來(lái)說(shuō)，其頁(yè)面結(jié)構(gòu)已經(jīng)是良好設(shè)計(jì)的，且DIV元素已經(jīng)非常到位，如圖1所示。

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

　　注意

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

　　已經(jīng)被從web頁(yè)面中刪除的可導(dǎo)航的元素必須被重新創(chuàng)建為獨(dú)立的頁(yè)面。你應(yīng)該使用靜態(tài)HTML文件來(lái)表達(dá)靜態(tài)內(nèi)容(這將允許緩沖內(nèi)容，不管你使用什么樣的web服務(wù)器)和在加載它們的web頁(yè)面上創(chuàng)建顯示基于動(dòng)態(tài)元素的服務(wù)器端腳本。對(duì)于Informit來(lái)說(shuō)，每一個(gè)web頁(yè)面都有唯一一個(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頁(yè)面后，接下來(lái)，你就可以實(shí)現(xiàn)本方案中的AJAX部分了。與通常一樣，你可以使用嵌入式框架(IFRAME元素)工作，也可以選用一個(gè)XmlHttpRequest對(duì)象。

　　三、 嵌入式框架

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

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

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

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

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

　　技巧

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

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

　　注意

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

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

　　技巧

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

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

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

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

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

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

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

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

　　四、 使用XmlHttpRequest

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

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

　　注意

　　每一種主流瀏覽器家族都以一種不同的方式實(shí)現(xiàn)了XmlHttpRequest對(duì)象。處理這種兼容性問(wèn)題的最容易的方法是，使用一個(gè)包裝器庫(kù)，例如Sarissa。我們?cè)诒疚闹惺纠芯褪褂昧诉@種庫(kù)。

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

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

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

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

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

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

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

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

End. 教程到這里講完了，閱讀是否有所收獲呢？本站還提供有AJAX 異步 響應(yīng) 優(yōu)化 搜索引擎 排名 用戶體驗(yàn) 相關(guān)的內(nèi)容，歡迎繼續(xù)閱讀。