ASP.NETでAjax通信する際に注意すべきポイント
- ASP.NET MVC3を使用してWEB画面でAjax通信を行う方法について説明します。
- 非同期通信の成功時にAjax応答のデータを取得する方法について教えます。
- Ajax通信で返されたデータが空の場合と正常な場合の処理について説明します。
- ベストアンサー
ASP.NETでAjax通信する際について
はじめまして。 ASP.NET MVC3を使用して WEB画面で1つのテキストボックスに値を入れ検索ボタンを押した時に その値をキーに該当するデータをメッセージ画面として出力。 該当するデータがなければ「該当データがありません。」のメッセージを 表示する処理の簡単な検証しており以下のように記述しています。 ＜View側の処理＞ ---------------------------------------------------------------------------------- <html> <head> <title>Form</title> <!--Ajax通信に必要なスクリプトをインポート--> <script src="../../Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script> <script src="../../Scripts/jquery-1.4.4.min.js" type="text/javascript"></script> <script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script> <script src="../../Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script> <script type="text/javascript" language ="javascript"> // 非同期通信の成功時に呼び出されるイベント・ハンドラ function disp(context) { var data = context.get_data(); if (data == "") { // データが返されなかった場合は、その旨をメッセージ表示 window.alert("該当するデータがありません。"); } else { // データが正しく返された場合のみ、検索結果をダイアログ表示 var result = eval("(" + context.get_data() + ")"); var builder = new Sys.StringBuilder(); builder.append("タイトル：" + result.title); window.alert(builder.toString("\r")); } } </script> </head> <body> <div> @using(Ajax.BeginForm( "Search", new AjaxOptions {OnSuccess = "disp"})){ @Html.TextBox("isbn", "") <input type="submit" value="検索" /> } </div> </body> </html> --------------------------------------------------------------------------------- ＜サーバ側の処理＞ ---------------------------------------------------------------------------------- public ActionResult Form() { return View(); } //［検索］ボタンのクリック時に呼び出され、検索処理を実行 public ActionResult Search(String isbn) { // リクエストがAjax通信（非同期通信）である場合のみ検索を実行 if (Request.IsAjaxRequest()) { var _db = new MyMvcEntities(); var bok = (from b in _db.Book where b.isbn == isbn select new { b.title }).FirstOrDefault(); return Json(bok); } else { // リクエストがAjax通信以外の場合、何もしない return new EmptyResult(); } } } ---------------------------------------------------------------------------------- submit実行時にサーバ側でキーを取得しAjax通信が成功した場合は ビュー側に記載しているDisp関数により取得値の出力を行う想定ですがここで var data = context.get_data();と定義し Sys.Mvc.AjaxContextオブジェクトのdataプロパティより応答文字列を取得しようと すると「オブジェクトは 'get_data' プロパティまたはメソッドをサポートしていません。」 のメッセージが出力され処理が中断します。 実際にget_dataのインテリセンス機能が働きません。 どうすればAjax通信の応答文字列が取得できるか教授お願いします。
- eiki0520
- お礼率61% (59/96)
- Microsoft ASP
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
うーん。。 よく見れば、このコードはMVC1時代のものですよね。 戻り値がstringで、それをeval()するために、Javascript側のライブラリを使用している。 かつてMSは、Ajaxライブラリとしてけっこうリジットなオブジェクトモデルを提供していましたが、いまはほとんどjQuery任せになっているので、MVC3時代のMicrosoftAjax.jsには、すでにそのようなオブジェクトは存在していないのかもしれません（推測で失礼）。 僕自身は、MicrosoftAjax.js、MicrosoftMvcAjax.jsは全く使ってないです。 いっそ、完全にMVC3スタイルで組んだらどうですか？ jQueryも特に使ってなさそうなので削除、 <script src="/Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script> として、コールバックを変更。 <script type="text/javascript" language ="javascript"> function disp(data) { if (data == "" || data==null) { alert("該当するデータがありません。"); } else { alert("タイトル：" + data.title); } } </script> 正しくJSONを戻していれば、これだけでJavascriptのオブジェクトが取得できるはずです。 あとエンコーディングはutf-8になってますよね？
その他の回答 (2)
- WebSurfer
- ベストアンサー率55% (33/59)
iQuery Ajax を使って web サービスもしくは WCF サービスを呼び出すようにしてはいかがですか？ 自分のブログで恐縮ですが、具体例は以下の URL のページにあります。 呼び出すのは web サービスのメソッドでなくても、ページの静的メソッドでも可能です。
お礼
WebSurferさん お世話になります。 回答と参考URLありがとうございます。 ただ解読に時間がかかりそうなのでゆっくり拝見させてもらいます。
- shockatz
- ベストアンサー率80% (153/191)
コードを拝見すると、ASP.NET MVC1時代ふうのAjax通信なので、 <script src="../../Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script> <script src="../../Scripts/jquery-1.4.4.min.js" type="text/javascript"></script> の２行は不要。 あと、蛇足だけど、javascript読み込みはドキュメントルートかヘルパ記述にしないと、パスが狂って大変じゃないかと。 <script src="/Scripts/jquery.min.js" type="text/javascript"></script> とか、 <script src='@Url.Content("~/Scripts/jquery.min.js")' type="text/javascript"></script> みたいに。
お礼
hockatzさん。お世話になります。 アドバイスありがとうございます。 しかし、不要な２行を削除してもget_data()メソッドでコンパイルエラーになってしまいます。 依然、原因は不明なままです。
関連するQ&A
- Ajaxで文字化けしてしまいます
IE6を使用しています。 UTF-8のBOMありで以下のコードを保存しています。 sample.txtに入っている「あああ」を出力すると 文字化けしてしまいます。 <script src="prototype.js" type="text/javascript"></script> を <script src="prototype.js" type="text/javascript" charset="utf-8"></script> で試しても同じ結果でした。 何が原因なのでしょうか？ <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>prototype.jsサンプル</title> <script src="prototype.js" type="text/javascript"></script> <script type="text/javascript"><!-- function readText() { var sURL = "sample.txt?cache="+(new Date()).getTime(); new Ajax.Updater("result",sURL, { method: "get" }); } // --></script> </head> <body> <h1>prototype.jsサンプル</h1> <form method="get" name="ajaxForm" onsubmit="readText();return false;"> <input type="submit" value="sample.txtを読み込み"><br> </form> <div id="result"></div> </body> </html>
- ベストアンサー
- JavaScript
- このHTMLの意味はなんでしょうか？
<script type="text/javascript" src="scripts/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="scripts/jquery.queryloader2.js"></script> <script type="text/javascript" src="scripts/jquery.parallax-1.1.3.js"></script> <script type="text/javascript" src="scripts/jquery.localscroll-1.2.7-min.js"></script> <script type="text/javascript" src="scripts/jquery.scrollTo-1.4.2-min.js"></script> <script type="text/javascript" src="scripts/jquery.easing.1.3.js"></script> <script type="text/javascript" src="scripts/jquery.scrollorama.js"></script> <script type="text/javascript" src="scripts/jquery.scrolldeck.js"></script> <script type="text/javascript" src="scripts/jquery-contained-sticky-scroll.js"></script> <script type="text/javascript" src="scripts/lightbox.js"></script> <script type="text/javascript" src="scripts/parallax01.js"></script> <script type="text/javascript" src="scripts/yazirusi01.js"></script> <script type="text/javascript" src="scripts/jquery.mousewheel.js"></script> <script type="text/javascript" src="scripts/jquery.easie.js"></script> <script type="text/javascript" src="scripts/jquery.smoothScroll.js"></script> <script type="text/javascript" src="scripts/php_date.js"></script> <script type="text/javascript" src="scripts/script.js"></script> とあるサイトのソースの一部に、このような文章が書かれていました。 一体これはどういう意味なんでしょうか？ どなたか解説お願いします
- ベストアンサー
- HTML
- ajax通信の戻り値が空になる。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="jquery.xdomainajax.js"></script> <!-- 追加 --> <script type="text/javascript"> $.ajax( { url: URL, type: 'GET', cache: false, dataType: 'xml' } ) .done(function(res) { console.log(res); } ) .fail(function(res) { console.log('FAIL') } ); </script> </head> 上記のコードの通り（url部分は明記を省略）、jquery.xdomainajax.jsを用いたajax通信を行いたいのですが、通信は成功しているもののコンソールを見ると以下のようになっています。 Object { query: Object, results: Array[0] } 本来ならresultsの部分に返り値が格納されるのですが、空になってしまいます。 なにか原因があればご教授頂きたいです。よろしくお願い致します。
- 締切済み
- AJAX
- Ajaxのウィンドウ表示位置について
ページを開くとAjaxのウインドウが表示されるようになっています。 バックには既にサイトが表示されている状態でその上にウインドウが出てくるイメージです。 ソースは以下のようになっています。 <html> <head> <title>titletitle> <script type="text/javascript" src="js/prototype.js"> </script> <script type="text/javascript" src="js/effects.js"> </script> <script type="text/javascript" src="js/window.js"> </script> <script type="text/javascript" src="js/window_ext.js"> </script> <script type="text/javascript" src="js/debug.js"> </script> <link href="css/default.css" rel="stylesheet" type="text/css"> <link href="css/spread.css" rel="stylesheet" type="text/css"> </head> <body> <script type="text/javascript"> var win = new Window({className: "spread", title: "タイトル", top:50, left:50, width:500, height:500, zIndex: 100, url: "http://www.linkstyle33.com/", showEffectOptions: {duration:3}}) win.show(); </script> --サイトここから-- --サイトここまで-- </body> </html> top:50, left:50,で表示位置を設定することはわかるのですが ウインドウの真ん中に出したいのですがやりかたがわかりません。 試しに50%としてみたもののpx指定になっているようで表示すらされませんでした。 サイトがバックにある状態でウインドウを出したいのでiframe以外で ウインドウを真ん中に表示する方法はあるのでしょうか？
- 締切済み
- JavaScript
- スクレイピングした内容をvalue値に入れたい
下記のようなページがあります。 ++++++++++++++++++++++++++++++++++++++++++ 【http://hoge.ne.jp/index.html】 <html> <table border="1"> <tbody> <tr> <td class="class3">東京</td> </tr> </tbody> </table> </html> ++++++++++++++++++++++++++++++++++++++++++ 【出来たこと】 上記の東京という文字を抜き出すスクレイピングページを作りました。 ****************************************** 【http://hogehoge.com/index.html】 <html> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript" src="./js/jquery.xdomainajax.js"></script> <script> url = 'http://hoge.ne.jp/index.html'; $.get(url, function(data){ var content4 = $(data.responseText).find('.class3').text(); $("#text4").text(content4); }); </script> <div id="text4"></div> </html> 結果 → 東京 ************************************** 【出来なかったこと】 これを、<input type="text" name="tx" value="東京"> のような形でフォーム内に取り入れることを考えています。 しかしながら、下記のようにうまくいきません。 ●●だめ その1●● <html> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript" src="./js/jquery.xdomainajax.js"></script> <script> url = 'http://hoge.ne.jp/index.html'; $.get(url, function(data){ var content4 = $(data.responseText).find('.class3').text(); $("#text4").text(content4); }); </script> <input type="text" name="tx" value="<div id='text4'></div>"> </html> 結果 → 表示されず ●●だめ その2●● <html> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript" src="./js/jquery.xdomainajax.js"></script> <script> url = 'http://hoge.ne.jp/index.html'; $.get(url, function(data){ var content4 = $(data.responseText).find('.class3').text(); $("#text4").text(content4); }); var tx4 = content4; document.write("<input type='text' name='tx' value='" + tx4 + "' />"); </script> </html> 結果 → 表示されず 【お願いしたいこと】 <input type="text" name="tx" value="東京">の形で表示させる方法についてアドバイスいただきたくお願いいたします。
- ベストアンサー
- 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
- jqueryを使いajaxで取得したデータをコールバック関数外で取得する方法
下記のようなスクリプトでjQueryを使い、ajaxでtextを取得します。 コールバック関数内では、もちろんtextが使えるのですが、コールバック関数外からはtextに一切アクセスできなくなります。 このようにグローバルからajaxで取得したデータは取得できないのでしょうか？ prototype.jsでも同じ結果です。 グローバルからの取得法、ご存知の方いらっしゃいましたらご教示頂ければと思います。 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"><!-- $(document).ready(function (){ $.get("./sample.txt",function(text){ alert(text); // textが取得できる }); }); alert(text); // textが取得できない // --></script>
- 締切済み
- JavaScript
- ajaxでエラー処理
お世話になります。 prototype.jsを使ってajaxのエラー処理を考えております。 そこで質問なのですが、以下のソースで OK.phpでは正常に処理が行われ、 NG.phpでは強制的にonFailure処理を行わせたいと考えております。 PHP側(NG.php)で、操作出来ませんでしょうか？ よろしくお願いいたします。 <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript"> <!-- function ajax(fName) { var filename = fName + "?cache="+(new Date()).getTime(); new Ajax.Request(filename, { method: "get", onSuccess: displayData, onFailure: displayError }); } function displayData(httpObj) { $("result").innerHTML = httpObj.responseText; } function displayError(httpObj) { $("errMsg").innerHTML = httpObj.responseText; } // --> </script> </head> <body> <input type="button" value="正常処理" onClick="ajax('OK.php')"><br> <input type="button" value="エラー処理" onClick="ajax('NG.php')"><br> <div id="result"></div> <div id="errMsg"></div> </body> </html>
- 締切済み
- JavaScript
- AJAX?のような使い方をしたい
AJAX?のような使い方をしたいと思い、 javascriptで下記のような記述を行いました。 document.getElementById('id').innerHTML = "<script type='text/javascript' src='api'></script>"; あらかじめ<script type='text/javascript' src='api'></script>を記述しておけば、 正常にapiにリクエストしてくれますが、 無理やりjavascriptで書き換えると、ソースコードのみが書き換えられ、 apiにリスエスとしてくれません。 何か記述が間違っているのでしょうか？ それとも根本的に間違っているのでしょうか？
- ベストアンサー
- JavaScript
- 複数jQueryの配置で干渉 設置位置
Javascript事は全くわかりませんが、色々なプラグインとしてjQueryを利用しています。 ----------------- jQueryに干渉があったようで、正常に動作させたいのですが、疑問があります。 １サイト目（HTML 最下部に配置） <script src="vendor/jquery.min.js" type="text/javascript"></script> <script src="js/layout.min.js" type="text/javascript"></script> 正常に動作します。 ２サイト目（HTML head内に配置） <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="js/abcd.js" type="text/javascript"></script> 正常に動作します。 上記の２サイトを合体させた：（HTML 最下部に配置） <script src="vendor/jquery.min.js" type="text/javascript"></script> <script src="js/layout.min.js" type="text/javascript"></script> <script src="js/abcd.js" type="text/javascript"></script> すると、 layout.min.jsに不具合がでるようです・・・ <script src="vendor/jquery.min.js" type="text/javascript"></script> <script src="js/layout.min.js" type="text/javascript"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="js/abcd.js" type="text/javascript"></script> でも、ダメです。 <script src="vendor/jquery.min.js" type="text/javascript"></script> を <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> に変更してもダメでした。 tel.js内を、 jQuery.noConflict(); (function($) { $(function(){ を $j に変えたり、 jQuery に 書き替えてもダメでした・・・ そこで、以下のように移動しましたら動作しました。 （HTML header内に配置） <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="js/abcd.js" type="text/javascript"></script> （HTML 最下部に配置） <script src="vendor/jquery.min.js" type="text/javascript"></script> <script src="js/layout.min.js" type="text/javascript"></script> 上記のように、 HTML head部と、HTML 最下部に分けるのは、正しい方法なのでしょうか？
- 締切済み
- JavaScript
お礼
shockatzさん お世話になります。 回答が遅くなり申し訳ありません。 自宅では環境がないため確認に時間を費やしてしまいました。 教えていただいた上記のやり方でJavaScriptのオブジェクトが取得できました。 本当にありがとうございます。 あと余談ですがdata.titleの箇所でdata.を打ち込んだ時点でインテリセンス機能が働くかと 思いましたが機能しなかったのは意外でした。一応、取得はできたのでよかったのですが。。