Json這個東西很神奇,大家都知道。通過網絡傳遞信息時,字符(串)是很好的選擇,我們在客戶和服務器兩端構建的對象,通過拆解為字符串的形式而互相傳輸。所以我更願意把Json理解為一種手段或者模式,目的是實現對象和字符串的轉換。
因為我們適應了面向對象的程序編輯,所以我們希望在頁面的信息處理時,也能夠使用對象屬性方便的操作。通過json,我們能夠將服務器通過網絡傳遞到客戶端的字符串解析為對象,在客戶端本地通過對象手法進行操作。
比如下面:
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <title> JsonCase </title> 5 </head> 6 7 <body> 8 <script type="text/javascript"> 9 // e.g.1 10 // 這種方式似乎只能用[]數組才能成功轉換 11 var stu = eval("[{'name':'nn'}]"); 12 alert(stu[0].name); 13 // e.g.2 14 eval("var stu1 = {'name':'mm'}"); 15 alert(stu1.name); 16 </script> 17 </body> 18 </html>
json說簡單也簡單,上面就是很好的例子。
當我們有很復雜的對象和字符串需要互相轉換時,我們就需要一些第三方的幫助。
我們需要一些jar包來幫助我們實現復雜Json轉換,比如數組、XML等高級、復雜的轉換。
組件名 下載地址
BeanUtils http://commons.apache.org/beanutils/download_beanutils.cgi
Collections http://commons.apache.org/collections/download_collections.cgi
Lang http://commons.apache.org/lang/download_lang.cgi
Logging http://commons.apache.org/logging/download_logging.cgi
EZMorph ezmorph.sourceforge.net/(這個是項目主頁,但是sourceforge在奧運期間被和諧……)
Json-lib sourceforge.net/projects/json-lib/files/(sourceforge被和諧,怨念……)
XOM http://www.xom.nu/(如果需要實現JSON和XML之間的轉換等,就必要)
JQuery http://jquery.com/
以上的jar包我下載打包了,大家可以移步到這里下載(不包括JQuery)。
然后我們再取得JQuery,當然,這更加不是必要的。
小例子:
我在index.jsp里有一個下拉框,在獲得焦點時利用ajax發送異步請求從服務器獲取數據,這里也利用了一些json的東西。
servlet我配置為攔截value.get。
我把代碼貼上來大家稍微看一看,這些是十分基礎的東西,只對和我一樣的初學者做一個參考和備忘。
index.jsp:
1 <%@ page language="java" import="java.util.*" pageEncoding="GBK"%> 2 <% 3 String path = request.getContextPath(); 4 String basePath = request.getScheme() + "://" 5 + request.getServerName() + ":" + request.getServerPort() 6 + path + "/"; 7 %> 8 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 9 <html> 10 <head> 11 <title>JsonCase</title> 12 <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> 13 <script type="text/javascript"> 14 $(function($) { 15 $("#record").append("當前測試頁面完成加載。<br/>"); 16 }); 17 function getFirstFloorValue(element) { 18 $("#record").append("<br/>獲取到信息:您將要取得第一級選項信息……"); 19 $("#record").append("<br/>正在使用ajax為您獲取數據,您可以繼續停留在頁面並進行其他操作。"); 20 $.ajax({ 21 url : "value.get", 22 type : "POST", 23 data : "action=GetFirstFloorValue", 24 datatype : "json", 25 success : function(data) { 26 $("#record").append("<br/>操作成功,正在為您准備數據……"); 27 $(element).empty(); 28 $("#record").append("<br/>清除原始數據成功!"); 29 var ops = $.parseJSON(data); 30 $("#record").append("<br/>即時數據准備成功!"); 31 for ( var i = 0; i < ops.length; i++) 32 $(element).append( 33 "<option value=\"" + ops[i] + "\">" + ops[i] 34 + "</option>"); 35 $("#record").append("<br/>更新列表成功!<br/>"); 36 } 37 }); 38 39 // 相比之下,此方法比上面的方法更加簡潔,上面的方法具有更好的可控性 40 /*$.getJSON("value.get", { 41 "action" : "GetFirstFloorValue" 42 }, function(data) { 43 var ml = ""; 44 $(data).each(function(i) { 45 ml += "<option value="+ data[i] +">" + data[i] + "</option>"; 46 }); 47 $(element).html(ml); 48 });*/ 49 } 50 </script> 51 </head> 52 53 <body> 54 <div> 55 <h3> 56 此處演示使用JQuery框架ajax支持的Json來實現下來列表即時取值: <br /> 57 本實例為單個列表的值傳遞,使用簡單json來實現 <br /> 點擊會使用ajax異步從服務器取得數據取值 58 </h3> 59 <select id="select1" onfocus=getFirstFloorValue(this)> 60 <option value="1">點擊取值</option> 61 </select> 62 </div> 63 <dir> 64 <h3>此處顯示一些記錄信息:</h3> 65 <span id="record"></span> 66 </dir> 67 </body> 68 </html>
ValueGetController.java:
1 package servlet; 2 3 import java.io.IOException; 4 import java.io.PrintWriter; 5 6 import javax.servlet.ServletException; 7 import javax.servlet.http.HttpServlet; 8 import javax.servlet.http.HttpServletRequest; 9 import javax.servlet.http.HttpServletResponse; 10 11 import net.sf.json.JSONArray; 12 13 public class ValueGetController extends HttpServlet { 14 15 private static final long serialVersionUID = -1293610555518403602L; 16 17 public void doGet(HttpServletRequest request, HttpServletResponse response) 18 throws ServletException, IOException { 19 20 doPost(request, response); 21 } 22 23 public void doPost(HttpServletRequest request, HttpServletResponse response) 24 throws ServletException, IOException { 25 26 request.setCharacterEncoding("GBK"); 27 response.setContentType("text/html;charset=gbk"); 28 PrintWriter out = response.getWriter(); 29 String action = request.getParameter("action"); 30 if (action.equals("GetFirstFloorValue")) { 31 String[] str = GetFirstFloorValue(); 32 JSONArray ja = JSONArray.fromObject(str); 33 String json = ja.toString(); 34 out.print(json); 35 System.out.println(json); 36 out.flush(); 37 out.close(); 38 return; 39 } 40 out.flush(); 41 out.close(); 42 } 43 44 private String[] GetFirstFloorValue() { 45 String[] str = new String[4]; 46 str[0] = "桌面應用"; 47 str[1] = "移動設備"; 48 str[2] = "服務器端"; 49 str[3] = "嵌入式開發"; 50 return str; 51 } 52 53 }
做法和流程就是使用第三方jar包和JQuery框架提供的方法,我在界面通過JQuery的ajax發起異步ajax請求,服務器返回的json格式字符串再交由JQuery解析,轉化為javascript對象便於我們通過對象手法操作。此例十分簡單,也沒有xml操作。但是做一個備忘是足夠了。
(最后編輯時間2012-08-07 17:59:53)