LCHHアーキテクチャ

Loader–Content–Handler–Handler、または「LCHH 」は、 HTTP 要求応答サイクルと3 層 Web 構造を厳密にモデル化した Web プログラミングアーキテクチャです。

その名前が示すように、LCHH は次の 4 つの主要な実装コンポーネントを定義します。

Loaderは、後でコンテンツを挿入するための部分的な更新領域を識別する ID 付きの DIV コンテナーです。
静的な情報とインタラクティブな要素の両方を含むコンテンツ（「トリガー」とも呼ばれます）。
ボタンのクリックなど、さまざまなトリガーイベントを処理するクライアント側ハンドラー。
サーバーサイドハンドラーは、クライアントサイドハンドラーから送信されたAjaxリクエストに応答します。サーバーサイドハンドラーは通常、更新されたコンテンツを前述のLoaderに渡す前に、データベースのCRUD操作を実行します。

XHR注射との比較

LCHHは、 XMLHttpRequestのresponseTextを使用して、対象のDIVコンテナの値を置き換えますinnerHTML。これは一般的なAjaxパターンです。しかし、XHRインジェクションだけではLCHHの本質を捉えきれません。LCHHの初期読み込みにおける「コンテンツ」は、空のコンテナを読み込み、その後別のAjaxラウンドトリップでコンテナにデータを入力するのではなく、サーバー側で即座に生成されます。データベースの変更後に更新されたコンテンツを便乗させるのもLCHHの特徴です。

LCHH はコードを 4 つのカテゴリに分類します。

ローダーとクライアント側ハンドラー (JavaScript 関数) は、URL によって直接アクセスできる「ユーザー向け」ファイルに保存されます。
ユーザー向けファイルに組み込むことができるサーバーサイドスクリプト。このスクリプトは「コンテンツ」を出力します。
さまざまな Ajax 呼び出しを呼び出すための単一の呼び出しポイントとして機能する「ルーティングスクリプト」。
サーバー側ハンドラーは、通常「include」または「icl」サブディレクトリに保存されます。各ハンドラーは、多くの場合、個別のスクリプトファイルに実装されます。

例

echo "<div id= \" loader \" > \n " ; require_once "icl/listcontacts.inc.php" ; echo "</div> \n " ;

// クライアント側ハンドラーasync function delete_contact ( id ) { const response = await fetch ( `services.php?op=delete_contact&id= ${ id } ` , { method : "POST" }); document . getElementById ( "loader" ). innerHTML = await response . text (); }

参考文献

「LCHH vs. MVC」 2013年10月10日. 2016年4月28日閲覧.
Dong, Schien (2015)、「AJAX はない - DHTML、PHP、MySQL を融合する芸術(第 7 版)」、Lulu Press、Incorporated、pp. 338– 343、ISBN 978-1435774810