プロが教えるわが家の防犯対策術！

JavaScriptでＣＧＩの呼出し・・・???

解決済

  • 質問者：empuru
  • 質問日時：
  • 回答数：6件

独学でプログラミングを始め、最近ではＷｅｂ系の勉強を始めました。
JavaScriptという言語とHTMLの勉強をしています。
そこで、どうしてもわからない事があります。
色々とネットで検索をしてみたのですが、私の理解力がないのか回答を見つけることができません。
どうか教えてください。

JavaScriptで他のサーバにあるCGIにデータを渡す方法です。

JavaScriptでHTMLの「Get」や「Post」のような機能があれば、できるのではないか、と考えたのですが、リファレンスを見ても、「Get」や「Post」はありませんでした。

JavaScriptにはそのような機能はないのでしょうか？
Ajaxという機能があるようなのですが、その機能を使うしか方法はないのでしょうか？
Ajaxも勉強したいと思っているので、方法があれば、ぜひ教えてください。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (6件)

No.6

  • 回答者： yyr446
  • 回答日時：

クロスドメインのサイトのCGIにAJAXを使わずに、データをPOSTで送り、


さらに結果を返してもらう例です。
　JOSONPスクリプトタグアクセスの変形です。ダミーの<iframe>タグを<form>のtargetにして、JSON形式でデータを受け取り、コールバック関数で処理します。
＜サンプルコーディング＞
※hoge.phpに変数xとyを送り、CGIで加工した結果をrecive_data.xとrecive_data.yで受け取ります。
※下のt_netbugさんの例の様に<form>の中身をDOMで生成する事も可能です。
================================================================
（送り側.htmのソース）
<html>
<head>
<script type="text/javascript">
//<![CDATA[
function Main(){
if(条件){
send_cgi("aaa",999);
}
function send_cgi(xx,yy){
document.getElementById("sendform").action = "http://hogehoge/cgi/hoge.php"
document.getElementById("data1").value = xx;
document.getElementById("data2").value = yy;
document.sendform.submit();
}
/*
以下がコールバック関数となります。CGIからiframeに返されるhtmlの
javascript内で、parent.ReciveData(引数);とコールされます。
*/
function ReciveData(data){
recive_data=eval("(" + data + ")");
//alert(recive_data.toSource());　//デバッグ(IEは不可)
alert(recive_data.x);
alert(recive_data.y);
}
}
//]]>
</script>
</head>
<body onload="Main()">
<form name="sendform" id="sendform" action="#"
target="result" method="post" >
<input type="text" id="data1" name="data1" size="10" value="" />
<input type="text" id="data2" name="data2" size="10" value="" />
</form>
<iframe id="result" name="result" height="0" width="0" frameborder="0" >
</iframe>
</body>
</html>

========================================================
以下は、受け取り側のCGIプログラム（PHP）の中身です
（hoge.phpのソース）
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" />
<?php
//POSTで受け取ったデータを変数に取り込みます。
$xx = $_POST["data1"];
$yy = $_POST["data2"];
//以下はデータの加工です。
$x = $xx . "bbb";
$y = $yy * 10 ;
//返すデータをJSON形式にします。
$data = "{\"x\":$x,\"y\":$y}";
?>
<script type="text/javascript">
/*
以下が送信元のコールバック関数の呼び出しです。
このhtmlのbodyのonload指定で自動的に実行します。
*/
function ReturnData(){
parent.ReciveData(<?php $data ?>);
}
</script>
</head>
<body onload="ReturnData();">
</body>
</html>
=======================================================
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご回答ありがとうございます！
コードを書いて頂き、とても勉強になります。
頂いたコードを読むにも少々お時間を頂いてしまいそうです・・・。
まずはお礼を言わせて頂きます。
本当にありがとうございました！！

また、みなさまから多くのご回答を頂き、まだまだ全てが理解できていない状態です。(本当にごめんなさい)
このような素人に、丁寧なご回答を本当にありがとうございました。
まずは頂いたご回答を理解して、それからソースを書くことにいたします。
本当にどうもありがとうございました。

通報する
お礼日時：2008/10/23 15:52

No.5

  • 回答者： t_netbug
  • 回答日時：

状況がイメージしにくいので想像を交えながら。


あるイベントが発生した時に送信が行われるようにすると仮定して、以下のようなサンプルを作ってみました。
下の方がGETで送る方法を提示していらっしゃるので、自分はPOSTを使ったサンプルになります。
下記ではテキストボックス欄に半角でaが入力されると送信フォームを生成し、submitを行います。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title></title>
<script type="text/javascript">
<!--
function chk(e){
//送信したいパラメータ
params={
'input1':'test1',
'input2':'test2',
'input3':'あああ'
};
if(event.keyCode==65){ //aが押された時
makeForm(params); //formを生成してsubmitする関数を呼び出す
}
}
/** formを生成し、submitする関数
* 引数に送信したいパラメータを連想配列形式で渡す
*/
function makeForm(params){
var forms= document.createElement('form');
forms.method="POST";
forms.action="http://localhost/";
for(tinparams){
var request =document.createElement('input');
request.name = t;
request.value = params[t];
request.type = 'hidden';
forms.appendChild(request);
}
document.getElementsByTagName('body')(0).appendChild(forms);
//↓デバッグ用、いらなきゃ消して下さい
alert(document.getElementsByTagName('body')(0).innerHTML);
forms.submit(); //submit
}
// -->
</script>
</head>
<body>
<input type="text" id="test" onkeydown="javascript:chk();" />
</body>
</html>

