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

188 lines
18 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

---
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>
Reference in New Issue View Git Blame Copy Permalink