[原創(chuàng)]實(shí)踐總結(jié)ajax各種使用方式(上)
3、JSON方式
JSON(JavaScript Object Notation) 是一種輕量級(jí)的數(shù)據(jù)交換格式,易于人閱讀和編寫(xiě)，比xml有更好的易用性
json中文網(wǎng)站
JSON具有以下這些形式：
對(duì)象是一個(gè)無(wú)序的“‘名稱(chēng)/值’對(duì)”集合。一個(gè)對(duì)象以“{”（左括號(hào)）開(kāi)始，“}”（右括號(hào)）結(jié)束。每個(gè)“名稱(chēng)”后跟一個(gè)“:”（冒號(hào)）；“‘名稱(chēng)/值’ 對(duì)”之間使用“,”（逗號(hào)）分隔。
數(shù)組是值（value）的有序集合。一個(gè)數(shù)組以“[”（左中括號(hào)）開(kāi)始，“]”（右中括號(hào)）結(jié)束。值之間使用“,”（逗號(hào)）分隔。
值（value）可以是雙引號(hào)括起來(lái)的字符串（string）、數(shù)值(number)、true、false、 null、對(duì)象（object）或者數(shù)組（array）。這些結(jié)構(gòu)可以嵌套。
字符串（string）是由雙引號(hào)包圍的任意數(shù)量Unicode字符的集合，使用反斜線(xiàn)轉(zhuǎn)義。一個(gè)字符（character）即一個(gè)單獨(dú)的字符串（character string）。
字符串（string）與C或者Java的字符串非常相似。
數(shù)值（number）也與C或者Java的數(shù)值非常相似。除去未曾使用的八進(jìn)制與十六進(jìn)制格式。除去一些編碼細(xì)節(jié)。
以下是以自己在項(xiàng)目中實(shí)際使用到JSON為原型進(jìn)行舉例
1、業(yè)務(wù)描述：
根據(jù)前臺(tái)搜索信息進(jìn)行搜索，并把后臺(tái)查詢(xún)出來(lái)的數(shù)據(jù)集合封裝成JSON的方式展現(xiàn)在前臺(tái)
前臺(tái)頁(yè)面搜索：
1
<div id="brandId">
2 <form id="form1">
3 <p>
4 預(yù)約掛號(hào)反饋資源管理
5 </p>
6 <p>
7 <label>
8 開(kāi)始日期
9 <input type="text" name="operate_date1" />
10 </label>
11 <label>
12 結(jié)束日期
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開(kāi)源組件，意在規(guī)避ajax底層操作prototype官方網(wǎng)站
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>確認(rèn)號(hào)</td><td>反饋結(jié)果</td><td>申請(qǐng)單號(hào)</td><td>申請(qǐng)日期</td><td>病人編號(hào)</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()是獲得前臺(tái)form1表單中查詢(xún)數(shù)據(jù)并調(diào)用后臺(tái)方法；reportError()方法是獲得封裝后的JSONArray進(jìn)行遍歷并進(jìn)在
前臺(tái)進(jìn)行展示
控制層代碼如下：
1/** *//**
2 * 此為ajax測(cè)試,把查詢(xún)結(jié)果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("開(kāi)放日期:" + 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 // 調(diào)用基類(lèi)方法，轉(zhuǎn)化成json方式
30 renderJson(response, resultArray.toString());
31 }
32
此代碼是根據(jù)查詢(xún)條件查詢(xún)出符合條件數(shù)據(jù)集合，并把集合轉(zhuǎn)化成JSONObject,并把此對(duì)象放入JSONArray
轉(zhuǎn)化成JSONObject方法如下：
1/** *//**
2 * 轉(zhuǎn)換成JSON格式
3 * @param domain
4 * 是要進(jìn)行轉(zhuǎn)化的實(shí)體對(duì)象
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 }
這樣整個(gè)功能完成
頁(yè)面效果如下：
總結(jié)：
JSON比XML在ajax方面一些優(yōu)勢(shì)：
1、易于解讀，易于編寫(xiě)，與java中Map集合類(lèi)似，更易于被開(kāi)發(fā)人員接受
2、節(jié)省解析過(guò)程，不用象xml需要用JDom等方式解析xml
一篇不錯(cuò)餓參考文章
使用JSON進(jìn)行數(shù)據(jù)傳輸