AjaxとMVCについて

このQ&Aのポイント
  • テキストフィールドに入力して、送信ボタンを押したら、データベースを呼び出し、結果を表示するAjaxについて、MVCを意識して連携する方法を教えてください。
  • 現在はJSPとJavaScriptで連携し、データベースの接続や結果セットの取得を行っていますが、サーブレットやJavaBeansを活用することでMVCの原則に則ったコードを書きたいです。
  • DWRなどのライブラリも検討していますが、まずは基本的な方法についてアドバイスをいただきたいです。
回答を見る
  • ベストアンサー

AjaxとMVCについて

こんばんは。Ajaxなんですが、テキストフィールドに入力して、送信ボタンを押したら、jspに飛ばして、データベースを呼び出して、 <div id="result"></div>のところに、飛ばしたjspの中の出力を反映させているのですが、飛ばしたjspで、データベースの接続、結果セットの取得、responseTextで返すテキストの出力など、全て行っているのですが、最近サーブレットやJavaBeansの勉強に入り、なるべくMVCを意識して、データベースの接続や結果セットを取得するあたりまでは、サーブレットやJavaBeansを使って行いたいのですが、そういった連携の仕方がどうも思いつきませんでした。以下が大まかなコードですが、 JavaScriptのコードです。 //表示 var httpObject; function selectRequest(){ if(window.XMLHttpRequest){ httpObject=new XMLHttpRequest(); } //途中省略します。 httpObject.onreadystatechange=display; //省略します。 httpObject.open("GET","kakunin.jsp?nen="+encnen,true); httpObject.send(null); } function display(){ if(httpObject.readyState==4 && httpObject.status==200){ document.getElementById("result").innerHTML=httpObject.responseText; //残り省略します } おおまかですが、kakunin.jspの内容は以下のようになっています。 String nen = request.getParameter("nen"); PreparedStatement ps = db.prepareStatement("select * from kintai where nen=?"); ps.setInt(1, Integer.parseInt(nen)); ResultSet rs = ps.executeQuery(); if (rs.next()){ ここでout.println("<table><tr>……</table>");みたいな感じでresponseTextを作っています。 } ジャバスクリプトのコードで、httpObject.open("GET","kakunin.jsp?nen="+encnen,true); の部分なんですが、ここのkakunin.jspをサーブレットにしたら、responseTextをサーブレットで作らなくてはならないような事になりそうな気がしてやめました。httpObject.openのところでkakunin.jspに要求しているので、responseTextもkakunin.jspの出力でないといけないとは思うのですが、その間どこかでサーブレットやJavaBeansを呼び出して、複雑な処理をそっちにまかせたいのですが、jspからサーブレットを呼び出す方法は、<form method="post" action="サーブレット名">ぐらいしか知らず、これは今回関係ないと思いました。 DWRとかいうのもあるみたいですが、最初はなるべく原始的なやり方で作りたいので、そっちはまだよく調べていません。 発想自体がおかしいかもしれませんが、Ajaxを使っている時、jspやサーブレットなどをうまく連携させて、きれいにまとめたコードを記述する方法などございましたらアドバイスの方よろしくお願いします。

  • ossu
  • お礼率75% (36/48)
  • Java
  • 回答数1
  • ありがとう数1

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

  • ベストアンサー
  • auty
  • ベストアンサー率58% (284/486)
回答No.1

>>> httpObject.open("GET","kakunin.jsp?nen="+encnen,true);  の部分なんですが、ここのkakunin.jspをサーブレットにしたら、responseTextをサーブレットで作らなくてはならないような事になりそうな気がしてやめました。 MVCを採用するなら、ここはサーブレットでよいのでは? そのサーブレットはコントローラとして、必要に応じて >>> サーブレットやJavaBeansを呼び出して、複雑な処理を を行い、それらの情報を新しい「kakunin.jsp」へ送り、テーブル形式のデータに加工して、text/plainとして送り返すということになると思います。

ossu
質問者

お礼

アドバイスありがとうございます。その方法でやってみます。

