こんにちは世界

Programming Ajax

CGIに適当にAjaxねじこんでみようとしたりうまく動かなかったりムキーっということで、ちゃんと基本を確認することにする。そうだそうだ、そういえば通過儀礼を忘れていたのだ。それはもちろん「Hello World!」。なんか俺の中では「Ajaxなにそれおいしいの？ 料理するの難しい？」だったけど、別にそんなに難しくはないような。

ちなみにIEで動くものはたぶん書かない。めんどくさいから。

まず基本。
http://konbu.s13.xrea.com/lib/ajax/hello.html
ソース

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>
Ajaxの世界にこんにちは。 Hello World!
</title>
<script type="text/javascript"><!--
function loadData(){
  http = new XMLHttpRequest();
  http.onreadystatechange = display;
  if(http){
    http.open("GET", "data.txt", true);
    http.send("");
  }
}
function display(){
//  if((http.readyState == 4) && (http.status == 200)){
  if(http.readyState == 4){
    document.getElementById("screen").innerHTML = http.responseText;
  } else {
    document.getElementById("screen").innerHTML = "Wait...";
  }
}
// -->
</script>
</head>
<body>
  <input type="submit" name="load" value="読み込み" onClick="loadData()">
  <div id="screen"></div>
</body>
</html>

「読み込み」ボタンを押すとHTMLファイルと同ディレクトリにあるテキストdata.txtを読み込み、

<div id="screen"></div>

の中に埋め込むHTMLである。

巷のAjax解説ページを見ると、ほうらこういうFirefoxなどではXMLHttpRequestっていうのがあってだね、IEでは別の関数があって違いを吸収するためにラッパー関数を作って云々、とか最初の方に書いてあったりする。しかしですね。こちとらいたづらにAjaxAjax言って遊びたいだけなので、そんなめんどくさい実用的なテクニック言われても困るのです。
人間最初は誰でも何度も

f();f();f();f();f();f();f();f();f();f();

なんて阿呆っぽいコードを書いて初めて

for(i=0;i<10;++i) f();

のありがたさがわかるのです。いや後者もけっこう阿呆っぽいけど。

というわけで、Ajax畑において自分はまだ箸も使えない幼稚園児のようなものだという自覚を持ちます。さてこれでFirefoxでしか動かないHelloWorldを躊躇無く書けるようになりました。
（解説してるサイトがどっちかで動くのしか書かないってわけにいかんのもわかるけど）

しかしまあこの程度のものもなかなか書けなかったりしました。つまったのは、

//  if((http.readyState == 4) && (http.status == 200)){
  if(http.readyState == 4){

この部分。最近そんなにCGI書いたりして遊んでるわけでもないんで、ローカルのHTMLファイルでテストしたりしてたんですよ。で、その場合に問題がある。「http.status == 200」というコード、「httpオブジェクトのHTTPステータスコードが200ですよ」という意味。HTTPステータスコードっていうのはHTTPサーバがくれる信号です。ローカルのファイルにアクセスしてるのにそんなもの返ってくるわけが無い。
っていうか「http.readyState」で「httpオブジェクトの通信終わった」言ってるんだからとりあえずそっちだけでいい。「200 OK」じゃなかったならそれはそれで、そん時サーバ先生が返した出力を読み込んでくれりゃいいし。
参考までに、わざと読み込むデータに"dat.txt"という存在しないファイルを指定した場合以下のようになった。
http://konbu.s13.xrea.com/lib/ajax/hello_err.html
「読み込み」を押すと「302 Found」コードが返ってきていることがわかります。
xreaのサーバは、存在しないファイルにリクエストされたら
「見っけた！ 移動先は http://img.xrea.com/err.fcg?404 だよ！」
という返事をするらしい。ちょっと変な子ですね。

さて。今回はXMLHttpRequestの接続先をプレーンテキストにしましたけれど、CGIに接続してあれこれすると、とても楽しそうですね。
一時期WEB上の諸悪の根源みたいな扱いをされていたことも多かったJavaScriptですが、今はとてもおもしろそうですね。まだまともにAjax遊びしてないが、一つ思った。通信、表示部分をDHTMLに任せてしまえば、PerlだとかのCGIのコードの中に間抜けに大量のHTMLを書かなくて済む場合が多そうだ。
最後になって書くけど、これって「XMLHttpRequest使ってみましたこんにちはこんにちは！」というだけの話で、Ajaxと呼ぶほどのものじゃないな。

test