JavaScript 直接調用 Java 服務端邏輯：JinJ 橋接架構深度解析

背景與痛點

傳統 Web 開發中，前端 JavaScript 需要服務端數據時，通常採用：

• 表單提交/頁面跳轉（體驗差）
• AJAX + Servlet/Controller（需編寫大量控制器代碼）
• Applet（重、安全限制多、已淘汰）

JinJ (Java in JavaScript) 提出一種輕量級橋接方案：瀏覽器端隱藏微型 Applet（<2KB）作為通訊橋樑，JavaScript 以 java.object.method(params) 語法直接調用服務端 Java 對象，無需刷新頁面、無需編寫 Servlet 控制器。

核心架構

┌─────────────┐     HTTP      ┌──────────────┐     RMI/反射      ┌─────────────┐
│  瀏覽器      │◄─────────────►│  JinJ Servlet │◄─────────────────►│  業務 Java   │
│  (JS + 隱藏  │  請求/響應     │  (預處理/分發)  │  調用實例方法       │  對象實例     │
│   Applet)   │               │               │                     │  (POJO)      │
└─────────────┘               └──────────────┘                     └─────────────┘
      ▲                              ▲
      │  javabridge() JS 函數        │  內部 Hashtable 管理對象實例
      └──────────────────────────────┘

關鍵組件

1. 客戶端：隱藏 Applet + JS 橋接函數

• bridge.class：僅 2KB，提供 fromJava(fName, args) 方法，通過 HTTP POST 向 Servlet 發送調用請求（參數以 @#$ 分隔）。
• JS 函數 javabridge()：自動生成，負責參數組裝、調用 Applet、解析返回值（支持基本類型、數組、Vector、Enumeration）。
• 語法約定：java.對象名.方法名(參數...)，預編譯階段被 Servlet 替換為 parent.hframe.javabridge('對象名.方法名', 參數...)。

2. 服務端：JinJ Servlet

• 對象註冊表：啟動時讀取配置文件（objects.txt），每行 objName=new ClassName(params)，實例化並存入 Hashtable inst。
• 標準庫對象：內置 JinJ 對象，提供 create/delete/exists/id/random/rewriteURL 等元操作，支持運行時動態管理對象實例。
• 請求分發：解析 params=objName.method@#$arg1@#$arg2...，反射調用對象方法，結果序列化為 @#$ 分隔字符串返回。
• 頁面預處理：攔截 .jinj 或帶參數請求，掃描 HTML 中的 java.xxx 調用，替換為 JS 橋接代碼，輸出雙幀頁面（隱藏幀載入 Applet，主幀顯示業務頁）。

3. 配置參數 (web.xml)

<init-param>
  <param-name>servlet</param-name>          <!-- JinJ Servlet 自身 URL -->
  <param-value>https://host/servlet/JinJ</param-value>
</init-param>
<init-param>
  <param-name>root</param-name>             <-- 靜態頁面根目錄 -->
  <param-value>/home/webpages</param-value>
</init-param>
<init-param>
  <param-name>objects</param-name>          <-- 對象定義文件路徑 -->
  <param-value>/home/load/obj.txt</param-value>
</init-param>
<init-param>
  <param-name>codebase</param-name>         <-- Applet 類加載路徑 -->
  <param-value>https://host/</param-value>
</init-param>
<init-param>
  <param-name>admin</param-name>            <-- 管理控制台密碼 -->
  <param-value>secret</param-value>
</init-param>

對象定義文件示例 (obj.txt)

# 數據庫連接池
dbPool=new com.myapp.db.DBConnectionPool(10)

# 緩存
cache=new java.util.Hashtable()

# 自定義服務
userService=new com.myapp.service.UserService()

前端調用示例

<script>
function updateField() {
    // 直接調用服務端 dbPool 對象的 getData 方法
    document.forms[0].textField.value = java.dbPool.getData('SELECT * FROM users');
}

function changeStock() {
    // 調用 Stock 對象獲取報價，局部更新表格
    document.all.quote.rows[0].cells[1].innerText = java.Stock.getQuote('Wayne');
}
</script>

優缺點評析

現代替代方案

JinJ 思想超前，但受限於 Applet 衰退。今天實現同樣目標的技術棧：

• RESTful API + Fetch/Axios：標準化、無狀態、CDN 友好。
• GraphQL：按需獲取，減少過度獲取。
• WebSocket / Server-Sent Events：服務端推送，實時性強。
• gRPC-Web：高性能 RPC，支持瀏覽器直連。
• Spring Boot @RestController + 前端框架：主流生產級選型。

總結

JinJ 是一個「超越時代」的嘗試，將「前端直接調用後端對象」的概念在 2000 年代初通過 Applet 實現。雖然技術棧已過時，但其聲明式對象發布、透明化遠程調用、運行時對象管理等設計思想，在現代 RPC 框架（Dubbo、gRPC）、BFF（Backend for Frontend）架構中依然閃耀著智慧的光芒。