【Javascript文法】prototype.js Ajax.Request onSuccess:に指定するfunctionの書き方
- 質問文章では、Ajax.RequestのonSuccess:に指定するfunctionをprototypeを使って宣言したいという課題があります。
- 具体的には、Ajax.Requestが返してくる引数も使いたいため、this.processRequest(h,1)のように書きたいとのことです。
- このような場合、どのように記述するのがベターなのか、アドバイスを求めています。
- ベストアンサー
【javascript文法】 prototype.js Ajax.Request onSuccess:に指定するfancitonの書き方
以下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 でしており、この『応用』だとも思うのですが、名案浮かばずです。 このような場合、どう記述するのがベターなのでしょうか？ よろしくお願いいたします。
- 小林 K太郎（@kingfruits）
- お礼率66% (211/319)
- AJAX
- 回答数2
- ありがとう数11
- みんなの回答 （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ファイルで動作確認できますよ。
その他の回答 (1)
- Werner
- ベストアンサー率53% (395/735)
ええと、こういう場合もあるからと言うことで 前の質問で参考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
- [prototype.js] Ajax.Requestの取得データをコールバック関数外で取得する方法
下記のコードを実行すると、 'undefined' 'hello' と表示されます。 （A）の箇所でグローバル変数gTestに'hello'が格納されている事を期待するのですが、undefinedとなります。 どういった理由でこうなるのでしょうか？ また、onCompleteで定義した処理内で、 値をグローバル変数に格納するにはどのような方法がありますか？ 何卒よろしくお願い致します。 -- <script src="/js/prototype.js" type="text/javascript"></script> <script type="text/javascript"> var gTest; function load() { new Ajax.Request('http://～/', { method: 'get', onComplete: displayData }); alert(gTest); //（A）undefinedと表示 } function displayData(httpObj) { gTest = 'hello'; alert(gTest); //（B）helloと表示 } load(); </script> --
- ベストアンサー
- JavaScript
- トリッキーなJSの文法（prototype.jsなど）が分かりません
Ajaxの「prototype」( http://www.prototypejs.org/ )などで 下記のようなfunctionの記述方法をよく見かけます。 ▼Prototype.js（ver1.5.0） 20行目抜粋 ---------------------------------------- var Class = { create: function() { return function() { this.initialize.apply(this, arguments); } } } -------------------------------------------- でも、私には高度すぎて以下の点がどうしても読み解けません。 （1）var Class = {～～～～～～} が、何をしているのか分かりません。 配列なら[ ]ですし関数か何かを省略した宣言の記述方法なのでしょうか？ （2）create: が何なのか分かりません。必死で調べたら型を宣言しているような感じでしたが、 見慣れない「：」を使ったプログラムで検討もつきません。 私が知っているfunction宣言はこの2パターンのみしか知りません。 ・一般的なfunction宣言 function test(hikisu){ //処理内容 } ・無名関数でのfunction宣言 var a = function(x) { //処理内容 } ぜひ教えていただけませんでしょうか。 どうぞよろしくお願いします。
- ベストアンサー
- JavaScript
- 【javascript】prototypeを使って宣言したfunctionでthis.の値が取れない
以下HTMLは開いた時に'aaa'がアラートされるつもりで作りました。 ※行頭は全角スペースです。 <html> <head> <script type="text/javascript"><!-- function hoge(){ this.val ='aaa'; }; hoge.prototype.func = function(){ alert(this.val); }; h = new hoge(); if(window.addEventListener){ window.addEventListener('load', h.func, false); }else{ window.attachEvent('onload', h.func); } //--></script> </head> <body> </body> </html> 結果は、undifindがアラートされました。 alert(this.val); を alert(h.val); とベタに記述すれば回避できますが、ちょっと違和感を感じます。 このような場合、どのような記述がベターなのでしょうか？
- ベストアンサー
- JavaScript
- prototype.jsのAjax.Requestでeventを引数にしたのですが
prototype.jsのAjax.Requestといつ便利な関数がありますが onComplete時の引数にeventオブジェクトを設定したらIE7では eventオブジェクトが引き継げませんでした。 たとえばこのようなメソッドで function ajax_request(url, params, method, ele1, ele2){ var nt = new Date(); var pr = params + "&nt=" + nt.getTime(); var a = new Ajax.Request( url, { method: "get", parameters: pr, onComplete: function(request){ method(request, ele1, ele2); } } ) }; ele1にeventオブジェクトを設定し、methodを実行しても デバックで、ele1.typeが何も表示されませんでした。 firefox2.0だと「click」など正しく表示もされオブジェクトが引き継がれておりました。 何が問題なのでしょうか？それともIE7ではeventオブジェクトを引き継ぐことは出来ないのでしょうか？
- 締切済み
- JavaScript
- prototypeでajaxをする時に、onSuccessで指定した関数の戻値を取得する方法
こんにちは、Ajax初心者です。 prototypeでAjaxをする時に、 new Ajax.Request(url, { method: 'get', onSuccess: getDat, onFailure: showErrMsg, parameters: paramList }); と言う風に書きますが、通信が成功した時に実行されるonSuccessのgetDataと言う関数の戻値を取得したいのですが、どうすればよいのでしょうか？ 自分なりに調べてみると、prototypeのbindを使えばいけそうな感じなのですが、bindの使い方も良く分かりません(いろいろ調べてみたのですが、、、)。どうか詳しい方お願いします。
- 締切済み
- JavaScript
- ｊｓ プロトタイプ
javascriptソースコード <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>サンプル</title> </head> <body> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script src="fastclick.js"></script> <script> function print(str){ document.write(str + "<br />"); } function Car(manufact, name){ this.manufact = manufact; this.name = name; } Car.prototype.info = function(){return this.manufact + " " + this.name;}; document.write("<p>"); var car1 = new Car("Toyota", "PRIUS"); print(car1.info()); var car2 = new Car("Honda", "INSIGHT"); print(car2.info()); document.write("</p>"); </script> </body> </html> 23行目なのですが「 Car.prototype.info 」とありますがｊｓにおいてプロトタイプはオブジェクトだという事は認識しておりますがプロトタイプを宣言する意味は何があるのでしょうか？ 参考urlです。 http://www.ajaxtower.jp/js/function_class/index3.html
- ベストアンサー
- JavaScript
- Ajaxのエンコードで
私はshift_JISで作成したCGIのページがあるのですが、 Ajaxを導入しようとしたときに、Ajaxというか Javascriptでは、utf-8しか認識しないととあるサイトに書いてあったのですが、 そのCGIのページをphpに変更するにはものすごく多大な時間が 必要になってしまうんですが、CGIをutf-8仕様にするのも大変です AjaxでShift_JISに変換するような事はできませんでしょうか？ http://javascriptist.net/ref_prototype/ajax.periodicalupdater.html のサイトに乗っている <script type="text/javascript" src="/js/prototype.js"></script> <script type="text/javascript"> var myajax; function execute() { myajax = new Ajax.PeriodicalUpdater( "container", "./member.cgi", { "method": "get", "parameters": "id=$id", frequency: 5, // 5秒ごとに実行 onSuccess: function(request) { // 成功時の処理を記述 // alert('成功しました'); // jsonの値を処理する場合↓↓ // var json; // eval("json="+request.responseText); // ↓IEでもキャッシュを読み込まずに毎回リモート接続を実行するためのコード(パラメータの書き換え) var str = myajax.options.parameters; var hash = str.parseQuery(); hash["ajax_request_id"] = Math.random(); hash = $H(hash); myajax.options.parameters = hash.toQueryString(); }, onComplete: function(request) { // 完了時の処理を記述 // alert('読み込みが完了しました'); // jsonの値を処理する場合↓↓ // var json; // eval("json="+request.responseText); }, onFailure: function(request) { alert('読み込みに失敗しました'); }, onException: function (request) { alert('読み込み中にエラーが発生しました'); } } ); } </script> を使用して自動更新をしようと思っているのですが
- ベストアンサー
- JavaScript
- Ajax.Request 進捗状況が分からないIE
サーバから定期的に送られてくる文字列を、受信した時点で表示したいのですが、IE6だとうまく行きません。(FireFox2ではうまく行きました) IEだと、readyState値の変化時しか、イベントが発生してないような感じなのですが… よい方法はあるのでしょうか？ ご教授よろしくお願い致します。 以下、ソースコードです。 <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>進捗バー</title> <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript"><!-- function loadFile(fName) { var arg2 = { method: 'get', onInteractive: function (httpObj) { $("result").innerHTML = httpObj.responseText; } } new Ajax.Request(fName+"?time="+(new Date()), arg2); } // --></script> </head> <body> <form> <input type="button" value="ファイル読み込み" onClick="loadFile('ret.php')"><br /> </form> <div id="result"></div> </body> </html>
- ベストアンサー
- JavaScript
- Ajax.RequestでXMLデータをパース
お世話になります。 Ajax.Requestをして、返ってくるデータがXMLなのですが このXMLをパースして表示したいのですが 何か方法はありませんでしょうか？ もしかしたら簡単なことなのかもしれませんが ご存知の方がいらっしゃいましたら ご教授よろしくお願いいたします。 ajax.js //////////// function exec(fname,dispArea) { var httpObj = new Ajax.Request(fname, { method:'GET', onSuccess:function(req) { var text = req.responseText; $(dispArea).innerHTML = text; } } ); } ///////////test.html <script language="javascript" type="text/javascript" src="prototype.js"></script> <script language="javascript" type="text/javascript" src="scriptaculous.js"></script> <script language="javascript" type="text/javascript" src="ajax.js"></script> <span id="disp">exec('hoge.xml', 'disp');</script></span> //////////// hoge.xml <?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet type="text/xsl" href="hoge.xsl" ?> <top> <list> <row>テスト１</row> </list> <list> <row>テスト２</row> </list> <list> <row>テスト３</row> </list> </top> //////////// hoge.xsl <?xml version="1.0" encoding="UTF-8"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="top"> <html><title>XMLパース</title> <body> <xsl:for-each select="list"> <xsl:value-of select="row" /> </xsl:for-each> </body> </html> </xsl:template> </xsl:stylesheet>
- ベストアンサー
- JavaScript
- Ajax.Requestについて
いつもお世話になっております。 今回はAJAXについてお聞きしたいです。 現在prototype.jsを使って同期通信をしようとしています。 リクエスト部分のソースは以下のようです。 function AjaxLoad() { new Ajax.Request('abc.cgi', { method : 'post', asynchronous : false, } ) response = transport.responseText; hyouzi(response); } abc.cgiというものは処理をして値を返すcgiです。 同期通信したのちにその返された値をhyouzi();で使いたいです。 ここでこのAjaxLoad()を呼び出すとtransportはありませんというようなerrorが出ます。 それ以前にabc.cgiを呼んでいるような感じがしません。 上記のような処理をしたい場合はどのように記述すればよいのでしょうか？ ご教授願います。
- ベストアンサー
- JavaScript
お礼
ご回答ありがとうございます。 Wernerさん。 いつも本当にありがとうございます。 私もその後、いろいろ調べて、 self=this; を以下の前で定義して解決してる人がいました。 onSuccess: function(h){self.processRequest(h,1);} ＞HTMLファイルやTEXTファイルで動作確認できますよ。 そうですね！！ 気が付きませんでした。