[原創]實踐總結ajax各種使用方式(上)
3、JSON方式
JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式,易于人閱讀和編寫，比xml有更好的易用性
json中文網站
JSON具有以下這些形式：
對象是一個無序的“‘名稱/值’對”集合。一個對象以“{”（左括號）開始，“}”（右括號）結束。每個“名稱”后跟一個“:”（冒號）；“‘名稱/值’ 對”之間使用“,”（逗號）分隔。
數組是值（value）的有序集合。一個數組以“[”（左中括號）開始，“]”（右中括號）結束。值之間使用“,”（逗號）分隔。
值（value）可以是雙引號括起來的字符串（string）、數值(number)、true、false、 null、對象（object）或者數組（array）。這些結構可以嵌套。
字符串（string）是由雙引號包圍的任意數量Unicode字符的集合，使用反斜線轉義。一個字符（character）即一個單獨的字符串（character string）。
字符串（string）與C或者Java的字符串非常相似。
數值（number）也與C或者Java的數值非常相似。除去未曾使用的八進制與十六進制格式。除去一些編碼細節。
以下是以自己在項目中實際使用到JSON為原型進行舉例
1、業務描述：
根據前臺搜索信息進行搜索，并把后臺查詢出來的數據集合封裝成JSON的方式展現在前臺
前臺頁面搜索：
1
<div id="brandId">
2 <form id="form1">
3 <p>
4 預約掛號反饋資源管理
5 </p>
6 <p>
7 <label>
8 開始日期
9 <input type="text" name="operate_date1" />
10 </label>
11 <label>
12 結束日期
13 <input type="text" name="operate_date2" />
14 </label>
15 <label>
16 病人姓名
17 <input type="text" name="name1" />
18 </label>
19 <label>
20 科室
21 <input type="text" name="name2" />
22 </label>
23 <input type="button" onclick="aa()" value="搜索" />
24 </p>
25</form>
26 </div>
27 <div id="pp">
28 </div>
js腳本，在這里用到Prototype開源組件，意在規避ajax底層操作prototype官方網站
1
function aa()
{
2
3
var url = '${ctx}/registerresult.do?method=listFor1';
4 var name22=$F("name2");
5 var myAjax = new Ajax.Request(
6 url,
7 {
8 method: 'post',
9 parameters:Form.serialize('form1'),
10
11 evalScripts: true,
12
13 onComplete:reportError
14
});
15
}
16 function reportError(originalRequest){
17 var myobj = originalRequest.responseText.evalJSON(true);
18 var tdate = new Date;
19 var tmonth =tdate.getMonth()+1;
20 var tday=tdate.getDate();
21 if(tmonth<10)
22 tmonth="0"+tmonth;
23 if(tday<10)
24 tday="0"+tday;
25 var ymdate = tdate.getYear()+""+tmonth+""+tday;
26 var str="<table>";
27 str=str+"<tr><td></td><td>確認號</td><td>反饋結果</td><td>申請單號</td><td>申請日期</td><td>病人編號</td><td>病人姓名</td><td>科室名</td></tr>";
28 myobj.each(function(myobj1){
29
30 if(ymdate==myobj1[4]){
31 str=str+"<tr>";
32 str = str+"<td><input type='checkbox' name='idd' value="+myobj1[0]+" /></td>";
33 str = str+"<td style='color:red'>"+myobj1[1]+"</td>";
34 str = str+"<td style='color:red'>"+myobj1[2]+"</td>";
35 str = str+"<td style='color:red'>"+myobj1[3]+"</td>";
36 str = str+"<td style='color:red'>"+myobj1[4]+"</td>";
37 str = str+"<td style='color:red'>"+myobj1[5]+"</td>";
38 str = str+"<td style='color:red'>"+myobj1[6]+"</td>";
39 str = str+"<td style='color:red'>"+myobj1[7]+"</td>";
40 str=str+"</tr>";
41
42 }else{
43 str=str+"<tr>";
44 str = str+"<td><input type='checkbox' name='idd' value="+myobj1[0]+" /></td>";
45 str = str+"<td>"+myobj1[1]+"</td>";
46 str = str+"<td>"+myobj1[2]+"</td>";
47 str = str+"<td>"+myobj1[3]+"</td>";
48 str = str+"<td>"+myobj1[4]+"</td>";
49 str = str+"<td>"+myobj1[5]+"</td>";
50 str = str+"<td>"+myobj1[6]+"</td>";
51 str = str+"<td>"+myobj1[7]+"</td>";
52 str=str+"</tr>";
53 }
54 });
55 str=str+"</table>";
56 $("pp").innerHTML=str;
57
58 }
此腳本中aa()是獲得前臺form1表單中查詢數據并調用后臺方法；reportError()方法是獲得封裝后的JSONArray進行遍歷并進在
前臺進行展示
控制層代碼如下：
1/** *//**
2 * 此為ajax測試,把查詢結果list使用JSON方式返回
3 *
4 * @param
5 *
6 */
7 public void listFor1(ActionMapping mapping, ActionForm form,
8 HttpServletRequest request, HttpServletResponse response)
9 throws Exception {
10 String operate_date1 = request.getParameter("operate_date1");
11
12 String operate_date2 = request.getParameter("operate_date2");
13 String name1 = request.getParameter("name1");
14 String name2 = request.getParameter("name2");
15 log.info("開放日期:" + operate_date1);
16 List list = registerresultManager.queryApply(registerresultManager
17 .registerResult(operate_date1, operate_date2, name1, name2),
18 getListPage(request, Constant.COUNT));
19
20
21 JSONArray resultArray = new JSONArray();
22 JSONObject jsonObject = new JSONObject();
23 for (int i = 0; i < list.size(); i++) {
24 Object[] d = (Object[]) list.get(i);
25 jsonObject = registerresultManager.getJSON(d);
26 resultArray.put(jsonObject);
27 }
28
29 // 調用基類方法，轉化成json方式
30 renderJson(response, resultArray.toString());
31 }
32
此代碼是根據查詢條件查詢出符合條件數據集合，并把集合轉化成JSONObject,并把此對象放入JSONArray
轉化成JSONObject方法如下：
1/** *//**
2 * 轉換成JSON格式
3 * @param domain
4 * 是要進行轉化的實體對象
5 * @return JSONObject
6 */
7 public JSONObject getJSON(Object[] domain) {
8 JSONObject jsonObject = new JSONObject();
9 for (int i = 0; i < domain.length; i++) {
10 if(domain[i]==null)
11 domain[i]="";
12 jsonObject.put(String.valueOf(i), domain[i]);
13 }
14
15 return jsonObject;
16 }
這樣整個功能完成
頁面效果如下：
總結：
JSON比XML在ajax方面一些優勢：
1、易于解讀，易于編寫，與java中Map集合類似，更易于被開發人員接受
2、節省解析過程，不用象xml需要用JDom等方式解析xml
一篇不錯餓參考文章
使用JSON進行數據傳輸