外部ドメインのファイルを XMLHttpRequest と php で読み込む

普通に XMLHttpRequest で外部ドメインのファイルを読み込めるのは、現在確認している限りでは、Mac ローカル環境と Safari しかない。これは Dashboard で使用する widget のためなのかもしれないが、ローカル Mac と Safari の組み合わせでなら可能だ。しかし php を使えば、XMLHttpRequest 単体では読み込めない外部ドメインのファイルも読み込むことができる。これにたどり着くまでに色々と調べたりしたけど、どれもソースが長かったり jquery を使ったりとめんどくさいものが多かったが、この手法ではかなり簡単に実現できる。

javascript を含んだ html を test.html、XMLHttpRequest によって読み込まれる php を test.php とする。

★html（test.html）

<form action="javascript:readFile(url.value);" method="post">
  <input type="text" size="200" id="url" name="url" />
  <input type="submit" value="read" />
</form>
<div id="result"></div>

★javascript（test.html）

function readFile(str) {
// form の action で飛ばされた url を受け取る
  fileName = "test.php?" + str;
// IE は特に考慮に入れていない
  var xmlHttpReq = new XMLHttpRequest();
  xmlHttpReq.open("GET", fileName, true);
  xmlHttpReq.onreadystatechange = function() {
    if (xmlHttpReq.readyState == 4) {
      fileData = xmlHttpReq.responseText;
      document.getElementById("result").innerHTML = fileData;
  }
  }
  xmlHttpReq.send(null);
}

★php（test.php）

// XMLHttpRequest で読み込むファイル名の
// ? 以降の url を取得
$fileName = $_SERVER["QUERY_STRING"];
// url を読み込み、php 内で展開する
  readfile($fileName);

Safari、Firefox、Chrome で確認済み。Opera は調子悪いので未確認。