JST+JSON+AJAX——使用客户端js模版代替服务端数据绑定

正文为有一个透过整合使用JST,JSON和AJAX技术,使用客户端js模版代替服务端数据绑定的范例。很显然的,使用客户端数据绑定代替服务端数据绑定能够大大减少服务端的内存和CPU消耗,在硬件不变换的图景下,大大提升服务器负荷能力。

名词解释

率先,先简单介绍一下JST和JSON。都一直引用官方介绍了。

JST (JavaScript Templates)

For web application developers, the JavaScript Templates engine from
TrimPath is a lightweight APL / GPL open-source component that lets you
have template-based programming (like PHP/ASP/JSP) while running in a
web browser.

– The JST engine is written entirely in standard JavaScript.

  • It supports a productive template markup syntax very much like
    FreeMarker, Velocity, Smarty.
  • JST is a readable alternative to manually coded massive String
    concatenations and major DOM/DHTML manipulations. 、

JSON (JavaScript Object Notation)

JSON is a lightweight data-interchange format. It is easy for humans to
read and write. It is easy for machines to parse and generate. It is
based on a subset of the JavaScript Programming Language, Standard
ECMA-262 3rd Edition – December 1999. JSON is a text format that is
completely language independent but uses conventions that are familiar
to programmers of the C-family of languages, including C, C++, C#,
Java, JavaScript, Perl, Python, and many others. These properties make
JSON an ideal data-interchange language.

简的说,JST是一个类Velocity的沙盘引擎,只不过它是纯js的。而JSON是一个好像XML的数据交换语言,它使了js语言的一个子集来定义数据,因此,对js而言,JSON格式的数量可以看做一个靶下,甚至完全无须额外解析,也较XML体积更粗,一般的话,它的序列化后大小只有XML序列化的一半,当然,它吗是纯js的。

AJAX就非多说了。

范例简介和下载

遵照范例采用Web Application Architectures: Simple 2 Layer, Standard 3
Layer and Distributed 3
Layer一如既往温婉遭遇之Simple
2
Layer构架,只是于Web表现层使用JST,JSON和AJAX代替原来的一直用ASP.NET数据绑定。

君得看https://sourceforge.net/projects/nbear/下载最新的NBear
v2.0.1,其中含有了本文讨论的范例的合源码(见zip包中的sample目录下)和所依靠之NBear框架的普源码。(运行范例前要留心修改web.config中的TestAccessDb的数据库连接字串。)

范例分析

一旦你对Simple 2 Layer构架尚无概念,请先访问Web Application
Architectures: Simple 2 Layer, Standard 3 Layer and Distributed 3
Layer一如既往温婉遭遇的相关介绍。

叫咱先行由JST开始说从。

如若叫咱的Web程序能够调用JST的类库,我们惟有待将template.js文件包含到目前页面。该文件的新颖版本可以自http://trimpath.com/project/wiki/JavaScriptTemplates下载。

第一,看看我们的,Default.aspx文件

图片 1图片 2代码
Default.aspx
 1图片 3图片 4<%图片 5@ Page Language=”C#” AutoEventWireup=”true”  CodeFile=”Default.aspx.cs” Inherits=”_Default” %>
 2图片 6
 3图片 7<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
 4图片 8
 5图片 9<html xmlns=”http://www.w3.org/1999/xhtml” >
 6图片 10<head runat=”server”>
 7图片 11    <title>Untitled Page</title>
 8图片 12    <script language=”javascript” type=”text/javascript” src=”js/template.js”></script> 
 9图片 13图片 14    <script language=”javascript” type=”text/javascript”>图片 15
10图片 16        //bind specified js template – jst with data template – dt
11图片 17        function LoadTemplateData(jst, dt, paramsToDt, processHandler)
12图片 18图片 19        图片 20{
13图片 21            Ajax.Callback(dt, ‘jst=’ + jst + ‘&’ + paramsToDt, processHandler);
14图片 22        }
15图片 23        
16图片 24        function DoBinding1(content)
17图片 25图片 26        图片 27{
18图片 28            //alert(content);
19图片 29        
20图片 30            var data = eval(“(” + content + “)”);
21图片 31            
22图片 32            var result = TrimPath.parseTemplate(data.jst).process(data);
23图片 33            
24图片 34            document.getElementById(‘result’).innerHTML = result;
25图片 35        }
26图片 36    </script> 
27图片 37</head>
28图片 38<body onload=”LoadTemplateData(‘JsTemplates/DemoTemplate’, ‘AjaxTemplates/DemoData’, null, ‘DoBinding1’);”>
29图片 39    <form id=”form1″ runat=”server”>
30图片 40    <div>
31图片 41        <input type=”button” value=”Load Demo Data 2″ onclick=”LoadTemplateData(‘JsTemplates/DemoTemplate2’, ‘AjaxTemplates/DemoData2’, null, ‘DoBinding1’);”/><br />
32图片 42        <br />
33图片 43    </div>
34图片 44   <div id=”result”>
35图片 45   </div> 
36图片 46    </form>
37图片 47</body>
38图片 48</html>

