18 KiB
| title | author | date | wordtwit_post_info | categories | |||
|---|---|---|---|---|---|---|---|
| Ajaxを使って非同期通信をしようとしたけどできずにはまった | kazu634 | 2009-07-26 |
|
|
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>