## 3.10 整合ajax的局部渲染技術
越來越多web網站依賴于ajax,如table的翻頁,流行方式是瀏覽器發出ajax請求,后臺處理后返回一個json,瀏覽器端將json數據拆開,拼成一條一條的行數據,然后生成dom節點,追加到表格里。 作為另外一種可選技術,beetl支持局部渲染技術,允許后臺處理返回的是一個完成的html片段,這樣,前端瀏覽器可以直接將這個html片段追加到表格里。在我做的性能測試里,倆種方式性能差別不大([http://bbs.ibeetl.com/ajax//](http://bbs.ibeetl.com/ajax/))
比如模板index.html有很多動態內容,有動態生成的菜單,有右側的top10,也有核心區域的表格,大概內容如下
```javascript
<#menu/>
<#top10> ....</#top10>
<div id="table-container" >
<%
//ajax片段開始
#ajax userTable: {
%>
<table>
<tr><td width=100>id</td><td width=100>姓名</td></tr>
<% for(user in users){ %>
<tr><td>${user.id}</td><td>${user.name}</td></tr>
<% } %>
</table>
當前頁面<span id="current">${page!1}</span><span style="width:20px"></span>
<a href="#"><span class="page">next</span></a> <a href="#" ><span class="page">pre</span></a>
<%
//ajax片段結尾
}
%>
```
\#ajax 用于告訴告訴模板引擎,此處是個局部渲染標記,標記為"userTable",對于正常渲染視圖"index.html"頁面,#ajax標記沒什么用處,table仍能得到正常渲染。如果渲染的視圖是index.html#userTable,則模板只會渲染#ajax標記得模板片段,其他部分將忽略。關于完整例子,可以參考[https://git.oschina.net/xiandafu/beetlajax](https://git.oschina.net/xiandafu/beetlajax)
后臺代碼如下:
```javascript
render("/index.html#userTable");
```
只需要在模板路徑后加上#就表示渲染的并非是整個模板,而是模板的一部分,這一部分由#后面的標記來標示
ajax 片段渲染也支持默認情況下不渲染,僅僅做為一個片段使用,如一個頁面有許多后臺交互操作,并返回相應的html片段,可以將這些html片段也放到同一個模板里,使用ajax norender,表示渲染整個模板的時候默認并不需要渲染此ajax片段
```javascript
<%
<html>
</html>
#ajax norender success: {
%>
<div id="success"> 操作成功
</div>
<%
}
%>
#ajax norender failure: {
%>
<div id="failure"> 操作失敗
</div>
<%
}
%>
```
這樣,此頁面默認情況下并沒有輸出success,和 failure片段
>注意,Ajax片段本質上是從模版的ajax標記處開始渲染,因此,ajax需要的變量在模版里也必須是全局變量,如果你只是個局部變量,beetl會報出找不到變量,即使你binding了這個變量,beetl也認為這個是局部變量,如
>
>```javascript
><%
>var tableData = paras.table;
>#ajax userTable: {
>for(user in tableData);
>%>
>
><%
>//ajax片段結尾
>}
>%>
>```
>
>變量tableData是從paras里獲取的,是個臨時變量,因此就算你在后臺binding了一個tableData,beetl 也不能識別。在渲染ajax片段的時候會報變量tableData找不到。改正的辦法只能是讓tableData全局變量。
> 返回Json好還是返回html片段好?這個難以定論.
>
> - 從后臺性能看,將模型序列化成json性能會比渲染模板性能更好,但是,json還需要前端重新解析生成最終html dom節點,這可能會延遲最終數據的現實效果。而返回的html片段就是已經生成好的dom
> - 從網絡傳入來看,json無疑更好的,html片段會有額外的html標記,css屬性,以及有可能的js調用。傳入流量有可能增加50%到100%。但是,對于web應用類,這些額外數據,并不算多。
> - 從開發效率來講,返回html片段的開發效率更高一些,因為渲染在后臺操作,可以隨心所欲的用模板語言來渲染,來取得后臺數據,完成復雜渲染,而json就比較困難,可以說所有的json lib都沒有完美的解決辦法。
> - 從用戶體驗上來講,Beetl 采用ajax標記,混合了傳統的模板渲染和ajax加載。用戶進入頁面即能看到數據,而經典的ajax json方式還需要異步加載,顯示延遲。另外如果頁面同時有多個ajax加載,則會對服務器造成很大的壓力。
> - 關心服務器cpu消耗? 模板方式消耗更多的cpu,json方式則少點。但是倆者差距并不大。而且更多的web網站面臨的情況是有富余的服務器CPU能力
> - 關心客戶端CPU消耗? 過多的js無疑是客戶端運行慢的主要原因。如果采用經典的json方式,返回的json數據必然還需要經過js的計算和渲染。會影響客戶機器cpu。
符號#ajax 實際上用來標記一個模板渲染片段,它還有個別名的叫#fragment,兩者是一樣的,比如
~~~java
<%
#fragment part2:{
println("part2");
}
%>
~~~
- Beetl 3 中文文檔
- 第一部分 基礎用法
- 1.1 安裝
- 1.2 快速開始
- 1.3 模板基礎配置
- 1.4 模板加載器
- 1.5 定界符與占位符
- 1.6 注釋
- 1.7 變量定義
- 1.8 屬性
- 1.9 數學表達式
- 1.10 循環語句
- 1.11 條件語句
- 1.12 異常捕獲
- 1.13 虛擬屬性
- 1.14 函數調用
- 1.15 安全輸出(重要)
- 1.16 輸出格式化
- 1.17 標簽
- 1.18 調用Java方法與屬性
- 1.19 嚴格MVC控制
- 1.20 指令
- 1.21 錯誤處理
- 1.22 Beetl小工具
- 1.23 Escape
- 第二部分 高級用法
- 2.1 配置GroupTemplate
- 2.2 自定義方法
- 2.3 自定義格式化函數
- 2.4 自定義標簽
- 2.5 自定義虛擬屬性
- 2.6 使用額外的資源加載器
- 2.7 自定義資源加載器
- 2.8 使用CompositeResourceLoader
- 2.9 自定義錯誤處理器
- 2.10 自定義安全管理器
- 2.11 注冊全局共享變量
- 2.12 自定義布局
- 2.13 性能優化
- 2.14 定制輸出
- 2.15 定制模板引擎
- 2.16 直接運行Beetl腳本
- 2.17 模板校驗
- 第三部分 Web 集成
- 3.1 Web提供的全局變量
- 3.2 集成技術開發指南
- 3.3 Servlet集成
- 3.4 SpringMVC集成
- 3.5 Spring Boot集成
- 3.6 Jodd集成
- 3.7 JFinal4 集成方案
- 3.8 Nutz集成
- 3.9 Struts2集成
- 3.10 整合ajax的局部渲染技術
- 3.11 在頁面輸出錯誤提示信息
- 附錄
- 4.1 內置方法
- 4.2 Spring相關函數
- 4.3 Spring security
- 4.4 shiro
- 4.5 內置格式化方法
- 4.6 內置標簽函數
- 4.7 內置html標簽
- 4.8 性能優化
- 4.9 Eclipse 插件
- 4.10 性能測試對比