ajaxの使いどころ

このQ&Aのポイント
  • ajaxを使った会員制Webサービスの開発についての質問です。
  • セッションのチェックやタイムアウト時の処理について教えてください。
  • ajaxの使いドコロやセキュリティについての判断方法も知りたいです。
回答を見る
  • ベストアンサー

ajaxの使いどころ

現在、会員制のWebサービスを作成しています。 まだ初期段階ですが、今は管理者用のユーザー管理ページに着手しており、サーバーサイド、クライアントサイド合わせて、およそ7割程度完成しているいるところです。 このページの現時点での実装では、ユーザーの削除、復活、パスワードリセット、登録情報の変更、新規ユーザーの登録といった全機能でajaxを使っています。 また、処理対象のユーザーは一覧のテーブルをクリックして選択するのですが、このクリック時にサーバーからユーザーの詳細情報を取得しており、ここでもajaxを使っています。 要するに、1ページ取得したあと、そのページ内でサーバーと通信を行う必要が生じたら、それはすべてajaxを使うという決まりです。 そこで、ajaxの運用についていくつかわからない点があり、質問させて頂きます。 (1) 会員専用ページという性質を考えると、ajaxでリクエストを送信した際にも、サーバーサイドではそのリクエストに対するセッションが有効かどうかをチェックする必要がありますよね? 一般的な会員向けWEBサービスでは、"ページ遷移毎"だけでなく、"ajaxでの通信毎"でもセッションのチェックを行うものなのでしょうか。 (2) ajaxでの通信時にセッションの有効性をチェックした結果、すでにタイムアウト等でセッションが無効な場合、一般的にはどうするべきなのでしょうか。 個人的にはlogoutページにリロードしたいと考えているのですが、このようにするには、サーバー側がレスポンスを返すときに、{error:{code:'1',message:'session_out'}}のようなJSONを返して、それをjavascript側で確認し、location.hrefを書き換える、というような流れで処理を行うことになるのでしょうか。 (3) そもそも、今回のように「1ページ内で生じるサーバー間通信は全てajaxで補う」という考え方は、一般的なものなのでしょうか。 なにが言いたいかというと、"セキュリティ等を考慮してajaxを使うべきではない処理"と"ajaxを積極的に使うべき処理"(もしくは、"ajaxを使っても差し支えない処理")の判断の仕方、つまり、ajaxの使いドコロがよく分かっていません。 以上3点につきまして、ご教授いただければ幸いです。

  • AJAX
  • 回答数3
  • ありがとう数3

質問者が選んだベストアンサー

  • ベストアンサー
  • shockatz
  • ベストアンサー率80% (153/191)
回答No.3

現在行っている実装をベースに回答させていただきます。 (1)もちろんyesです。 Ajaxリクエストであっても、基本的にセッションやクッキーの扱いは同じであり、通常通りの処理を行います。 (2)セッションの有効性チェックで強制リダイレクト、というのは通常の処理だと思います。 FuelPHPやASO.NET MVCでは、アクションの実行直前に必ず呼び出されるメソッド(フィルタ)がありますので、そちらで全部一括して処理します。 (3)Ajaxの利用は、方向性としては間違っていないです。 ただし、一口にAjaxといってもいくつか種類があり、 3-1・スキームをサーバサイドで自動生成するもの(基本JSを書かない) 3-2・ほとんど全部をjQuery等で処理する「ピュアAjax」 3-3・さらにAngularやKnockoutなど、javascriptフレームワークを使うもの。 この中の3-2の場合、javascriptによるインベントハンドラ定義・サーバ送信データのHTMLへの反映、入力値のajax形式送信、という問題をすべてjavascriptで行うと、UI(ユーザインターフェース)にガチガチに拘束されたコードになって、開発効率(生産性)が悪化、バグ耐性も低下して、改変が非常に難しくなっています。 現在、サーバサイド開発は、IDEやMVCフレームワークの台頭で、かなり開発生産性や保守効率が上がっているのですが、Ajaxは開発環境も含めて困難度が高く、対応できるエンジニアも少ないことから、knockoutJSやAngularのようなフレームワークが正しく導入運用できるまで、「力攻めの」javascriptAjax DOM操作は封印です。

k130202
質問者

お礼

