はじめてのXMLHttpRequestをしてみよう。

とりあえずXMLHttpRequestオブジェクトを作ってデータを読み込むところまでメモ。

まず、「Cross-Browser XMLHttpRequest」に行き「xmlhttprequest.js」をダウンロードしてくる。

これはXMLHttpRequestを使う上で各種ブラウザ（2005-02-28現在、IE、Firefox、Opera）に対応したXMLHttpRequestオブジェクトを生成するためのライブラリっぽい。（Creative Commons License.）

上のページに書いてあるソースそのままなんですが、 まずxmlhttprequest.jsをインクルードしてやる。

<script type="text/javascript" src="xmlhttprequest.js"></script>

GETリクエスト。

var req = new XMLHttpRequest();
if (req) {
  // onreadystatechangeという関数を定義。（上書き？）
  // リクエストの状態をキャッチするハンドラ関数。
  req.onreadystatechange = function() {
    if (req.readyState == 4 && req.status == 200) {
      // ここに取ってきたデータで行いたい処理を記述する。
      alert(req.responseText);
    }
  };
  req.open('GET', 'pageurl.xml');
  req.send(null);
}

POSTリクエスト。

var req = new XMLHttpRequest();
if (req) {
  req.onreadystatechange = function() {
    if (req.readyState == 4 && req.status == 200) {
      // ここに取ってきたデータで行いたい処理を記述する。
      alert(req.responseText);
    }
  };
  req.open('POST', 'scripturl.cgi');
  req.send('var1=data1&var2=data2');
}

これで変数「req」の中には該当URLのテキストデータ（XMLデータ）が入っているので、これを表示してやればよい。

テキストデータとして扱う場合。

var textdata = req.responseText

XMLデータとして扱う場合。

var xmldata = req.responseXML

テキストデータとして扱った場合にはそのままデータを表示してやることができる。

alert(textdata);

XMLデータとして扱った場合にはDOMを使ってデータを取得することができる。

alert(xmldata.getElementsByTagName('test')[0]);

DOMを使用したXMLデータの調理例は「JavaScriptでDOMを使う――オブジェクト指向入門の入門」がよさそう。

注意点 -- XMLHttpRequestでリクエストが行えるのは実行しているJavaScriptがあるホストと同じホスト上のデータのみである。（要するにhttp://www.example.com/上のページからはhttp://www.example.com/にしかリクエストをおこなうことができない。最初これを使って他のサイトのRSSデータを取得して検索するとか考えてたんだけど無理そうです。）