利用AJAX+XML實現多語言Web應用

本文：利用Ajax+XML實現瀏覽器端的多語言

一、引言

　　首先要回答的一個問題就是，我們是否有必要實現這樣一個功能。

　　現在大多數網站（如論壇、部落格等）的多語言往往是在伺服器端實現的，主要用於整站的本地化。此外，像新華網這一類的新聞類網站實際上每種語言都有一個獨立的網站，有不同的團隊來維護——當然這不在本文的討論範圍之內。用伺服器指令碼替換的方式處理多語言資訊對於使用者來說是非常被動的，對我們代碼編寫者來說則是一件浪費時間的事情。而且每次修改或添加詞條都要維護一個龐大的指令檔（一般都使用數組……）。

　　我希望得到這樣的一個東西：伺服器端的系統不處理語言；客戶可以在已經下載好的頁面上選擇自己擅長或喜好的語言（現在會兩種語言的人不在少數……），這些資訊非同步發送到伺服器。注意：這裡也不消耗指令碼資源，只需要request一個或幾個xml檔案就能搞定。這樣的好處是：可以通過各種現成的XML編輯器修改整理詞條，可以同樣簡單地添加語言；節約伺服器資源（運行指令碼總比下載檔案更耗費資源），有時候甚至可以節省SQL查詢的時間（如果有人會在資料庫中記錄使用者喜歡的語言……不過我目前還沒聽說……）；變以前“推”的方式為現在“拉”的方式；更新介面語言不必重新整理……

二、設計與實施

　　為了節省開發時間，我選用prototype 1.5.1作為基礎類庫（順便提一句，prototype庫簡直太好用了，只是1.5.1版有90多KB……這應該就是Fat Client的典型代表吧）。

　　包含詞條的語言檔案採用XML，目錄結構如下：

lang /  config.xml

　　　zh-cn.xml

　　　en-ww.xml

　　/ subpage / config.xml

　　　　　　　 zh-cn.xml

　　　　　　　 en-ww.xml

　　說明：一個目錄就是一個多語言登錄區，lang/config.xml指定了可用的語言，結構如下：

<?xml version=”1.0″ encoding=”utf-8″?>
<lang-config version=”1.0″>
　　<entry value=”zh-cn” name=”中文（簡體）” />
　　<entry value=”en-ww” name=”English” />
</lang-config>

　　這裡可以根據需要添加語言，entry的value屬性所指定的語言必須有同名的xml在與該檔案相同的目錄下。

　　zh-cn.xml和en-ww.xml就是儲存詞條的檔案了，其結構如下：

<?xml version=”1.0″ encoding=”utf-8″?>
<lang-pack lang=”en-ww” name=”English” version=”1.0″>
　　<title>PHIL idea. Online</title>
　　<entry id=”STR_SOMETHING“>Something …</entry>
</lang-pack>

　　在本例中每個登錄區代表一個頁面，所以title欄位表示頁面的標題。此處可以根據需要新增內容。後面的每一個詞條佔用一個entry標籤，id屬性指定了詞條的在該登錄區中的唯一識別碼。zh-cn.xml的結構與此相同，在此不做贅述。

　　為了避免在不同的檔案裡引用相同的內容，可以在subpage/lang-code.xml的根標籤中添加include屬性，寫上所引用檔案的相對路徑：

<lang-pack lang=”en-ww” name=”English” include=”../en-ww”>
　　<title>PHIL idea. Online — Brief Introduction</title>
　　<entry id=”STR_TEST”>TEST</entry>
</lang-pack>

　　接下來，在頁面中需要應用詞條的地方放置這樣的東西：

<span class=”lang-spot:STR_SOMETHING“></span>

　　為什麼用class屬性？原因是prototype有非常簡便的操作class的函數……真是太方便了！如果你有興趣可以參見文檔。當然，在這個lang-spot:STR_SOMETHING的後面還可以追加其它的class，並不會影響CSS效果的展現。

 　　最後的工作就是寫javascript指令碼了：

　　您可以在此下載用於測試的指令碼：multi_lang_demo.js

　　測試：

　　在HTML頁面中，引用這個檔案。
　　在頁面的最後添加一個指令碼塊兒：


Event.observe( window, "load", function(){
　　Lang.initialize( "lang/", function(){
　　　　　// 列表可用語言列表到divLangList中
　　　　　//（假設你的頁面中存在這個東西）
　　　　  Lang.LanguagesSupported.keys.each(
　　　　　function(oKey){
　　　　　　　$("divLangList").innerHTML +=
　　　　　　　　　"<a href='javascript:void(0);' "+
　　　　　　　　　"onclick=/"Lang.Apply(document, '" +
　　　　　　　　　Lang.LanguagesSupported[oKey].Code + "');/">" +
　　　　　　　　　Lang.LanguagesSupported[oKey].Name + "</a><br />";
  　　　　});
　　　　// 在頁面中應用代碼為zh-cn的語言，即簡體中文
　　　　// 未設定應用完成的事件處理器
　　　　Lang.Apply( document, "zh-cn", null );
　　});
});

　　現在可以試一下了。頁面上的那個標記好的標籤會被自動替換成相應的詞條。你可以添加

四、後記

　　這段代碼只是一個DEMO，你可以在此基礎上進行自己的修改，比如添加使用Cookie記住使用者上次使用的語言等等。此外，對於語言套件的引用有一個循環參考的問題，在這個DEMO中沒有解決，有興趣的朋友可以試一下。

　　歡迎交流！也希望各位把您修改的作品發來看看！