サーバーサイドではFuelPHPを使って開発をしていたので、(1)、(2)はピンポイントな回答で非常に助かりました。 (3)に関しましては、こういったjavascriptフレームワークが存在していること自体知らず、ご提案いただいた中の3-2の方法で実装を進めていました。 javascript内に、イベントハンドラの定義とイベントをバインドする要素を直接記述しなければならず、確かにおっしゃる通りJavascriptへの依存度の高く「あまり美しくないな」と思っていました。 とりあえずknockout.jsについて調べてみたのですが、一切javascript上でDOM操作をせずにHTMLの更新ができたり、HTMLと処理部分を上手く分離できるなど、一気に開発・保守の効率が高まりそうですね。 AngularJSについても調べてみようと思います。 期待していたよりもレベルの高いご回答をいただき、非常に勉強になりました。 本当にありがとうございます。

その他の回答 (2)

  • Ogre7077
  • ベストアンサー率65% (170/258)
回答No.2

個人的な考えです 1) AJAXのサーバー側チェック 基本的に「クライアントは絶対に信じるな」が合言葉ですので、 遷移だろうが非同期だろうが関係なく、 HTTPで受け付ける要求は全て厳格なチェックを行ってください。 2) AJAXのエラー処理 エラー用のJSONを返すもよろしいですが、 HTTP応答で 403 Forbidden を返し、AJAX のエラーイベントで処理するのも手です。 3) AJAXの使いどころ セキュリティの点では何の問題もないと思います。 なので、業務目的と使い勝手で選択すべきかと思います。 ・古い環境を考慮するなら、画面遷移のみ ・画面のごく一部だけ書き換えたいならAJAX ・画面入力状態を保持したままPOST送信したいならAJAX ・ただし業務的に重要な操作なら、入力・確認・完了と画面遷移 ・表示系機能でブラウザの戻る(巻き戻す)機能を重視するなら画面遷移 ・サーバー側処理が非常に重い業務ならAJAX ・再利用できる画面部品の処理ならAJAX

k130202
質問者

お礼

非常に有用なご回答をいただき、本当に有難うございます。 (1) やはりそうですよね…。 自分でも「常識的に考えてチェックは必須だよなぁ」とは思っていたのですが、改めてご回答をいただき、自信をもつことが出来ました。 (2) なるほど、レスポンスコードでエラーを表現するという手法は凄くよさそうですね。是非とも活用してみたいと思います。 (3) これは非常に参考になります。 こういった「判断基準」に関する情報が全然なかったので、是非とも参考にさせて頂きます。

回答No.1

1.そりゃもちろん。 直接そのAjax通信側のURLにアクセスされたらどうするの? 2.うん、それでいいと思うよ。 3.別に作り方、考え方次第。 非同期通信だろうが同期通信だろうが、セキュリティの考慮は何も変わらないと思うけど?

k130202
質問者

お礼

何分まだ開発経験が未熟なので、何が正解か分からず右往左往していまたが、ご回答を頂いていろいろと確信が持てました。 ありがとうございます。

