3.10 整合ajax的局部渲染技術 · Beetl3官方文檔

## 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"); } %> ~~~