程序员人生 网站导航

[JavaScript] 7.JS JSON

栏目:htmlcss时间:2016-06-04 16:15:03

是甚么?

JSON 的全称是 JavaScript Object Notation,是1种轻量级的数据交换格式。JSO N 与 XML 具有相同的特性,例如易于人编写和浏览,易于机器生成和解析。但是 JSON 比 XML 数据传输的有效性要高出很多。JSON 完全独立与编程语言,使用文本格式保存。

JSON 数据有两种结构:

Name-Value 对构成的集合,类似于 Java 中的 Map。

Value 的有序列表,类似于 Java 中的 Array。

1个 JSON 格式的数据示例: 

{ "Name": "Apple", "Expiry": "2007/10/11 13:54", "Price": 3.99, "Sizes": [ "Small", "Medium", "Large" ] }

更多关于 JSON 数据格式的说明参看 JSON 官方网站:http://www.json.org(中文 内容看:http://www.json.org/json-zh.html)

GWT 与 JSON

GWT 中支持的客户端服务器端方法调用和数据传递的标准格式是 RPC。 JSON 其实不 是 GWT 支持的标准的数据传递格式。那末如何使用 JSON 来作为 GWT 的数据传递格式 呢?需要以下几步。 

第1,援用 HTTP 和 JSON 支持。 第2,在客户端创建 JSON 数据,提交到服务器

第3,在服务器上重写数据格式解析的代码,使之支持 JSON 格式的数据 第4,在服务器上组织 JSON 格式的数据,返回给客户端。 第5,客户端解析服务器传回的 JSON 数据,正确的显示

援用 HTTP 和 JSON 支持

找到.gwt.xml文件,在其中的

<inherits name='com.google.gwt.user.User'/>

在以后添加以下的内容:

<inherits name="com.google.gwt.json.JSON"/> <inherits name="com.google.gwt.http.HTTP"/>

其中 com.google.gwt.json.JSON 指的是要使用 JSON,com.google.gwt.http.H TTP 值得是通过 HTTP 调用服务器上的服务方法。

客户端构造 JSON 数据

客户端需要使用 com.google.gwt.json.client 包内的类来组装 JSON 格式的数据, 数据格式以下:

数据类型                                    说明

JSONArray                   JSONValue 构成的数组类型


JSONBoolean              JSON boolean的值


JSONException           访问 JSON 结构的数据出错的情况下可以抛出此异常


JSONNull                     JSON Null根式的数据

 

JSONNumber              JSON Number 类型的数据

 

JSONObject                 JSON Object 类型的数据

 

JSONParser                将 String 格式的 JSON 数据解析为 JSONValue 类 型的数据


JSONString                 JSON String 类型的数据

 

JSONValue                 所有 JSON 类型值的超级类型

组合1个简单的 JSON 数据:

JSONObject input = new JSONObject(); JSONString value = new JSONString("mazhao"); input.put("name", value);

JSON 数据格式为:{name: "mazhao"}

组合1个包括数组类型的复杂 JSON 数据:

JSONObject input = new JSONObject(); JSONString value = new JSONString("mazhao"); input.put("name", value); JSONArray arrayValue = new JSONArray(); arrayValue.set(0, new JSONString("array item 0")); arrayValue.set(1, 
new JSONString("array item 1")); arrayValue.set(2, new JSONString("array item 2")); input.put("array", arrayValue);

JSON 数据格式为:

{name: "mazhao", array: {"array item 0", "array item 1", "array item 2"}}

注意上述的 JSON 类型的数据,使用的都是 com.google.gwt.json.client 包内的类 型。这些类型终究会被编译为JavaScrip t 履行。

服务端重写数据解析代码,支持 JSON 格式的数据

服务器上,需要使用 JSON Java 支持类才能将 JSON 格式的数据转换为各种类型 的数据,固然也能够自己写1些解析用的代码。这里我们使用了 www.json.org上的代码 来完成。这组代码与 com.google.gwt.json.client 的代码很类似,只是在 org.json 包内部。

