用Jquery和JTemplates来处理JSON数据

    收到我将被调往新公司专职开发B2C系统的内幕消息，在这个公司做了两年多时间，我开发的行情也改了几个版本。但一直面临大流量和被盗两大困惑。在即将调离之前，我想再做最后一次综合性的修改吧。
    要想减小流量，首先就改变数据传输方式，以前是带格式的HTML文件，HTML带有头文件，还有数据表示格式的代码，这些数据加大了不必要的流量，于是我想到了JSON数据格式，这是一种非常轻巧的数据格式，能直接被JS处理，当然还有一个主要的是它不能被Ethereal抓取软件以明文的方式显示，从而表面满足了Superior想要的加密效果。于是我就用C#写一个控制台的应用程序专门生成JSON数据文件。JSON.ASP格式如下：
Response.ContentType="application/json" Response.Charset="UTF-8" Response.Write(“{data:[{city:’深圳’, temperature:’30’},{city:’东莞’, temperature:’32’}]}”)
     后台的数据格式没问题了，现在是前台，如果前台用AJAX，再写一个处理JSON数据的JS函数，但JS频繁操作DOM，代码稍有疏忽，IE浏览器很容易内存泄露，给客户的电脑造成IE假死。正好前段时间在研究Jquery的时候发现一个Jtemplates的外挂，所谓Jtemplates就是基于 Jquery框架，把JSON数据按指定的模块生成TABLE。这样我只要用AJAX获取JSON，然后把JSON数据传给Jtemplates就行了，这样一来可以省去我手写大量JS，二来可以防止内存泄露。输入网址：www.jquery.com
下载一个的jquery.1.3.2.js，再进入http://jtemplates.tpython.com 下载了Jtemplates.js。
  OK，开始手写页面了，新建一个HTML页面，仿照jtemplates.tpython.com中的例子在head中加入代码：
  <mce:script language=”javascript” ><!-- $(document).ready(function(){window.setInterval(function() { $.ajax({ type: "POST", url: "JSON.asp", data: "{}", contentType: "application/json; charset=utf-8", dataType: "json", success: function(msg){ ApplyTemplate(msg); } }); },10000); }) function ApplyTemplate(data) { $('#result').setTemplateElement('template'); $('#result').processTemplate(data); } // --></mce:script>
Body中新建Jtemplates模块：
<textarea id="template" style="display:none" mce_style="display:none"> <table cellpadding="1" cellspacing="1" bgcolor="#CCCCCC" broder=0> <thead> <tr align=center style="background:#eeeeee" mce_style="background:#eeeeee"> <th>城市</th> <th>气温</th> </tr> </thead> <tbody> {#foreach $T.data as record} <tr align=center bgcolor="#ffffff"> <td width=100 >{$T. record.city}</td> <td width=100>{$T. record.temperature}</td> </tr> {#/for} </tbody> </table>

     因为行情数据要刷新，所以我用城市温度来模仿的时候，在$(document).ready(function(){}中加入了 window.setInterval(function(…),10000),这是我想要它每十秒钟刷新一次。保存文件运行…OK，没问题，数据出来了。现在开始修改优化，先从$('#result').setTemplateElement('template');这一句开始，这一句是加载模板，在jtemplates.tpython.com网站的文档中还有两个方法 :
一个是：setTemplate(Template template),这一句是把模板直接放在setTemplate()函数中，这样省去读Element的步骤，似乎快一点，但当模块很复杂的时候，像我前面那样，可读性就差了。这个方法还有一个带三个参数重载的：setTemplate(String template, Array includes, Object settings)
还有一个方法是：setTemplateURL(String url, [Array includes], [Object settings]);这个是从URL指定的文件中读取模板，如果用这个那得要新建一文件，这样更不方便。
看来setTemplateElement这个方法是比较合适的了。不过，这个方法好像也还有一个带三个参数重载的。第一个是模板，第二个参数按照官方文档的说法是Array of included templates.具体怎么用，我也没找到更详细的例子，既然这样我就有NULL来代替吧。第二个参数是一组object设置，文档中只有九个设置的简单描述，没有找到具体例子，不过这一组的第二个设置filter_data对我很有用，是设置是否过滤HTML代码，也就是说，JSON数据中的遇到 HTML代码是把它转义原样显示出来还是让它以HMTL标识不显示。默认是TRUE，也就是如果json数据中有html代码将转义显示出来。
   我接着继续查看jtemplates.tpython.com中的文档，突然发现一个方法：processTemplateStart(String url, Array param, Integer interval, [Array args], [Object options]),这个方法可以定时从指定的文件中读取JSON数据并生成，这样我上面的JS代码就可以修改为：
<mce:script language=”javascript” ><!-- $(document).ready(function(){processTemplateStart (‘JSON.ASP’,null,10000, {format:true});}) // --></mce:script>
      上面一行可以替代前面的的十几行代码。真的太简单了。
      保存页面运行了一下，我又发现了一个问题，行情交易数据不同气温，温度变得慢，而行情时时在变，有涨有跌。一般的股市涨了就用红色表示，跌了就有绿色表示。于是我在服务器读取数据的时候判断，如果涨了我就在数字前加上一个”z”,跌了就加一个”d”。这样，输出的数据就可能是：{data: [{city:’深圳’, temperature:’z30’},{city:’东莞’, temperature:’d32’}]}
这样，我如果用processTemplateStart()似乎不能满足我变颜色的要求，于是我只好又用回以前的，并把函数：ApplyTemplate进行修改：
Function ApplyTemplate(data) { for(var i=0;i<data.data.length;i++) { data.data. temperature =data.data.temperature .replace(/(d/d+/.?(/d+)?)|(z/d+/.?(/d+)?)/,"<font color=’green’ >$1</font><font color=red>$3</font>").replace(/[d|z]/,""); } $('#result').setTemplateElement('template', null, {filter_data: false}); $('#result').processTemplate(data); }

      这样一来，我把setTemplateElement函数的filter_data设为假，我的<font>就不会被原样显示出来了。
    “阿里，阿里巴巴，阿里巴巴是个快乐的青年”，哈哈，终于被我搞出来了吧。
       当然，我这个例子也只是测试用的，真的上线运行，AJAX的代码我不会用Jquery的，因为Jquery.js压缩后还有五十多K，太大了，必须分流到另一台服务器，但AJAX又不能夸站访问的，所以我会自己手写一个AJAX读取文件然后把数据交给Jtemplates处理。而Jquery.js和 Jtemplates.js可以放在另一台服务器包函进来，这样既可以用AJAX取得数据，又可以数据分流。
       关于Jtemplates这个外挂，真的还有很多的属性，比如让表格隔行变颜色，还可以判断数据等等等。改完这个行情，再做一些加密处理放上公网运行，调动通知下来了，我调到了另一个部门，也就是即将成立的新公司去开发了。行情以后的修改优化就交给那些后生们了。