Ajax サンプル 画像の表示
画像の表示
このサンプルソースは、画像ファイルを使用したサンプルになります。
まず、初回起動時に部品名のCOMBOを作成し、部品名COMBOで選択された部品コードに
紐付く IFS上に保管してある画像データを表示します。
それでは下記サンプルソースで番号順に説明します。
■ 初期画面
■ HTML サンプルソース
<html>
<head>
<meta http-equiv="Content-Language" content="ja">
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>AJAXサンプル 動的 画像表示</title>
<STYLE TYPE="TEXT/CSS">
BODY{margin:15px;font-size:13px;background:#fff;text-align:center;color:#444;}
FORM{margin:0;}
H1{font-size:26px; margin:10px 0px; color:#666;}
HR{height:1px;filter: Alpha(opacity=100,finishOpacity=0,style=1,startX=90,finishX=100) Alpha(opacity=0,finishOpacity=100,style=1,startX=0,finishX=10);}
TABLE{margin:10px 3px;FONT-SIZE:14px;}
.HAND{cursor:hand;filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#EEEEEE, EndColorStr=#AAAAAA);}
.MAIN{width:300px;height:50px;font-size:10pt;border:1px solid #999;border-collapse:collapse;}
.MAIN TD{border-bottom:1px solid #ccc;background:#eee;padding:3px 10px;color:#444;}
.MAIN TH{border:1px solid #9ac;background:#cde9ff;color:#2e6692;}
.MAIN1{width:400px;height:300px;font-size:10pt;border:1px solid #999;border-collapse:collapse;}
.MAIN1 TD{border-bottom:1px solid #ccc;background:#eee;padding:3px 10px;color:#444;}
.MAIN1 TH{border:1px solid #9ac;background:#cde9ff;color:#2e6692;}
</STYLE>
<script language="javascript">
/* 画像ﾃﾞｰﾀ取得 */
③function getBhnImgDta(obj){
// このｺｰﾄﾞでは ﾘｸｴｽﾄしないようにしておく
if(obj.value=="0000"){
return;
}
// Ajax ﾘｸｴｽﾄ
var reqUrl="/cgi-bin/AJX003SAM.PGM?";
reqUrl+="ID=CMB_BHNCOD";
reqUrl+="&EVENT=ONCHANGE";
reqUrl+="&RECORD=DSPHEAD";
reqUrl+="&BMCODE="+obj.value;
reqUrl+="&dummydate="+new Date().getTime();
new Ajax.Request(reqUrl, {method :"GET", onComplete:setBhImgDta});
}
/* 取得した画像ﾃﾞｰﾀを各表示領域にｾｯﾄする */
⑥function setBhImgDta(httpObj){
var obj=httpObj.responseXML.documentElement;
var len=obj.childNodes.length;
var nodeVal;
for(var i=0;i<len;i++) {
/* XMLｴﾚﾒﾝﾄ node Name */
var nodeNm=obj.childNodes[i].nodeName;
/* XMLｴﾚﾒﾝﾄ node Obj */
var nodeObj=obj.getElementsByTagName(nodeNm).item(0).firstChild
/* XMLｴﾚﾒﾝﾄ node Value */
nodeVal="";
if(nodeObj==null){nodeVal="";}else{nodeVal=nodeObj.nodeValue;}
}
// ﾃﾞｰﾀ有無存在ﾁｪｯｸ
⑥-1 if(len==0){
$('SELIMG').innerHTML = "<center>対象画像が存在しません。</center>";
}else{
var imgTag="";
imgTag+= "<img src=\""+nodeVal+"\">";
$('SELIMG').innerHTML = imgTag;
}
}
</script>
</head>
<body>
<h1>AJAXサンプル 動的 画像表示</h1>
<hr>
<ul>
<li>画像コードを選択し 、存在すれば対象画像データが表示されます。※データ上、関連性のない画像が表示されます。</li>
</ul>
<form name="frmDsphead" method="GET" action="/cgi-bin/AJX003SAM.PGM">
<!-- ｲﾍﾞﾝﾄﾄﾞﾘﾌﾞﾝ用 Hidden -->
<input type="hidden" name=ID>
<input type="hidden" name=EVENT>
<input type="hidden" name=RECORD value="DSPHEAD">
<table class="MAIN">
<tr>
<th>画像コード</th>
<td>
<!-- AJX003SAM の初回起動時に COMBO ADDITMでｾｯﾄしている-->
② <select name=CMB_BHNCOD id="CMB_BHNCOD" onChange="getBhnImgDta(this);" alt="12A">
<option value="0000">▼画像コードを選択して下さい。</option>
</select>
</td>
</tr>
</table>
</p>
<!-- ｺﾝﾎﾞ DSPF の入出力属性 を O→B を考慮 -->
<input type="hidden" name=BMCODE id="BMCODE" alt="12A">
</form>
<table class="MAIN1">
<tr height="20"><th>画像</th></tr>
<tr height="280"><td><span id="SELIMG"> </span></td></tr>
</tr>
</table>
<hr>
<input type="button" class="HAND" value="閉じる" onClick="clsApplication();">
<!-- ｲﾍﾞﾝﾄﾄﾞﾘﾌﾞﾝ用 Hidden -->
<input type="hidden" name="ERRMSG" value="">
<input type="hidden" name="REVIMG" value="">
<input type="hidden" name="CURSOR" value="">
</body>
<!-- JavaScript VBScript Lib-->
<script type="text/javascript" src="/AS400-NET.USR/JS/RPG_SP.JS"></script>
<script type="text/javascript" src="/AS400-NET.USR/JS/RPG_SP_CLCHK.JS"></script>
<script type="text/javascript" src="/AS400-NET.USR/JS/RPG_SP_GUI_EV.JS"></script>
<script type="text/javascript" src="/AS400-NET.USR/JS/PROTOTYPE.JS"></script>
<script type="text/vbscript" src="/AS400-NET.USR/JS/CHKFORMAT.VBS"></script>
<script type="text/vbscript" src="/AS400-NET.USR/JS/CHKLENGTH.VBS"></script>
</html>
■ RPG# サンプルソース
H NOMAIN BNDDIR('ASNET.COM/MAIN') DATEDIT(*YMD/)
H THREAD(*CONCURRENT)
F********** 部品イメージ・ファイル
F* AJX003SAM 言語 : RPG# VER 5.1
F**********************************************************************
FAJX003SAMHCF E SPECIAL PGMNAME('ASNET.COM/HTMLDVR')
F PLIST(HPARM)
F INFDS(INFDSF)
FBUHINM IF E K DISK EXTFILE(BUHINM_LIB)
FBHIMAGE IF E K DISK EXTFILE(BHIMAGE_LIB)
F**********************************************************************
F*---------------------------------------------------------------------
F* CRTMOD=CRTWEBMOD QTEMP/AJX003SAM SRCFILE(ASNET.USR/QRPGLESRC) +
F* OPTION(*NOXREF *NOSECLVL *NOEXPDDS *NOSHOWCPY) AUT(*ALL)
F* CRTPGM=CRTPGM CGIBIN/AJX003SAM MODULE(ASNET.COM/MAIN QTEMP/PROJEC
F* T ACTGRP(*NEW) AUT(*ALL)
F*---------------------------------------------------------------------
/COPY ASNET.USR/QRPGLESRC,PROTOTYP5#
/COPY ASNET.USR/QRPGLESRC,COMBOBOX5#
/COPY ASNET.USR/QRPGLESRC,XML#5
D GET_BHIMAGE PR
D HTM_FILE S 10A INZ('AJX003SAMH')
D HTM_LIB S 10A INZ('*LIBL ')
D BUHINM_LIB S 21 INZ('QTRFIL/BUHINM')
D BHIMAGE_LIB S 21 INZ('QTRFIL/BHIMAGE')
D HTM_DIR S 128A INZ('/AS400-NET.USR/PROJECT/-
D AJX003SAM')
D RSTAG_NM S 9A
D FIELD S 12A
D VALUE S 50A
D
D*( ファイル情報データ構造 )
D INFDSF DS
D 512A
D HTM_RECORD *RECORD
D*( プログラム状況データ構造 )
D INFDSP SDS
D 512A
/COPY ASNET.USR/QRPGLESRC,HPARM
C*-------------------------------------------------------
C SETKEY KLIST
C KFLD BMCODE
C*-------------------------------------------------------
*********************************************************
P EVENT B EXPORT
*********************************************************
D PI
/FREE
④ ON_CHANGE('DSPHEAD':'CMB_BHNCOD': %PADDR(GET_BHIMAGE));
/END-FREE
P E
*********************************************************
① P BEGIN B EXPORT
*********************************************************
* 最初の画面を出力します。
D PI
C READ DSPHEAD
C DOW *IN50=*OFF
C SETOFF 50
C READ BUHINM 50
C 50 CALLP SETEOF
C 50 LEAVE
C CALLP COMBO(ADDITM:'CMB_BHNCOD':BHNCOD:BHNAME:L
C END
C WRITE DSPHEAD
P E
*********************************************************
⑤ P GET_BHIMAGE B EXPORT
*********************************************************
D PI
C READ DSPHEAD
C MOVEL BMCODE CMPVAL 12
C
C CALLP INZXML
C EVAL RSTAG_NM = 'RESULT' + X'00'
C CALLP BEGINXML(%ADDR(RSTAG_NM))
C
C SETKEY CHAIN BHIMAGE
C IF %FOUND
C 'HIT' DSPLY
C EVAL FIELD = 'BMCODE'+ X'00'
C EVAL VALUE = BMCODE + X'00'
C CALLP ADDXML5026(%ADDR(FIELD):%ADDR(VALUE))
C
C EVAL FIELD = 'BMIMAGE' + X'00'
C EVAL VALUE = BMIMAGE + X'00'
C CALLP ADDXML5026(%ADDR(FIELD):%ADDR(VALUE))
C
C ELSE
C 'NOHIT' DSPLY
C
C ENDIF
C
C CALLP ENDXML(%ADDR(RSTAG_NM))
C CALLP SENDXML
P E
*********************************************************
P END B EXPORT
*********************************************************
* 最後の処理を記述します。
D PI
C CLOSE AJX003SAMH
C CLOSE BUHINM
C CLOSE BHIMAGE
P E
***************** データの終わり **************************************
サンプルソース のコード説明
まず、初回起動時に ① の BEGINプロシージャ が呼び出されます。
ここでは、部品ファイルを全件読み込み COMBOプロシージャ を使用し
画像コード COMBO を動的に作成しています。
② の HTML に CMB_BHNCOD という <SELECT>タグがあります。
この CMB_BHNCOD に COMBOプロシージャを使用し部品ファイルのデータを
動的に追加していきます。まず、これで初期画面が表示されます。
次に初期画面で 画像コード COMBO で データを選択すると ② の
<select> タグ に JavaScript のイベントハンドラである onChangeハンドラ が
記述してあります。
onChangeハンドラの右に ="getBhnImgDta(this);" と記述してあるのが、
呼び出される JavaScript のメソッドになります。
それが ③ の getBhnImgDta()メソッド になります。
この メソッド内で、実際に RPG#-CGI にリクエストする引数を設定しRPG#-CGIに
要求します。
この場合ですと AJX003SAM.pgm に渡す引数を以下のように設定しています。
RPG# で必須になる ID( GUIコントロールのID名 )、EVENT( ONCHANGE )、RECORD( DSPHEAD )、そして入力された 部品コードの値 を設定しています。
そして Ajax.Request を使用しリクエストします。
そして RPG#-CGI でリクエスト内容を判断し ④ の EVENTプロシージャ の記述通り DSPHEAD( RECORDで設定した値 ) 画面で CMB_BHNCOD( GUIコントロールの
ID名 ) が ON_CHANGE( EVENTで 設定した値 )したという合図を受け %PADDR() で
記述しているプロシージャが実行されます。
ON_CHANGE('DSPHEAD':'CMB_BHNCOD': %PADDR(GET_BHIMAGE));
この ⑤ の GET_BHIMAGEプロシージャ で XML レスポンスを生成し以下のような XML をクライントに送信します。
※ XML 生成方法は、解説書 / RPG#解説書 / GUIコントロールの制御 / XML を参照ください。
該当データが存在した場合のXML
<?xml version="1.0" encoding="Shift_JIS" ?> <RESULT> <BMCODE>BUH-003 </BMCODE> <BMIMAGE>/AS400-NET.USR/PROJECT/CGI008/IMG/DANCER.JPG </BMIMAGE> </RESULT>
該当データが存在しない場合のXML
<?xml version="1.0" encoding="Shift_JIS" ?> <RESULT> </RESULT>
ここから RPG#-CGI から JavaScript に戻ります。
③ の Ajax リクエストで以下のコードがありましたが、onComplete: setShnData と記述があります。
これはコールバック関数というものでクライントに制御が移れば、ここで定義した JavaScript のメソッドが呼び出されます。
new Ajax.Request(reqUrl, {method :"GET", onComplete:setBhImgDta});
ここでは ⑥ setBhImgDatメソッド が呼び出されることになります。
最後に RPG#-CGI より送信された XMLレスポンス を ⑥ で DOM解析し HTML の各表示領域に値を設定します。
⑥-1 では、部品イメージファイルにデータが存在すれば上記のような XML をレスポンスし、対象データが存在しない
場合は、上記のような実体データがない XML をレスポンスします。
これをデータ有無存在チェックに使用し、出力する内容を判断しています。
対象データが存在した場合
※<img>タグを動的に生成し画像を表示します。
<img src="取得した画像URL">
対象データが存在しない場合
<center>対象画像が存在しません。</center>