アプリ版：「スタンプのみでお礼する」機能のリリースについて

【javascript文法】　prototype.js Ajax.Request　onSuccess:に指定するfancitonの書き方

解決済

  • 質問者：kingfruits
  • 質問日時：
  • 回答数：2件

以下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
でしており、この『応用』だとも思うのですが、名案浮かばずです。

このような場合、どう記述するのがベターなのでしょうか？
よろしくお願いいたします。

通報する

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

質問の本文を隠す

A 回答 (2件)

No.2ベストアンサー

  • 回答者： Werner
  • 回答日時：

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ファイルで動作確認できますよ。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご回答ありがとうございます。

Wernerさん。　いつも本当にありがとうございます。

私もその後、いろいろ調べて、
self=this;
を以下の前で定義して解決してる人がいました。
onSuccess: function(h){self.processRequest(h,1);}

＞HTMLファイルやTEXTファイルで動作確認できますよ。
そうですね！！　気が付きませんでした。

通報する
お礼日時：2009/01/29 20:11

No.1

  • 回答者： Werner
  • 回答日時：

ええと、こういう場合もあるからと言うことで


前の質問で参考URLを提示しておいたのですが見ましたか？

prototype.jsを使ってるならbindを使うのが一番良いでしょうね。
というか使わないなんてもったいない。
    • good
    • 0
    • 件
通報する
この回答へのお礼

すみません。。　一応読んだのですが。。

＞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();

どうも、お世話になりました。

通報する
お礼日時：2009/01/29 20:22

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

Q質問する（無料）

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

Q質問する（無料）

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

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

おすすめ情報