[AJAX食譜] 在 HTML 中引入別的 HTML 檔案

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

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

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

所以我的 HTML 可以這樣寫:
[code lang="xml"]

...


...

[/code]

然後當然是要寫出 JavaScript 的 code 啦,這裡我用了 Prototype.js 來操作 AJAX:
[code lang="xml"]


[/code]
這樣就可以完全用 client 端來引入其它的 HTML 檔案而不借助 server-side script 了。當然,引入的 HTML 檔案也必須跟原本的 HTML 放在同一個 domain 下,不然 AJAX 也幫不了你啦 :p