怎样解析 JSON 术诀呢?针对上述中的复杂的 JSON 数据:

{name: "mazhao", array: {"array item 0", "array item 1", "array item 2"}}

可使用以下的方式解析:

JSONObject jsonObject = new JSONObject(payload); String name = jsonObject.getString("name"); System.out.println("name is:" + name); JSONArray jsonArray = jsonObject.getJSONArray("array"); for(int i = 0; i < jsonArray.length(); i++) { System.out.println("item " + i + ":" + jsonArray.getString(i)); }

其中 payload 指的是上述的JSON 格式的数据。

那末如何写 GWT 的 Service 来得到 Payload 的数据呢?需要两点,第1,需要建立 1个Service 类,第2,覆盖父类的 processCall 方法。

示例代码:

package com.jpleasure.gwt.json.server; import com.google.gwt.user.client.rpc.SerializationException; import com.google.gwt.user.server.rpc.RemoteServiceServlet; import com.jpleasure.gwt.json.client.HelloWorldService; import org.json.JSONArray; import org.json.JSONException; import org.json.JSONObject /** * Created by IntelliJ IDEA. * User: vaio * Date: 2007⑼⑷ * Time: 22:08:31 * To change this template use File | Settings| File Templates. */ public class HelloWorldServiceImp l extends RemoteServiceServlet implements HelloWorldService { public String processCall(String payload) throws Serializat ionException { try { JSONObject jsonObject = new JSONObject(payload); String name = jsonObject.getString("name"); System.out.println("name is:" + name); JSONArray jsonArray = jsonObject.getJSONArray("array"); for(int i = 0; i < jsonArray.length(); i++) { System.out.println("item " + i + " :" + jsonArray.getString(i)); } } catch (JSONException e) { e.printStackTrace(); //To change bodyof catch statement use File | Settings |File Templates. } return "success"; } }

服务器上组织 JSON 格式的数据,返回给客户端

同上

客户端解析服务器传回的 JSON 数据,正确的显示 同上

包需求

Struts2返回json需要jsonplugin-0[1].25的包

Java 代码

然后我们的配置文件中需要继承 json-default

1. <?xml version="1.0" encoding="UTF⑻" ?> 2. <!DOCTYPE struts PUBLIC 3. "-//Apache Software Foundation//DTD Struts Configuration 2.0// EN" 4. "http://struts.apache.org/dtds/struts⑵.0.dtd"> 5. 6.<struts> 7. 8. <package name="com.act ion.testJson" extends="json-default" nam espace="/" > 9. <action name="jsonUser" class="com.act ion.testJson.JsonAction " method="testUser"> 10. <result type="json"/> 11. </action> 12. <!-- Add actions here --> 13. </package> 14.</struts> <?xml version="1.0" encoding="UTF⑻" ?> <!DOCTYPEstruts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN" "http://struts.apache.org/dtds/struts⑵.0.dtd"> <struts> <package name="co m.act ion.testJson" extends="json-default" namespace="/" > <action name="jsonUser" class="com.act ion.testJson.JsonAction" method="testUser"> <result type="json"/> </action> <!-- Add actions here --> </package> </struts>

然后我们的 Action 中需要返回的 json 信息需要加上注解

Java 代码

1. //pizza 2. package com.action.testJson; 3. 4. import java.util.ArrayList; 5. import java.util.List; 6. 7. import com.googlecode.jsonplugin.annotations.JSON; 8. import com.opensymphony.xwork2.ActionSupport; 9. 10.public class JsonAction extendsActionSupport { 11. 12. private static final long serialVersionUID = - 4082165361641669835L; 13. 14. Users user=new Users(); 15. List userList=new ArrayList(); 16. 17. 18. public String testUser(){ 19. System.out.println("in the json Acton"); 20. userInit(); 21. userList.add(user); 22. return SUCCESS; 23. } 24. 25. public void userInit(){ 26. user.setAge(1); 27. user.setName(" 张峰"); 28. user.setPassword("nofengPassword"); 29. } 30. 31. @JSON(name="userString") 32. public Users getUser() { 33. return user; 34. } 35. 36. @JSON(name="userList") 37. public ListgetUserList() { 38. return userList; 39. } 40. 41. public void setUser(Users user) { 42. this.user = user; 43. } 44. 45. public void setUserList(List userList) { 46. this.userList = userList; 47. } 48. 49. 50.}

JSON Plugin的说明

 

Name

 JSON Plugin

 

Publisher

 

MusachyBarroso

 

License

 

Open Source (ASL2)

 

Version

 0.30

 

Compatibility

 

Struts 2.0.6 or later

 

Homepage

 

http:/  /code.google.com/p/jsonplugin/

 

Download

 

http:/   /code.google.com/p/jsonplugin/downloads/list


 

Name

 

JSON Plugin

 

Publisher

 

MusachyBarroso

 

License

 

Open Source (ASL2)

 

Version

 0.30

 

Compatibility

 

Struts 2.0.6 or later

 

Homepage

 

http:/  /code.google.com/p/jsonplugin/

 

Download

 

http:/   /code.google.com/p/jsonplugin/downloads/list

 


Overview 

The JSON plugin provides a "json"result type that serializes actions into JSON. The serializa tion process is recursive, meaning that the whole object graph, starting on the action class (base class not included) will be serialized (root object can be customized using the "root" attribute). If the interceptor is used, the action will be populated from the JSON content in the request, these are the rules of the interceptor: 

1. The "content-type" must be "application/json"

2. The JSON content must be well formed, see json.org  for grammar.

3. Action must have a public "setter" method for fields that must be populated.

4. Supported types for population are: Primitives (int,long...String), Date, List,Map, Primitive Arrays, Other class (more on this later), and Array of Other class.

5. Any object in JSON, that is to be populated inside a list, or a map, will be of type Map

(mapping from properties to values), any whole number will be of type Long, any decimal number will be of type Double, and any array of typeList.

Given this JSON string:

{ "doubleValue": 10.10, "nestedBean": { "name": "Mr Bean" }, "list": ["A", 10, 20.20, { "firstName": "El Zorro" }], "array": [10, 20] }

The action must have a "setDoubleValue" method, taking either a "float" or a "double" argument (the interceptor will convert the value to the right one). There must be a "setNestedBean" whose argument type can be any class, that has a "setName" method taking as argument an "String". There must be a "setList" method thattakes a "List" as argument, that list will contain: "A" (String), 10 (Long), 20.20 (Double), Map ("firstName" -> "ElZorro"). The "setArray" method can take as parameter either a "List", or any numeric array.

Installation

This plugin can be installed by copying the plugin jar into your application's /WEB-INF/lib

directory. No other files need to be copied or created.

To use maven, add this to your pom:

<dependencies> ... <dependency> <groupId>com.googlecode</groupId> <artifactId>jsonplugin</artifactId> <version>0.26</version> </dependency> ... </dependencies> <repository> <id>Maven Plugin Repository</id> <url>http://struts2plugin-maven- repo.googlecode.com/svn/trunk/</url> <snapshots><enabled>false</enabled> </snapshots> <releases> <enabled>true</enabled> </releases> </repository>

Customizing Serialization and Deserialization 

Use the JSON annotation to customize the serializa tion/deseriali za tion process. Available JSON annotation fields:

 

Name

 

Description

 

Default Value

 

Serialization

 

Deserialization

 

name

 

Customize field name

 

empty

 

yes

 

no

 

 

serialize

 

Include in serializa tion

 

 

true

 

 

yes

 

 

no

 

 

deserialize

 

Include in deserializa tion

 

 

true

 

 

no

 

 

yes


 

format

 

Format used to format/parse a Date field

 

 

 

"yyyy-MM-dd'T'HH:mm:ss"

 

 

 

yes

 

 

 

yes

Excluding properties

A comma-delimited list of regular expressions can be passed to the JSON Result and Interceptor, properties matching any of these regular expressions will be ignored on the serializa tion process:

<!-- Resultfragment --> <result type="json"> <paramname="excludeProperties"> login.password,studentList.*\.sin </param> </result> <!-- Interceptor fragment --> <interceptor-ref name="json"> <param name="enableSMD">true</param> <paramname="excludeProperties"> login.password,studentList.*\.sin </param> </interceptor-ref>

Including properties

A comma-delimited list of regular expressions can be passed to the JSON Result to restrict which properties will be serialized. ONLY properties matchingany of these regular expressions will be included in the serialized output.

Note 

Exclude property expressions take precedence over includeproperty expressions. That is, if you use include and excludeproperty expressions on the same result, include property expressions will not be applied if an exclude excludeproperty expression matches a propertyfirst.

<!-- Result fragment --> <result type="json"> <paramname="includeProperties"> ^entries\[\d+\]\.clientNumber, ^entries\[\d+\]\.scheduleNumber, ^entries\[\d+\]\.createUserId </param> </result>

Root Object

Use the "root" attribute(OGNL expression) to specify the root object to be serialized.

<resulttype="json"> <param name="root"> person.job </param> </result>

The "root" attribute(OGNL expression) can also be used on the interceptor to specifytheobject that must be populated,make sure thisobject is not null.

<interceptor-refname="json"> <paramname="root">bean1.bean2</param> </interceptor-ref>

Wrap with Comments

wrapWithComments can  turn safe  JSON text  into dangerous  text.  For example, 

["*/ alert('XSS'); /*"] 

Thanks to Douglas Crockford for the tip!

If the "wrapWithC omments" (false by default) attribute is set to true, the generated JSON is wrapped with comments like:

/* { "doubleVal": 10.10, "nestedBean": { "name": "Mr Bean" }, "list": ["A", 10, 20.20, { "firstName": "El Zorro" }], "array": [10, 20] } */

This can be used to avoid potential Javascript Hijacks.To strip those comments use:

varresponseObject = eval("("+data.substring(data.indexOf("\/\*")+2,data.lastIndexOf("\*\/"))+")");

Base Classes

By default properties defined on base classes of the "root" object won't be serialized, to serialize properties in all base classes (up to Object) set "ignoreHierarchy" to false in the JSON result:

<resulttype="json"> <param name="ignoreHierarchy">false</param> </result>

Enumerations

By default, an Enum is serialized as a name=value pair where value = name().

publicenum AnEnum { ValueA, ValueB } JSON: "myEnum":"ValueA"

Use the "enumAsBean" result parameter to serialize Enum's as a bean with a special property

_name with value name(). All properties of the enum are also serialized 

publicenum AnEnum { ValueA("A"), ValueB("B"); private String val; public AnEnum(val) { this.val = val; } public getVal() { return val; } }

JSON: myEnum:{ "_name":"ValueA", "val": "A" }

Enable this parameter through struts.xml:

<resulttype="json"> <param name="enumAsBean">true</param> </result>

Compressing the output

Set the enableGZIP attribute to true to gzip the generated json response. The request must

include "gzip "in the "Accept-Encoding" header for this to work.

<resulttype="json"> <param name="enableGZIP" >true</param> </result>

Example

Setup Action

This simple action has some fields:

Example:

import java.util.HashMap; import java.util.Map; import com.opensymphony.xwork2.Action; public class JSONExample { private String field1 = "str"; private int[] ints = {10,20}; private Map map = new HashMap(); private String customName = "custom"; //'transient' fields are not serialized privatetransient Stringfield2; //fields without getter method are notserialized privateString field3; publicStringexecute(){ map.put("John", "Galt"); return Action.SUCCESS; } public String getField1() { return field1; } public void setField1(String field1) { this.field1 = field1; } public int[] getInts() { return ints; } public void setInts(int[] ints) { this.ints = ints; } public Map getMap() { return map; } public void setMap(Map map) { this.map = map; } @JSON(name="newName") public String getCustomName() { return this.customName; } }

Write the mapping for the action 

1. Add the map inside a package that extends "json-default"

2. Add a result of type "json" 

Example:

<?xmlversion="1.0" encoding="UTF⑻"?> <!DOCTYPE struts PUBLIC "-//ApacheSoftware Foundation//DTD Struts Configuration 2.0//EN""http://struts.apache.org/dtds/struts⑵.0.dtd"> <struts> <package name="example" extends="json-default"> <actionname="JSONExample"class="example.JSONExample"> <resulttype="json"/> </action> </package> </struts>

JSON example output

{ "field1" : "str", "ints": [10, 20], "map": { "John":"Galt" }, "newName": "custom" }

JSON RPC

The json plugin can be used to execute action methods from javascriptand return the output. This featurewasdeveloped with Dojo in mind, so it uses SimpleMethod Definitionto advertise the remote service. Let's work it out with an example(useless as most examples).

First write the action:

package smd;

import com.googlecode.jsonplugin.annotations.SMDMethod;

import com.opensymphony.xwork2.Action;

public class SMDAction { public String smd() { return Action.SUCCESS; } @SMDMethod public Bean doSomething(Bean bean, int quantity) { bean.setPrice(quantity * 10); return bean; } }

Methods that will be called remotely must be annotated with the SMDMethodannotation, for security reasons. Themethod will take a bean object, modify its price and return it. The action can be annotated with the SMD annotation to customize the generated SMD (more on that soon), and parameters can be annotated with SMDMethodParameter. As you can see, we have a "dummy", smd method. This method will be used to generatethe Simple Method Definition (a definition of all the servicesprovided by this class), using the "json" result. 

The bean class: 

package smd; publicclassBean { private String type; private int price; public String getType() { return type; } public void setType(String type) { this.type = type; } public int getPrice() { return price; } public void setPrice(int price) { this.price = price; } }

The mapping: 

<packagename="RPC" namespace="/nodecorate"extends="json-default"> <actionname="SMDAction"class="smd.SMDAction" method="smd"> <interceptor-ref name="json"> <param name="enableSMD">true</param> </interceptor-ref> <resulttype="json"> <paramname="enableSMD">true</param> </result> </action> </package>

Nothing special here, except that both the interceptor and the result must be applied to the action, and "enableSMD" must be enabled for both.

Now the javascript code:

<s:url id="smdUrl"namespace="/nodecorate"action="SMDAction"/> <script type="text/javascript"> //load dojo RPC dojo.require("dojo.rpc.*"); //createservice object(proxy) using SMD (generated by the json result) var service = new dojo.rpc.JsonService("${smdUrl}"); //function called when remote methodreturns varcallback =function(bean) { alert("Price for " + bean.type + " is" + bean.price); }; //parameter varbean = {type: "Mocca"}; //execute remotemethod var defered =service.doSomething(bean, 5); //attach callback to defered object defered.addCallback(callback); </script>

Dojo's JsonService will make a request to the action to load the SMD, which will return a JSON object with the definition of the availableremote methods, using that information Dojo createsa "proxy" for those methods. Because of the asynchronous natureof the request, when the method is executed, a deferred object is returned, to which a callback functioncan be attached. The callback function will receive as a parameterthe object returned from your action. That's it.

Proxied objects

(V0.20) As annotations are not inherited in Java, some user might experienceproblems while trying to serialize objects that are proxied.eg. when you have attached AOP interceptors to your action.

In this situation, the plugin will not detect the annotations on methods in your action.

To overcome this, set the "ignoreInterfaces" result parameter to false (true by default) to request that the plugin inspects all interfacesand superclasses of the action for annotations on the action's methods.

NOTE: This parameter should only be set to false if your action could be a proxy as there is a performance cost caused by recursion through the interfaces

<action name="contact"class="package.ContactAction"method="smd">

<interceptor-ref name="json">

<param name="enableSMD">true</param>

<param name="ignoreSMDMethodInterfaces">false</param>

</interceptor-ref>

<result type="json">

<param name="enableSMD">true</param>

<param name="ignoreInterfaces">false</param>

</result>

<interceptor-ref name="default"/>

</action>

在 Struts2 中使用JSonajax支持

JSON 插件提供了1种名为 json 的 ResultType,1旦为某个 Action 指定了1个类型为 json 的 Result,则该 Result 无需映照到任何视图资源。由于 JSON 插件会负责将 Action 里的状态信息序列化成 JSON 格式的数据,并将该数据返 回给客户端页面的 JavaScr ipt 。

简 单 地 说 ,JSON 插件允许我们在JavaScript 中异步调用 Action,而 且 Action 不再需要使用视图资源来显示该 Action 里的状态信息,而是由 JSON 插件负责 将 Action 里的状态信息返回给调用页面——通过这类方式,就可以够完成 Ajax 交互。

Struts2 提供了1种可插拔方式来管理插件,安装 Struts2 的 JSON插件和安 装普通插件并没有太大的区分,相同只需要将 Struts2 插件的 JAR 文档复制到 Web 利用的 WEB-INF/lib 路径下便可。

安装 JSON 插件按以下步骤进行:

(1)登 陆 http://code.google.com/p/jsonplugin/dow nloads/ list 站点,下载 Struts2 的 JSON 插件的最新版本,当前最新版本是 0.7,我们能够下载该版本的 JSON 插件。

(2)将下载到的 jsonplugin-0.7.jar 文档复制到 Web 利用的 WEB-INF 路径下,便可完成 JSON 插件的安装。 实现 Actio 逻辑假定 wo,en 输入页面中包括了3个表单域,这3个表单域对3个要求参 数,因此应当使用Action 来封装这3个要求参数。3个表单域的 name 分别为 field1 、field2 和 field3 。

处理该要求的 Action 类代码以下:

public class JSONExample { //封装要求参数的3个属性 private String field1; private transient String field2; private String field3; //封装处理结果的属性 private int[] ints = {10, 20}; private Map map = new HashMap(); private String customName = "custom"; //3个要求参数对应的 setter 和 getter 方法 public String getField1() { return field1; } public void setField1(St ring field1) { this.field1 = field1; } //此处省略了 field1 和 field2 两个字段的 setter 和 getter 方法 ... //封装处理结果的属性的 setter 和 getter 方法 public int[] getInts() { return ints; } public void setInts(int[] ints) { this.ints = ints; } public Map getMap() { return map; } public void setMap(Map map) { this.map = map; } //使用注释语法来改变该属性序列化后的属性名 @JSON(name="newName") public String getCustomName() { return this.customName; } public String execute() { map.put("name", "yeek u"); returnAction.SUCCESS; } }

在上面代码中,使用了 JSON 注释,注释时指定了 name 域,name 域指定 Action属性被序列化成 JSON对象的属性名。除此以外,JSON注释还支持以下几个域:

serialize :配置是不是序列化该属性。                           

deserialize :配置是不是反序列化该属性。 

format:配置用于格式化输出、解析日期表单域的格式。例如"yyyy-MM-dd'T'HH:mm:ss"。

配置该 Action 和配置普通 Action存在小小的区分,应当为该 Action 配置 类型为 json 的 Result。而这个 Result 无需配置任何视图资源。

配置该 Action 的 struts.xml 文档代码以下:

<?xml version="1.0" encoding="G BK"? > <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN" "http:/ /struts.apache.or g/dtds/st ruts⑵.0.dtd" > <struts > <consta nt name="struts.i18n.encod ing" value="U TF⑻"/> <package name="exa mple" extends="json-default" > <action name="JSON Example" class="lee.JSONExample" > <result type="json"/> </action> </package> </struts>

在上面配置文档中有两个值得注意的地方:

第1个地方是配置 struts.i18n.encod ing 常量时,不再是使用 GBK 编码,而 是 UTF⑻ 编码,这是由于 Ajax的 POST 要求都是以 UTF⑻的方式进行编码的。

第2个地方是配置包时,自己的包继承了 json-default 包,而不再继承默许 的 default 包,这是由于只有在该包下才有 json 类型的 Result。

业务思想

Json的对象的作用远不止于此,个人初步理解程度,demo中展现的只是json部份理解,欢迎交换学习。

 

------分隔线----------------------------
------分隔线----------------------------

最新技术推荐