LCHH architecture

This article includes a list of references, related reading, or external links, but its sources remain unclear because it lacks inline citations. Please help improve this article by introducing more precise citations. (April 2020) (Learn how and when to remove this message)

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.

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.

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();
}

• "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