Web2.0的开发里, ajax是一个非常重要的技术. 如果你的网站里没有点ajax做的东西, 你都不好意思说你是web2.0的网站.
使用ajax的时候, 最关心的就是数据传输的格式了, 一般来说, 有以下几种格式:
- 纯文本
- HTML代码
- XML
- JSON
可以说主流的就是上面几种了. 下面我们来分别分析一下:
-
纯文本
使用纯文本的格式, 可以传输一些message类的文本, 用于在前台页面显示. 优点是简单, 缺点是功能少. -
HTML代码
将页面结构和数据放在一起返回给页面, 前台拿到后, 可以不需要任何处理就显示在页面上, 使用简单. 优点是无需处理, 缺点是页面结构和数据都由后台提供, 页面的结构发生变化后, 需要去改后台脚本. -
XML
使用XML作为数据的格式, 结构化非常明显, 功能更加丰富了, 各种各样的数据结构都可以支持了. 优点是数据结构化, 缺点是处理繁琐, 前台使用需要将数据和HTML结构拼接在一起, 使用比较复杂. 同时, XML本身的缺点是数据量大. -
JSON
JSON有着和XML一样的结构化的优势, 同时由于JSON没有关闭标签的概念, 所以JSON的数据量比XML小很多. 有统计数据说平均能少46%, 虽然这个数字我不相信, 但是我相信肯定会少很多. 优点是数据结构化, 缺点是前台同样需要将JSON里的数据和页面结构拼接在一起, 使用比较复杂.
那么, 虽然XML和JSON有些优秀的结构化的优势, 功能会更多的优势, 可是又有前台难处理的缺点, 该如何取舍呢? 其实, 我们可以换一种思路, 既然问题出在数据和HTML结构拼接的时候, 一会写HTML代码, 一会写数据, 这么麻烦, 为什么, 不用模板来替我们做这个事情呢? 哈哈, 我的真正观点来了, 那就是, 要使用JS模板来解决这个问题!
继续使用JSON来传输数据, 得到数据后, 不直接与HTML结构结合, 而是通过模板一次性套好页面, 现在浏览器的JS引擎都很给力, 所以不会有任何性能问题! 一举两得!
这里只给一个简单的例子让大家看明白即可:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script> </head> <body> <ul id="movieList"></ul> <script> var movies = [ { Name: "The Red Violin", ReleaseYear: "1998" }, { Name: "Eyes Wide Shut", ReleaseYear: "1999" }, { Name: "The Inheritance", ReleaseYear: "1976" } ]; var markup = "<li><b>${Name}</b> (${ReleaseYear})</li>"; /* Compile the markup as a named template */ $.template( "movieTemplate", markup ); /* Render the template with the movies data and insert the rendered HTML under the "movieList" element */ $.tmpl( "movieTemplate", movies ) .appendTo( "#movieList" ); </script> </body> </html>这个例子很简单, 甚至没有写ajax, 但是大家可以用ajax来得到类似movies变量的数据, 然后传给template, 就可以了. 这样比起传HTML数据, 优势很明显:
- 传输的数据量少, 只有JSON数据.
- 页面生成在前台, 修改的时候, 不需要修改和重启后台程序.
- 前台处理的时候, 模板成为重点, HTML结构由模板控制, 修改方便.