以下HTMLは開いた時に'2'がアラート、続いて'hello world'がアラートされるものです。
動作的には期待どおりに動きますが、記述方法に難を感じています。
課題としては、Ajax.RequestのonSuccess:に指定するfancrionをprototypeを使って
宣言したfunctionで且つ、引数を与えたいです。
(Ajax.Requestが返してくる引数も使いたい。) 表現が下手ですみません。
※行頭は全角スペースです。実際に機能させる為には
半角に修正もしくは行頭スペースは削除して下さい。
<html>
<head>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript"><!--
function http(){
this.val=1;
};
http.prototype.request = function(){
var url="/ruby/hello.cgi"; //実際に検証する為にはwebサーバにこのcgiを置く必要あり
new Ajax.Request(url, {
method:"get",
onSuccess: function(h){r.processRequest(h,1);}
/* ↑http.prototype.requestの中なので、r.ではなくthis.processRequest(h,1)と記述したい*/
});
};
http.prototype.processRequest = function(h,arg){
alert(this.val+arg);
alert(h.responseText);
};
var r = new http();
r.request();
//--></script>
</head>
<body></body>
</html>
以下"/ruby/hello.cgi"の例
#!/usr/bin/ruby
puts "Content-Type: text/html\n\n"
puts "hello world"
※実際に実行する場合はprototype.jsが必要です。
これで、期待通りの結果が得られるのですが、コメントに記載したように、
http.prototype.request = function()の中でonSuccess:に指定する関数が、
this.と記述できず、r.と記述しないと動作しません。
http.prototype.request = function()の中で、
~~~~~~~~~~~~~~
http.prototype.processRequest = function(h,arg)
~~~~~~~~~~~~~~
を使うのですから、
r.processRequest(h,1)ではなく、
~
this.processRequest(h,1)
~~~~
と記述したいです。
因みに同じような質問を
http://oshiete1.goo.ne.jp/qa4663141.html
でしており、この『応用』だとも思うのですが、名案浮かばずです。
このような場合、どう記述するのがベターなのでしょうか?
よろしくお願いいたします。
No.2ベストアンサー
- 回答日時:
bindでOKと言っておきながら動かなかったらあれなのでちょっと試してみました。
関数processRequestを変更しないのであれば、
onSuccess: this.processRequest.bindAsEventListener(this,1)
で動くと思います。
関数processRequestの引数の順序を
http.prototype.processRequest = function(arg,h){
と変更すれば、
onSuccess: this.processRequest.bind(this,1)
で動くと思います。
余談ですが、
> var url="/ruby/hello.cgi"; //実際に検証する為にはwebサーバにこのcgiを置く必要あり
ちょこっと実験するだけならcgiスクリプト作らなくても
HTMLファイルやTEXTファイルで動作確認できますよ。
ご回答ありがとうございます。
Wernerさん。 いつも本当にありがとうございます。
私もその後、いろいろ調べて、
self=this;
を以下の前で定義して解決してる人がいました。
onSuccess: function(h){self.processRequest(h,1);}
>HTMLファイルやTEXTファイルで動作確認できますよ。
そうですね!! 気が付きませんでした。
No.1
- 回答日時:
ええと、こういう場合もあるからと言うことで
前の質問で参考URLを提示しておいたのですが見ましたか?
prototype.jsを使ってるならbindを使うのが一番良いでしょうね。
というか使わないなんてもったいない。
すみません。。 一応読んだのですが。。
>prototype.jsを使ってるならbindを使うのが一番良いでしょうね。
>というか使わないなんてもったいない。
baindで気持ちよく書けました。
(ついでにprototype.jsぽく直しました)
var http = Class.create();
http.prototype = {
initialize: function(){
this.val=1;
this.url="/ruby/hello.cgi";
},
request: function(){
new Ajax.Request(this.url, {
method:"get",
onSuccess: this.processRequest.bind(this,1)
});
},
processRequest: function(arg,h){
alert(this.val+arg);
alert(h.responseText);
}
};
var r = new http();
r.request();
どうも、お世話になりました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript javascriptのちょっとした動作不良(原因は突き止めたのですが) 1 2023/06/15 19:58
- JavaScript javascript作成してます。ラジオボタンで判定するコードを書いてます。 1 2023/07/18 11:03
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript GoogleChart 階層ごとのブロックの長さを個別に設定したい 1 2022/07/06 14:27
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 1 2022/07/27 17:18
- その他(プログラミング・Web制作) laravel 本番環境でメールが送れません。 1 2023/02/17 17:57
- JavaScript セレクトボックスを2つ設けて選択して初めてメッセを表示 1 2022/07/27 12:15
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
バッチファイル 特定ウインドウ...
-
PDFを(htmlのように)無限に縦...
-
スライドを最後の画像で止めたい
-
入力フォームの値をQRコードで...
-
RPA(PowerAutomate)の実装について
-
jQueryを使いformでsubmitした...
-
ダブルクリックと2回クリックの...
-
Googleマップで何か見つけたも...
-
VBA コンボボックスの値をスピ...
-
JQuery、セレクトボックスをル...
-
GASでスプレッドシートの一番上...
-
二つのbxsliderをレスポンシブ...
-
以下のURL入れますか?皆さんは↓
-
画像のドットの部分が抜けてい...
-
Chinapost こよパズルどう動か...
-
非同期通信で掲示板を作る際の...
-
非同期通信を使うタイミングが...
-
PYTHONのtkinterについて
-
Pythonのtkinterについて
-
Pythonを勉強する道のり
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
jqueryのgetでJSPを呼び出したい
-
要素内を常に一番下を表示させたい
-
【javascript文法】 prototype...
-
ローカルでのonreadystatechang...
-
jQueryで、複数条件の絞り込み機能
-
JQueryでAjax通信をキャンセル...
-
画面移遷なしで画像アップロー...
-
jqueryでリンクを無効にしたあ...
-
jqueryについて
-
繰り返し処理のシンプルな書き方
-
ある条件の画像のみ表示を切り...
-
jQuery 並列load処理
-
アコーディオンメニューについて
-
jqueryの関数?について
-
jqueryで読み込みが終わった画...
-
jQueryでloadしたページ内でもj...
-
jqueryで特定のIDに対して
-
AJAXでのリロードに関して
-
jqueryでテキストエリア監視に...
-
ドラッグ & ドロップでのド...
おすすめ情報