■HTML5Builderでajaxを使用する方法

HTML5Builderでajaxを使用する方法を紹介します。

ajaxを使用するポイントは次の2点です。

1. PageのUseAjaxプロパティをtrueにします。
   trueにすることでajaxの機能を使用できるようになります。

2. JavaScriptから実行するPHPの関数をajaxCallメソッドで指定します。
   PHPの関数をajaxで実行する時は、ajaxCallを使用します。

   function Button1JSClick($sender, $params) {
       //PHPのShowTime関数をajaxで実行する
       echo $this->Button1->ajaxCall('ShowTime');
   }
   

次のサンプルプログラムでは、現在の日時を表示します。

「新規作成」から「HTML5Builderプロジェクト」の「サーバーWebアプリケーション」を選択します。

LabelコンポーネントとButtonコンポーネントをPage1に配置します。

Page1のUseAjaxプロパティの値を「true」にします。

Button1のButtonTypeプロパティを「btNormal」に変更します。
初期値の「btSubmit」だとボタンを押すとSubmitしてしまいます。

コードを表示し、関数を追加します。

Label1に現在の日時を表示します。

function ShowTime() {
    $this->Label1->Caption = date('y/m/d(D) H:i:s');
}

Button1のJavascriptのOnClickイベントを追加します。
ajaxでShowTime関数を実行します。

function Button1JSClick($sender, $params) {
    echo $this->Button1->ajaxCall('ShowTime');
}

実行画面

■ajaxCallメソッドの引数

ajaxCallメソッドは引数を3つとります。

第1引数は実行するPHPの関数名です。

第2引数は…使われていないようです。不具合でしょうか？

第3引数は変更対象のコンポーネントの名前です。未指定の場合はすべてのコンポーネントが対象になります。

//Label1のみ変更する
echo $this->Button1->ajaxCall('ShowTime', array(), array('Label1'));

■ajaxCallでPHPの関数に引数を渡すには

ajaxで実行する関数に引数を渡すには、Javascriptで変数paramsに値を代入します。

次のサンプルプログラムは、引数の合計値を表示します。

//ajaxで実行するPHPの関数
//引数$paramsの合計値をLabel1に表示する
function sum($sender, $params) {
    $this->Label1->Caption = array_sum($params);
}

function Button1JSClick($sender, $params) {
    ?>
    //begin js
    params = [1,5,7]; //PHPのsum関数に渡す引数
    //end
    <?php
    echo $this->Button1->ajaxCall('sum');
}

なお、sum関数の第1引数($sender)はajaxCallを実行したコンポーネント（ここではButton1）になります。

ボタンを押すと…

[1,5,7]の合計値を表示します。

■追記

コメント欄で、RPCLにajaxの不具合があることを教えていただきました。

最新版のRPCLを導入する方法が以下のページで説明されています。

• Team Japan » HTML5 Builderに搭載されているRPCL(RadPHP Component Library)の最新版