Ajax サンプル 商品データの取得
商品データの取得
それでは、１つ目の サンプル画面として、よく使用されるパターンを紹介します。
このサンプルソースは、商品コードを入力し、その項目から フォーカス が離れるとSystem i 上の
データベースファイルを検索し、該当コードが存在すれば該当データを返し画面に表示する。
存在しなければ エラーダイアログを表示するサンプル画面になります。
それでは下記サンプルソースで番号順に説明します。
■ 初期画面
■ 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);}
INPUT{height:20px;border:1px solid #999;padding:2px;}
.HAND{cursor:hand;filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#EEEEEE, EndColorStr=#AAAAAA);}
.MAIN{width:300px;height:100px;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;}
</STYLE>
<script language="JavaScript">
/* 商品ﾃﾞｰﾀ取得 */
② function getShnDta(shnObj){
var reqUrl="/cgi-bin/AJX001SAM.PGM?";
reqUrl+="ID="+shnObj.id;
reqUrl+="&EVENT=ONCHANGE";
reqUrl+="&RECORD=DSPHEAD";
reqUrl+="&SHCODE="+shnObj.value;
reqUrl+="&dummydate="+new Date().getTime();
new Ajax.Request(reqUrl, {method :"GET", onComplete:setShnData});
}
/* 取得した商品ﾃﾞｰﾀを各表示領域にｾｯﾄする */
⑤ function setShnData(httpObj){
var obj=httpObj.responseXML.documentElement;
var len=obj.childNodes.length;
var errMsg="";
⑥ 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 */
var nodeVal="";
if(nodeObj==null){nodeVal="";}else{nodeVal=nodeObj.nodeValue;}
if(!$(nodeNm)) {
errMsg=nodeVal;
break;
}
$(nodeNm).innerText=nodeVal;
}
⑦ if(errMsg!="") alert(errMsg)
}
</script>
</head>
<body>
<h1>AJAXサンプル 商品データ取得</h1>
<hr>
<ul>
<li>商品コードを入力し フォーカスが離れた後、存在すれば対象商品データの内容が表示されます。</li>
</ul>
<form name="frmDsphead">
<!-- ｲﾍﾞﾝﾄﾄﾞﾘﾌﾞﾝ用 Hidden -->
<input type="hidden" name=ID>
<input type="hidden" name=EVENT>
<input type="hidden" name=RECORD value="DSPHEAD">
① <p>商品 ｺｰﾄﾞ <input type="text" name=SHCODE id="SHCODE" value="" onChange="getShnDta(this);" maxlength="10" size="12" alt="10A"><span> 該当ｺｰﾄﾞ ： NV-CF1 </span></p>
</form>
<table class="MAIN">
<tr>
<th width="100">商 品 名</th>
<td width="200" ><span id="SHNAME">商品名称</span></td>
</tr>
<tr>
<th>単 価</th>
<td align="right"><span id="SHTANK">単価</span></td>
</tr>
<tr>
<th>品種コード</th>
<td><span id="SHSCOD">品種コード</span></td>
</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********** AJAX サンプル *****************************
F* AJX001SAM : 言語 : RPG# VER 5.1
F**********************************************************************
FAJX001SAMHCF E SPECIAL PGMNAME('ASNET.COM/HTMLDVR')
F PLIST(HPARM)
F INFDS(INFDSF)
FSHOHIN IF E K DISK EXTFILE(SHOHIN_LIB)
F**********************************************************************
F*
F* CRTWEBMOD QTEMP/AJX001SAM SRCFILE(ASNET.USR/QRPGLESRC) AUT(*ALL)
F* CRTPGM CGIBIN/AJX001SAM MODULE(ASNET.COM/MAIN QTEMP/AJX001SAM)
F* ACTGRP(*NEW) AUT(*ALL)
F*
/COPY ASNET.USR/QRPGLESRC,PROTOTYP5#
/COPY ASNET.USR/QRPGLESRC,XML#5
D GET_SHNAME PR
D HTM_FILE S 10A INZ('AJX001SAMH')
D HTM_LIB S 10A INZ('*LIBL ')
D SHOHIN_LIB S 21 INZ('QTRFIL/SHOHIN')
D HTM_DIR S 128A INZ('/AS400-NET.USR/PROJECT/-
D AJX001SAM')
D NOTFOUND S 26A INZ(' データが存在しません。 ')
D
D RSTAG_NM S 9A
D FIELD S 30A
D MSG S 30A
D VALUE S 24A
D*( ファイル情報データ構造 )
D INFDSF DS
D 512A
D HTM_RECORD *RECORD
D*( プログラム状況データ構造 )
D INFDSP SDS
D 512A
D CPFID 7A OVERLAY(INFDSP:40)
/COPY ASNET.USR/QRPGLESRC,HPARM
C*-------------------------------------------------------
C TRNKEY KLIST
C KFLD SHCODE
C*-------------------------------------------------------
*********************************************************
P EVENT B EXPORT
*********************************************************
D PI
/FREE
③ ON_CHANGE('DSPHEAD':'SHCODE': %PADDR(GET_SHNAME));
/END-FREE
P E
*********************************************************
P BEGIN B EXPORT
*********************************************************
* 初期画面を出力します。
D PI
C WRITE DSPHEAD
P E
*********************************************************
④ P GET_SHNAME B EXPORT
*********************************************************
* 商品コードで入力後フォーカスが離れた時に呼出します。
D PI
C CALLP INZXML
C EVAL RSTAG_NM = 'RESULT' + X'00'
C CALLP BEGINXML(%ADDR(RSTAG_NM))
C
C READ DSPHEAD 99
C SETOFF 90
C TRNKEY CHAIN SHOHIN 90
C *IN90 IFEQ *ON
C
C EVAL FIELD = 'EMSG' + X'00'
C EVAL MSG = NOTFOUND + X'00'
C CALLP ADDXML5026(%ADDR(FIELD):%ADDR(MSG))
C
C ELSE
C
C EVAL FIELD = 'SHNAME' + X'00'
C EVAL VALUE = SHNAME + X'00'
C CALLP ADDXML5026(%ADDR(FIELD):%ADDR(VALUE))
C
C EVAL FIELD = 'SHTANK' + X'00'
C EVAL VALUE = %TRIM(%EDITC(SHTANK:'J')) + X'00'
C CALLP ADDXML5026(%ADDR(FIELD):%ADDR(VALUE))
C
C EVAL FIELD = 'SHSCOD'+ X'00'
C EVAL VALUE = SHSCOD + X'00'
C CALLP ADDXML5026(%ADDR(FIELD):%ADDR(VALUE))
C END
C
C CALLP ENDXML(%ADDR(RSTAG_NM))
C**** XML Response を送出します。 ****
C CALLP SENDXML
P E
*********************************************************
P END B EXPORT
*********************************************************
* 最後の処理を記述します。
D PI
C CLOSE AJX001SAMH
C CLOSE SHOHIN
P E
***************** データの終わり **************************************
サンプルソース のコード説明
まず、① の <input type="text"> タグ に JavaScript のイベントハンドラである onChangeハンドラが
記述してあります。
onChangeハンドラ の右に ="getShnDta(this);" と記述してあるのが、呼び出される
JavaScript のメソッドになります。
それが ② の getShnDta()メソッド になります。
この メソッド内で、実際に RPG#-CGI にリクエストする引数を設定し RPG#-CGI に要求します。
この場合ですと AJX001SAM.pgm に以下の引数を設定しています。
RPG# で必須になる ID( GUIコントロールのID名 )、EVENT( ONCHANGE )、RECORD( DSPHEAD )、
そして 入力された 商品コードの値 を設定しています。
最後に、PROTOTYPE.JS ライブラリー の Ajax.Request を使用し リクエストします。
そして RPG#-CGI で リクエスト内容を判断し ③ の EVENTプロシージャ の記述通り
DSPHEAD( RECORDで設定した値 ) 画面で SHCODE( GUIコントロールのID名) が
ON_CHANGE (EVENTで 設定した値) したという合図を受け %PADDR() で記述している プロシージャが実行されます。
ON_CHANGE('DSPHEAD':'SHCODE': %PADDR(GET_SHNAME));
この ④ の GET_SHNAME プロシージャ で XML レスポンスを生成し 以下のような XML をクライントに送信します。
※ XML 生成方法は、解説書 / RPG#解説書 / GUIコントロールの制御 / XML を参照ください。
該当データが存在した場合のXML
<?xml version="1.0" encoding="Shift_JIS" ?> <RESULT> <SHNAME>Ｃカセット編集ビデオ </SHNAME> <SHTANK>85,000-</SHTANK> <SHSCOD>0002</SHSCOD> </RESULT>
該当データが存在しない場合のXML
<?xml version="1.0" encoding="Shift_JIS" ?> <RESULT> <EMSG>データが存在しません。 </EMSG> </RESULT>
ここから RPG#-CGI から JavaScript に戻ります。② の Ajax リクエストで以下のコードがありましたが、
onComplete:setShnData と記述があります。
これはコールバック関数というもので クライントに制御が移れば、ここで定義した JavaScriptの メソッドが呼び出されます。
new Ajax.Request(reqUrl, {method :"GET", onComplete:setShnData});
ここでは ⑤ setShnDataメソッド が呼び出されることになります。
最後に RPG#-CGI より送信された XML レスポンス を ⑥、⑦ でDOM 解析し HTMLの各表示領域に値を設定します。
該当データが存在した場合の画面表示
該当データが存在しない場合の画面表示
