独学でプログラミングを始め、最近ではWeb系の勉強を始めました。
JavaScriptという言語とHTMLの勉強をしています。
そこで、どうしてもわからない事があります。
色々とネットで検索をしてみたのですが、私の理解力がないのか回答を見つけることができません。
どうか教えてください。
JavaScriptで他のサーバにあるCGIにデータを渡す方法です。
JavaScriptでHTMLの「Get」や「Post」のような機能があれば、できるのではないか、と考えたのですが、リファレンスを見ても、「Get」や「Post」はありませんでした。
JavaScriptにはそのような機能はないのでしょうか?
Ajaxという機能があるようなのですが、その機能を使うしか方法はないのでしょうか?
Ajaxも勉強したいと思っているので、方法があれば、ぜひ教えてください。
No.2ベストアンサー
- 回答日時:
> 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を切り替えれ倍李のでしょうか?
どうか教えてください。
No.6
- 回答日時:
クロスドメインのサイトの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>
=======================================================
ご回答ありがとうございます!
コードを書いて頂き、とても勉強になります。
頂いたコードを読むにも少々お時間を頂いてしまいそうです・・・。
まずはお礼を言わせて頂きます。
本当にありがとうございました!!
また、みなさまから多くのご回答を頂き、まだまだ全てが理解できていない状態です。(本当にごめんなさい)
このような素人に、丁寧なご回答を本当にありがとうございました。
まずは頂いたご回答を理解して、それからソースを書くことにいたします。
本当にどうもありがとうございました。
No.5
- 回答日時:
状況がイメージしにくいので想像を交えながら。
あるイベントが発生した時に送信が行われるようにすると仮定して、以下のようなサンプルを作ってみました。
下の方が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>
この回答への補足
ご回答ありがとうございます!
とても詳細にコードを書いていただき、大変勉強になります。
イベント等についてはまだまだ分からない事が多く、
色々と調べながらコードを読ませて頂きたいと思います。
それには時間がかかりそうなので、先にお礼を言わせて頂きます。
本当にありがとうございました。
No.4
- 回答日時:
お尋ねの内容が今一わからないのですが、フォームを使わないなら
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」で、パラメータを連結すればいいんですね。
とてもわかりやすいです!
早速やってみたいと思います。
ありがとうございました!!
No.3
- 回答日時:
>CGIにデータを渡したいけど、ページはリロードしたくないんです・・・。
>違うサーバの違うドメインなので、Ajaxは使えないんですね。
なぜ使えないかを考えれば答えは自明ですね。
セキュリティに問題があるからです。
そのセキュリティ対策をくぐろうとしているのと同意です。
そもそも他のページにデータを渡して、ページの切り替えがないというのは
あるいみ詐欺みたいなもんです。
もしどうしても必要ということであればサーバー側の言語をつかって
ブリッジしてくれるようものを書けばよいでしょう。
javascriptでの限界と言うよりは、セキュリティ面での限界ですので・・・
No.1
- 回答日時:
(1)ajaxであればダイレクトにアクセス可能です
(2)DOMをつかってformをダイレクトに操作して新ページに飛ぶ方法もあります
べつにjavascriptでやる必要もなく単にhtmlのformで
データの受け渡しは十分可能です
この回答への補足
ご回答ありがとうございます!!
説明が不十分でした、ごめんなさい。
JavaScriptの処理の分岐の中でCGIを呼び出したいので、
HTMLでは出来ないのではないかと考えています。
しかも、CGIにデータを渡したいけど、ページはリロードしたくないんです・・・。
素人なので、簡単に考えていたのですが、やはり難しいことなのですね。
やはりAjaxを使った方がいいのでしょうか。。。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Instagram HTML5の廃止とJavaScript 2 2022/04/13 21:05
- その他(プログラミング・Web制作) 次に、楽天のアジャイル就活に参加して、1日で内定を獲得できる。私は大企業に就職できる? 2 2022/04/17 13:38
- MySQL MySQL,JavaScript,PHPコードの結果を表示する方法を教えてください。 1 2023/02/13 17:49
- JavaScript Q&Aの掲示板を作成していてヤフー知恵袋やgoo質問のように質問ごとにURLを生成したい 5 2023/08/04 01:22
- AJAX Pythonを勉強する道のり 1 2023/08/11 20:04
- その他(プログラミング・Web制作) WEBアプリ開発に必要な言語 5 2023/06/28 16:57
- JavaScript Javascriptで出来ること 1 2022/05/16 20:19
- アプリ Webやアプリの制限が可能なWindowsアプリケーション 4 2022/11/10 12:13
- その他(プログラミング・Web制作) プログラムの勉強のおすすめは 7 2022/12/09 20:09
- JavaScript javaScriptで画面に値を入れるには 1 2022/08/14 12:27
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
【Javascript】(テキストボッ...
-
TextBoxに半角数字以外を入れた...
-
フォームの内容でリンク先URLの...
-
プルダウンで選択された値を別...
-
jQueryのdatepickerの日付が選...
-
javascriptのちょっとした動作...
-
JSPでonChangeを強制発行するに...
-
フォームのPOSTデータをサブウ...
-
ページ間で変数を保持したい
-
マイナスなら赤字で表示したい...
-
FireFoxでfocus()が上手く動かない
-
onBlurのイベントを使ってデー...
-
カーソルが当たった箇所に吹き...
-
ユーザー入力値の正誤判定をブ...
-
IE上のカーソル位置に文字列を...
-
GetElementByIdがうまく取得で...
-
return trueとreturn falseの用...
-
<JavaScript>tableタグを入力不...
-
【jQuery】input nameの文字列...
-
onchangeイベントを強制的に発...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
TextBoxに半角数字以外を入れた...
-
ページ間で変数を保持したい
-
HTMLファイル同士での値渡し
-
tabindexの取得
-
プルダウンで選択された値を別...
-
マイナスなら赤字で表示したい...
-
フォームの内容でリンク先URLの...
-
テキストエリアに履歴を残したい
-
テキストボックスに入力した色...
-
イベント発生順序
-
どちらかひとつのテキストボッ...
-
HTMLとJavaScriptで作った表示...
-
VBSからjavascript
-
GetElementByIdがうまく取得で...
-
大文字か小文字かを判断する方法
-
JSPでonChangeを強制発行するに...
-
VBScriptでpingを実行(ブラウザ...
-
javascriptのちょっとした動作...
-
VBscriptの配列変数をJavascrip...
-
画像の表示非表示について質問です
おすすめ情報