在學(xué)習(xí)JSON之前，當(dāng)我在寫大量JSP頁面的時候，產(chǎn)生動態(tài)數(shù)據(jù)一般采用兩種途徑:
1.直接在頁面中寫java代碼
2 采用各種標簽代替
這兩種用法的支持者都很多,但是我發(fā)現(xiàn)就算是采用標簽也好,對于頁面的重用還是無能為力,比如有幾個頁面都需要用到一個item數(shù)據(jù)，一個是管理用戶頁面，一個是訂單頁面。我們既要在管理用戶的servlet寫上setAttribute('item',item),也要在管理訂單的servlet寫上setAttribute('item',item);然后在頁面上通過getAttribute()獲得數(shù)據(jù):
Java代碼 
- <%for(int i=0;i<item.length;++i){%>
- html tag ...
- <%}%>
或者采用標簽的形式:
Java代碼 
- <ww:iterator value="item">
- html tag...
- <ww:iterator>
很多時候我們會采用 <jsp:inclue page="common.jsp"/>來重用這樣的頁面,但這里有個問題，如果多個的頁面樣式不一樣呢?如果數(shù)據(jù)不是很多呢，這樣會產(chǎn)生很多頁面碎片,實踐已經(jīng)證明,重用頁面并不是一個好辦法.
有時候我想，如果我能單獨用一個action來提供輸出數(shù)據(jù)，每個需要這些數(shù)據(jù)的頁面頁面都去獲取這些數(shù)據(jù),關(guān)于這些數(shù)據(jù)在頁面如何渲染是頁面的問題，這個action只提供數(shù)據(jù),這樣我們重用數(shù)據(jù)不是比重用頁面好很多么?
但是之前的技術(shù)并不能支撐這樣的實現(xiàn)，一個頁面如何自己主動去訪問它需要的數(shù)據(jù)呢?
答案是當(dāng)然是通過AJAX技術(shù).但今天我介紹的是另外一種技術(shù)JSON.
先簡單的介紹一下JSON(雖然很多人已經(jīng)知道),JSON JavaScirp Object Notion 可以看成一段javascript對象樹，比如 user.id 表示的是user對象的id，如果對webwork或則是srtus2.0熟悉的朋友應(yīng)該對此并不陌生，對象樹可以嵌套對象,比如user.cat.age 表示user對象的成員cat的年齡。除了對象還可以嵌套數(shù)組方法user.cat[0].sayHello();
我們這樣聲明一個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本身是不能和后端通信的,不過我們可以通過
Java代碼 
- <script type="text/javascript" src="后端資源"> </script>
來和服務(wù)器后端通信.
我們可以把它封裝成一個方法:
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);
- };
不過需要注意的是采用這種方式后臺MIME必須要設(shè)置為 html/Javascritp，當(dāng)然你也可以輕松把這種方式替換成Ajax.
解析
通信之后我們需要做的是解析數(shù)據(jù),一般來說,我們可以通過for in 簡單的遍列JSON
Java代碼 
- //model表示后端產(chǎn)生的JSON
- CallBack.update(model){
- for(i in model){
- var node =document.getElementByID(i);
- if(node){
- node.value = model[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，這里我們是手動產(chǎn)生的，可以采用JSON開源框架
(4)調(diào)用我們前面頁面定義的JS函數(shù)
通過這樣處理了之后我們的頁面再也沒有任何JAVA代碼或者自定義標簽了,他完全是一個HTML頁面(當(dāng)然這里為了演示，把解析JSON過程過于簡單化了),他具有這些好處:
1.它是一個HTML，響應(yīng)速度比JSP快
2.對于一些表單元素,比如checkbox,select，如果采用java代碼會很繁瑣,
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;
- }
- }
我們可以把這段代碼放在解析方法里面，判斷查詢的對象如果是checkbox,就像上面這樣處理，這樣我們就可以更本不用關(guān)心它是否是checkbox
3.重用了數(shù)據(jù).多個頁面可以通過JSON訪問相同的數(shù)據(jù)，這里沒有setAttribute(),也不用考慮生命周期。
4.降低了服務(wù)器端的負載。因為我們把解析的數(shù)據(jù)任務(wù)放在客戶端里面進行，服務(wù)器只需要產(chǎn)生一些JSON字符串。
5.分離了JAVA代碼和JS,諸如驗證，判斷，很多時候在javascript里面嵌套java，可讀性很差。
小結(jié)：我覺得采用JSON是個不錯的選擇，大家可以試試。
原來大伙早知道啦！
參考：http://www.javaworld.com/javaworld/jw-11-2006/jw-1115-json.html
我也是在用JSON，但不是像這樣的動態(tài)生成js腳本，而是為了處理大批表格數(shù)據(jù)的讀取問題，用struts(1.2)的action來生成json字符串，再用response.getWriter().write()輸出到頁面，ExtJS自然就是用Ext.data.JsonStore來讀取了。這種方式的效率比較高，也達到了代碼分離的目的，邏輯層和數(shù)據(jù)訪問層根本無需暴露在web上，頁面雖然是jsp，也無需使用<%%>或者struts標簽。歡迎交流～
我先貼部分代碼上來和大家交流一下，目前處于開發(fā)初期階段，稍后我才做一個sample放上來。
Java代碼 
- /**
- * 向瀏覽器輸出JSON字符串
- * @param response HttpServletResponse對象
- * @param obj 任意對象，可以是List，也可以是單個對象
- */
- 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 = "向瀏覽器輸出JSON字符串時發(fā)生錯誤";
- logger.error(this.exception);
- logger.error(e);
- throw new IOException(this.exception);
- }
- }
這里是js部分
Java代碼 
- var store = new Ext.data.JsonStore({
- url: '../demo.do', //請大家根據(jù)實際情況修改action路徑
- root: 'data', //傳回來的JSON字符串是HashMap生成的，data對應(yīng)具體的數(shù)據(jù)集，一般是List對象
- 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}}); //傳兩個URL參數(shù)做分頁處理
還需要說明的是：需要json-lib-2.1-jdk15.jar, ezmorph-1.0.3.jar，到附件中取。