javascript代码实例教程-[JavaScript] 7.JS JSON

发布时间:2019-01-15 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-[JavaScript] 7.JS JSON脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

JSON 是什么

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

JSON 数据有两种结构:

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

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

一个 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 的数据传递格式 呢?需要以下几步。

第一,引用 HTTP 和 JSON 支持。 第二,在客户端创建 JSON 数据,提交到服务器

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

引用 HTTP 和 JSON 支持

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

 

在之后添加如下的内容:

  

其中 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 类型值的超级类型

组合一个简单的 JSON 数据:

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

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

组合一个包含数组类型的复杂 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 格式的数据转换为各种类型 的数据,当然也可以自己写一些解析用的代码。这里我们使用了 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 的数据呢?需要两点,第一,需要建立 一个Service 类,第二,覆盖父类的 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-9-4 * 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.     2.     5. 6. 7. 8.    9.    10.                    11.              12.              13.        14.              

然后我们的 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&#39;s /WEB-iNF/lib

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

To use maven, add this to your pom:

  ...  com.googlecode jsonplugin 0.26  ...   Maven Plugin Repository http://struts2plugin-maven- repo.googlecode.com/svn/trunk/ false   true  

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:

    login.password,studentList.*/.sin    true  login.password,studentList.*/.sin  

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.

    ^entries/[/d+/]/.clientNumber, ^entries/[/d+/]/.scheduleNumber, ^entries/[/d+/]/.createUserId  

Root Object

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

  person.job  

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

 bean1.bean2 

Wrap with Comments

wrapWithCommentscan turnsafe JSONtext intodangerous 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:

 false 

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:

 true 

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.

 true 

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:

             

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 thatsoon), 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:

  true   true   

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:

  <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

true

false

 

true

false

 

 

在 Struts2 中使用JSonajax支持

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

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

Struts2 提供了一种可插拔方式来管理插件,安装 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 输入页面中包含了三个表单域,这三个表单域对于三个请求参 数,因此应该使用Action 来封装这三个请求参数。三个表单域的 name 分别为 field1 、field2 和 field3 。

处理该请求的 Action 类代码如下:

 public class JSONExample { //封装请求参数的三个属性 private String field1; private transient String field2; private String field3; //封装处理结果的属性 private int[] ints = {10, 20}; private Map map = new HashMap(); private String customName = "custom"; //三个请求参数对应的 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-2.0.dtd" > <struts > <consta nt name="struts.i18n.encod ing" value="U TF-8"/> <package name="exa mple" extends="json-default" > <action name="JSON Example" class="lee.JSONExample" > <result type="json"/> </action> </package> </struts>

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

第一个地方是配置 struts.i18n.encod ing 常量时,不再是使用 GBK 编码,而 是 UTF-8 编码,这是因为 Ajax的 POST 请求都是以 UTF-8的方式进行编码的。

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

 

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-[JavaScript] 7.JS JSON全部内容,希望文章能够帮你解决javascript代码实例教程-[JavaScript] 7.JS JSON所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。