kazu634
/
blog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
blog/content/post/2009/07/26/2009-07-26-00001204.md

188 lines
18 KiB
Markdown
Raw Normal View History

initial commit
2019-03-31 11:00:21 +00:00
---
title: Ajaxを使って非同期通信をしようとしたけどできずにはまった
author: kazu634
date: 2009-07-26
url: /2009/07/26/_1303/
wordtwit_post_info:
- 'O:8:"stdClass":13:{s:6:"manual";b:0;s:11:"tweet_times";i:1;s:5:"delay";i:0;s:7:"enabled";i:1;s:10:"separation";s:2:"60";s:7:"version";s:3:"3.7";s:14:"tweet_template";b:0;s:6:"status";i:2;s:6:"result";a:0:{}s:13:"tweet_counter";i:2;s:13:"tweet_log_ids";a:1:{i:0;i:4725;}s:9:"hash_tags";a:0:{}s:8:"accounts";a:1:{i:0;s:7:"kazu634";}}'
categories:
- ajax
- cgi
---
<div class="section">
<p>
prototype.jsを用いて非同期通信を行おうとしたのですが、どうしてもできなくてはまりました。色々と試してみたところ、formでデータを送信するときには「type=&#8221;button&#8221;」を指定する必要がありそうと判明。。。
</p>
<h4>
はまったときのHTMLコード
</h4>
<p>
ソースを見ればわかりますが、weekday.plというcgiにデータを送信して、結果を表示するajaxのサンプルです。
</p>
<pre class="syntax-highlight">
<span class="synIdentifier">&#60;</span><span class="synStatement">html</span><span class="synIdentifier">&#62;</span>
<span class="synIdentifier">&#60;</span><span class="synStatement">head</span><span class="synIdentifier">&#62;</span>
<span class="synPreProc"> </span><span class="synIdentifier">&#60;</span><span class="synStatement">title</span><span class="synIdentifier">&#62;</span>DB test<span class="synIdentifier">&#60;/</span><span class="synStatement">title</span><span class="synIdentifier">&#62;</span>
<span class="synPreProc"> </span><span class="synIdentifier">&#60;</span><span class="synStatement">meta</span><span class="synIdentifier"> </span><span class="synType">name</span><span class="synIdentifier">=</span><span class="synConstant">&#34;Content-Type&#34;</span><span class="synIdentifier"> </span><span class="synType">content</span><span class="synIdentifier">=</span><span class="synConstant">&#34;text/html; charset=UTF-8&#34;</span><span class="synIdentifier"> /&#62;</span>
<span class="synPreProc"> </span><span class="synIdentifier">&#60;</span><span class="synStatement">meta</span><span class="synIdentifier"> </span><span class="synType">name</span><span class="synIdentifier">=</span><span class="synConstant">&#34;Content-Script-Type&#34;</span><span class="synIdentifier"> </span><span class="synType">content</span><span class="synIdentifier">=</span><span class="synConstant">&#34;text/javascript&#34;</span><span class="synIdentifier"> /&#62;</span>
<span class="synPreProc"> </span><span class="synIdentifier">&#60;/</span><span class="synStatement">head</span><span class="synIdentifier">&#62;</span>
<span class="synIdentifier">&#60;</span><span class="synStatement">body</span><span class="synIdentifier">&#62;</span>
<span class="synIdentifier">&#60;</span><span class="synStatement">script</span><span class="synIdentifier"> </span><span class="synType">type</span><span class="synIdentifier">=</span><span class="synConstant">&#34;text/javascript&#34;</span><span class="synIdentifier"> </span><span class="synType">src</span><span class="synIdentifier">=</span><span class="synConstant">&#34;prototype.js&#34;</span><span class="synIdentifier">&#62;&#60;/</span><span class="synStatement">script</span><span class="synIdentifier">&#62;</span>
<span class="synIdentifier">&#60;</span><span class="synStatement">script</span><span class="synIdentifier"> </span><span class="synType">type</span><span class="synIdentifier">=</span><span class="synConstant">&#34;text/javascript&#34;</span><span class="synIdentifier">&#62;</span>
<span class="synComment">//&#60;![CDATA[</span>
<span class="synIdentifier">function</span><span class="synSpecial"> lwws</span>()<span class="synSpecial"> </span><span class="synIdentifier">{</span>
<span class="synComment">// 結果の表示先に「しばらくお待ちください」と表示する</span>
<span class="synStatement">document</span><span class="synSpecial">.getElementById</span>(<span class="synConstant">&#34;result&#34;</span>)<span class="synSpecial">.innerHTML = </span><span class="synConstant">&#34;&#60;p&#62;しばらくお待ちください...&#60;/p&#62;&#34;</span><span class="synSpecial">;</span>
<span class="synStatement">new</span><span class="synSpecial"> Ajax.Updater</span>(
<span class="synConstant">&#34;result&#34;</span><span class="synSpecial">, </span><span class="synConstant">&#34;cgi-bin/weekday.pl&#34;</span><span class="synSpecial">,</span>
<span class="synIdentifier">{</span>
<span class="synSpecial">parameters : Form.serialize</span>(<span class="synConstant">&#34;ajax&#34;</span>)<span class="synSpecial">,</span>
<span class="synSpecial">method : </span><span class="synConstant">&#34;post&#34;</span>
<span class="synIdentifier">}</span>
)<span class="synSpecial">;</span>
<span class="synIdentifier">}</span>
<span class="synComment">//]]&#62;</span>
<span class="synSpecial"> </span><span class="synIdentifier">&#60;/</span><span class="synStatement">script</span><span class="synIdentifier">&#62;</span>
<span class="synIdentifier">&#60;</span><span class="synStatement">h1</span><span class="synIdentifier">&#62;</span>DB test<span class="synIdentifier">&#60;/</span><span class="synStatement">h1</span><span class="synIdentifier">&#62;</span>
<span class="synIdentifier">&#60;</span><span class="synStatement">form</span><span class="synIdentifier"> </span><span class="synType">method</span><span class="synIdentifier">=</span><span class="synConstant">&#34;post&#34;</span><span class="synIdentifier"> </span><span class="synType">id</span><span class="synIdentifier">=</span><span class="synConstant">&#34;ajax&#34;</span><span class="synIdentifier"> </span><span class="synType">action</span><span class="synIdentifier">=</span><span class="synConstant">&#34;&#34;</span><span class="synIdentifier"> </span><span class="synType">name</span><span class="synIdentifier">=</span><span class="synConstant">&#34;ajax&#34;</span><span class="synIdentifier">&#62;</span>
Year: <span class="synIdentifier">&#60;</span><span class="synStatement">input</span><span class="synIdentifier"> </span><span class="synType">type</span><span class="synIdentifier">=</span><span class="synConstant">&#34;text&#34;</span><span class="synIdentifier"> </span><span class="synType">name</span><span class="synIdentifier">=</span><span class="synConstant">&#34;year&#34;</span><span class="synIdentifier">&#62;&#60;</span><span class="synStatement">br</span><span class="synIdentifier"> /&#62;</span>
Month: <span class="synIdentifier">&#60;</span><span class="synStatement">input</span><span class="synIdentifier"> </span><span class="synType">type</span><span class="synIdentifier">=</span><span class="synConstant">&#34;text&#34;</span><span class="synIdentifier"> </span><span class="synType">name</span><span class="synIdentifier">=</span><span class="synConstant">&#34;month&#34;</span><span class="synIdentifier">&#62;&#60;</span><span class="synStatement">br</span><span class="synIdentifier"> /&#62;</span>
<span class="synIdentifier">&#60;</span><span class="synStatement">input</span><span class="synIdentifier"> </span><span class="synType">type</span><span class="synIdentifier">=</span><span class="synConstant">&#34;submit&#34;</span><span class="synIdentifier"> </span><span class="synType">value</span><span class="synIdentifier">=</span><span class="synConstant">&#34;送信&#34;</span><span class="synIdentifier"> </span><span class="synSpecial">onclick=&#34;lwws</span>()<span class="synSpecial">&#34;</span><span class="synIdentifier">&#62;</span>
<span class="synIdentifier">&#60;/</span><span class="synStatement">form</span><span class="synIdentifier">&#62;</span>
<span class="synIdentifier">&#60;</span><span class="synStatement">p</span><span class="synIdentifier">&#62;</span>通信結果<span class="synIdentifier">&#60;/</span><span class="synStatement">p</span><span class="synIdentifier">&#62;</span>
<span class="synIdentifier">&#60;</span><span class="synStatement">div</span><span class="synIdentifier"> </span><span class="synType">id</span><span class="synIdentifier">=</span><span class="synConstant">&#34;result&#34;</span><span class="synIdentifier">&#62;&#60;/</span><span class="synStatement">div</span><span class="synIdentifier">&#62;</span>
<span class="synIdentifier">&#60;</span><span class="synStatement">address</span><span class="synIdentifier">&#62;</span>
<span class="synIdentifier">&#60;</span><span class="synStatement">a</span><span class="synIdentifier"> </span><span class="synType">href</span><span class="synIdentifier">=</span><span class="synConstant">&#34;mailto:simoom634@kazu634.local&#34;</span><span class="synIdentifier">&#62;</span><span class="synUnderlined">simoom634</span><span class="synIdentifier">&#60;/</span><span class="synStatement">a</span><span class="synIdentifier">&#62;</span>
<span class="synIdentifier">&#60;/</span><span class="synStatement">address</span><span class="synIdentifier">&#62;</span>
<span class="synIdentifier">&#60;/</span><span class="synStatement">body</span><span class="synIdentifier">&#62;</span>
<span class="synIdentifier">&#60;/</span><span class="synStatement">html</span><span class="synIdentifier">&#62;</span>
</pre>
<h4>
どんな問題が起きたの？
</h4>
<p>
通信結果の下の部分に結果が表示されるはずが、表示されませんでした。
</p>
<h4>
ログの状況・HTTPヘッダの様子
</h4>
<p>
/var/log/access.logの様子はこんな感じでした:
</p>
<blockquote>
<p>
192.168.11.4 &#8211; &#8211; [26/Jul/2009:23:03:35 +0900] &#8220;POST /~kazu634/cgi-bin/weekday.pl HTTP/1.1&#8221; 200 62 &#8220;<a href="http://srv634/~kazu634/db01.html" target="_blank">http://srv634/~kazu634/db01.html</a>&#8221; &#8220;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 (<a href="http://www.teesoft.info/" onclick="__gaTracker('send', 'event', 'outbound-article', 'http://www.teesoft.info/', 'http://www.teesoft.info/');" target="_blank">http://www.teesoft.info/</a>)&#8221;
</p>
</blockquote>
<p>
このログを見る限りはweekday.plにデータをpostしています。
</p>
<p>
が、しかし、実際に送信しているHTTPヘッダを覗いてみると
</p>
<blockquote>
<p>
POST /~kazu634/db01.html HTTP/1.1
</p>
<p>
Host: srv634
</p>
<p>
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 (<a href="http://www.teesoft.info/" onclick="__gaTracker('send', 'event', 'outbound-article', 'http://www.teesoft.info/', 'http://www.teesoft.info/');" target="_blank">http://www.teesoft.info/</a>)
</p>
<p>
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
</p>
<p>
Accept-Language: en-us,en;q=0.5
</p>
<p>
Accept-Encoding: gzip,deflate
</p>
<p>
Accept-Charset: Shift_JIS,utf-8;q=0.7,*;q=0.7
</p>
<p>
Keep-Alive: 300
</p>
<p>
Connection: keep-alive
</p>
<p>
Referer: <a href="http://srv634/~kazu634/db01.html" target="_blank">http://srv634/~kazu634/db01.html</a>
</p>
<p>
X-AutoPager: 0.5.2.2 (<a href="http://www.teesoft.info/" onclick="__gaTracker('send', 'event', 'outbound-article', 'http://www.teesoft.info/', 'http://www.teesoft.info/');" target="_blank">http://www.teesoft.info/</a>)
</p>
<p>
Content-Type: application/x-www-form-urlencoded
</p>
<p>
Content-Length: 18
</p>
<p>
year=2009&month=12
</p>
</blockquote>
<p>
となっていて、postしている先はHTMLページになっていた。これじゃあ、ダメだよね。。。
</p>
<h4>
何がいけなかったの？
</h4>
<p>
結局、以下の部分が悪かったようです:
</p>
<pre class="syntax-highlight">
<span class="synIdentifier">&#60;</span><span class="synStatement">form</span><span class="synIdentifier"> </span><span class="synType">method</span><span class="synIdentifier">=</span><span class="synConstant">&#34;post&#34;</span><span class="synIdentifier"> </span><span class="synType">id</span><span class="synIdentifier">=</span><span class="synConstant">&#34;ajax&#34;</span><span class="synIdentifier"> </span><span class="synType">action</span><span class="synIdentifier">=</span><span class="synConstant">&#34;&#34;</span><span class="synIdentifier"> </span><span class="synType">name</span><span class="synIdentifier">=</span><span class="synConstant">&#34;ajax&#34;</span><span class="synIdentifier">&#62;</span>
Year: <span class="synIdentifier">&#60;</span><span class="synStatement">input</span><span class="synIdentifier"> </span><span class="synType">type</span><span class="synIdentifier">=</span><span class="synConstant">&#34;text&#34;</span><span class="synIdentifier"> </span><span class="synType">name</span><span class="synIdentifier">=</span><span class="synConstant">&#34;year&#34;</span><span class="synIdentifier">&#62;&#60;</span><span class="synStatement">br</span><span class="synIdentifier"> /&#62;</span>
Month: <span class="synIdentifier">&#60;</span><span class="synStatement">input</span><span class="synIdentifier"> </span><span class="synType">type</span><span class="synIdentifier">=</span><span class="synConstant">&#34;text&#34;</span><span class="synIdentifier"> </span><span class="synType">name</span><span class="synIdentifier">=</span><span class="synConstant">&#34;month&#34;</span><span class="synIdentifier">&#62;&#60;</span><span class="synStatement">br</span><span class="synIdentifier"> /&#62;</span>
<span class="synIdentifier">&#60;</span><span class="synStatement">input</span><span class="synIdentifier"> </span><span class="synType">type</span><span class="synIdentifier">=</span><span class="synConstant">&#34;submit&#34;</span><span class="synIdentifier"> </span><span class="synType">value</span><span class="synIdentifier">=</span><span class="synConstant">&#34;送信&#34;</span><span class="synIdentifier"> </span><span class="synSpecial">onclick=&#34;lwws</span>()<span class="synSpecial">&#34;</span><span class="synIdentifier">&#62;</span>
<span class="synIdentifier">&#60;/</span><span class="synStatement">form</span><span class="synIdentifier">&#62;</span>
<span class="synIdentifier">&#60;</span><span class="synStatement">p</span><span class="synIdentifier">&#62;</span>通信結果<span class="synIdentifier">&#60;/</span><span class="synStatement">p</span><span class="synIdentifier">&#62;</span>
<span class="synIdentifier">&#60;</span><span class="synStatement">div</span><span class="synIdentifier"> </span><span class="synType">id</span><span class="synIdentifier">=</span><span class="synConstant">&#34;result&#34;</span><span class="synIdentifier">&#62;&#60;/</span><span class="synStatement">div</span><span class="synIdentifier">&#62;</span>
</pre>
<p>
この部分でtypeをsubmitにしていると、actionで指定した先にデータを送信する事になっている…らしいっす（今回の場合はactionに何も指定していないからこのページにデータを送信している…のでしょう）。以下のように変更することで解決しました:
</p>
<pre class="syntax-highlight">
<span class="synIdentifier">&#60;</span><span class="synStatement">form</span><span class="synIdentifier"> </span><span class="synType">method</span><span class="synIdentifier">=</span><span class="synConstant">&#34;post&#34;</span><span class="synIdentifier"> </span><span class="synType">id</span><span class="synIdentifier">=</span><span class="synConstant">&#34;ajax&#34;</span><span class="synIdentifier"> </span><span class="synType">action</span><span class="synIdentifier">=</span><span class="synConstant">&#34;&#34;</span><span class="synIdentifier"> </span><span class="synType">name</span><span class="synIdentifier">=</span><span class="synConstant">&#34;ajax&#34;</span><span class="synIdentifier">&#62;</span>
Year: <span class="synIdentifier">&#60;</span><span class="synStatement">input</span><span class="synIdentifier"> </span><span class="synType">type</span><span class="synIdentifier">=</span><span class="synConstant">&#34;text&#34;</span><span class="synIdentifier"> </span><span class="synType">name</span><span class="synIdentifier">=</span><span class="synConstant">&#34;year&#34;</span><span class="synIdentifier">&#62;&#60;</span><span class="synStatement">br</span><span class="synIdentifier"> /&#62;</span>
Month: <span class="synIdentifier">&#60;</span><span class="synStatement">input</span><span class="synIdentifier"> </span><span class="synType">type</span><span class="synIdentifier">=</span><span class="synConstant">&#34;text&#34;</span><span class="synIdentifier"> </span><span class="synType">name</span><span class="synIdentifier">=</span><span class="synConstant">&#34;month&#34;</span><span class="synIdentifier">&#62;&#60;</span><span class="synStatement">br</span><span class="synIdentifier"> /&#62;</span>
<span class="synIdentifier">&#60;</span><span class="synStatement">input</span><span class="synIdentifier"> </span><span class="synType">type</span><span class="synIdentifier">=</span><span class="synConstant">&#34;button&#34;</span><span class="synIdentifier"> </span><span class="synType">value</span><span class="synIdentifier">=</span><span class="synConstant">&#34;送信&#34;</span><span class="synIdentifier"> </span><span class="synSpecial">onclick=&#34;lwws</span>()<span class="synSpecial">&#34;</span><span class="synIdentifier">&#62;</span>
<span class="synIdentifier">&#60;/</span><span class="synStatement">form</span><span class="synIdentifier">&#62;</span>
<span class="synIdentifier">&#60;</span><span class="synStatement">p</span><span class="synIdentifier">&#62;</span>通信結果<span class="synIdentifier">&#60;/</span><span class="synStatement">p</span><span class="synIdentifier">&#62;</span>
<span class="synIdentifier">&#60;</span><span class="synStatement">div</span><span class="synIdentifier"> </span><span class="synType">id</span><span class="synIdentifier">=</span><span class="synConstant">&#34;result&#34;</span><span class="synIdentifier">&#62;&#60;/</span><span class="synStatement">div</span><span class="synIdentifier">&#62;</span>
</pre>
</div>