【摘要】本文針對兩種Web頁面局部重新整理技術—IFRAME與XmlHttpRequest，作正反面比較；并給出各自的應用示例。
本文試圖通過一個簡單的實作文章展示的Web頁面布局的例子探讨目前兩種流行的Web頁面局部重新整理技術—IFRAME與XmlHttpRequest。
目前，許多設計良好的web站點往往都包含大量的與實際内容相聯系的可導航資訊。而用于實作導航的HTML标記往往極大地影響你的網站的搜尋引擎評價指 數，而且也極大地影響通路者頁面下載下傳體驗感。基于本文中的實作思路，将會有助于你建立基于AJAX技術但又盡可能少地受搜尋引擎影響的web頁面。
一、 初步設計Web頁面
根據内容與導航相分離的原則，我們的第一步應該是，先在web頁面上建立一些将插入可導航元素的占位符。對于每一個可導航元素的連續區域，必須建立一個具 有唯一id的獨立DIV元素；以便将來友善地在JavaScript代碼中辨別它。為了防止過度抖動現象，在創作頁面期間，目錄上方或右邊的DIV元素的 尺寸應該調整到非常接近你的可導航元素的實際大小；這樣，當你使用希望的HTML代碼來代替它們時内容就不會移動位置。為此，一種最巧妙的方法是把一個空 的适當大小的DIV元素插入到該占位符處。
很簡單。你僅需要從可導航DIV元素中删除内容并且插入一個空框，頁眉以後将會出現在這裡。下面是一段示例代碼：
<div id="header">
<div style="height: 100px; width: 100%"></div>
</div>
<div id="contentArticle">
<div id="firstCol">
文章内容放在此處……
<div id="secondCol" ></div>
<div id="footer"></div>
【注意】如果你的web頁面使用表格來實作所希望的頁面布局，那麼請不要把表格單元格重用作占位符；而把DIV元素放到表格單元格内比較好一些。
已經被從web頁面中删除的可導航的元素必須被重新建立為獨立的頁面。你應該使用靜态HTML檔案來表達靜态内容(這将允許緩沖内容，不管你使用什麼樣的 web伺服器)和在加載它們的web頁面上建立顯示基于動态元素的伺服器端腳本。典型情況下，每一個web頁面都應該有唯一一個文章辨別符(例如可以使用 URL中的“p=”參數)；是以，你需要建立一個能夠接受文章辨別符并建立右邊的欄目的伺服器端腳本。在大多數情況中，你可以重用建立嵌入的可導航元素的 伺服器端代碼。
在重新設計這些web頁面後，接下來，你就可以實作“AJAX”程式設計部分了。下面，我們将分别讨論基于嵌入式架構(IFRAME元素)和XmlHttpRequest對象兩種方案實作這一過程的思路，并探讨其各自的優劣點。
現在，細心的讀者應該感到疑惑，為什麼這麼複雜？在IFRAME元素中加載導航元素不是更簡單一些嗎？事實證明，對于此方法還要加一些防止誤解的說明為好：
• IFRAME具有固定的高度和寬度。如果内容彼此超出，則内容将被剪掉或者IFRAME要加上滾動條。然而，被複制到一個在父頁面中的DIV元素中的HTML标記其大小卻總是保持自動調整大小。
• 當在一個IFRAME中時，在導航内容中的連結(一個元素)将裝載IFRAME中的新頁面，除非你把target="_parent"添加到每一個連結之後。
• 依附到導航元素的JavaScript事件處理器将在IFRAME的上下文中工作（如果還保留這個上下文的話）。如果你把導航内容移動首頁面上，那麼事件處理器能夠存取在首頁面中定義的函數和變量。
【另注】IFRAME極大地影響到其所開發的網站的搜尋引擎優化問題。如今，大多數人的觀點是盡可能不要在以推廣為主要目标的網站開發中使用此技術。本人也持有同樣觀點。是以，這種方案宜慎重選用為好。
在此，回調函數contentLoaded首先檢查XmlHttpRequest對象是否已經準備好（第一個if語句），并判斷其完成狀态(如果請求已完 成的話)。如果一切順利，則從響應中提取HTML标記。接下來的編碼即是從伺服器傳回的響應資訊中提取我們所關心的内容。當然，提取HTML代碼（除非你 使用XHTML，這種情況下，你可以使用新式的XMLDOM接口）的最容易的方法是，使用字元串處理函數來查找<body>和< /body>标志之間的文本。
與前面描述的基于IFRAME的方法相比，使用XmlHttpRequest對象具有下列優點：
• 代碼更利索，并且不依賴于頁面的上下文切換。
• XmlHttpRequest對象能夠為我們提供檢測和處理錯誤（通過它的readyState和status屬性）功能。而使用IFRAME加載内容時，如果出現錯誤，則隻能顯示非常粗略的錯誤提示，這主要是因為這種技術缺乏對回調機制的支援。
• 開發人員既能夠實作内容元素的平行加載(如在本節中所描述的)，也可以以順序化方式加載頁面内容以達到最為有效地利用帶寬。
【另注】使用AJAX技術開發後的網站是否也不利于搜尋引擎的優化（或支援）？對此觀點，在這種技術剛剛推出時就被争論不休，以至于到現在仍無定論。本人 建議，如何你的網站以早期推廣為主，則基于各種AJAX技術的内容宜少用為好。當然，如果你的網站已經發展相對成熟（推廣相對成功；此時，搜尋引擎自然會 找上門來），則适當利用AJAX技術自然會極大地提高使用者體驗感。
四、 小結
在本文中，我們強調基于web頁面内容與包圍該内容的可導航元素分離開來的觀點來建構網頁。因為，這種分離将導緻更為集中地描述搜尋引擎要搜尋的頁面内 容，而且也有助于減少使用者使用低帶寬存取的加載時間（因為我們是在可導航元素被下載下傳之前把實際内容顯示給使用者的）。
接下來，我們通過示例代碼片斷簡要讨論了使用嵌入式架構(IFRAME)與使用新式的XmlHttpRequest對象兩種方案來實作可導航元素的延遲裝載。顯然，各存在其優缺點；是以，在實際開發網站的過程中，還宜視具體情況來定奪。
<b></b>
<b>本文轉自朱先忠老師51CTO部落格，原文連結：http://blog.51cto.com/zhuxianzhong/59892</b><b> ，如需轉載請自行聯系原作者</b>
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)