AJAX プログラミングの注意点

筆者が AJAX に触れたのはもう1年くらい前であって、そのあとはしばし AJAX から離れていた。それから最近また AJAX する機会があって、この PerlTips を見ながらコードを書いているが、苦労した点というのは1年も経つとやはり忘れてしまうらしい。それでもこの PerlTips を眺めていたら解決できたこともあったのでそれを注意点としてまとめてみた。おそらく誰もが陥りやすいワナだろう。

1. サンドボックスセキュリティ： セキュリティ上の理由により JavaScript (XMLHttpRequest) からアクセスできる URL は HTML のダウンロード元と同じドメインに限定される（Java のアプレットで言うサンドボックスモデルと同じ意味）。
2. Content-type: ヘッダ： mozilla.org の AJAX: Getting Started にあるように、PHP から吐き出す XML データを JavaScript で扱う場合は以下の header('Content-type: text/xml'); 行が重要である。
   //要素の終了
function endElement($parser, $name) {

...
        <font color="red"><strong>header('Content-type: text/xml');</strong></font>
        print $output;
...
}
   これは JavaScript で XML のヘッダ付きデータを送ってきて欲しいところをサーバが HTTP ヘッダを付けて送ってくるということだから、JavaScript 中で強制的に XML のデータとして扱うという宣言をしてしまう方法もある。 https://developer.mozilla.org/ja/docs/XMLHttpRequestも参考にしよう（その後 IE 6.0 でも試してみたが、IE ではこのメソッドはそもそもサポートされていないようなので、try〜catch で囲む必要がある）。
   ...
xmlhttp.onreadystatechange = handleHttpEvent;
xmlhttp.open('GET', url, true);
xmlhttp.setRequestHeader("Content-Type", "text/html");

try {
  <font color="red"><strong>xmlhttp.overrideMimeType('text/xml');</strong></font> // optional
} catch(e) {
  // IE の場合は、このメソッドがサポーされていない
}
    xmlhttp.send(null);
....
3. XMLHttpRequest オブジェクトにおける、IE のブラウザによるキャッシュ（setInterval で自動更新されない問題）： IE では、いくら下のように
   var xmlhttp = null;
if ((xmlhttp = createXMLHttp()) == null) {
    window.alert("XMLHTTP Initialization Failed.");
} else {
    xmlhttp.abort();
}
...
   …と、ローカルに xmlhttp オブジェクトを初期化、生成しても、xmlhttp.requestXML の値が更新されず、どうも最初に取得した値（データ）が常に返されるという事象が発生することがある。これはリクエストする URL が毎回同じ場合に起こりえる。IE は URL が同じだと、初回にアクセスして取得したデータのキャッシュを返すのだ。これを避けるためには、以下のように &t=<としてリクエストする URL に時刻のシリアル値を入れてあげればよい。new Date の値は、常に変化するからだ。このようにして JavaScript から IE を「だます」必要がある。&t= とパラメータをつけたところでサーバ側は t の値なんて無視すればいいだけの話。
   // 固定の URL
var url = 'https://yourdomain.com/example.php?param=test';

// 時刻のシリアル値を付加して URL を変化させる
xmlhttp.open('GET', url + '&t=' + new Date(), true);