鑲嵌在你的web頁面中的導航元素能夠減低你的搜索引擎網站名聲名次況且減低你的網站的響應性能。本文筆者想同你一塊兒研究討論怎麼樣運用AJAX技術來解決這兩個問題。 很多預設令人滿意的web站點都裡面含有數量多的與實際內部實質意義相結合的可導航信息。用於導航的HTML標記能影響你的搜索引擎網站名聲，並且能夠改進過訪者的頁面下載體驗認識感。在本文中，你會看見怎麼樣運用AJAX來開創更為集中的更迅速加載的web頁面。
一、 離合導航與內部實質意義
讓我們運用一個例子作為著手。請思索問題你如今閱覽的文章，它有下面所開列一點內部實質意義：
· 一個其上有一點預先規定義的到Informit的各個局部的鏈接的頁眉。
· 在頁眉下有一行，把本文放到Informit的目次結構當中(其實，這是惟一的與目次有關的可導航元素)。
· 一個位於右手的側欄，那裡面有一點連署到流行文章和引薦內部實質意義的鏈接。
· 一個頁腳，還有一點從來不會變更的鏈接。
上頭的混合很有可能會影響搜索引擎網站引得你的數值的形式：
· 由於搜索引擎網站不可以差別內部實質意義與導航文本，所以他們會把他們在你的頁面中找到的一切施行引得。既是目次中的關鍵字與不有關的可導航關鍵字混拼湊，那末內部實質意義之間的關涉大大減損。一點搜索引擎網站聲稱，他們能夠在被搜索到的頁面(例如，固定的頁眉和頁腳)中發覺重復的文本況且刪去他們。不過，不要倚賴這種有可能性;縱然他們成功實現了這種技術，也很有可能不會一直靠得住。
· web頁面中的外向鏈接影響你的內部實質意義的頁面名聲。盡管這有可能增長流行的文章的名聲名次(由於很多頁面都鏈接到他們)，不過全部的頁面都鏈接到的內部實質意義(例如，隱私策略)一般獲得無上的頁面名聲-這有可能不是你一直關切的問題。在我的一個web站點中，無上的名聲頁面是用於把消息兒送出到web管理員的表單-而不是你想讓用戶首先在Google上找到的內部實質意義。
注意
縱然你不運用站點地圖，你也可以經過Google的站點地圖用戶接口來理解一下子你的頁面的頁面名次事情狀況。
添加到一個web頁面的可導航元素還有可能影響運用低速互聯網存取的用戶，而假如web頁面不運用DIV元素(Informit運用之)而運用表格時更是這麼。在這種事情狀況中，在把它顯露給用戶之前，整個兒表格務必被加載到一點web瀏覽器中。
傳統地，web預設者普通都運用框架集或經過構建完套的導航架構(廣泛運用JavaScript代碼)來成功實現導航與內部實質意義的離合。這兩條路徑都存在其欠缺;因為這個，很多大型網站防止運用框架集就不值為奇了。
借助於在AJAX框架中運用的技術，你可以為這一問題供給一種方案：
· 每一個web頁面僅裡面含有可導航元素和實際內部實質意義的佔位符。
· 在web頁面經過鑲嵌式框架(IFRAME)或運用XmlHttpRequest對象加載後，再裝載這些個可導航元素。
· 而後，可導航元素的內部實質意義被合並到web頁面內部實質意義中，因此萌生一個不鑲嵌不論什麼幀的整潔的頁面。
在運用這種辦法從新預設你的web頁面之前，你需求思索問題下面所開列問題：
· 搜索引擎網站僅將看見起初的web頁面。你務必保證，該頁面中裡面含有到有關頁面或到一個網站地圖的鏈接。Informit網站漢字章頁眉上方的導交通線和在頁面的文章信息局部中的鏈接正巧可以較好地成功實現這一目標。
· 在它們的瀏覽器中嚴禁調配使用JavaScript的過訪者將具備與搜索引擎網站相同的頁面視圖。你務必保證它們有受限的視圖不會給你的網站的功能導致較大影響。
· 你有可能想在你的頁面上保存一點靜態內部實質意義。例如，Informit標識和版權信息務必一直顯露給全部的過訪者。
當你確認好應當把你的導航結構哪一些局部附著到頁面上以及哪一些局部應當與之分開在這以後，你就可以著手下一步驟了。
二、 預設你的Web頁面
成功實現離合內部實質意義和導航的第1步是，在web頁面上開創將插進去可導航元素的佔位符。對於每一個可導航元素的蟬聯地區范圍，你應當開創一個具備惟一id的獨立DIV元素;這麼以來，往後你可以在你的JavaScript代碼中標識它。為了避免過度忽悠，在創編頁面時期，目次上方或右面的DIV元素的尺寸應當調試到十分靠近你的可導航元素的實際體積;這麼，當你運用期望的HTML代碼來接替他們時內部實質意義就不會移動位置。為此，一種最靈巧高明的辦法是把一個空的合適體積的DIV元素插進去到該佔位符處。
對於Informit網站來說，其頁面結構已經是令人滿意預設的，且DIV元素已經十分到位，如圖1所示。
圖1一篇Informit文章的頁面結構
你僅需求從可導航DIV元素中刪去內部實質意義況且插進去一個空框，頁眉將會顯露出來在這處(為了簡單不長為達到目的，我們將疏忽把企業標識和版權信息鑲嵌到每一個頁面中的商議)。下邊是相應的代碼：
＜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頁面運用表格來成功實現所期望的頁面布局，那末請不要把表格單元格重用作佔位符；而把DIV元素放到表格單元格內比較好一點。
已經被從web頁面中刪去的可導航的元素務必被從新開創為獨立的頁面。你應當運用靜態HTML文件來表現靜態內部實質意義(這將准許緩和沖突內部實質意義，無論你運用啥子樣的web服務器)和在加載他們的web頁面上開創顯露基於動態元素的服務器端腳本代碼。對於Informit來說，每一個web頁面都有惟一一個文章標識符(在URL中的p=參變量)；因為這個，你需求開創一個能夠接納文章標識符並開創右面的欄目標服務器端腳本代碼。在大部分數事情狀況中，你可以重用開創鑲嵌的可導航元素的服務器端代碼。
在從新預設這些個web頁面後，接下來，你就可以成功實現本方案中的AJAX局部了。與一般同樣，你可以運用鑲嵌式框架(IFRAME元素)辦公，也可以選用一個XmlHttpRequest對象。
三、 鑲嵌式框架
假如你關切瀏覽器兼容性的話，你應當運用鑲嵌式框架。一點老式的瀏覽器支持IFRAME元素，但不支持XmlHttpRequest對象。當然，運用這種形式還就象下所述一點理由：
· 被加載到一個IFRAME中的內部實質意義在裝載的過程中被顯露於瀏覽器中，這向終端用戶顯露一個可視化進程項。
· 頁面緩和沖突老是運用加載到一個IFRAME中的內部實質意義辦公。一點版本的Opera還不可以較好地運用XmlHttpRequest對象處置經緩和沖突的響應。
為此，我們可以把一個空IFRAME插進去到每一個DIV器皿中，況且在每一個IFRAME後添加一個簡單不長的JavaScript語句，如下所述所示：
＜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應當等於以_iframe為後綴的佔位符的id。loadIframe函數運用了兩個參變量：佔位符的id和要加載到那裡面的URL。
技法
假如你想在下載過程中要得IFRAME內部實質意義可見，那末你應當運用一個合適體積的IFRAME元向來調換在佔位符內的空的DIV框。不過，假如你想使IFRAME維持不可以見，那末你應當運用style屬性來把它的高度設置為０以克服一點瀏覽器中的不正確。
開始工作裝載過程的loadIframe函數是很簡單的：
function loadIframe(id，url) {
try {
var iframeObj = document.getElementById(id+_iframe);
iframeObj.src = url ;
} catch (err) {
alert(cannot load +url+ into +id) ;
}
}
注意
本文中全部舉出例子代碼都假定，瀏覽器兼容文檔對象板型(DOM)。
不過，還沒有一種機制來通告煩請頁面所期望的內部實質意義已經被加載到佔位符IFRAME中。因為這個，被裝載的內部實質意義務必通告父頁面(路程經過一個JavaScript調配使用)可以運用該內部實質意義了。成功實現這一操作的最好機會是，在頁面加載完成往後。因為這個，在IFRAME內部實質意義中的BODY微記應當裡面含有一個onLoad事情:
＜bodystyle=margin: 0px 0px;
padding: 0px 0px＞
技法
加載到IFRAME中的內部實質意義的body局部應當老是有零邊距和補充空白；否則，當把它集成到父頁面中時，它將會微小地搬遷。
在IFRAME的上下文中執行的contentLoaded函數將提出取得body局部相應的HTML內部實質意義況且把它傳交到一個在父頁面上下文中執行的函數，此函數將運用它來補充相應的佔位符：
contentLoaded在IFRAME上下文的上下文中執行：
function contentLoaded(parentID) {
var myContent = document.body.innerHTML ;
parent.copyContent(parentID，myContent);
}
copyContent在父web頁面的上下文中執行：
function copyContent(id，content) {
try {
var placeholder = document.getElementById(id) ;
placeholder.innerHTML = content;
} catch (err) {
alert(Cannot copy HTML content into +id);
}
}
如今，用心細密的讀者應當覺得迷惑，為何這樣復雜？在IFRAME元素中加載導航元素不是更簡純一點嗎？事情的真實情況證實，對於此辦法還要加一點避免曲解的解釋明白為好：
· IFRAME具備固定的高度和寬度。假如內部實質意義你我越過，則內部實質意義將被剪掉還是IFRAME要加上骨碌條。不過，被復制到一個在父頁面中的DIV元素中的HTML標記其體積卻老是維持半自動調試體積。
· 當在一個IFRAME中時，在導航內部實質意義中的鏈接(一個元素)將裝載IFRAME中的新頁面，錯非你把target=_parent添加到每一個鏈接在這以後。
· 附著到導航元素的JavaScript事情處置器將在IFRAME的上下文中辦公（假如還保存這個上下文的話）。假如你把導航內部實質意義移動主頁面上，那末事情處置器能夠存取在主頁面中定義的函數和變量。
四、 運用XmlHttpRequest
假如你的用戶主要運用Internet Explorer的較新版本或基於Gecko的瀏覽器(Mozilla，Firefox，Netscape 7)，那末你可以表決運用XmlHttpRequest對象來把其他內部實質意義下載到你的web頁面中。第1步很大致相似於面前描寫的形式。對於每一個佔位符，你需求一個JavaScript函數調配使用來開始工作加載過程：
＜div id=header＞
＜div style=height: 100px; width: 100百分之百＞＜/div＞
＜script＞loadContent(header，/navigation/header.html)＜/script＞
＜/div＞
不過，loadContent函數是根本不一樣的：它開創了一個新的XmlHttpRequest對象，而後把一個事情處置器派遣給它，況且異步開始工作裝載過程：
function loadContent(id，url) {
try {
var rq = new XMLHttpRequest() ;
rq.open(GET， url， true);
rq.onreadystatechange = function() { contentLoaded(rq，url，id) }
rq.send(門裡出身);
} catch (err) {
alert(cannot load +url+ into +id) ;
}
}
注意
每一種主流瀏覽器親族都以一種不一樣的形式成功實現了XmlHttpRequest對象。處置這種兼容性問題的最容易的辦法是，運用一個包裝器庫，例如Sarissa。我們在本文中舉出例子中就運用了這種庫。
回調函數contentLoaded負責查緝XmlHttpRequest對象是否已經准備好seo及完成狀況(假如煩請已完成的話)，況且從響應中提出取得HTML標記。提出取得HTML代碼(錯非你運用XHTML，這種事情狀況下，你可以運用XMLDOM接口)的最容易的辦法是，運用字符串處置函數來查尋＜body＞和＜/body＞微記之間的文本：
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＞標記的著手位置
var startBodyTag = txt.indexOf(＜body)
//查尋＜body＞標記的終了，跳過不論什麼屬性
var endOfStartTag = txt.indexOf(＞，startBodyTag+1)
//查尋＜/body＞標記
var endBodyTag = txt.indexOf(＜/body)
if (endBodyTag == -1) { endBodyTag = txt.length ; }
//提出取得實際內部實質意義
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對象使你能夠檢驗測定和處置不正確（經過它的readyState和status屬性）。而運用IFRAME加載內部實質意義時，假如顯露出來不正確，則只能顯露十分粗略的不正確提醒，這主要是由於匱缺對回調函數的調配使用。
· 你能夠成功實現內部實質意義元素的平行裝載(如在這一節中顯露的)或順著次序扮裝載煩請以最小化帶寬利用。
五、 小結
在本文中，你學習了怎樣成功實現把你的web頁面內部實質意義與包圍該內部實質意義的可導航元素離合去來。離合造成更為集中地描寫搜索引擎網站要搜索的頁面內部實質意義，況且也減損了用戶運用低速互聯網存取的加載時間（既是是在可導航元素被下載之前把實際內部實質意義顯露給用戶）。
當從新預設你的web頁面來利用這種方案時，牢牢記住，一點基本款式的導航務必保存在頁面上以便准許搜索引擎網站和表決嚴禁運用JavaScript的用戶在你的網站的頁面之間施行導航。
你可以運用鑲嵌式框架(IFRAME)或運用在最現代瀏覽器中成功實現的XmlHttpRequest對象來成功實現可導航元素的延緩裝載。IFRAME辦法能夠為較老式的瀏覽器所支持；因為這個，它有可能是你要思索問題運用的辦法-假如你十分關切向後兼容問題的話。另一方面，XmlHttpRequest對象的運用使你能夠更為緊急地扼制裝載過程並能夠檢驗測定和處置下載不正確。
站長網新聞榜 /top