Ajaxでエキサイト中国語翻訳(IE限定)

今更ながらAjaxのサンプルを作ってみました。ローカルにあるHTMLファイルからエキサイト中国語翻訳の結果を非同期で取得してみます。

HTML（translator.html）

読み込み中に表示されるローディングインジケータの画像（ajax-loader.gif）は、以下のサイトで作成することができます。

Ajaxload - Ajax loading gif generator

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Ajax 中国語翻訳</title>
  <style type="text/css">
    
    /* 中国語のフォントを指定 */
    * {
      font-family: "Microsoft YaHei", NSimSun, SimSun;
    }
    
  </style>
  <script type="text/javascript" src="translator.js" charset="UTF-8"></script>
</head>
<body>
<h1>Ajaxでエキサイト中国語翻訳</h1>
<fieldset>
<legend>日本語</legend>
<textarea id="original" style="width:500px;height:200px">こんにちは</textarea>
<input type="button" id="translate" value="翻訳する">
</fieldset>
<br>
<fieldset>
<legend>中国語の翻訳結果</legend>
<img id="loadingImage" src="ajax-loader.gif" style="display:none;"><div id="convert"></div>
</fieldset>
</body>
</html>

JavaScript（translator.js）

// document.getElementByIdのショートカット
function $id(id) {
  return document.getElementById(id);
}

// onloadイベント
onload = function() {
  // 翻訳ボタンをクリックしたときの処理
  $id("translate").onclick = function() {
  
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.onreadystatechange = function() {
      if (xmlHttp.readyState == 4) {
        if (xmlHttp.status == 200) {
          var div = document.createElement("div");
          div.innerHTML = xmlHttp.responseText;
          
          // 翻訳結果の取り出し
          var after = div.document.getElementById("after");
          $id("convert").innerText = after.innerText;
          $id("loadingImage").style.display = "none";
        }
        else {
          $id("convert").innerText = "読み込みに失敗ました。";
        }
      }
      else {
        $id("convert").innerText = "";
        $id("loadingImage").style.display = "inline";
      }
    }
    
    xmlHttp.open("POST", "http://www.excite.co.jp/world/chinese/", true);
    xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    
    var text = $id("original").innerText;
    text = encodeURIComponent(text);
    var parameta = "before=" + text + "&wb_lp=JACH&big5=no";
    xmlHttp.send(parameta);
  }
}

クロスドメイン制約

上記のコードはそのままサーバに配置してもクロスドメインの制約で動作しないと思います。ローカルに配置した場合、IE7では動作しますが、その他のブラウザでは動作しません。IEとその他のブラウザでは、アクセス可能な範囲が違うようです。

■ローカルで、ファイルとしてアクセス、読込先はhttp
　上記のＡＪＡＸのファイル(なんとか.htm)を、ダブルクリックして、ブラウザから開いたような場合。
＜＜結果＞＞
ＩＥ　　ちゃんと読める
FireFox よめない
FireFoxとIEでのXMLHttpRequest等での動作（アクセス可能な範囲）の違い