[原创]实践总结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进行数据传输