ajaxサンプル
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>