prototype.jsを用いて非同期通信を行おうとしたのですが、どうしてもできなくてはまりました。色々と試してみたところ、formでデータを送信するときには「type=”button”」を指定する必要がありそうと判明。。。

はまったときのHTMLコード

ソースを見ればわかりますが、weekday.plというcgiにデータを送信して、結果を表示するajaxのサンプルです。

<html>
<head>
    <title>DB test</title>
    <meta name="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="Content-Script-Type" content="text/javascript" />
  </head>
<body>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript">
//<![CDATA[
function lwws() {
// 結果の表示先に「しばらくお待ちください」と表示する
document.getElementById("result").innerHTML = "<p>しばらくお待ちください...</p>";
new Ajax.Updater(
"result", "cgi-bin/weekday.pl",
{
parameters : Form.serialize("ajax"),
method : "post"
}
);
}
//]]>
    </script>
<h1>DB test</h1>
<form method="post" id="ajax" action="" name="ajax">
Year: <input type="text" name="year"><br />
Month: <input type="text" name="month"><br />
<input type="submit" value="送信" onclick="lwws()">
</form>
<p>通信結果</p>
<div id="result"></div>
<address>
<a href="mailto:simoom634@kazu634.local">simoom634</a>
</address>
</body>
</html>

どんな問題が起きたの？

通信結果の下の部分に結果が表示されるはずが、表示されませんでした。

ログの状況・HTTPヘッダの様子

/var/log/access.logの様子はこんな感じでした:

192.168.11.4 – – [26/Jul/2009:23:03:35 +0900] “POST /~kazu634/cgi-bin/weekday.pl HTTP/1.1” 200 62 “http://srv634/~kazu634/db01.html” “Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; ja-JP-mac; rv:1.9.1.1) Gecko/20090715 Firefox/3.5.1 AutoPager/0.5.2.2 (http://www.teesoft.info/)”

このログを見る限りはweekday.plにデータをpostしています。

が、しかし、実際に送信しているHTTPヘッダを覗いてみると

POST /~kazu634/db01.html HTTP/1.1

Host: srv634

User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; ja-JP-mac; rv:1.9.1.1) Gecko/20090715 Firefox/3.5.1 AutoPager/0.5.2.2 (http://www.teesoft.info/)

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8

Accept-Language: en-us,en;q=0.5

Accept-Encoding: gzip,deflate

Accept-Charset: Shift_JIS,utf-8;q=0.7,*;q=0.7

Keep-Alive: 300

Connection: keep-alive

Referer: http://srv634/~kazu634/db01.html

X-AutoPager: 0.5.2.2 (http://www.teesoft.info/)

Content-Type: application/x-www-form-urlencoded

Content-Length: 18

year=2009&month=12

となっていて、postしている先はHTMLページになっていた。これじゃあ、ダメだよね。。。

何がいけなかったの？

結局、以下の部分が悪かったようです:

<form method="post" id="ajax" action="" name="ajax">
Year: <input type="text" name="year"><br />
Month: <input type="text" name="month"><br />
<input type="submit" value="送信" onclick="lwws()">
</form>
<p>通信結果</p>
<div id="result"></div>

この部分でtypeをsubmitにしていると、actionで指定した先にデータを送信する事になっている…らしいっす（今回の場合はactionに何も指定していないからこのページにデータを送信している…のでしょう）。以下のように変更することで解決しました:

<form method="post" id="ajax" action="" name="ajax">
Year: <input type="text" name="year"><br />
Month: <input type="text" name="month"><br />
<input type="button" value="送信" onclick="lwws()">
</form>
<p>通信結果</p>
<div id="result"></div>