関連するQ&A

  • XMLHttpRequest() Ajaxについて

    こんにちは。Ajaxに挑戦しているのですが、テキストフィールドに入力して送信ボタンを押したら、自作関数の XmlHttpRequest()を呼び出して、kakunin.jspに飛ばして、kakunin.jspで作ったコードを<result>タグ内に表示し、その際現れる「削除」ボタンをクリックしたら、今度は自作関数 deleteRequest()を呼び出し、sakujyo.jspに飛ばしてデータベースのレコードの削除を行い、<result>タグ内の表示をかえたいのですが、削除の方がうまくいっておりません(削除するボタンを押して、deleteRequest()は呼び出しているのですが、そのあと、delete.jspに飛ばず、kakunin.jspに飛びます)。以下が大まかなコードです。 function XmlHttpRequest(){ if(window.XMLHttpRequest){ httpObject=new XMLHttpRequest(); } else if(window.ActiveXObject){ httpObject=new ActiveXObjec("Msxml2.XMLHTTP"); } httpObject.onreadystatechange=display; 途中省略します。     httpObject.open("GET","kakunin.jsp?nen="+encnen+"&tsuki="+enctsuki+"&syaincode="+encsyaincode,true); httpObject.send(null); } function display(){ if(httpObject.readyState==4 && httpObject.status==200){ document.getElementById("result").innerHTML=httpObject.responseText; 省略します。 } } function deleteRequest(){ if(window.XMLHttpRequest){ delhttpObject=new XMLHttpRequest(); } else if(window.ActiveXObject){ delhttpObject=new ActiveXObject("Msxml2.XMLHTTP"); } delhttpObject.onreadystatechange=displaysql("削除しました"); 省略します delhttpObject.open("GET","delete.jsp?nen="+encnen+"&tsuki="+enctsuki+"&syaincode="+encsyaincode,true); delhttpObject.send(null); } function displaysql(msg){ if(delhttpObject.readyState==4 && delhttpObject.status==200){ document.getElementById("result").innerHTML=delhttpObject.responseText; alert(msg); kidou(); } } こういったやり方がわからなく、自己流でやってみましたので、おかしな部分もあるかもしれませんが、やりたい事は押すボタンによって、飛ばすjspファイルを変え、<result>タグ内の表示も、各jspファイルで、 出力されたものを表示させたいのですが、自分で考えたやり方ではどこか間違っているようですので、どなたかアドバイスの方、よろしくお願いいたします。 環境は、IE7です。よろしくお願いいたします。

  • jQuery.ajax()のリクエストが返らない

    下のような通信処理を書いています。 var returnObj = null; var errorMsg = ''; function getAjaxHttpRequest(prms) { returnObj = null; if (prms["sendXml"] == null) { prms["sendXml"] = ""; } jQuery.ajax({ contentType: prms["contentType"] , type: prms["type"] , url: prms["url"] , timeout: prms["timeout"] , cache: prms["cache"] , async: false , processData: false , data: "formId=" + prms["formId"] + "&submitStatus=" + prms["submitStatus"] + "&appId=" + prms["appId"] + "&data=" + prms["sendXml"] , success: function(data, dataType) { errorMsg = ""; } , error: function(XMLHttpRequest, textStatus, errorThrown) { errorMsg = textStatus + ' - ' + errorThrown; } , complete : function(xmlHttpRequest, textStatus) { var READYSTATE_COMPLETED = 4; if( xmlHttpRequest.readyState == READYSTATE_COMPLETED ) { var HTTP_STATUS_OK = 200; if( xmlHttpRequest.status == HTTP_STATUS_OK ) { returnObj = { resultCode: 'success' , data: xmlHttpRequest.responseText }; } else { if (xmlHttpRequest.responseText == '') { returnObj = { resultCode: 'error' , textStatus: xmlHttpRequest.status + " - " + xmlHttpRequest.statusText , responseText: errorMsg }; } else { returnObj = { resultCode: 'error' , textStatus: xmlHttpRequest.status + " - " + xmlHttpRequest.statusText , responseText: xmlHttpRequest.responseText }; } } } else { returnObj = { resultCode: 'error' , textStatus: xmlHttpRequest.readyState + " - " + xmlHttpRequest.status + " - " + xmlHttpRequest.statusText , responseText: xmlHttpRequest.responseText }; } errorMsg = ''; } }); return returnObj; } まれに最後のreturnObjがnullで返ってくるようです。なぜでしょうか? 何が起きている可能性があるでしょうか。 jquery-1.4.3です。

  • AJAXとPHPの全角文字の受け渡し

    こんにちは教えてください。 AJAXからPHPを呼んで、PHPから全角文字を受け取ると文字化けしてしまいます。いずれも文字コードはSJISです。例えば下のような感じです。(AsyncRequest()はXMLHttpRequestのオブジェクトを作って返す関数です) 文字化けの原因は何でしょうか? /************************************* JavaScript側 *************************************/ var Async = AsyncRequest(); Async.open( "GET" , "test.php ); Async.send( null ); Async.onreadystatechange = function(){ if( Async.readyState == 4 && Async.status == 200 ){ alert( Async.responseText ); } } /************************************* test.php側 *************************************/ <?PJP Print( "こんにちは" ) ; ?>

    • 締切済み
    • PHP
  • Ajaxでデータベース(PostgreSQL)

    を非同期で読み込むことができるでしょうか? ファイルならば下記のようにすれば良いみたいですが データベースの場合のやり方がわかりません。 PostgreSQLのデータを読み込むにはどうしたら良いのでしょうか? <script> var xmlHttp; function loadText() { if (window.XMLHttpRequest) { xmlHttp=new XMLHttpRequest(); } else { if(window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } else { xmlHttp = null; } } xmlHttp.onreadystatechange=checkStatus; xmlHttp.open("GET","plan.txt",true); xmlHttp.send(null); } function checkStatus() { if(xmlHttp.readyState==4 && xmlHttp.status==200) { alert(xmlHttp.responseText); } } </script> <form> <input type="button" value="read file" onClick="loadText()"> </form>

  • Ajax+Servletで文字化け

    Ajax+Servletで"I"、"II"等が文字化けしてしまいます。 以下のようにajaxを使いserver側のservletへアクセスしています。 xmlhttp = this.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Msxml2.XMLHTTP"); //コールバック関数の登録 xmlhttp.onreadystatechange = display; xmlhttp.open('POST','Test',true); xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xmlhttp.send(null); フトントの画面はJSPで <%@ page language="java" contentType="text/html; charset=Windows-31J" pageEncoding="Windows-31J" %> <meta http-equiv="Content-Type" content="text/html; charset=Windows-31J"> で定義しています。 サーブレットはpostgresのDBから項目を取得し、htmlを返却しています。 返却したhtmlをDOMのinnterHTMLを使い、画面を書き換えています。 response.setContentType("text/html; charset=Windows-31J"); servletからhtmlを返却する際、上記のようにWindows-31Jで返却すると、javascriptで"xmlhttp.responseText"の所で "ランタイムエラーが発生しました。デバックしますか 行107 c00ce56eの為、操作を完了できませんでした。" とエラーが出てしまいます。 response.setContentType("text/html; charset=shift-jis"); 出力する際、上記のようにShift-jisで返却すると、エラーは発生しないのですが、"I"、"II"等が文字化けしてしまいます。 何か解決策ありますでしょうか。 宜しくお願いします。

    • ベストアンサー
    • AJAX
  • Ajaxでウインドウ出力について

    CGI上で、HTMLのコードを書いて、WEBページを出力(表示)することが出来ますが、それと同じようなことが、Ajax(Jqueryを使っています)で出来ませんでしょうか。 CGIを使ってやろうとしていたのですが、同じページでFormタグを多用しており、CGI以外の方法でページ出力をしようと思います。 HTMLからOnClickで値をAjaxに渡して、データベースとやりとりをし、Ajaxに値を戻してそれを元にページを作成して出力をさせたいのです。(別ウインドウを立ち上げで) このようなことは出来ますでしょうか。 また、出来るようでしたらどうやってプログラムを作成すればいいでしょうか。 教えてください。よろしくお願いいたします。

    • ベストアンサー
    • AJAX
  • ajax でのデータ受け渡しに関して

    ajax でのデータ受け渡しに関して わかりにくい内容で申し訳ありません。 現在、PHPで作成されているプログラムの中に、ajaxを組み込みたいと考えています。 処理の動きとしては、あるプルダウンが選択された場合、すぐさまその値をもとにしてDBへ 検索しに行くというものです。 通常、PHPだけの処理の場合、POST等を用いて、ボタンが押されたら違うphpファイルへ値を 送る事が可能かと思われます。 その処理をajax で選択されたらすぐに検索、表示というような動きをしたいと考えて います。 但し、同じソース、画面上の中でなら、以下のような記述で表示させる事は可能かと 思われますが、HTMLで分割した画面で、上段で選択されたプルダウンの値をもとにして、検索 された結果を下段に表示させたいと考えています。 そもそも、ajaxでは同じ画面上での受け渡ししかできず、上記のように分割されたものでは 不可能なのでしょうか。。。 初歩的な内容で申し訳ありませんが、教えて頂きたいと思います。 《記述内容》 ※ 現状では以下のようなサンプル記述をもとに、自画面(同一)上では表示が可能となっています。 <script> function createXMLHttpRequest(){ if( window.XMLHttpRequest ){ return new XMLHttpRequest(); }else if( window.ActiveXObject ){ try{ return new ActiveXObject( "Msxml2.XMLHTTP" ); }catch(e){ return new ActiveXObject( "Microsoft.XMLHTTP" ); } } return null; } function getDataPost( serverURL, objID ,obj){ var ajax = createXMLHttpRequest(); ajax.open( "POST", serverURL ); ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); ajax.onreadystatechange=function(){ if(( ajax.readyState == 4 ) && ( ajax.status == 200 )){ if(objID!=""){ var obj = document.getElementById( objID ); obj.innerHTML = ajax.responseText; } } } ajax.send( obj.name+"="+obj.value ); } </script> <select name="fuga" onchange="getDataPost('hogehoge.php','hoge',this)"> <option value="">---</option> <option value="1">1</option> <option value="2">2</option> </select> <div id="hoge"></div> よろしくお願いします。

    • ベストアンサー
    • AJAX
  • jqueryプラグイン ajax IEでのエラー

    youtube-TVというJqueryプラグインを使用したいのですが、IE10以下だと、エラーが起きてしまいます。https://github.com/jakiestfu/Youtube-TV デベロッパーツールで確認すると、ajaxの通信エラーのようなのですが、対処法がわからりません。どなたかご指南頂けないでしょうか? 宜しくお願いします。 ////省略/////// ajax: { get: function(url, fn){ var handle; if (win.XMLHttpRequest){ handle = new XMLHttpRequest(); } else { handle = new ActiveXObject("Msxm12.XMLHTTP"); } handle.onreadystatechange = function(){ if (handle.readyState === 4 && handle.status === 200){ fn.call(this, JSON.parse(handle.responseText)); } }; handle.open("GET",url,true);  /*←この部分が通信エラーと表示されます。*/ handle.send(); } }, ////省略/////// ・ ・ ・ ・ ////省略/////// prepare = { youtube: function(fn){ var tag = doc.createElement('script'); tag.src = "//www.youtube.com/iframe_api"; var firstScriptTag = doc.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); win.onYouTubeIframeAPIReady = fn; }, ////省略/////// ・ ・ ・ ・ ////省略/////// compileList: function(data){ if(data && data.feed){ utils.ajax.get( utils.endpoints.userInfo(), function(userInfo){ var list = '', user = { title: userInfo.entry.title.$t, url: '//youtube.com/user/'+userInfo.entry.yt$username.display, thumb: userInfo.entry.media$thumbnail.url, summary: userInfo.entry.summary.$t, subscribers: userInfo.entry.yt$statistics.subscriberCount, views: userInfo.entry.yt$statistics.totalUploadViews },

  • ajaxが難しいです。

    1 if (xhr.status === 200) { result.textContent = xhr.responseText; の部分がわからないのですが 自分で作った変数resultの中に通信に両方成功した場合サーバ側のPHPが生成したDOM要素を代入するという事をやっているのでしょうか? その結果、処理結果を表記するhtml<div id="result"></div>の中に、代入された中身が表記されるという事ですか? 2 下記のloadstartとloadなどう違うのでしょうか? xhr.addEventListener('loadstart', function() { // 画面に通信中と表記 result.textContent = '通信中...'; }, false); // 画面に通信中と表記 xhr.addEventListener('load', function() { result.textContent = xhr.responseText; }, false); 下記ソース ・ <?php sleep(3); print('こんにちは、'.$_REQUEST['name'].'さん!'); print('こんにちは、'.$_REQUEST['name2'].'さん!'); ?> ・ <!DOCTYPE html> <html> <head> <meta name="robots" content="noindex,noimageindex,nofollow"><!-- Onlysample --> <meta charset="UTF-8" /> <title>JavaScript本格入門</title> </head> <body> <form> <label for="name">名前:</label> <input id="name" type="text" name="name" size="15" /> <input id="btn" type="button" name="submit" value="送信" /> <label for="name">名前2:</label> <input id="name2" type="text" name="name2" size="15" /> <input id="btn2" type="button" name="submit" value="送信" /> </form> <div id="result"></div> <div id="result2"></div> <script src="scripts/hello_ajax.js"></script> </body> </html> // 非同期通信を行うための準備 document.addEventListener('DOMContentLoaded', function() { document.getElementById('btn').addEventListener('click', function() { var result = document.getElementById('result'); var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState === 4) { if (xhr.status === 200) { result.textContent = xhr.responseText; } else { result.textContent = 'サーバーエラーが発生しました。'; } } else { result.textContent = '通信中...'; } }; /* xhr.addEventListener('loadstart', function() { result.textContent = '通信中...'; }, false); xhr.addEventListener('load', function() { result.textContent = xhr.responseText; }, false); xhr.addEventListener('error', function() { result.textContent = 'サーバーエラーが発生しました。'; }, false); */ xhr.open('GET', 'hello_ajax.php?name=' + encodeURIComponent(document.getElementById('name').value), true); xhr.send(null); }, false); document.getElementById('btn2').addEventListener('click', function() { var result = document.getElementById('result2'); var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState === 4) { if (xhr.status === 200) { result.textContent = xhr.responseText; } else { result.textContent = 'サーバーエラーが発生しました。'; } } else { result.textContent = '通信中...'; } }; /* xhr.addEventListener('loadstart', function() { result.textContent = '通信中...'; }, false); xhr.addEventListener('load', function() { result.textContent = xhr.responseText; }, false); xhr.addEventListener('error', function() { result.textContent = 'サーバーエラーが発生しました。'; }, false); */ xhr.open('GET', 'hello_ajax.php?name2=' + encodeURIComponent(document.getElementById('name2').value), true); xhr.send(null); }, false); }, false); 最後に、クリックした際にJSでDOM生成して、新たな要素を表記することとajaxは、 閲覧者からすると同じように見えるのですが、 違いは、ajaxはブラウザ上で生成したのではなく、 サーバ側のPHPが生成したDOM要素をダウンロードして代入するという、違いでしょうか? つまりサーバ側でDOMを作ったらajax、ブラウザ上で作ったらただのDOM生成という事ですか?

  • Ajaxでwebページの一部をリロード

    Ajax超初心者です。 http://okwave.jp/qa/q7061328.html これのベストアンサーについてなんですけど、 <script type="text/javascript"> function update(){ var xhr = new XMLHttpRequest(); xhr.open("GET", "/foo.php"); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { document.getElementById("foo").innerHTML = xhr.responseText; xhr = null; } } xhr.send(null); } </script> これって例えば「1分後に自動的にリロードする」というような指示は どこを変更して指示したらいいんでしょうか。 もしこの方法ではそういう指定ができないのなら、 指定できる方法を教えてください。

専門家に質問してみよう