関連するQ&A

  • jqueryMobileがAjax?

    Ajaxという単語の意味がわからなくなりました… jqueryMobileの様々な解説をみているとページ切り替え時とかにAjaxによってとかいう表現が出てきますが、jqueryMobileは既にサーバーから取得したHTMLをjavascriptで表示切り替えしてるだけで、各ページの情報を適宜サーバーから取得しているというわけじゃないと思います。 Ajaxの定義はjavascriptを用いてページ遷移をすることなくサーバーと通信すること、と思っていたので、このjqueryMobileのAjaxという単語の使い方に違和感を覚えます。 jqueryMobileの解説でのAjaxって単語の使われ方は正しいんでしょうか? それともjqueryMobileは実際はクライアントサイドでの表示切り替えだけでなくサーバーとの通信を行ってるんでしょうか? 参考 http://dev.screw-axis.com/doc/jquery_mobile/components/pages_dialogs/page_links/

  • Ajaxの動き

    googleと本で調べたのですが、今いちわからないため質問させてください。 (1)教科書から、Ajaxは、XMLをJavascriptでやり取りしている非同期通信という定義なのはわかりましたが、結局、AJAXを使うということは、HTMLに、<Script>のタグで、JQueryなどのパスを書くということなのでしょうか? AJAXは概念的なものであって、プログラムやモジュールそのものではないと捉えています。 (2)Ajaxによる非同期通信は、何をきっかけとして通信が始まるのでしょうか? 通常は、FORMがSUBMITされたときに、サーバにリクエストがいくという認識ですが そもそも、Ajaxは、何をイベントとしてハンドルしているのでしょうか?(何をきっかけに処理が始まっているのでしょうか?) HTMLに、<Script>のタグで、JQueryのパスを書くと、ハンドルする機能が使用されるのでしょうか? Ajaxでも「リクエスト」は行われているけれども、処理結果として戻されるものがXML形式であるだけだという理解で良いのでしょうか?

    • ベストアンサー
    • AJAX
  • AjaxのOnFailureについて

    Ajax(prototype.js)を使用しているのですが、OnFailureが呼び出されてしまいます。 プログラムの流れです。 ボタン押下(html) ↓ 前処理(js) ↓ サーバのファイル情報取得(ajax非同期通信→php→戻ってきて情報取得) ↓ 取得したファイル数ループ(js) ↓ ↑ 別のサーバにコピー(ajax非同期通信→php→戻り値判定) ↓ ループ抜けたら終了処理 大量のファイルを処理した場合、4~5経過したあたりで 「別のサーバにコピー(ajax非同期通信→php→戻り値判定)」 が正常に行われず、後処理として記述してあるOnFailureを呼び出してしまいます。 OnFailureについて調べてみたのですが、MSDNのAjaxOptions クラスに 「ページの更新が失敗した場合に呼び出される JavaScript 関数。 この関数は、応答ステータス 200 の範囲内にない場合に呼び出されます。」 と記述されていました。 応答ステータスとは何を指しているのでしょうか。 回避方法があれば教えてください。 よろしくお願い致します。

  • Ajaxにおけるセッション

    会社の先輩から 「Ajaxを使ったWebページはセッション(※セッションIDのことを短縮して言ったのかは不明)を持ち続けてしまうことが問題」 と言われたのですが、これは正しいのでしょうか? XMLHttpRequestのオブジェクトから常にopen、sendし続けているのであれば セッションを持ち続けるかもしれませんが、 例えばopen、sendをページのロード時にたった一回しかつかわないページであれば、 最初のreadystateの値が4になった時点で(もう二度とXMLHttpRequestのオブジェクトからはリクエストしないので)コネクションは切れて 放っておくとセッションIDは切れるのではないでしょうか? それともクライアント(ブラウザ)にXMLHttpRequestのオブジェクトが存在している限り、 セッションは切れずに保持されるのでしょうか? よろしくお願いします。

  • JQueryはAJAXとは無関係??

    質問◆JQueryおよびJQueryMobileは「AJAX」とは無関係なのでしょうか? 「JQueryMobileを使っているとき、DOMによってHTMLを動的に差し替えている」という認識なのですが、 特にRequest関連の記載をJavaScriptで記載していない限り、AJAXの処理は行われないのでしょうか? それとも、 JQuery Mobileを使っている場合は、ページ遷移などで、プログラマが意識していなくても(独自にプログラムを書いていなくても) AJAXの処理が行われているのでしょうか? /************************************/ サーバへのリクエストはなくても、1つのマシン内の、HTMLファイルとHTMLファイルの間で、 HTTPで通信がされるということはないと思っています。 (※基本、HTTPはクライアントとサーバの間のときしか使われないのですよね?) JQueryの技術情報のサイトを見ていると、 よく「document.ready」と書かれていたりするソースを見かけますが、 これはAjaxとは関係なく(通信とは関係なく)、 また「xhr.send」も書かれていないHTMLは、AJAXは使われないという理解です。 (「Form、submit」とも関係がない) XMLHttpRequestも「HttpRequest」とあるわけですし、 「Form、submit」を書いているときに行われるわけではないけれども、かわりに、 「xhr.send」とJavaScriptで実行されたタイミングで走る処理であり、 その際、「サーバから返される情報がXMLのデータ形式で(XML以外もですが、、)」だという理解なのですが、合っていますでしょうか?

    • ベストアンサー
    • AJAX
  • Ajaxでのセッション管理は、どのようにできますか?

    PHP,Ajaxともに初心者に毛が生えた程度のスキルですが、ちょっとした会員サイトを作っています。 ------------ 実現したいこと ------------ ログイン後、自分専用のブログのようなページで、適当にコメントを入力する。 コメント欄からカーソルが抜けた際に、「ユーザーID、日付、コメント内容」を AjaxのXMLHttpRequest で送信し該当ユーザーのDBに書き込む。 ------------ 困ったこと ------------ サーバサイド(PHP側)で、「ユーザーID、日付、コメント内容」を受信するまでは、できた。 後は、$_GETの値をDBに登録するのだが、受け取ったXMLHttpRequestのセッションが判らず、どのユーザーのDBに登録するかの判断ができません。 たとえば、下記のようにの内容を XMLHttpRequest でGET送信するのだが、これだと、誰でも更新できてしまいます。 http://www.dummy.jp/?userid=100&date=2006-05-17&comment=urlencode-shita-moji ログインした際に保持したセッションの持ち主=XMLHttpRequestのセッションを紐付けたいのですが、どのようにすれば、解決できるでしょうか? XMLHttpRequestで送信するGETデータに、セッションIDも書けば、紐付けはできるのですが、セキュリティの問題もあり、書いていません。 いい方法を教えてください。

    • 締切済み
    • PHP
  • AjaxとJava

    私はAjaxの勉強をしようと思っています。 そのため、簡単なサーバ側はJavaのアプリケーションを作って学ぼうと思ったのですが、どうやって通信すればよいかよくわかりません。 一応わからないなりにいろいろ方法を考えてみたのですが、どれも疑問点があります。 (1)、サーバをJavaで作成して、Ajaxと通信する方法 (2)、JSPを使って、Ajaxと通信する方法 どちらの方法も、 (1)どうやってAjaxからの(正確にはJavaScriptからの)リクエストを受け取って、値を取り出したらいいか (2)どうやってサーバからJavaScriptにデータを送るのか がわかりません(送るパケットは極めてシンプルなもの、たとえば数字とか文字列がいいです)。 入門サイトはほとんどのサーバ側はPHPで作っているので、あまり参考にならないと考えています。 なにか参考になるようなサイトなどはないでしょうか? お返事お待ちしております。

  • ajaxのget/post処理速度

    ユーザインタラクティブなWebプログラムをPHP5.2で作ってWindowsXP/Apahe2.0のlocalhostで動かしていますが、サーバ側にあまり負担のかからない処理の場合、Ajax(JQuery,JQuery.formプラグイン)のGET/POSTは通常のGET/POSTに比べてResが帰ってくるのが明らかに遅いのですが、これは一般的なことでしょうか? Ajaxが遅い原因としてどんなことが考えらるでしょうか? Ajaxの処理速度を上げる方法があれば教えて下さい。 よろしくお願いします。

  • AJAXで取得されているデータのスクレイピング

    PerlでWEB上のデータを収集したりしていますが、 AJAXでデータを取得する部分は、ブラウザでonload後に 行われている為、サーバサイドで実行するPerlで取得する事が出来ません。 そもそもデータの取得は不可能でしょうか? それとも他に実現可能な手段はありますでしょうか? 宜しくお願いいたします。

  • Ajaxがおかしいんです

    Javascript初級者です。 Ajaxを使ってデータの重複チェックを行おうとしました。 ところがAjaxがヘンな動きをするんです。 以下のコードなんですが、上の登録処理の中で、function doubleCheck を呼んで います。 問題は2つあって、ひとつは実際に重複していてもしていなくても「true」を 返してくることです。 console.log("res=========" + res) には「yes」とか「no」とか重複有り無しで 異なりますが、ちゃんとそれぞれセットするにも関わらず、 if(!doubleCheck() では必ず「false」が戻ってきてしまいます。 もう一つおかしい点は、重複検索(これはPHPでやってます)の最中にもかかわらず、 「true」が返ってきて "重複があったので登録できません。" お、出てしまうことです。 それで調査するために console.logその2を入れてみました(※※※のところ)。 ところがこの console 何も吐き出しません。 ということは doubleCheck() の最後の if文にたどり着いていない、または 途中でエラーになっているのかもしれません。 私の書いた Ajax のコードがおかしいんでしょうか。 どなたか御指導下さい。 よろしくお願いします。 // 追加登録処理 function doActionAdd(){ if(dataCheck()){ // customerId が 空白か否かのチェック if($('#customerId').val() == ""){ if(window.confirm("追加登録していいですか?")){ if(!doubleCheck()){ window.alert("重複はありませんでした"); }else{ window.alert("重複があったので登録できません。"); }  (以下略) function doubleCheck(){ var yomi = $('#customerYomi').val(); var res = ''; // 重複チェック $.ajax({ type: "POST", url: "../customer/CustomerDoubleCheck.php", data: {"customerYomi":yomi}, dataType: 'text', // ajax通信が成功したときの処理 success: function(request){ console.log("request=========" + request); var json = JSON.parse(request); console.log(json[0].result ); res = json[0].result; console.log("res=========" + res); }, error: function(XMLHttpRequest, textStatus, errorThrown){ $('div#jobStatus').text("重複チェック検索ができませんでした。"); return false; } }); console.log("resその2=========" + res); //※※※ if(res == "yes"){ // 重複していたので「false」を返す。 return false; }else{ // 重複していなかったので「true」を返す。 return true; } }

専門家に質問してみよう