Delphi DataSnap REST server and HTML5 client

緣起：

前一陣子和網頁前端開發者合作一個網站的開發，使用 Delphi 開發 REST Service 非常的快，兩三下就完成交差。但就在這時，前端工程師卻問了我一個問題：

你的 REST API 要怎麼用 JavaScript 連？



也許有什麼好方法可以讓前端也能快速存取 REST 方法。這讓我想到從 XE 開始，DataSnap REST Application 就有內建 JavaScript 套件和 2 個 Boilerplate，也許可以從官方文件中吸取一些知識。

DataSnap REST Application 建立時會自動產生的 JavaScript 檔案

【ServerFunctionExecutor.js】和【ServerFunctionInvoker.js】檔案，是 JavaScript REST DataSnap framework 的核心內容，【ServerFunctions.js】則是 Delphi REST Server 依據 ServerMethod 單元的內容自動產生的。

以萬年範例則是「ReverseString」和「EchoString」這兩個 Method

從 2009 到最近的 10.2 都一樣的萬年範例 (笑)

接著打開 templates 目錄內的 ReverseString.html，如下圖：

Login 區塊在這邊不是重點，因為前端一定有自己的控制碼，所以這部份有機會再表。

我們把重心放在 ReverseString 區塊上。

ReverseString.html 內的 ReverseString 區塊 HTML 碼

javascript:onReverseStringClick();

看來就是它了，事件的原始碼是：

javascript:onReverseStringClick 原始碼

就像是 Delphi 的使用方式一樣，好像沒有想像中的困難，如法泡製來一個試試看。

首先在 Delphi 裡做了一個 FetchEmp，它負責回傳 TDataSet 的內容，程式碼如下：

REST DataSnap 是建構在 WebBroker 的架構上，就照著 TPageProducer.ReverseString 再建立一個 TPageProducer.FetchEmp，並且指向等一下要建立的【FetchEmp.html】。

FetchEmp.html 的原始碼：

採用 HTML5 的寫法，就是 uses / include 一些 framework 的內容回來，可以照抄 ReverseString 的內容，而【jquery.min.js】是因為要顯示在畫面上才使用的。

在抄寫 JavaScript 時要留意onLoad 事件的這一段：

function onLoad()
{
  showTime();
  setConnection('localhost', '8080', '');
}

注意！

這裡的 localhost 是對應 TDSHTTPWebDispatcher.DSHostName，如果不是相同 DNS 會被當成跨網域存取而引發 TDSServiceException: Command closed or unassigned 的例外訊息。

最後，終於要讓 JavaScript 存取 FetchEmp 了！

JQuery 是用在建立 Table 上面，僅存取資料是不需要 JQuery 的

到這裡，就能讓前端工程師好好應用了。


關鍵就那幾行，看完程式碼後也可以讓前端知道【那也沒有什麼】，就知道它有多簡單了吧！


DataSnap REST Application 所產生的 JavaScript REST DataSnap framework 裡面還有很多資訊，之後有機會再做更進一步的說明。


謝謝各位收看！













後記：為了回答這個問題，也花了我數天的時間在翻資料，果然簡單的東西真的不簡單啊！