還在用AJAX+Json,改用AJAX+Beetl吧

   瀏覽器經過AJAX，服務器返回json數據，無刷新的更新視圖的這種模式在WEB開發中我已經用了很長時間了，記得最先是08年的時候用的，當時傳遞JSON數據讓我眼前一亮。這種方式是隻須要採用工具包將模型序列化成json格式就行，js UI庫總能識別這種格式，輕易的生成新的視圖片斷。

   然而時過境遷。這種傳遞AJAX JSON方式漸漸有了新的問題。

1. JSON序列化庫沒法完美的序列化模型對象。序列化庫總指望輸入一個Object，但實際上前端有可能須要多個Object，這樣，你不得再也不建立一個序列化專用的Object。 另外，序列化邏輯都很簡單，就是將全部對象屬性都序列化。儘管JSON Lib 能提供屬性過濾，屬性格式化等，但捫心自問，遠遠不如模板渲染功能完善。模板語言提供了豐富的語句和擴展來處理模型對象。另外JSON Lib在序列化對象互相引用，處理的也很差。在模板語言裏，這將不存在問題。總而言之，開發人員爲了序列化JSON，不得不建立新的視圖對象，不得不侵入原有的模型以規定序列化邏輯。以我認爲最好的FastJSON工具爲列，你能看到各類開發者問的問題(我直接從fastjson論壇行找來最近的帖子）.

-在使用 fastjson轉map，怎麼讓map中爲null的值等於""呢
-FastJson 1.2.4 日期類型 ISO8601格式序列化問題...
- 建議@JSONType註解添加allows屬性，容許設置容許序列化的屬性數（做者注:我也建議其餘Annotation，用於控制渲染邏輯，事實上，因爲缺乏語言特性，fastJson會目不暇接這種相似的渲染邏輯建議）
- fastjson 支持escape嘛，防止xss？

2 隨着前端技術發展，程序員再也不須要easyui，extjs這種前端框架了。由於這種框架不是以視覺爲中心的，視覺人員沒法左右這種框架。如今更流行的方式仍是模板方式，只不過經過前端模板引擎來完成 :輸入是JSON和前端模板，輸出就是更新後的DOM。 那麼問題就來了，這種方式是否是還不如直接後端模板引擎渲染呢？何須費勁的序列化成json，而後，用功能較弱的前端模板引擎來渲染。有點捨近求遠的味道。

3 對於有些須要SEO的網站，使用AJAX JSON是致命的問題，由於搜索引擎不能執行javascript,扒到的網頁是個空殼子。很不友好。目前也沒有太好的辦法。聽說有一種是仍然採用ajax，但會提供一個不可見的url給搜索引擎以提供正確內容。 另外，聽說google搜索引擎有專門的模擬器來模擬javascript執行以得到SEO內容，但屬於研發中。

4 對於一個複雜頁面，若是多個部分都是用AJAX 請求，這簡直是要了Web服務器的命。如今服務器不怕CPU忙，就怕請求多。所以AJAX JSON 這中方式在複雜頁面裏也是很是很差用的。用的後果就是服務器複雜成倍增長，而頁面真正的內容又加載不出來。這一樣也沒有辦法去改善。

   吐槽了這麼多AJAX+JSON，該說說Beetl是怎麼解決的了。

   Beetl的解決方法是Ajax+HTML片斷，這種方式也不新鮮，可是Beetl有本身獨特的解決方法。Beetl引入了新的語法標記#ajax 此語法僅僅標記了一段模板塊，後面跟一個id表示ajax片斷的名字。若是模板正常渲染視圖，模板引擎會忽略#ajax標記，正常渲染模板全部內容。若是渲染的視圖帶有#id,如 index.html#top10,則模板引擎僅僅渲染#ajax top10標記的內容。以下一個index.html模板:

頁面其餘內容
.......
<div id="top10">

%>
#ajax top10:
{
<#table data="${topData}" var ="row,index">
<#tr name="名稱">${row.name}<#tr>
<#tr name="積分">${row.score}<#tr>
</#table>
<#page data="${topData}" url="/indexTop10.html"/>
<%} //end ajax top 10
%>
</div>
......
頁面其餘內容

此模板包含多部分，在此僅僅列出ajax部分，ajax內部是個table標籤，或者是其餘任何beetl 模板引擎代碼均可以。
當用戶請求index.html頁面的時候，後臺controller多是這樣

public String index(){
int page = this.getParameter("top10",0);
this.setAttr("topData",service.getTop10(page ));
//設置其餘index須要的數據
this.setAttr("userInfo"...);
this.setAttr("menu"...);
return "/index.html";
}

當用戶對top10進行翻頁操做的時候，客戶端js會發起一個ajax請求到/indexTop10.html,後臺controller多是這樣代碼

public String indexTop10(){
int page = this.getParameter("top10",0);
this.setAttr("topData",service.getTop10(page ));
return "/index.html#top10";
}

注意到模板渲染的視圖是"/index.html#top10"，而不是"/index.html",這保證了模板引擎僅僅渲染top10 片斷。客戶端只須要調用jquery 代碼$("#top10").load("/indexTop10.html?page="+xxx) 便可實現無刷新翻頁

    相對於文章剛開始列舉的ajax+json 4大槽點，ajax+beetl都能完美解決。模板的語言功能渲染模板比簡單的對象化序列化功能更強，也比前端模板引擎更強。SEO毫無問題，頁面受到搜索引擎歡迎。一次渲染不會對服務器形成過多的訪問壓力。另外，從開發角度來講，開發人員面對的問題也簡單多了，能提升了開發效率。

   因爲Ajax+Beetl 仍然是一種Ajax+HTML的改進，那仍是會有AJAX+HTML這種模式的一些些缺點，好比，網絡傳輸數據會增長一些.還有模板渲染性能確定不如json序列化的性能。若是你的硬件環境很吃緊，你須要慎重考慮這種方式，但通常據我瞭解，企業應用或者web網站，這些都不是問題。另一個潛在問題是ajax+json,返回的json數據能夠屢次在前端處理，好比渲染多個DOM節點，而Ajax+beetl則不行，你只能先渲染一個Dom節點，而後經過js來獲取你須要的數據再渲染其餘DOM節點，但這種狀況也是很是少見的

具體例子能夠參考：

http://beetlajax.oschina.mopaas.com/
以及開發者寫的文章: http://blog.csdn.net/hiredme/article/details/44219581