AjaxJST+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文件

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

在以上代码中,除了能够载入template.js的script标签,还有一句和JST相关的代码是第壹2行:

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

该行代码调用了一组JST类库的函数,将一个js的靶子data,通过3个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时载入的数目为例,他用到了3个AjaxTemplate:德姆oData.ascx和二个JsTemplate:德姆oTemplate.ascx。

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

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

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

如上比较简单,德姆oData.ascx中的JSON内容是一向手打客车。下边包车型地铁德姆oData2.ascx.cs中,您将见到哪些利用JSONArray和JSONObject类以编制程序的方法进行JSON连串化。

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

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

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

那两组范例都是比较简单的,三种方法都以个概念了一组JSON格式的数量和JST格式的页面模版。

举行页面,并点击按钮,你将见到运转效果。每一遍执行LoadTemplateData()方法,JSON数据和模版内容都通过AJAX回调再次来到,在DoBinding1函数中,参数content再次来到值是一个规范的构成了JST模版和JSON数据的JSON字符串,以var
data = eval(“(” + content +
“)”);的措施将JSON数据转换为2个行业内部的js对象实例。data将富含3个jst属性(在德姆oData.ascx.cs和德姆oData2.ascx.cs中布局的),包蕴了JST模版的内容。然后再通过JST类库中的方法开始展览辨析那就生成大家供给的HTML。

小结

上述的范例应该依旧比较不难的,大家得以看来,由于解析进度是客户端js执行的,没有服务器负责,并出于JSON连串化的功能更高,类别化后的数据大小远小于XML和HTML,也就减弱了数量传输量,同时合作AJAX,整个进度对用户来说是全然透明的,也减小了非AJAX格局页面刷新带来的额外数据传递开支。

 

相关文章