支持多语言页面(XML AJAX)

多语言

这里的多语言页面是指 一个页面怎么支持多国语言。多国语言：如English 简体中文 繁体中文 等等。
支持多语言的页面，像Google翻译工具就直接是通过机器翻译来做多语言，这种机器翻译的网页可读性是一般的，用户体验也不会很好。我一开始就不考虑。

方案比较

1. 直接写多种语言的html页面，然后不同的语言就切换不同的URL，这种方式最笨，也最直接。如果你的网页的结构不同语言的差别很大，或者所支持的功能差很多那可以考虑这种方式。
2. 使用CSS伪元素的content:attr(en)形式，将语言写在元素属性中，这也是一种笨办法
3. 还有就是通过后台，采用同一模板，利用ResourceBundle配置多语言resource文件，实现网页不同语言版本的显示。
   ResourceBundle提供的properties文件，采用XMLResourceBundle,采用XML文件的方式定义配置文件。
4. JavaScript AJAX实现，把不同语言的字段存在不同的XML文件中，使用的是同一个HTML页面，利用AJAX来读取不同语言的内容。

---

关于检测还是下拉切换

这里对于多语言的支持，我想到的其实有两个方案：

• 通过JS检测客户端或者浏览器的语言来确定使用什么语言显示HTML页面。 这个好处是比较自动不需要人工去选择语言。 当然如果要用js检测，对于浏览器来说可以检测navigator.language, 但是其实这个其实并不可靠，因为用户是可以修改浏览器的语言的。
• 直接在页面提供一个select列表，然后根据选择的语言来切换页面语言。这个也是AJAX来实现。 好处是比较可靠，切换语言是可控的。但是缺点就是要手动去选择了。

---

具体实现

实现思路：
对于一个页面的多语言，我采用一个select列表来切换语言。
把整个功能作为做成一个jQuery插件。 同时我们需要把不同语言的具体字段内容用一个xml文件存起来放到服务器，我们通过Ajax来异步读取这个xml的内容，然后我们通过不同XML不同的标签来区分不同的语言。 然后用js自动生成option列表，以及切换语言。 利用onchange事件触发。
我用id来标识不同的字段内容。 但是这个做法需要在html也要设置一个跟在xml中完全对应的id。

XML文本如下：

<content>
    <type>
        <zh>zh</zh>
        <en>en</en>
    </type>
    <text id="head">
        <zh>Balight APP 新手指南</zh>
        <en>Balight APP User Guide</en>
        <DD>ASDASDASD</DD>
    </text>
    <text id="step2">
        <zh>步驟二：請將鋰電池安裝到Balight上。（務必要聽到清脆的＂咔＂聲才代表有穩固安裝）</zh>
        <en>Step 2 – Install the battery on your Balight.</en>
    </text>
    <text id="step3">
        <zh>步驟三：按下開關開啟Balight，開機時請靜止幾秒，此時正在水平校正，LED燈熄滅後即可開始騎動。</zh>
        <en>Step 3 – Press and hold the Power Button until the LED turns on. The LED should light up in 5 seconds. If the LED is not on, contact support at support@balight.com.</en>
    </text>
    <text id="connect">
        <zh>連接您的Balight</zh>
        <en>Connect your Balight to your Balight App</en>
    </text>


</content>

用XML的好处是易读性较好，而且标签也是完全自己定义的。
用JSON也可以只是可读性没那么好。
扩展语言的话，只需要增加一个新的标签即可。

jQuery代码：

(function($){

    $.fn.cloudLang = function(params){

     /*   var defaults = {
            file: 'lang_Content.xml',
            lang: 'en'
        }*/

        var aTexts ={};


        $.ajax({
              type: "GET",
              url: params.file,
              dataType: "xml",
              success: function(xml){
                            //这里是遍历解析XML文档
                            $(xml).find('text').each(function()
                            {
                                var textId = $(this).attr("id");//提取id的值
                                var text = $(this).find(params.lang).text();//找到所有<zh> or <en> 标签
                                aTexts[textId] = text;//存储文本到这个数组中
                            });
                            // 遍历HTML文档每个id，然后替换文本
                            for(var id in aTexts){
                                $('#'+id).text(aTexts[id]);
                            }
            }
        });
    };

})(jQuery);
$(document).ready(function(){
    function createOptions(){
        //var select=document.getElementById('language');
        var selectx=$('#language');
        $.get('lang_Content.xml',function(data){
            var xml=$(data);
            xml.find('type').children().each(function(){
                var text=$(this).text();
                selectx.append('<option value="'+text+'">'+text+'</option>');
            });
        });
    }
    createOptions();

    $('#language').on('change',function(){
        var value=$('#language').val();
        //console.log(value);
        //根据下拉列表选择的进行填充
        $('body').cloudLang({lang:value,file:"lang_Content.xml"});
    });
});

遇到的主要问题
用Ajax读取XML的内容，来生成option，select列表一刷新出来是没有一个默认的选定值的。这样就会需要切换几次这个列表才能使得切换是有效的。还有就是你多次选了同一个值，这个值刚好是默认值，它就不会显示出来。

<select name="language" id="language">
</select>

我们可以通过以下代码给一个默认的选定值：

$('#language option:last-child')[0].selected=true

select添加option要注意的是：
标准的做法是s.options.add(new Option(text,value));

注意在IE6的话，要先添加option到select中，否则是空白的：

   s.appendChild(option);
     option.text = 'hello world';
     option.value =3;

还有就是使用jQueryMobile的话，会有bug，就是select一开始是没有显示出选定的option的值的 ！