以以上代码中,除了可以载入template.js的script标签,还有雷同句子和JST相关的代码是第22行:

var result = TrimPath.parseTemplate(data.jst).process(data);

该行代码调用了一如既往组JST类库的函数,将一个js的目标data,通过一个JST模版data.jst(一个JST模版是同段子字符串模版文本)进行分析,并返解析转换后底html内容。这个历程有点类似xml/xslt。这里的data.jst相当于xslt而data相当给xml。

Default.aspx中的其余内容吧比较简单,在pageload和点击按钮时,通过调用LoadTemplateData()方法-〉Ajax.Callback()方法,执行一个Ajax回调。这里的Ajax实现,是故外厝NBear的AjaxHelper组件来兑现,关于该Ajax组件的再次多介绍好参见Call
Back Callback –
整合AjaxHepler到NBear同一平和。在本文中,您就需要了解,Ajax.Callback()方法我们得以老方便之履行一个Ajax回调,并回一个User
Control中之情节。

自身怀念你已经蒙到了,我们JSON数据以及JST模版,都足以经过User Control来定义。

以页面pageload时载入的多寡为条例,他之所以到了一个AjaxTemplate:DemoData.ascx和一个JsTemplate:DemoTemplate.ascx。

图片 49图片 50代码
DemoData.ascx
 1图片 51图片 52<%图片 53@ Control Language=”C#” AutoEventWireup=”true” CodeFile=”DemoData.ascx.cs” Inherits=”AjaxTemplates_DemoData” %>
 2图片 54{
 3图片 55    products : [ { name: “mac”, desc: “computer”,     
 4图片 56                   price: 1000, quantity: 100, alert:null },
 5图片 57                 { name: “ipod”, desc: “music player”, 
 6图片 58                   price:  200, quantity: 200, alert:”on sale now!” },
 7图片 59                 { name: “cinema display”, desc: “screen”,       
 8图片 60                   price:  800, quantity: 300, alert:”best deal!” } ],
 9图片 61    customer : { first: “John”, last: “Public”, level: “gold” },
10图片 62   
11图片 63    jst : ‘<%= jstContent %>’
12图片 64}

图片 65图片 66代码
DemoData.ascx.cs
 1图片 67using System;
 2图片 68using System.Data;
 3图片 69using System.Configuration;
 4图片 70using System.Text;
 5图片 71using System.Collections;
 6图片 72using System.Web;
 7图片 73using System.Web.Security;
 8图片 74using System.Web.UI;
 9图片 75using System.Web.UI.WebControls;
10图片 76using System.Web.UI.WebControls.WebParts;
11图片 77using System.Web.UI.HtmlControls;
12图片 78
13图片 79public partial class AjaxTemplates_DemoData : NBear.Web.UI.AjaxTemplate
14图片 80图片 81图片 82{
15图片 83    protected string jstContent;
16图片 84
17图片 85    public override void OnAjaxTemplatePreRender(System.Collections.Generic.Dictionary<string, string> callbackParams)
18图片 86图片 87    图片 88{
19图片 89        jstContent = LoadJstContentFromUserControl(“../” + callbackParams[“jst”]).Replace(“\r\n”, “\\n”);
20图片 90    }
21图片 91}

图片 92图片 93代码
DemoTemplate.ascx
 1图片 94图片 95<%图片 96@ Control Language=”C#” AutoEventWireup=”true” CodeFile=”DemoTemplate.ascx.cs” Inherits=”JsTemplates_DemoTemplate” %>
 2图片 97Hello ${customer.first} ${customer.last}.<br/>
 3图片 98Your shopping cart has ${products.length} item(s):
 4图片 99<table>
 5图片 100 <tr><td>Name</td>
 6图片 101     <td>Description</td>
 7图片 102     <td>Price</td>
 8图片 103     <td>Quantity & Alert</td>
 9图片 104     </tr>
