在學(xué)習(xí)JSON之前，當(dāng)我在寫(xiě)大量JSP頁(yè)面的時(shí)候，產(chǎn)生動(dòng)態(tài)數(shù)據(jù)一般采用兩種途徑:
1.直接在頁(yè)面中寫(xiě)java代碼
2 采用各種標(biāo)簽代替
這兩種用法的支持者都很多,但是我發(fā)現(xiàn)就算是采用標(biāo)簽也好,對(duì)于頁(yè)面的重用還是無(wú)能為力,比如有幾個(gè)頁(yè)面都需要用到一個(gè)item數(shù)據(jù)，一個(gè)是管理用戶(hù)頁(yè)面，一個(gè)是訂單頁(yè)面。我們既要在管理用戶(hù)的servlet寫(xiě)上setAttribute('item',item),也要在管理訂單的servlet寫(xiě)上setAttribute('item',item);然后在頁(yè)面上通過(guò)getAttribute()獲得數(shù)據(jù):
Java代碼 
- <%for(int i=0;i<item.length;++i){%>
- html tag ...
- <%}%>
或者采用標(biāo)簽的形式:
Java代碼 
- <ww:iterator value="item">
- html tag...
- <ww:iterator>
很多時(shí)候我們會(huì)采用 <jsp:inclue page="common.jsp"/>來(lái)重用這樣的頁(yè)面,但這里有個(gè)問(wèn)題，如果多個(gè)的頁(yè)面樣式不一樣呢?如果數(shù)據(jù)不是很多呢，這樣會(huì)產(chǎn)生很多頁(yè)面碎片,實(shí)踐已經(jīng)證明,重用頁(yè)面并不是一個(gè)好辦法.
有時(shí)候我想，如果我能單獨(dú)用一個(gè)action來(lái)提供輸出數(shù)據(jù)，每個(gè)需要這些數(shù)據(jù)的頁(yè)面頁(yè)面都去獲取這些數(shù)據(jù),關(guān)于這些數(shù)據(jù)在頁(yè)面如何渲染是頁(yè)面的問(wèn)題，這個(gè)action只提供數(shù)據(jù),這樣我們重用數(shù)據(jù)不是比重用頁(yè)面好很多么?
但是之前的技術(shù)并不能支撐這樣的實(shí)現(xiàn)，一個(gè)頁(yè)面如何自己主動(dòng)去訪問(wèn)它需要的數(shù)據(jù)呢?
答案是當(dāng)然是通過(guò)AJAX技術(shù).但今天我介紹的是另外一種技術(shù)JSON.
先簡(jiǎn)單的介紹一下JSON(雖然很多人已經(jīng)知道),JSON JavaScirp Object Notion 可以看成一段javascript對(duì)象樹(shù)，比如 user.id 表示的是user對(duì)象的id，如果對(duì)webwork或則是srtus2.0熟悉的朋友應(yīng)該對(duì)此并不陌生，對(duì)象樹(shù)可以嵌套對(duì)象,比如user.cat.age 表示user對(duì)象的成員cat的年齡。除了對(duì)象還可以嵌套數(shù)組方法user.cat[0].sayHello();
我們這樣聲明一個(gè)JSON:
Java代碼 
- var user = { id:’1’, name:’sanyun’};
- alert(user.id) //輸出1
- user = { id:’1’, cat:{age:2,color:’white’ }};
- alert(user.cat.age) //輸出2
但是JSON本身是不能和后端通信的,不過(guò)我們可以通過(guò)
Java代碼 
- <script type="text/javascript" src="后端資源"> </script>
來(lái)和服務(wù)器后端通信.
我們可以把它封裝成一個(gè)方法:
Java代碼 
- function CallBack(model) {
- this.model = model;
- }
- CallBack.init = function (url) {
- var headElement = document.getElementsByTagName("head").item(0);
- var scriptTag = document.createElement("script");
- scriptTag.setAttribute("type", "text/javascript");
- scriptTag.setAttribute("src", url);
- headElement.appendChild(scriptTag);
- };
不過(guò)需要注意的是采用這種方式后臺(tái)MIME必須要設(shè)置為 html/Javascritp，當(dāng)然你也可以輕松把這種方式替換成Ajax.
解析
通信之后我們需要做的是解析數(shù)據(jù),一般來(lái)說(shuō),我們可以通過(guò)for in 簡(jiǎn)單的遍列JSON
Java代碼 
- //model表示后端產(chǎn)生的JSON
- CallBack.update(model){
- for(i in model){
- var node =document.getElementByID(i);
- if(node){
- node.value = model[i];
- }
- }
- }
后臺(tái)
Java代碼 
- public class ShowType extends HttpServlet {
-
- protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
-
- response.addHeader("Cache-Control", "no-cache"); //(1)
- response.setContentType("HTML/JavaScript;charset=GBK");//(2)
- PrintWriter out = response.getWriter();
- String json = ” {name:'jiangyunpeng', status:'1',sex:'female'} ”//(3)
- out.print("CallBack.update("+json+")"); //(4)
- }
- }
(1)
首先需要設(shè)置緩存為空
(2)然后MIME必須要設(shè)置為 html/Javascritp
(3)產(chǎn)生一段JSON，這里我們是手動(dòng)產(chǎn)生的，可以采用JSON開(kāi)源框架
(4)調(diào)用我們前面頁(yè)面定義的JS函數(shù)
通過(guò)這樣處理了之后我們的頁(yè)面再也沒(méi)有任何JAVA代碼或者自定義標(biāo)簽了,他完全是一個(gè)HTML頁(yè)面(當(dāng)然這里為了演示，把解析JSON過(guò)程過(guò)于簡(jiǎn)單化了),他具有這些好處:
1.它是一個(gè)HTML，響應(yīng)速度比JSP快
2.對(duì)于一些表單元素,比如checkbox,select，如果采用java代碼會(huì)很繁瑣,
Java代碼 
- function initCheckbox(){
- if('<%=status%>'==1){ //這里有JAVA代碼
- document.getElementById('checkbox').checked = true;
- }else{
- document.getElementById('checkbox').checked = fasle;
- }
- }
但是如果采用JSON的話
Java代碼 
- function initCheckbox(){
- if(status==1){ //這里只有JSON
- document.getElementById('checkbox').checked = true;
- }else{
- document.getElementById('checkbox').checked = fasle;
- }
- }
我們可以把這段代碼放在解析方法里面，判斷查詢(xún)的對(duì)象如果是checkbox,就像上面這樣處理，這樣我們就可以更本不用關(guān)心它是否是checkbox
3.重用了數(shù)據(jù).多個(gè)頁(yè)面可以通過(guò)JSON訪問(wèn)相同的數(shù)據(jù)，這里沒(méi)有setAttribute(),也不用考慮生命周期。
4.降低了服務(wù)器端的負(fù)載。因?yàn)槲覀儼呀馕龅臄?shù)據(jù)任務(wù)放在客戶(hù)端里面進(jìn)行，服務(wù)器只需要產(chǎn)生一些JSON字符串。
5.分離了JAVA代碼和JS,諸如驗(yàn)證，判斷，很多時(shí)候在javascript里面嵌套java，可讀性很差。
小結(jié)：我覺(jué)得采用JSON是個(gè)不錯(cuò)的選擇，大家可以試試。
原來(lái)大伙早知道啦！
參考：http://www.javaworld.com/javaworld/jw-11-2006/jw-1115-json.html
我也是在用JSON，但不是像這樣的動(dòng)態(tài)生成js腳本，而是為了處理大批表格數(shù)據(jù)的讀取問(wèn)題，用struts(1.2)的action來(lái)生成json字符串，再用response.getWriter().write()輸出到頁(yè)面，ExtJS自然就是用Ext.data.JsonStore來(lái)讀取了。這種方式的效率比較高，也達(dá)到了代碼分離的目的，邏輯層和數(shù)據(jù)訪問(wèn)層根本無(wú)需暴露在web上，頁(yè)面雖然是jsp，也無(wú)需使用<%%>或者struts標(biāo)簽。歡迎交流～
我先貼部分代碼上來(lái)和大家交流一下，目前處于開(kāi)發(fā)初期階段，稍后我才做一個(gè)sample放上來(lái)。
Java代碼 
- /**
- * 向?yàn)g覽器輸出JSON字符串
- * @param response HttpServletResponse對(duì)象
- * @param obj 任意對(duì)象，可以是List，也可以是單個(gè)對(duì)象
- */
- public void writeJsonString(HttpServletResponse response, Object obj) throws IOException {
- if( obj == null ) {
- this.exception = "obj參數(shù)為空";
- logger.error(this.exception);
- throw new NullPointerException(this.exception);
- }
-
- JSONArray array = JSONArray.fromObject(obj);
-
- try {
- String json = array.toString();
- if( json.startsWith("[") ) {
- json = json.substring(1);
- }
- if( json.endsWith("]") ) {
- json = json.substring(0, json.length()-1);
- }
- response.setCharacterEncoding("utf-8");
- response.getWriter().write(json);
- } catch (IOException e) {
- this.exception = "向?yàn)g覽器輸出JSON字符串時(shí)發(fā)生錯(cuò)誤";
- logger.error(this.exception);
- logger.error(e);
- throw new IOException(this.exception);
- }
- }
這里是js部分
Java代碼 
- var store = new Ext.data.JsonStore({
- url: '../demo.do', //請(qǐng)大家根據(jù)實(shí)際情況修改action路徑
- root: 'data', //傳回來(lái)的JSON字符串是HashMap生成的，data對(duì)應(yīng)具體的數(shù)據(jù)集，一般是List對(duì)象
- totalProperty: 'totalCount', //總記錄數(shù)，整型
- id: 'id',
- fields: ['title', 'state', {name:'createDate', type: 'date'}, 'author', {name:'id', type:'int'}]
- });
- store.setDefaultSort('id', 'asc');
- store.load({params:{start:0, limit:25}}); //傳兩個(gè)URL參數(shù)做分頁(yè)處理
還需要說(shuō)明的是：需要json-lib-2.1-jdk15.jar, ezmorph-1.0.3.jar，到附件中取。