ネットワーク Ⅳ 32 ページ Servlet と JSP と Ajax 紹介 <body> <p > 商品名 :<input type="text" value="goodsa" id="nameid"></p> <p > 在庫数 :<i

Size: px

Start display at page:

Download "ネットワーク Ⅳ 32 ページ Servlet と JSP と Ajax 紹介 <body> <p > 商品名 :<input type="text" value="goodsa" id="nameid"></p> <p > 在庫数 :<i"

まなごみぶち
5 years ago
Views:

1 ネットワーク Ⅳ 31 ページ Servlet と JSP と Ajax 紹介前の目標が終わっていない人はそちらを先行のこと前回の 30 ページ検討問題 shouhinedit.html shouhinedit.jsp の解答例を示すこれは XMLHttpRequest(HTTP 通信を行うための JavaScript 組み込みクラス ) による非同期通信を利用して変更ボタンで指定商品名を変更する問題であったなお XMLHttpRequest のインスタンス取得方法がブラウザによって異なるためそれに対応した取得関数 getmyxmlhttp が定義してあるファイル httprequest.js を別途に用意していた ( httprequest.js を public フォルダからコピーしてそれもアップロードする必要がある ) 取得ボタンで行 getzaiko 関数を実行その中で httprequest.js 内の getmyxmlhttp で XMLHttpRequest を取得しそれでサーバの shouhinedit.jsp にリクエストするその応答で行の function が起動する以下はその応答メッセージを alert で出している shouhinedit.html の解答例以下に示します ( 前のプリントの指示結果を含む ) <!DOCTYPE html> <html lang="ja"><head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <script type="text/javascript"src="httprequest.js"></script> <script type="text/javascript"> function getzaiko(id){ var nameid = document.getelementbyid(id).value;// 入力商品名取得 var httpobj = getmyxmlhttp();// サーバと通信するためのオブジェクト取得 httpobj.open("post", " の POST で情報を要求 httpobj.setrequestheader('content-type', 'application/x-www-form-urlencoded');// 文字化け対策 httpobj.onreadystatechange = function(){//http のレスポンスで実行するように関数登録 if(httpobj.readystate == 4 && httpobj.status == 0){ document.getelementbyid("zaiko").value = httpobj.responsetext; alert(" 取得しました "); httpobj.send("nameid=" + nameid);//post で送るリクエスト要求の送信 function setzaiko(id){ var httpobj = getmyxmlhttp();// サーバと通信するためのオブジェクト取得 httpobj.open("post", " の POST で情報を要求 httpobj.setrequestheader('content-type', 'application/x-www-form-urlencoded');// 文字化け対策 httpobj.onreadystatechange = function(){//http のレスポンスで実行するように関数登録 if(httpobj.readystate == 4 && httpobj.status == 0){ if(httpobj.responsetext == -1) alert(" 変更しましませんでた "); else alert(" 変更しました "); var nameid = document.getelementbyid(id).value;// 入力商品名取得 var zaiko = document.getelementbyid("zaiko").value; httpobj.send("nameid=" + nameid + "&zaiko=" + zaiko);//post のリクエスト送信 </script></head> <body>

2 ネットワーク Ⅳ 32 ページ Servlet と JSP と Ajax 紹介 <body> <p > 商品名 :<input type="text" value="goodsa" id="nameid"></p> <p > 在庫数 :<input type="text" value="0" id="zaiko"></p> <p> 在庫数の <input type="button" value=" 取得 " onclick="getzaiko('nameid')"> <input type="button" value=" 変更 " onclick="setzaiko('nameid')"></p> <p><a href="shouhinprint.jsp" target="_blank"> 商品テーブル (shouhin) の確認 </a></p> <p><a href="shouhinedit.jsp?nameid=goodsa" target="_blank"> shouhinedit.jsp 取得のデバック用 </a></p> <p><a href="shouhinedit.jsp?nameid=goodsa&zaiko=999" target="_blank"> 変更のデバック用 </a></p> </body></html> 動作概要各ボタン操作で対応するクエリ文字列指定の shouhinedit.jsp を実行させているこの応答情報が 31 ページソース内の破線部であるこの時使う shouhinedit.jsp を下に示す contenttype="text/html; charset=utf-8" language="java" import="java.util.*" %> <%! // メソッド定義 int getzaiko(string nameid){// 在庫取得 int r = -1;// リターン用 HashMap <String,Integer> hashmap = new pkg.goodsdb().getsqlresult( "SELECT nameid,zaiko FROM shouhin WHERE nameid ='" + nameid + "'"); if( hashmap!= null) r = hashmap.get(nameid);// エラー対策していないので注意 return r; int changezaiko(string nameid, int zaiko){// 在庫変更 return new pkg.goodsdb().sqlupdate(string.format( "UPDATE shouhin SET zaiko=%d WHERE nameid = '%s'", zaiko, nameid) ); %> <% // メインの処理 (Ajax の応答用の出力処理なので HTML のタグはいらない!) String nameid = request.getparameter("nameid"); String zaiko = request.getparameter("zaiko"); if( zaiko == null ) { out.println( getzaiko(nameid));// 在庫取得 else { int n = changezaiko(nameid, Integer.parseInt(zaiko)); // 在庫変更 out.println(n); %> 上記行や行の out.println がプリント 31 の shouhinedit.html 内の破線部分内の httpobj.responsetext で得られる文字列になるそれは在庫取得の場合は在庫数であり変更処理の場合は変更したレコード数で失敗の場合はどちらも -1 の文字列が返るなお上記で使っている pkg.goodsdb クラスは 27 ページで紹介したクラスに 30 ページで示したメソッドを追加したクラスで all 作品内の WEB-INF classes pkg に用意してある ( データベースは一つなので自分が変更した直後に他人が変更している可能性があるのでデバックの時そのことを考慮のこと ) pkg.goodsdb のクラス図を参考に示す上記行で呼び出しており SELECT で得られる 2 列の表を HashMap に入れて返す上記行で呼び出しており UPDATE の変更処理を行う

3 ネットワーク Ⅳ 33 ページ Servlet と JSP と Ajax 紹介最後にもう一つの Ajax 作品例を示す時間が少なくてもできるようにほとんど作ってあり public に置いてある memo.html のファイルをコピーしそれを変更するとすぐ実験できるので確認せよこの作品は Twiter のようにメッセージを追加表示削除することができるものであるグループで指定したメッセージだけが発言した時間の降順で見ることができます追加ボタンでメッセージが追加され匿名でメッセージが追加されますだれでも削除ボタンで選択メッセージが削除可能以下で作った過程を示す ( 簡単なメッセージサーバを Servlet で実現する例 ) 複数のグループのメッセージ群をサーバ側の一つのテキストファイル (message.txt) で管理することにするまずこのファイルの操作を実現するだけのクラスを pkg. Memo で実現するそしてそれを操作するサーブレットを pkg.memoservlet で実現するそしてこのサーブレットクラスと Ajax 通信で操作や画面反映を担当する memo.html を作るなおこのような作品は確実に動作ができるサーブレットを作ってから対応する HTML を作らないとどこでエラーが発生しているのか分からなくなるそこで pkg.memoservlet の動作確認の単純な HTML を別途に作成する (memotest.html で作成した ) まず pkg. Memo クラスに必要な仕様を次のように決めたサーバ側 message1.txt のファイルにメッセージを記録し操作 ( 追加取得削除 ) に応じた情報をクライアントに返す簡単な仕様としたまず message1.txt の構造を次のような構造のレコードの集合に決めた (1) グループ識別文字列,(2) メッセージ生成時間の文字列,(3) 改行を含まないメッセージ文字列改行上記 (1)(2)(3) は改行を含めないものとし message1.txt 内の改行がメッセージの数と一致するように制御するそして各行は (2) の降順に整列されてファイルに記憶するよう制御する上記 (1),(2) の直後のコンマを区切文字に使いそれぞれの文字列にはコンマが含まれないよう制御するまた各行の個々の情報は変更できないものとする ( 削除は可能 ) このファイルに対するクライアントからの操作で使う HTTP リクエストメッセージのクエリ文字列で使い名前は OP GROUP TIME MESSAGE の4つで TIME MESSAGE は使わない場合がある GROUP TIME MESSAGE は各(1)(2)(3) の文字列に対応する情報用とするなお (1) の GROUP の値となる文字列はクライアントからのアクセス制限用に使いこの情報が異なるグループのメッセージを操作することがないように制御する OP の値となる文字列が操作を意味し次の通りです (memo.html からクエリ文字列例も示す )

4 ネットワーク Ⅳ ページ Servlet と JSP と Ajax 紹介 (a) 追加 ( #Memo.add メソッド内部で load や save メソッドを利用 ) OP=add&GROUP= &MESSAGE= 現在時間でのメッセージ ( ) を追加します応答メッセージはの追加したメッセージ文字列 (b) メッセージ文字列群取得 ( #Memo.getd メソッド ) OP=get&GROUP= のグループの全てメッセージを新しい順で取得する応答メッセージは (2) メッセージ生成時間の文字列,(3) 改行を含まないメッセージ文字列改行が列挙されたイメージで得られる (c) 削除 ( #Memo.load メソッド内部で load や save メソッドを利用 ) OP=del& GROUP= &TIME= のグループでの時間のメッセージを削除する応答メッセージは削除した (3) のメッセージ文字列以上の操作を行うための Memo.java を作りそれをサーブレット上で実現する MemoServlet.java を次のように作成した (MemoServlet.java で上記操作以外は要求したクエリ文字列を返します ) 上記を実現した pkg. Memo とこれを利用する pkg.memoservlet のクラス図を示す以下に memo.html を示す (public からコピーして削除の部分を追加してみよう ) <!DOCTYPE html> <html><head> <meta charset="utf-8"> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <style type="text/css"> // ここは省略します実際のソースを参照のこと </style> <title>memo</title> <script type="text/javascript"src="httprequest.js"></script> </head><body><h1> メッセージ操作 </h1> <div id="msg"></div> グループ名 :<input type="text" id="group" size="" value="test"><br> メッセージ :<input type="text" size="70" id="message"><br><br> メッセージの <input type="button" value=" 取得 " onclick="getmsg()"> <input type="button" value=" 追加 " onclick="addmsg()"> <input type="button" value=" 削除 " onclick="delmsg()"> </body> <script type="text/javascript"> var inputgroup = document.getelementbyid("group"); var inputmessage = document.getelementbyid("message"); function sendmessage(postmsg){ var httpobj = getmyxmlhttp();// サーバと通信するためのオブジェクト取得 httpobj.open("post", "../MemoServlet", false);//http の POST で要求 ( 第 2 引数で同期式の使い方を指定 ) // 第 3 引数が false で同期式を指定している httpobj.setrequestheader('content-type', 'application/x-www-form-urlencoded');// 文字化け対策 httpobj.send(postmsg);//post でリクエスト要求の送信, 同期式の場合は次で応答を受信 return httpobj.responsetext;// レスポンス文字列を返す function getmsg(){

5 ネットワーク Ⅳ 35 ページ Servlet と JSP と Ajax 紹介 function getmsg(){ var msg=sendmessage("op=get&group="+encodeuri(inputgroup.value)); if(inputgroup.value == "")document.getelementbyid("msg").innerhtml = msg; else{ var a = msg.split(" r n"); if(a == null a.lenght ==0) return; var i,len = a.length; var s = ""; for(i=0; i < len; i++){ if(a[i] == "") continue; //alert(a[i]); var i1 = a[i].indexof(","); if(i1 == -1) continue; var t = a[i].substring(0, i1); s+="<div class='m'><input type='radio' name='r' value='"; s+=t+"'>"; s+= new Date(parseInt(t)). tolocalestring(); s+= " [" + inputgroup.value + "] のメッセージ <br>"; s+= a[i].substring(i1+1); s+="</div> n"; //alert(s); document.getelementbyid("msg").innerhtml = s; function addmsg(){ var s = "OP=add&GROUP="+encodeURI(inputGROUP.value); s+="&message="+encodeuri(inputmessage.value); //alert(s); var msg=sendmessage(s); //alert(msg); getmsg(); function delmsg(){ var a = document.getelementsbyname("r"); var deltime = null; if(a == null a.length == 0) { alert(" 削除項目がありません "); return; var i=0; for(i=0; i < a.length; i++){ if(a[i].checked) { deltime = a[i].value; break; if(deltime == null){ alert(" 削除項目が選択されていません "); return; var s = "OP=del&GROUP="+encodeURI(inputGROUP.value); s+="&time="+deltime; //alert(s); var msg=sendmessage(s); //alert(msg); getmsg(); </script> </html>

6 ネットワーク Ⅳ 36 ページ Servlet と JSP と Ajax 紹介 pkg.memoservlet のソースを示す (all 作品内の WEB-INF classes pkg に用意してある ) package pkg; import java.io.*; import javax.servlet.*; import javax.servlet.annotation.webservlet; import public class MemoServlet extends HttpServlet { private static final long serialversionuid = 2L; Memo memo = new Memo(); public void doget(httpservletrequest req,httpservletresponse response) throws ServletException, IOException { response.setcontenttype("text/html;charset=utf-8");// 日本語が化け対策 PrintWriter out = response.getwriter(); out.println("<html>"); out.println("<body>" ); out.println("<h1> メッセージサーバ </H1>"); out.println("</body>"); out.println("</html>"); public void dopost(httpservletrequest request, HttpServletResponse response) throws ServletException, IOException { PrintWriter out = response.getwriter(); String op = request.getparameter("op"); String group = request.getparameter("group"); String time = request.getparameter("time"); if(group == null) group =""; if(time == null time.equals("")) time ="0"; if(op == null){ out.print(" 操作なし "); else { try { if(op.equals("add")){ String message = request.getparameter("message"); //out.print("op:"+op+",group:"+group+",message:" + message); out.print(memo.add(group, message)); else if(op.equals("get")){ out.print(memo.get(group)); else if(op.equals("del")){ out.print(memo.del(group, Long.parseLong(time))); else{ out.print(" 不正命令 "); catch(exception e){ out.print(e.getmessage()); pkg. Memo クラスの呼び出しは行 39 行 41 行ですそれぞれでテキストファイル (message.txt) に対する追加取得削除の処理ができるように pkg. Memo クラスを作った

7 ネットワーク Ⅳ ページ Servlet と JSP と Ajax 紹介 pkg. Memo のソースを示す (all 作品内の WEB-INF classes pkg に用意してある ) package pkg; import java.io.*; import java.util.*; public class Memo { String path="e: xampp htdocs a0 message.txt"; File file = new File(path); ArrayList <String> list; public Memo(){ if(file.exists()==false) { new RuntimeException("no file:" + file.getabsolutepath()); static long gettime(string s){// 最初コンマ, から次のコンマの文字列を数値変換して返す int i1 = s.indexof(','); int i2 = s.indexof(',', i1+1); String t = s.substring(i1+1, i2); //System.out.println("Time:"+t); return Long.parseLong(t);// 生成時間 void sort(){//list の生成時間によるソート ( 降順 ) int i,k; // 添え字 String work; // 挿入に使う作業用 String temp; i = 0; while(i < list.size()-1){ k =i+1; work = list.get(k); while(k-1 >= 0){ temp = list.get( k-1 ); long wi = gettime(work); long ti = gettime(temp); if( ti >= wi )break; list.set(k, temp); k--; list.set(k, work); i++; void load() throws Exception { FileInputStream fis = new FileInputStream(file); BufferedReader br = new BufferedReader(new InputStreamReader(fis,"utf-8")); list = new ArrayList<String>(); String s; while((s = br.readline())!= null){ if(s.equals(""))continue; list.add(s); fis.close(); sort();// 並び替え

8 ネットワーク Ⅳ 38 ページ Servlet と JSP と Ajax 紹介 void save() throws Exception { PrintWriter pw = new PrintWriter(file,"utf-8"); for(int i=0; i < list.size(); i++){ pw.print(list.get(i) + " r n"); pw.close(); synchronized public String add(string groupid, String message)throws Exception { Date date = new Date(); String s = groupid + ',' + date.gettime() + ',' + message; load(); list.add(s); save(); return message; synchronized public String get(string groupid)throws Exception { boolean debug = groupid.equals("");// デバック用で確認後に false にする load(); StringBuilder sb = new StringBuilder(); groupid += ","; int k = groupid.length(); for(int i=0; i < list.size(); i++){ String s = list.get(i); if(s.startswith(groupid)){ sb.append(s.substring(k)+" r n"); else if(debug){ sb.append(s+" r n"); return sb.tostring(); synchronized public String del(string groupid, long time)throws Exception { load(); groupid += ","; int k = groupid.length(); String rtnval =""; for(int i=0; i < list.size(); i++){ String s = list.get(i); if(s.startswith(groupid) && gettime(s) == time) { list.remove(i);// 削除 save(); int n = s.indexof(',') + 1; rtnval=s.substring(s.indexof(',',n)+1);// メッセージ部取得 break; return rtnval;

メディプロ1 Javaサーブレット補足資料.ppt

メディプロ1 Javaサーブレット補足資料.ppt メディアプロジェクト演習 1 Java サーブレット補足資料 CGI の基本 CGI と Java サーブレットの違い Java サーブレットの基本インタラクティブな Web サイトとは Interactive q 対話または双方向 q クライアントとシステムが画面を通して対話を行う形式で操作を行っていく仕組み利用用途 Web サイト, シミュレーションシステム, ゲームなど WWW = インタラクティブなメディア