[AJAX食譜] 在 HTML 中引入別的 HTML 檔案 @ 國二學生認真打雜

April 19th, 2007

如果你沒辦法或是沒必要寫 server-side script 在某個 HTML 檔案引入（include）別的 HTML 檔案，那就用 AJAX 來幫個小忙吧！

有個朋友在寫網頁的時候碰到的問題，就是他想在網頁裡做很多 UI，比方說可能會有很多 dialog，但他實在不想在同一頁裡塞所有的 HTML code，不過一來他不想用 server-side scripting （如：PHP、JSP等）來 inlcude，也不想用 iframe 來嵌入，所以我就建議他可以用 AJAX 來幫個小忙。

簡單的想法就是，在網頁被讀取時（on load）作一個 AJAX 要求要引入的 HTML 檔案，然後再把它的內容放在某個 div、span 等 HTML element 下。

所以我的 HTML 可以這樣寫：

<body onload="includeHTML('_inc.html')">
  ...
  <div id="inctarget"></div> <!-- 引入的 HTML 檔案結果放在這裡 -->
  ...
</body>

然後當然是要寫出 JavaScript 的 code 啦，這裡我用了 Prototype.js 來操作 AJAX：

<script src="prototype.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
	function includeHTML (incfile) {
		new Ajax.Updater('inctarget', incfile, {method: 'get'});
	}
</script>