Bing翻译API的使用代码如下：

var bingAppId = 'xxx'; //bingAppId需替换为自己的，在https://ssl.bing.com/webmaster/Developers/AppIds/申请
function bingDetectCallback(response){
    if (response == ''){
        alert("翻译服务不可用");
        return;
    }
    var text = document.getElementById("sentence_content").innerHTML;
    var languageFrom = (response=='en' ? 'en' : 'zh-CHS');
    var languageTo = (response=='zh-CHS' ? 'en' : 'zh-CHS');
    var url = "http://api.microsofttranslator.com/V2/Ajax.svc/Translate?oncomplete=bingTranslateCallbak"+"&appId="+ encodeURIComponent(bingAppId) + "&from=" + languageFrom + "&to=" + languageTo + "&text=" + text;
    request(url);
}
function bingTranslateCallbak(response){
    alert(response);
}
function request(url){
    var s = document.createElement("script");
    s.src = url;
    document.getElementsByTagName("head")[0].appendChild(s);
}
function bingTranslate(){
    var text = '需要翻译的文本';
    var url = "http://api.microsofttranslator.com/V2/Ajax.svc/Detect?oncomplete=bingDetectCallback"+"&appId=" + encodeURIComponent(bingAppId) + "&text=" + text;
    request(url);
}
bingTranslate();

是不是很简单？

其他的Bing翻译API见这里。

有一个例外是：在相同根域、相同协议、相同端口的情况下，可以利用设置document.domain方式来解决不同子域的跨站访问问题。

举个例子，想在witmax.cn中，访问www.witmax.cn域名下的内容，需要以下几步来完成：

1. 在主页面（位于witmax.cn中）通过隐藏的iframe嵌套子页面（内容位于www.witmax.cn）
2. 在主页面中设置document.domain=”witmax.cn”;
3. 在子页面中设置document.domain=”witmax.cn”;
4. 在主页面和子页面中可以相互访问内容了；需要跨域访问其他内容，可以通过在对应页面上发请求完成取回数据然后进行对应操作

P.S. 补充几点：

1、document.domain可以由子域www.witmax.cn修改为主域witmax.cn，而不能由witmax.cn修改为www.witmax.cn（不是所有浏览器都支持）。

2、不同根域、或不同协议、或不同端口之间的跨域访问只能通过服务器断的代理程序来解决了。

3、详细的示例见参考文档：

• 用document.domain解决Ajax跨子域
• 用document.domain+iframe实现Ajax跨子域
• 设置 iframe document.domain杂谈

伯斯塔尔法则（Postel’s Law）设计原理：

发送时要保守；接收时要开放.

 发送给浏览器的数据尽量格式严谨；而浏览器接受数据时尽量做到容错，保持开放。

HTML5设计原理

HTML5由W3C HTML5工作组与WHATWG工作组（Web Hypertext Applications Technology Working Group）同心协力共同完成，在合作过程中遵循以下设计原理：

• 避免不必要的复杂性：简化代码输入和记忆
• 支持已有的内容：考虑到浏览器厂商实现功能时需要向下兼容
• 解决现实的问题：如允许将把段落中的文本放在链接里
• 求真务实
• 平稳退化：渐进增强
• 最终用户优先：一旦遇到冲突，最终用户优先，其次是作者，其次是实现者，其次标准制定者，最后才是理论上的完满

参考了一些经典的设计原理

Drupal界面的设计原理：

• 简化最常见的任务，让不常见的任务不至于太麻烦。
• 只为80%设计。
• 给内容创建者最大的权利。
• 默认设置智能化。

微格式设计原理：

首先为人类设计，其次为机器设计。

Mozilla的设计原理：

Internet作为一种公共资源，其运作效率取决于互通性（协议、数据格式、内容）、变革及全球范围内的协作。
基于透明社区的流程有助于增进协作、义务和信任。

Web设计原理：

大多数人的意见和运行的代码。

原文：HTML5设计原理

结果浏览器的文本框里只显示了“I’m a ”，双引号不见了，查看源代码可以发现如下

<input type="text" value="I'm a "!" />

可见是html解析问题，input value值中的双引号被作为value值的结束符了。

解决办法就是：把双引号替换为"，单引号替换为'。

<?php
$str = "I'm a \"!";
$str = str_replace($str, "\"", "&#34;");
$str = str_replace($str, "'", "&#39;");
?>
<input type="text" value="<?=$str?>" />

其他语言类似操作。

这里的解决办法是：在border panel里添加一个固定的方位panel，之后往这个方位panel里添加一个子panel，这样就可以使用add方法了。

可以通过以下代码进行验证

用Firebug在Firefox可以看到如下结果，发现childNodes有5个元素，其中的3个都是TextNode，也就是div前后的回车符解析出来的。

Firefox下childNodes的表现

IE9下childNodes的表现

IE8下childNodes的表现

参考代码：

参考：从Internet Explorer迁移到Mozilla

可以通过以下代码来测试：

希望得到的是c，FF下表现正常；但跑到IE下，显示abc，不是期望的结果。看来IE在处理substr()第一个参数为负数的情况处理方式不一样。

为了解决问题，另觅蹊径，改用substring()函数代替substr()

p.s. 附一篇学习文章：substr() vs substring() vs slice()

substr()

substr() method extracts a specified number of characters in a string, from a start index.

Syntax: string.substr(start, length);

Quick Notes aout Substr:

• If start is negative, Internet Explorer returns the whole string. That’s wrong! IE should use the last character in the string.

substring()

substring() method extracts the chars in a string between two specified indexes.

Syntax: string.substring(start, stop);

Quick Notes about Substring:

• If start equals stop, it returns an empty string.
• If stop is omitted, it extracts characters to the end of the string.
• If either argument is less than 0 or is NaN, it is treated as if it were 0.
• If either argument is greater than string’s length, either argument will use string’s length.
• If start > stop, then substring will swap those 2 arguments

slice()

slice() works like substring() with a few different behaviors.

Syntax: string.slice(start, stop);

Quick Notes about Slice:

• If stop is omitted, slice extracted chars to the end of the string, exactly like substring().
• If start > stop, slice() will NOT swap the 2 arguments.
• If start is negative, slice() will set char from the end of string, exactly like substr() in Firefox. This behavior is observed in both Firefox and IE.
• If stop is negative, slice() will set stop to: (string.length – 1) – stop (original value).

参考：Javascript: substr() v.s. substring()

解决方法是打个补丁，如下：

Ext.override(Ext.menu.DateMenu,{
 render : function(){
  Ext.menu.DateMenu.superclass.render.call(this);
  if(Ext.isGecko|| Ext.isSafari){
   this.picker.el.dom.childNodes[0].style.width = '178px';
   this.picker.el.dom.style.width = '178px';
  }
 }
});

参考：http://www.fafrei.com/2010/12/ext-form-datefield-firefox%E6%98%BE%E7%A4%BA%E5%BC%82%E5%B8%B8/

GridPanel表头错位

但是在Firefox中显示是正常的。

解决方法为：在所用到的css文件中添加代码，

.ext-ie6 .x-menu-item-icon,.ext-ie7 .x-menu-item-icon,.ext-ie8 .x-menu-item-icon {
   left: -24px;
}

2、Ext.grid.GridPanel在IE中的宽度太大，而且不能自适应宽度，解决方法见如下的一段代码：

var grid = new Ext.grid.GridPanel({
   renderTo : "content",
   autoHeight : true,
   frame : true,
   bodyStyle : "width:100%",
   viewConfig : {
      forceFit : true
   }
});

关键是设置bodyStyle的值为width:100%

原文：http://wangju19870301.iteye.com/blog/556129