ajaxサンプル - Daily Grind

hello.cgi

#!/usr/bin/env ruby
sleep(3)
require "cgi" 
cgi = CGI.new
name = cgi['name']
name = CGI.escapeHTML(name)    # セキュリティ対策
puts "Content-type: text/html charset: euc-jp" 
puts
puts "こんにちは、#{name} さん！\n"

hello.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="euc-jp">

<title>Hello 0.3</title>
<script type="text/javascript">
// XMLHttpRequest オブジェクトを取得するためのユーザ定義関数
function getXHR() {
    var req;
    try {
        req = new XMLHttpRequest();
    } catch(e) {
        try {
            req = new ActiveXObject("Msxml2.XMLHTTP");
        } catch(e) {
            req = new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
    return req;
}

// [送信] ボタンクリック時に実行されるイベントハンドラ
function asyncSend() {
    var req = getXHR();
    // 非同期通信時の処理（コールバック関数）を定義
    req.onreadystatechange = function() {
        var result = document.getElementById("result");
        if (req.readyState == 4) {        // 通信の完了時
            if (req.status == 200) {    // 通信が成功した時
                result.innerHTML = req.responseText;
            } else {    // 通信が失敗した時
                result.innerHTML = "サーバエラーが発生しました。";
            }
        } else {        // 通信が完了する前
            result.innerHTML = "通信中...";
        }
    };
    // サーバとの非同期通信を開始
    req.open("GET", "hello03.cgi?name=" +
        encodeURIComponent(document.fm.name.value), true);
    req.send(null);
}
</script>
</head>
<body>
<h1>Hello 0.3</h1>
<h3>非同期通信テスト</h3>
クライアントから GET で送られたデータをサーバー側で非同期で処理し、クライアントにデータを戻します。サーバーの処理中にクライアントは別の作業を行うことができます。
<hr>
<form name="fm">
<label>名前：
<input type="text" name="name" size="15"></label>
<input type="button" name="submit" value="送信" onclick="asyncSend()">    
</form>
<div id="result"></div>
</body>
</html>