この回答への補足

ご回答ありがとうございます！
とても詳細にコードを書いていただき、大変勉強になります。
イベント等についてはまだまだ分からない事が多く、
色々と調べながらコードを読ませて頂きたいと思います。
それには時間がかかりそうなので、先にお礼を言わせて頂きます。
本当にありがとうございました。

補足日時：2008/10/23 15:43
通報する
    • good
    • 0
    • 件
通報する

No.4

  • 回答者： yyr446
  • 回答日時：

お尋ねの内容が今一わからないのですが、フォームを使わないなら


JavaScriptで
function data_send(xx,yy){
location.href="http://hogehoge/cgi/hoge.php?&X=" + xx + "&Y=" + yy;
}
で渡すのはだめなのですか？GETと同じだと思うのですが？
CGIから受け取るには、工夫がいります.
JSONPで、<script>とか<iframe>とか<img>に取り込めますが、
同期は無理です。
（SOAPで通信するという方法もあります。）

この回答への補足

ご回答ありがとうございます！
「location.href」で、パラメータを連結すればいいんですね。
とてもわかりやすいです！
早速やってみたいと思います。
ありがとうございました！！

補足日時：2008/10/23 15:39
通報する
    • good
    • 0
    • 件
通報する

No.3

  • 回答者： yambejp
  • 回答日時：

>CGIにデータを渡したいけど、ページはリロードしたくないんです・・・。



>違うサーバの違うドメインなので、Ajaxは使えないんですね。

なぜ使えないかを考えれば答えは自明ですね。
セキュリティに問題があるからです。
そのセキュリティ対策をくぐろうとしているのと同意です。

そもそも他のページにデータを渡して、ページの切り替えがないというのは
あるいみ詐欺みたいなもんです。

もしどうしても必要ということであればサーバー側の言語をつかって
ブリッジしてくれるようものを書けばよいでしょう。
javascriptでの限界と言うよりは、セキュリティ面での限界ですので・・・
    • good
    • 0
    • 件
通報する

No.2ベストアンサー

  • 回答者： taloo
  • 回答日時：

> JavaScriptで他のサーバにあるCGIにデータを渡す方法です。


他のサーバーの同じドメインなのか、他のサーバーの別のドメインなのかで対処法は変わります。


別のドメインであればAjaxは使えません。（同じサーバーでも別のサーバーでも使えません）
DOMを使ってscriptエレメントを生成し、src属性にデータを付加して、ドキュメントに挿入するか（いわゆるJSONP）
<form>を使って送信する必要があります。
送信して終わり（受信なし）であれば、Imageオブジェクトのsrcプロパティかimgエレメントのsrc属性に付加することでも送信できます。
<form>のtargetをインラインフレームやopen()で開いたウインドウにしておけば、バックグラウンドで（非同期で）送信することもできます。（というか非同期を強制されます）

同一ドメインならAjax、JSONP、<form>、<img>のどれでも可能です。（同じサーバーでも別のサーバーでも使えます）

> JavaScriptでHTMLの「Get」や「Post」のような機能があれば、できるのではないか、と考えたのですが、リファレンスを見ても、「Get」や「Post」はありませんでした。
JavaScriptの前提知識としてHTMLの内容は必須ですので、そのようなことを解説しているリファレンスはないと思います。
三角関数を解説しているところで足し算やかけ算の仕方を解説しているところがないのと同じです。

HTMLのformの項目、およびCGIの受信処理に関しての項目に詳しく書かれていると思います。
（リファレンスによっては書かれていないこともあります）

この回答への補足

とても詳しいご回答をありがとうございます！！
まだまだ不勉強で、大変初歩的な事もわかっていなかったのですね・・・。

違うサーバの違うドメインなので、Ajaxは使えないんですね。
さっそく、HTMLのformを検索し、調べてみました。
そこで、厚かましいのですが、再度質問させてください。

CGIに渡したい情報はJavaScriptの変数の中に入っています。
また、JavaScriptのif文の中でCGIを呼び出したいと思っています。
その場合、どうやってJavaScriptとHTMLを切り替えれ倍李のでしょうか？

どうか教えてください。

補足日時：2008/10/22 21:25
通報する
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： yambejp
  • 回答日時：

(1)ajaxであればダイレクトにアクセス可能です


(2)DOMをつかってformをダイレクトに操作して新ページに飛ぶ方法もあります

べつにjavascriptでやる必要もなく単にhtmlのformで
データの受け渡しは十分可能です

この回答への補足

ご回答ありがとうございます！！
説明が不十分でした、ごめんなさい。
JavaScriptの処理の分岐の中でCGIを呼び出したいので、
HTMLでは出来ないのではないかと考えています。

しかも、CGIにデータを渡したいけど、ページはリロードしたくないんです・・・。
素人なので、簡単に考えていたのですが、やはり難しいことなのですね。
やはりAjaxを使った方がいいのでしょうか。。。

補足日時：2008/10/22 17:37
通報する
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

このQ&Aを見た人はこんなQ&Aも見ています

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

このQ&Aを見た人がよく見るQ&A

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報