10图片 105 {for p in products}
11图片 106     <tr><td>${p.name|capitalize}</td><td>${p.desc}</td>
12图片 107         <td>$${p.price}</td><td>${p.quantity} : 
13图片 108             ${p.alert|default:””|capitalize}</td>
14图片 109         </tr>
15图片 110 {forelse}
16图片 111     <tr><td colspan=”4″>No products in your cart.</tr>
17图片 112 {/for}
18图片 113</table>
19图片 114{if customer.level == “gold”}
20图片 115    We love you!  Please check out our Gold Customer specials!
21图片 116{else}
22图片 117    Become a Gold Customer by buying more stuff here.
23图片 118{/if}

上述比较简单,DemoData.ascx中的JSON内容是直接手打的。下面的DemoData2.ascx.cs中,您将视怎样利用JSONArray和JSONObject类以编程的法门展开JSON序列化。

图片 119图片 120代码
DemoData2.ascx
1图片 121图片 122<%图片 123@ Control Language=”C#” AutoEventWireup=”true” CodeFile=”DemoData2.ascx.cs” Inherits=”AjaxTemplates_DemoData2″ %>
2图片 124<%= content %>

图片 125图片 126代码
DemoData2.ascx.cs
 1图片 127using System;
 2图片 128using System.Data;
 3图片 129using System.Configuration;
 4图片 130using System.Collections;
 5图片 131using System.Web;
 6图片 132using System.Web.Security;
 7图片 133using System.Web.UI;
 8图片 134using System.Web.UI.WebControls;
 9图片 135using System.Web.UI.WebControls.WebParts;
10图片 136using System.Web.UI.HtmlControls;
11图片 137
12图片 138using NBear.Common;
13图片 139using NBear.Common.JSON;
14图片 140
15图片 141public partial class AjaxTemplates_DemoData2 : NBear.Web.UI.AjaxTemplate
16图片 142图片 143图片 144{
17图片 145    protected string content;
18图片 146
19图片 147    public override void OnAjaxTemplatePreRender(System.Collections.Generic.Dictionary<string, string> callbackParams)
20图片 148图片 149    图片 150{
21图片 151        string jstContent = LoadJstContentFromUserControl(“../” + callbackParams[“jst”]);
22图片 152
23图片 153        JSONObject json = new JSONObject();
24图片 154        string jsonStr = new EntitySerializer(EntitySerializeType.Json).SerializeArray(Gateways.TestAccessDb.SelectAll<TestAccessDbAccessEntities.User>());
25图片 155        JSONArray users = new JSONArray(jsonStr);
26图片 156        json.put(“users”, users);
27图片 157        json.put(“jst”, jstContent);
28图片 158
29图片 159        content = json.ToString();
30图片 160    }
31图片 161}

图片 162图片 163代码
DemoTemplate2.ascx
 1图片 164图片 165<%图片 166@ Control Language=”C#” AutoEventWireup=”true” CodeFile=”DemoTemplate2.ascx.cs” Inherits=”JsTemplates_DemoTemplate2″ %>
 2图片 167User(s):
 3图片 168<table>
 4图片 169 <tr><td>ID</td>
 5图片 170     <td>Name</td>
 6图片 171     <td>Gender</td>
 7图片 172     <td>Salary</td>
 8图片 173     </tr>
 9图片 174 {for u in users}
10图片 175     <tr><td>${u.ID}</td><td>${u.Name}</td>
11图片 176         <td>${u.Gender}</td><td>${u.Salary}</td>
12图片 177         </tr>
13图片 178 {forelse}
14图片 179     <tr><td colspan=”4″>No users!</tr>
15图片 180 {/for}
16图片 181</table>

这有限组范例都是比较简单的,两栽方法还是只概念了一如既往组JSON格式的数及JST格式的页面模版。

实施页面,并点击按钮,你以视运行效果。每次执行LoadTemplateData()方法,JSON数据与模版内容还经AJAX回调返回,在DoBinding1部数着,参数content返回值是一个规范的咬合了JST模版和JSON数据的JSON字符串,以var
data = eval(“(” + content +
“)”);的方拿JSON数据易为一个正规的js对象实例。data将包含一个jst属性(在DemoData.ascx.cs和DemoData2.ascx.cs中组织之),包含了JST模版的情。然后还经JST类库中的措施开展解析这就格外成我们需要的HTML。

小结

如上之范例应该还是比较简单的,我们得观看,由于解析过程是客户端js执行的,没有服务器负责,并出于JSON序列化的效率还强,序列化后的数额大小远小于XML和HTML,也便抽了数传输量,同时配合AJAX,整个过程对用户来说是一心透明底,也减小了非AJAX方式页面刷新带来的额外数据传递出。

 

相关文章