演習2：AJAXEX2 簡単なAJAXの実行
ステップ
· 「メモ帳」を使用して「AJAXページAJAXEX2.HTM」のDHTML-JavaScriptコードをコピーして貼り付け、フレームワークのプライベート作業フォルダーにAJAXEX2.HTMという名前のAJAXページ・ファイルとして保存します。
· 「AJAXファンクションAJAXEX2」のAJAXファンクション・コードをコピーして、VL-IDEでAJAXEX2という名前のRDMLファンクションに貼り付けます。Webサーバーで実行できるようにRDMLファンクションAJAXEX2をコンパイルします。
· ビジネス・オブジェクトAJAXで、AJAXページ・ファイルAJAXEX2.HTMとAJAXファンクションAJAXEX2を、次のようにコマンドAJAXEX2と関連付けるコマンド・ハンドラーとしてフレームワークにスナップインします。
· フレームワークを保存、再起動し、Webブラウザーで実行します。アプリケーション'AJAX Examples'を選択し、ビジネス・オブジェクトAJAXを選択します。これにより、デフォルト・コマンドAJAXEX1が実行されます。AJAXEX2タブをクリックしてAJAXEX2コマンドを実行します。
数字を入力してIncrementボタンまたはDecrementボタンをクリックします。入力した値はWebサーバー上のAJAXファンクションに送信され、要求したとおりにインクリメントまたはデクリメントされます。結果がAJAXページに表示されます。
インクリメントまたはデクリメントするために数字をWebサーバーに送信する動作は、すべてのAJAXアプリケーションの基礎となる部分を説明しています。その部分には次のようなものがあります。
· サーバーへの要求の送信
· サーバーからの応答の受信
· 非同期処理
· Webページの動的更新
AJAXEX2.HTMのJavaScript/DHTMLコードとAJAXファンクションAJAXEX2のRDMLコードを見直して、コードの動作と実行方法の基本部分を理解する必要があります。
<HTML>
<HEAD id='HEAD_Tag'>
<link rel='stylesheet' type='text/css' href='vf_vs001.css' >
<script>
/* ======================================================================== */
/* ======================== Handle Page Initialization ==================== */
/* ======================================================================== */
function VF_AJAX_Initialize()
{
/* Insert the variable style sheet (ie: XP, WIN, WEB style) into this page */
{
var objLink = document.createElement("LINK");
objLink.rel = "stylesheet"; objLink.type = "text/css";
objLink.href = STYLESHEET();
document.getElementById("HEAD_Tag").insertAdjacentElement("afterBegin",objLink);
}
/* Finished */
return;
}
/* ======================================================================== */
/* ======================== Handle Page Execution ========================= */
/* ======================================================================== */
function VF_AJAX_Execute()
{
SETBUSY(false);
return;
}
/* ======================================================================== */
/* ======================= Handle Page Termination ======================== */
/* ======================================================================== */
function VF_AJAX_Terminate()
{
return;
}
/* -------------------------------------------------------- */
/* Rationalized virtual clipboard access to name space AJAX */
/* -------------------------------------------------------- */
function Put(val,np2,np3,inst) {AVSAVEVALUE(val,"AJAX",np2,np3,inst);}
function GetN(np2,np3,inst) {return(AVRESTORENVALUE(0,"AJAX",np2,np3,inst));}
/* ---------------------------------------- */
/* Handle a click of button BUTTON_onclick */
/* ---------------------------------------- */
function BUTTON_onclick(strRequest)
{
/* Ignore if already busy doing something else */
if (BUSY()) return;
/* Validate the number and put it onto the clipboard */
{
var floatNumber = parseFloat(NUMBER_Tag.value);
if (isNaN(floatNumber)) { alert("Invalid number entered"); return; }
Put(floatNumber,"NUMBER");
}
/* Make busy now */
SETBUSY(true);
/* Update the message area */
MESSAGE_Tag.innerText = "Processing your request now. Please wait.";
MESSAGE_Tag.style.backgroundColor = "orange";
/* Now send INCREMENT/DECREMENT request the server RDML function named AJAXEV2 */
if (strRequest =="I" ) SENDREQUEST(window,"","INCREMENT","",INCREMENT_response);
else SENDREQUEST(window,"","DECREMENT","",DECREMENT_response);
/* Finished */
return;
}
/* ------------------------------------- */
/* Handle server responding to INCREMENT */
/* ------------------------------------- */
function INCREMENT_response(strFunction,strRequest,strPayload,objObject,flagFatalError,strFatalMessage)
{
/* Handle a fatal error in the server function */
if (flagFatalError) { alert(strFatalMessage); SETBUSY(false); return; }
/* Otherwise display the result to the user */
NUMBER_Tag.value = GetN("NUMBER").toString();
MESSAGE_Tag.innerText = "Increment operation completed normally.";
MESSAGE_Tag.style.backgroundColor = "yellow";
SETBUSY(false);
/* Finished */
return;
}
/* ------------------------------------- */
/* Handle server responding to DECREMENT */
/* ------------------------------------- */
function DECREMENT_response(strFunction,strRequest,strPayload,objObject,flagFatalError,strFatalMessage)
{
/* Handle a fatal error in the server function */
if (flagFatalError) { alert(strFatalMessage); SETBUSY(false); return; }
/* Otherwise display the result to the user */
NUMBER_Tag.value = GetN("NUMBER").toString();
MESSAGE_Tag.innerText = "Decrement operation completed normally.";
MESSAGE_Tag.style.backgroundColor = "aqua";
SETBUSY(false);
/* Finished */
return;
}
</script>
</HEAD>
<BODY id='HEAD_Tag'>
<br/><br/><br/>
<P align='center'>Hello World 2</p>
<span> Input Number ==> </span><input id='NUMBER_Tag' type='text'><span> then click a button ==> </span>
<input id='BUTTON1_Tag' type='button' value='Increment' onclick='BUTTON_onclick("I");'>
<input id='BUTTON2_Tag' type='button' value='Decrement' onclick='BUTTON_onclick("D");'>
<br/><br/><div id='MESSAGE_Tag' align='center'></div>
</BODY>
</HTML>
* This is just a simple RDML function.
* It is NOT a WAM function.
* It is driven by the virtual clipboard
Function Options(*DIRECT *HEAVYUSAGE)
* Define local fields
Define Field(#REQUEST) Reffld(#STD_OBJ)
Define Field(#NUMBER) Type(*DEC) Length(30) Decimals(9)
Define Field(#MSGDTA) Type(*CHAR) Length(132)
* Get the action the Javascript requested in paramter 3
* ..... when it executed this ...
* SENDREQUEST(window,"","INCREMENT",INCREMENT_response);
* ..... or this .....
* SENDREQUEST(window,"","DECREMENT",DECREMENT_response);
Execute Subroutine(GETA) With_Parms(SYSTEM REQUEST 1 #REQUEST)
* Now switch on the requested action
Case Of_Field(#REQUEST)
* Get NUMBER from the clipboard, increment and put back
When Value_Is('= INCREMENT')
Execute Subroutine(GETN) With_Parms(NUMBER ' ' 1 #NUMBER)
Change Field(#NUMBER) To('#NUMBER + 1')
Execute Subroutine(PUTN) With_Parms(NUMBER ' ' 1 #NUMBER)
* Get NUMBER from the clipboard, decrement and put back
When Value_Is('= DECREMENT')
Execute Subroutine(GETN) With_Parms(NUMBER ' ' 1 #NUMBER)
Change Field(#NUMBER) To('#NUMBER - 1')
Execute Subroutine(PUTN) With_Parms(NUMBER ' ' 1 #NUMBER)
Otherwise
Use Builtin(BCONCAT) With_Args('Unknown request' #REQUEST 'received by' *FUNCTION) To_Get(#MSGDTA)
Abort Msgid(DCM9899) Msgf(DC@M01) Msgdta(#MSGDTA)
Endcase
* Finished
Return
* =====================================================
* Rationalized subroutines for virtual clipboard access
* =====================================================
Subroutine Name(PUTA) Parms((#NP2 *RECEIVED) (#NP3 *RECEIVED) (#INST *RECEIVED) (#AVAL *RECEIVED))
Define Field(#NP2) Type(*CHAR) Length(28)
Define Field(#NP3) Type(*CHAR) Length(24)
Define Field(#INST) Type(*DEC) Length(7) Decimals(0)
Define Field(#AVAL) Type(*CHAR) Length(256)
Use Builtin(VF_SAVEAVALUE) With_Args(#AVAL AJAX #NP2 #NP3 #INST)
Endroutine
Subroutine Name(PUTN) Parms((#NP2 *RECEIVED) (#NP3 *RECEIVED) (#INST *RECEIVED) (#NVAL *RECEIVED))
Define Field(#NVAL) Type(*DEC) Length(30) Decimals(9)
Use Builtin(VF_SAVENVALUE) With_Args(#NVAL AJAX #NP2 #NP3 #INST)
Endroutine
Subroutine Name(GETA) Parms((#NP2 *RECEIVED) (#NP3 *RECEIVED) (#INST *RECEIVED) (#AVAL *RETURNED))
Use Builtin(VF_RESTOREAVALUE) With_Args(' ' AJAX #NP2 #NP3 #INST) To_Get(#AVAL)
Endroutine
Subroutine Name(GETN) Parms((#NP2 *RECEIVED) (#NP3 *RECEIVED) (#INST *RECEIVED) (#NVAL *RETURNED))
Use Builtin(VF_RESTORENVALUE) With_Args(0 AJAX #NP2 #NP3 #INST) To_Get(#NVAL)
Endroutine