Webixライブラリで作成した画面からサーバへの要求API(REST API)の紹介No.28

今まで、Webixライブラリを使った画面や画面とサーバ側のアプリ（PHP)との連携を紹介してきましたが、再度、REST APIのように処理する機能の実装例を紹介します。Webixライブラリ（Javascript）で画面を構成すると、その画面を起動したとき、ボタンなどを押下したタイミングで、サーバ側に検索の依頼や新規データ作成、更新、削除などを要求するとき、URLとパラメータを指定してAjaxによる通信で、画面を描画した状態で、サーバと通信が可能となります。かつ、パラメータは、いろいろな指定方法がありますが、大量のデータを送信するときは、JSON形式の配列情報（実際には文字列に変換しますが）でサーバに転送または、サーバから画面に送信することが可能で、画面描画とデータ通信を分離した実装が可能です。REST APIは、対象リソースのID情報をURLに組み込む実装をしますが、今回紹介する実装は、URLでは、サーバ側の機能（PHPのソース）を指定し、ID情報などは、パラメータで指定する方式を紹介します。この方式だと、サーバ側の実装が簡単で、IDからルーティングするような機能は不要となります。URLは、業務を処理するPHPのソースコードを指定するだけです。
例えば、電子帳簿の一覧情報を画面からサーバにリクエストする場合、
URLとしては、以下のようにPHPのソースコードを指定します。

var xhr =webix.ajax().sync().get("/rest_api/EB0010/EB0011_ebooklists_db_selectlists.php",send_prm);

上記の記述では、検索時のパラメータは、変数send_prmを連想配列で指定します。

var send_params = {};
send_prm.fl_CKKNAME = $$("fl_CKKNAME").getValue();
send_prm.fl_CKKCODE = $$("fl_CKKCODE").getValue();

上記の配列では、関係業者の業者名とコードを検索条件に指定しています。
（指定無しの場合は、対象情報ばブランクになります）
検索時は、一覧表示なので、IDを指定していませんが、更新処理の場合は、IDをパラメータで指定します。

var data_list = $$("EB0016_form2").getValues();
var formData = new FormData();
formData.append("data_list",JSON.stringify(data_list));
var xhr =webix.ajax().sync().post("/rest_api/EB0010/EB0012_ebooklists_db_updates.php",formData);

ID情報は、画面（フォーム）に指定されており、

{view:"form",
    id:"EB001D_form2",
    rows: [
       {view:"text", label:"帳簿ID", name:"EB001D_id",id:"EB001D_id" ,width: 200,labelWidth:60,labelAlign:"right",readonly:true},

EB001D_idが更新対象のID情報になります。
JSON.stringify(data_list)によって、フォーム上の全てのデータをJSON形式の配列でサーバ側に送信できます。
（var data_list = $$("EB0016_form2").getValues();でフォーム上の情報をdata_list編集に代入しています）
尚、更新系処理は、POST形式を使用するので、サーバに送信するパラメータは、formData型で定義し、BODYにパラメータを組み込みます。
webix.ajax().sync().postにURLと送信パラメータを指定すると、POST処理が実行できます。この例は、syncメソッドを使用していますので、同期処理となり、サーバ側（PHPの処理実行まで）からの応答まで待ちます。
webixに関するAJAXのAPIは、以下のURLで詳細に記述されています。

Ajax Operations - AJAX usage: POST requests, JSON sending, incoming data parsing, etc. Webix Docs

REST APIと同じようにGET/POST/PUT/DELETEなどの指定が可能です。また、応答を待つ同期処理や、待たない非同期処理も実装できます。
通常は、同期型を使用しますが、サーバ（PHP)からの応答を待つ間に別の処理を実行したいときなどは、非同期型を使用します。
一般的に検索処理はGET操作、更新や新規作成、削除などはPOST操作で実装します。GET操作の場合、送信するパラメータは、URLに追加情報として付与されるので、大量の情報を検索時のパラメータとして送信したい場合は、POST形式を採用する必要があります。（検索パラメータの情報が多くなる方式は、あまり存在しないと思いますが）
サーバからの応答は、GET方式でもPOST方式でも、JSON形式でサーバ（PHP)から応答させます。
具体的には、以下のような記述となります。

$var_lists =  $stmt->fetchAll(PDO::FETCH_ASSOC);
$count = count($var_lists);
$resp = "ok";
$error_code = 0;
$json_data = json_encode(compact("resp","error_code","count","var_lists"),JSON_UNESCAPED_UNICODE);
echo $json_data;

上記のソースコードは、データベースからSELECTした結果（フィールド名を連想配列のキーにして保存）の配列情報と、SELECTしたレコード数、結果応答がOKであること。エラーコードは、0を返す実装例です。
直前まで、各情報は、変数や連想配列に代入し、最後にjson_encodeとcompact関数でJSON形式の文字列に変換し、echo文でUIに応答します。
UI（Javascript）では、以下のようなソースコードで応答を待ちます。
JSON.parse(xhr.responseText);で、配列変数に情報を格納し、キーを指定して詳細情報を確認します。例：結果情報は、resp.respです。

//DB検索（サーバにアクセス）GET方式で、send_prmを付けてサーバにアクセス
var xhr =webix.ajax().sync().get("/rest_api/EB0010/EB001B_ebooklists_db_selectlists.php",send_prm);
var resp =  JSON.parse(xhr.responseText);
if(resp.resp =="ok"){
   	$$("EB001B_table").parse(resp.var_lists); 
   	$$("count_info").setValue(String(resp.count));
   	if(resp.count== 0){
   		webix.message({type:"debug",text:"検索結果は、"+resp.count+"件です"});
   	}
   	else{
   		webix.message({type:"success",text:"検索結果は、"+resp.count+"件です"});
   	}
}
else{
   	webix.message({type:"error",text:"検索でエラーが発生しました。code="+resp.error_code});
}

DBを検索した結果は、resp.var_listsに格納されていますので、Webixのdatatableで一覧を構成している場合は、$$("EB001B_table").parse(resp.var_lists);で、一覧として表示できます。
（データベースのフィールド名をdatatableのフィールド名を一致させておく必要があります）
更新処理の時の例としては、更新操作がOKかNGかの応答を画面に返す動作となりますので、応答情報は、$respと$error_codeだけ返せばいい場合が多いです。

$update_stmt->execute();
$dbh->commit();
$resp = "ok";
$dbh = null;
$json_data = json_encode(compact("resp","error_code"),JSON_UNESCAPED_UNICODE);
echo $json_data;

画面側のソース例は、

var xhr =webix.ajax().sync().post("/rest_api/EB0010/EB001E_ebooklists_db_updates.php",formData);
var resp =  JSON.parse(xhr.responseText);
if(resp.resp =="ng"){
	webix.alert("更新に失敗しました。error code="+resp.error_code);
	return
}

検索操作の応答も更新処理の応答もJSON.parse(xhr.responseText);で変数に連想配列で代入できます。
webixライブラリとサーバ側にPHP言語を採用して、JSON形式の応答で接続する方式だと、簡単にデータの送受信が可能で、処理イメージも理解しやすいかと思います。ぜひ、実際のソースをコーディングして動作を理解してみてください。