« Ajaxで出来ないこと（１） | メイン | 紫朋ノ心 »
2005年8月24日
広島っぷ、危うし！？
広島っぷに好敵手が現れた！新潟マップ書き込め～るだ。
向こうはそんなつもりはないかもしれないが、
こちらから見れば明らかにやりたいことがかぶってる！
全く同じではないが、そんな細かいことはどうでもいい。
というか、パクられてる（？）などと思いつつも、
せっかくなので、こちらも対抗して、書き込めるようにしてみた。
データの送信にもこだわって、Ajaxにしてみた。
今回は、Google Maps API のXMLHttpを利用した。
もちろん、自前のAjaxエンジンとかあればそちらでも構わない。
新潟マップでも送信をAjaxで実行しようとしていたので、
敵に塩を送ることになるが、送信部分のみをさらしてみる。
Form の名前は frm としてます。自分のサイトに合わせて変えてくださいね。
まず、フォームfrmの内容から送信する文字列を作成します。
別に違う方法でも良いけど、まぁ参考までに。
この時に、入力チェックをしておくのも良い。
ちなみに、広島っぷではここに来る前に入力チェックは済ませています。
次に、"XMLHttpRequest"を使えるようにします。
その後、いつものように実行するのですが、
上記のように、"xxx.cgi?mode=xxx"のようにしておくと、
"mode"の値は"Get"データとして受け取れます。
次に、
なので、必須かもね。
データの内容は"POST"データで受け取れます。
送信後、なんらかのデータが返ってきて、それを表示する場合には、
今回は、Google Maps API のXMLHttpを利用した。
もちろん、自前のAjaxエンジンとかあればそちらでも構わない。
新潟マップでも送信をAjaxで実行しようとしていたので、
敵に塩を送ることになるが、送信部分のみをさらしてみる。
Form の名前は frm としてます。自分のサイトに合わせて変えてくださいね。
まず、フォームfrmの内容から送信する文字列を作成します。
別に違う方法でも良いけど、まぁ参考までに。
この時に、入力チェックをしておくのも良い。
ちなみに、広島っぷではここに来る前に入力チェックは済ませています。
var data = new String();
for( var i = 0 ; i < document.frm.elements.length ; i++ ){
if( !document.frm.elements[i].disabled ){
data += "&";
data += document.frm.elements[i].name;
data += "=";
data += document.frm.elements[i].value;
}
}
if( data.length > 0 ){
data = data.substring(1);
} else{
window.alert("POSTするデータがありません。")
return false;
}
for( var i = 0 ; i < document.frm.elements.length ; i++ ){
if( !document.frm.elements[i].disabled ){
data += "&";
data += document.frm.elements[i].name;
data += "=";
data += document.frm.elements[i].value;
}
}
if( data.length > 0 ){
data = data.substring(1);
} else{
window.alert("POSTするデータがありません。")
return false;
}
次に、"XMLHttpRequest"を使えるようにします。
var request = GXmlHttp.create();
その後、いつものように実行するのですが、
request.open("POST", "xxx.cgi?mode=xxx", true);
のように、"POST"にしておきます。上記のように、"xxx.cgi?mode=xxx"のようにしておくと、
"mode"の値は"Get"データとして受け取れます。
次に、
request.setRequestHeader("Content-Type" , "application/x-www-form-urlencoded");
と記述しておかないと、動かないブラウザがあるようです。なので、必須かもね。
request.send(data);
で、最初に作成した文字列データを送信します。データの内容は"POST"データで受け取れます。
送信後、なんらかのデータが返ってきて、それを表示する場合には、
if (request) {
request.onreadystatechange = function() {
if (request.readyState == 4 && request.status == 200) {
var xmlDoc = request.responseXML;
以下略
}
}
request.open("POST", "xxx.cgi?mode=xxx", true);
request.setRequestHeader("Content-Type" , "application/x-www-form-urlencoded");
request.send(data);
}
とかやっても良いですよ。request.onreadystatechange = function() {
if (request.readyState == 4 && request.status == 200) {
var xmlDoc = request.responseXML;
以下略
}
}
request.open("POST", "xxx.cgi?mode=xxx", true);
request.setRequestHeader("Content-Type" , "application/x-www-form-urlencoded");
request.send(data);
}
投稿者 ponpon : 2005年8月24日 10:17 | 【Ajax】
トラックバック
◇重複トラックバックはこっそり削除しますのでお気になさらないでください。
◇トラックバックスパムと判断しましたらサックリ削除いたしますのでご了承ください。
このエントリーのトラックバックURL:
コメント
はじめまして、広島っぷを見てかなり勉強させてもらいました。送信部分のスクリプトありがとうございます。早速使わせてもらいます。
投稿者 syachonosaru@新潟マップ書き込め～る管理人 : 2005年8月27日 20:54
無事送信部分が出来ると良いのですが。
こちらとしては、新潟マップには随分と刺激を受け、
創作意欲が沸きました。
しかし、すでに意欲も萎えてきたので、
また何か、意欲の沸きそうなものをお願いします（笑）
投稿者 ponpon : 2005年8月29日 13:02
