Jump to content

LCHH architecture

From Wikipedia, the free encyclopedia

The Loader–Content–Handler–Handler, or "LCHH", is a web programming architecture that is closely modeled after the HTTP request-response cycle and the 3-tier web structure.

As its name suggests, LCHH defines four key implementation components:

  • The Loader is an ID'ed DIV container that identifies a partial update region for later content injection;
  • The Content that contains both static information and interactive elements, also known as "Triggers";
  • Client-side Handlers that process various trigger events, such as button clicks;
  • Server-side Handlers that respond to Ajax requests that are sent by the client-side handlers. Server-side handlers typically perform database CRUD operations before piggy-backing the updated content into the aforementioned Loader.
Example Flow and File Organization of the LCHH Architecture

Comparison with XHR injection

[edit]

LCHH uses the responseText of an XMLHttpRequest to replace the innerHTML value of the target DIV container. This is a common Ajax pattern. XHR injection alone, however, does not sum up LCHH. The "Content" in the initial loading of LCHH is instantly generated on the server-side as opposed to loading an empty container and then populating the container with another Ajax round-trip. Piggy-backing renewed content after database changes is also characteristic of LCHH.

LCHH organizes code into four categories:

  • Loader and client-side Handlers (JavaScript functions) are stored in a "user-facing" file that is directly accessible by its URL;
  • A server-side script that can be included by the user-facing file. This script outputs the "Content";
  • A "routing script" that serves as a single point of call for invoking various Ajax calls;
  • Server-side handlers, typically stored under an "include" or "icl" sub-directory. Each handler is often implemented in a separate script file.

Example

[edit]
echo "<div id=\"loader\">\n";
require_once "icl/listcontacts.inc.php";
echo "</div>\n";
// client-side handlers
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();
}

References

[edit]
  • "LCHH vs. MVC". October 10, 2013. Retrieved April 28, 2016.
  • Dong, Schien (2015), There is No AJAX - The Art of Blending DHTML, PHP and MySQL (7th ed.), Lulu Press, Incorporated, pp. 338–343, ISBN 978-1435774810