js创建对象的几种方式及JSON.docx_第1页
js创建对象的几种方式及JSON.docx_第2页
js创建对象的几种方式及JSON.docx_第3页
js创建对象的几种方式及JSON.docx_第4页
js创建对象的几种方式及JSON.docx_第5页
已阅读5页,还剩47页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

js中的json对象默认分类 2010-07-16 17:13:32 阅读730 评论0 字号:大中小订阅 使用JSON进行数据传输一、选择的意义在异步应用程序中发送和接收信息时,可以选择以纯文本和 XML 作为数据格式。为了更好的使用ajax,我们将学习一种有用的数据格式 JavaScript Object Notation(JSON),以及如何使用它更轻松地在应用程序中移动数据和对象。JSON是一种简单的数据交换格式,在某些方面,它的作用与XML非常类似,但比XML更为简单,JSON的语法简化了数据交换的难度,而且提供了一种伪对象的方式。Java的对象 JavaScript对象(json数据格式)二、JSON 基础简单地说,JSON 可以将 JavaScript 对象中表示的一组数据转换为字符串(伪对象),然后就可以在函数之间轻松地传递这个字符串,或者在异步应用程序中将字符串从 Web 客户端传递给服务器端程序。这个字符串看起来有点儿古怪(稍后会看到几个示例),但是 JavaScript 很容易解释它,而且 JSON 可以表示比名称/值对更复杂的结构。例如,可以表示数组和复杂的对象,而不仅仅是键和值的简单列表。关于JSON对象1、使用JavaScript语法创建对象/定义一个函数,作为构造函数fucntion person(name,sex) =name; this.sex=sex;/创建一个实例var p=new Person(张三,男);/输出Person实例 alert();注意:通过该方式创建的对象是一般的脚本对象2、从JavaScript1.2开始创建对象有了一种更快捷的语法(Json的语法),如下:var obj=name:张三,sex:男; alert(obj.sex);关于数组1、早期的JavaScript数组var arr=new Array();arr0=a;arr1=bbc我们也可以通过如下方式创建数组var arr=new Array(a,bbc);2、使用JSON语法,则可以通过如下方式创建数组 var arr=a,bbc;简单 JSON 示例按照最简单的形式,可以用下面这样的 JSON 表示名称/值对: firstName:Brett 这个示例非常基本,而且实际上比等效的纯文本名称/值对占用更多的空间:firstName=Brett但是,当将多个名称/值对串在一起时,JSON 就会体现出它的价值了。首先,可以创建包含多个名称/值对的记录,比如:firstName: Brett, lastName:McLaughlin, email: brettnewI从语法方面来看,这与名称/值对相比并没有很大的优势,但是在这种情况下 JSON 更容易使用,而且可读性更好。例如,它明确地表示以上三个值都是同一记录的一部分;花括号使这些值有了某种联系。值的数组当需要表示一组值时,JSON 不但能够提高可读性,而且可以减少复杂性。例如,假设您希望表示一个人名列表。在 XML 中,需要许多开始标记和结束标记;如果使用典型的名称/值对(就像在本系列前面文章中看到的那种名称/值对),那么必须建立一种专有的数据格式,或者将键名称修改为 person1-firstName 这样的形式。如果使用 JSON,就只需将多个带花括号的记录分组在一起: people: firstName: Brett, lastName:McLaughlin, email: brettnewI , firstName: Jason, lastName:Hunter, email: , firstName: Elliotte, lastName:Harold, email: 这不难理解。在这个示例中,只有一个名为 people 的变量,值是包含三个条目的数组,每个条目是一个人的记录,其中包含名、姓和电子邮件地址。上面的示例演示如何用括号将记录组合成一个值。当然,可以使用相同的语法表示多个值(每个值包含多个记录): programmers: firstName: Brett, lastName:McLaughlin, email: brettnewI , firstName: Jason, lastName:Hunter, email: , firstName: Elliotte, lastName:Harold, email: ,authors: firstName: Isaac, lastName: Asimov, genre: science fiction , firstName: Tad, lastName: Williams, genre: fantasy , firstName: Frank, lastName: Peretti, genre: christian fiction ,musicians: firstName: Eric, lastName: Clapton, instrument: guitar , firstName: Sergei, lastName: Rachmaninoff, instrument: piano 这里最值得注意的是,能够表示多个值,每个值进而包含多个值。但是还应该注意,在不同的主条目(programmers、authors 和 musicians)之间,记录中实际的名称/值对可以不一样。JSON 是完全动态的,允许在 JSON 结构的中间改变表示数据的方式。甚至可以声明如下的Json对象var obj2=people:name:张三,sex:男alert();在处理 JSON 格式的数据时,没有需要遵守的预定义的约束。所以,在同样的数据结构中,可以改变表示数据的方式,甚至可以以不同方式表示同一事物。deptid:1,deptname:开发部,deptnum:2,deptdesc:开发相关,emps:empid:1,empname:张三,sex:男,age:20,empid:2,empname:张三,sex:男,age:20,empid:3,empname:张三,sex:男,age:20三、在JavaScript中使用JSON掌握了 JSON 格式之后,在 JavaScript 中使用它就很简单了。JSON 是 JavaScript 原生格式,这意味着在 JavaScript 中处理 JSON 数据不需要任何特殊的 API 或工具包。将JSON 数据赋值给变量例如,可以创建一个新的 JavaScript 变量,然后将 JSON 格式的数据字符串直接赋值给它:var people = programmers: firstName: Brett, lastName:McLaughlin, email: brettnewI , firstName: Jason, lastName:Hunter, email: , firstName: Elliotte, lastName:Harold, email: , authors: firstName: Isaac, lastName: Asimov, genre: science fiction , firstName: Tad, lastName: Williams, genre: fantasy , firstName: Frank, lastName: Peretti, genre: christian fiction , musicians: firstName: Eric, lastName: Clapton, instrument: guitar , firstName: Sergei, lastName: Rachmaninoff, instrument: piano 这非常简单;现在 people 包含前面看到的 JSON 格式的数据。但是,这还不够,因为访问数据的方式似乎还不明显。访问数据尽管看起来不明显,但是上面的长字符串实际上只是一个数组;将这个数组放进 JavaScript 变量之后,就可以很轻松地访问它。实际上,只需用点号表示法来表示数组元素。所以,要想访问 programmers 列表的第一个条目的姓氏,只需在 JavaScript 中使用下面这样的代码:grammers0.lastName;注意,数组索引是从零开始的。所以,这行代码首先访问 people 变量中的数据;然后移动到称为 programmers 的条目,再移动到第一个记录(0);最后,访问 lastName 键的值。结果是字符串值 “McLaughlin”。下面是使用同一变量的几个示例。people.authors1.genre/ Value is fantasypeople.musicians3.lastName/ Undefined. This refers to the fourth entry,and there isnt grammers2.firstName/ Value is Elliotte利用这样的语法,可以处理任何 JSON 格式的数据,而不需要使用任何额外的 JavaScript 工具包或 API。修改 JSON 数据正如可以用点号和括号访问数据,也可以按照同样的方式轻松地修改数据:people.musicians1.lastName = Rachmaninov;在将字符串转换为 JavaScript json格式对象之后,就可以像这样修改变量中的数据。注意:json格式的对象和json文本是不同的var obj=name:张三,sex:男; /json格式的对象var str=name:张三,sex:男; /json格式的字符串(json格式的文本)转换回字符串当然,如果不能轻松地将对象转换回本文提到的文本格式,那么所有数据修改都没有太大的价值。在 JavaScript 中这种转换也很简单:var newJSONtext = people.toJSONString();这样就行了!现在就获得了一个可以在任何地方使用的文本字符串,例如,可以将它用作 Ajax 应用程序中的请求字符串。更重要的是,可以将任何 JavaScript 对象转换为 JSON 文本。并非只能处理原来用 JSON 字符串赋值的变量。为了对名为 myObject 的对象进行转换,只需执行相同形式的命令: function Car(make,model,year,color) this.make=make; this.model=model; this.year=year; this.color=color; function showCar() var carr = new Car(Dodge,Coronet R/T,1968,yellow); alert(carr.toJSONString(); 这就是 JSON 与其他数据格式之间最大的差异。如果使用 JSON,只需调用一个简单的函数,就可以获得经过格式化的数据,可以直接使用了。对于其他数据格式,需要在原始数据和格式化数据之间进行转换。即使使用 Document Object Model 这样的 API(提供了将自己的数据结构转换为文本的函数),也需要学习这个 API 并使用 API 的对象,而不是使用原生的 JavaScript 对象和语法。最终结论是,如果要处理大量 JavaScript 对象,那么 JSON 几乎肯定是一个好选择,这样就可以轻松地将数据转换为可以在请求中发送给服务器端程序的格式(Ajax)。四、JSON在Ajax中的应用 JSON(JavaScript Object Notation)一种简单的数据格式,比xml更轻巧。 JSON 是 JavaScript 原生格式,这意味着在 JavaScript 中处理 JSON 数据不需要任何特殊的 API 或工具包。通过以上学习我们知道JSON的规则很简单:对象是一个无序的“名称/值对”集合。一个对象以“”(左括号)开始,“”(右括号)结束。每个“名称”后跟一个“:”(冒号);“名称/值对”之间使用“,”(逗号)分隔。1、通过Json格式来声明对象和操作对象案例: js 代码function showJSON() var user = username:andy, age:20, info: tel: 123456, cellphone: 98765, addresses: city:beijing,postcode:222333, city:newyork,postcode:555666 alert(user.username); alert(user.age); alert(.cellphone); alert(user.address0.city); alert(user.address0.postcode); 这表示一个user对象,拥有username, age, info, address 等属性。同样也可以用JSON来简单的修改数据,修改上面的例子js 代码function showJSON() var user = username:andy, age:20, info: tel: 123456, cellphone: 98765, address: city:beijing,postcode:222333, city:newyork,postcode:555666 alert(user.username); alert(user.age); alert(.cellphone); alert(user.address0.city); alert(user.address0.postcode); user.username = Tom; alert(user.username); 2、一般对象转换成JSON格式的字符JSON提供了json.js包,下载/json.js 后,将其引入然后就可以简单的使用object.toJSONString()转换成JSON数据。js 代码function Car(make, model, year, color) this.make = make; this.model = model; this.year = year; this.color = color; function showCar() var carr = new Car(Dodge, Coronet R/T, 1968, yellow); alert(carr.toJSONString(); 2、js对象和JSON格式的js对象、JSON格式的js对象和JSON文本的转换可以使用eval来转换JSON字符到JSON格式的Objectjs 代码function myEval() var str = name: 张三, sex: 男 ; var obj = eval( + str + ); alert(obj.toJSONString(); 或者使用parseJSON()方法function myparse() var str= name: 张三, sex: 男 ; var obj=str.parseJSON(); /把其Json文本解析成为json对象 alert(obj.toJSONString(); /把json对象转换成JSON 文本 3、从Java 类产生json对象(json-lib)Jar包:从Java 类产生json对象要使用json-lib jar包 json的jar包 json-lib-2.2.2-jdk15.jar json-lib的依赖包: commons-logging.jar common.lang.jar commons-beanutils.jar commons-collections-3.0.jar ezmorph-0.9.2.jar作用: json-lib可以在服务器端把java对象转换成json对象、从json对象转化到Java对象,比如:json-lib可以将java中的Array,Collections,Object,XML转化成json对象,反之也可以将json对象转化成java对象.配置:需要把json-lib-2.2.2-jdk15.jar以及依赖都要放到项目的lib库下常用的JSON API:(1)、JSONObject/java对象或满足一定格式的字符串(username:admin,password:12345,.)转化为JSONObject对象,用法:JSONObject json=JSONObject.fromObject(userinfo);/从json对象中根据键名取对应的值, username为键名json.getObject(username);/json对象到java对象的转化(jsonobject-po) Userinfo userinfo=(Dept)JSONObject.toBean(jsonObject,Userinfo.class);/Json对象转化成json文本字符串String josStr=JSONObject.fromObject(userinfo).toString();(2)、JSONArrayboolean boolArray=true,false; List list = new ArrayList(); Map map=new HashMap(); bject test=new Userinfo(),new Userinfo(); /转化为java的数组Array为json对象 JSONArray jsonArray = JSONArray.fromObject(boolArray); /System.out.println(jsonArray.toString(); JSONArray jsonArray1=JSONArray.fromObject(1,2,3); /System.out.println(jsonArray1.toString(); list.add(first); list.add(second); list.add(new Userinfo(); /转换java的List为json对象 JSONArray jsonList = JSONArray.fromObject(list); System.out.println(jsonList); /转换java的Map为json对象 map.put(name, windfree); map.put(bool, Boolean.TRUE); map.put(int,new Integer(0); map.put( arr, new Stringa,b ); map.put(func, function (i) return this.arri; ); map.put(bean,test); JSONObject jsonMap = JSONObject.fromObject(map); /System.out.println(jsonMap); 思考:什么时候在客户端及服务器端使用json格式的数据4、下面使用prototype写一个JSON的ajax例子案例: 在页面中写一个ajax的请求js 代码:function sendRequest() var url = /WLLTWebApp/JsonTestServlet; var mailAjax = new Ajax.Request( url, method: get, onComplete: jsonResponse ); function jsonResponse(originalRequest) alert(originalRequest.responseText); var myobj = originalRequest.responseText.parseJSON(); alert(); 服务器端代码:先写一个servlet,java 代码package org.wllt.www.actions;import java.io.IOException;import java.io.PrintWriter;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import net.sf.json.JSONObject;import net.sf.json.JsonConfig;import org.wllt.www.beans.Userinfo;public class JsonTestServlet extends HttpServletpublic JsonTestServlet() public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException response.setContentType(text/html;charset=GBK);System.out.println(request.getParameter(someParameter);PrintWriter out =response.getWriter();/(1)使用JSON API包中JSONObject的fromObject方法把Java对象转换成JSon对象 /Userinfo info=new Userinfo(admin,123456);/JSONObject obj=JSONObject.fromObject(info);/out.println(obj); /(2)或者使用 out.print( username: 张三, password: 123 ); out.println(未来蓝图欢迎你!);out.flush();out.close(); public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException this.doPost(request, response); ViewController Java中转换为Json对象-Java对象浏览器Js中Json文本或js对象-Json对象-Request(String) 。 Java中转换为Json对象-Java对象Js中Json对象 -Json文本 Response(String) prototype-1.5.1.js中提供了JSON的方法,String.evalJSON(), 可以不使用json.js中的函数对从服务器端响应到页面的json文本对象, 修改上面的方法js代码function jsonResponse(originalRequest) alert(originalRequest.responseText); var myobj = originalRequest.responseText.evalJSON(true); alert(); 5、JSON服务器端的数据格式转化的应用JSON还提供了java的jar包 /java/index.html API也很简单,下面举个案例:在javascript中填加请求参数js代码function Car(make, model, year, color) this.make = make; this.model = model; this.year = year; this.color = color; function sendRequest() var carr = new Car(Dodge, Coronet R/T, 1968, yellow); var pars = car= + carr.toJSONString(); var url = /MyWebApp/JSONTest1; var mailAjax = new Ajax.Request( url, method: get, parameters: pars, onComplete: jsonResponse ); 使用JSON请求字符串就可以简单的生成JSONObject并进行解析(要使用json-lib.jar)java 代码private void doService(HttpServletRequest request, HttpServletResponse response) throws IOException String s3 = request.getParameter(car); try JSONObject jsonObj = new JSONObject(s3); System.out.println(jsonObj.getString(model); System.out.println(jsonObj.getInt(year); catch (JSONException e) e.printStackTrace(); response.getWriter().print(name: 张三,sex: 男 ); 同样可以使用JSONObject生成JSON字符串,修改servletjava代码private void doService(HttpServletRequest request, HttpServletResponse response) throws IOException String s3 = request.getParameter(car); try JSONObject jsonObj = new JSONObject(s3); System.out.println(jsonObj.getString(model); System.out.println(jsonObj.getInt(year); catch (JSONException e) e.printStackTrace(); JSONObject resultJSON = new JSONObject(); try resultJSON.append(name, 张三) .append(sex, 男) .append(age, new Integer(22); System.out.println(resultJSON.toString(); catch(JSONException e) e.printStackTrace(); response.getWriter().print(resultJSON.toString(); js 代码function jsonResponse(originalRequest) alert(originalRequest.responseText); var myobj = originalRequest.responseText.evalJSON(true); alert(); alert(myobj.age); 五、Struts 2中使用Json ajax支持JSON插件提供了一种名为json的ResultType,一旦为某个Action指定了一个类型为json的Result,则该Result无需映射到任何视图资源。因为JSON插件会负责将Action里的状态信息序列化成JSON格式的数据,并将该数据返回给客户端页面的 JavaScript。 简单地说,JSON插件允许我们在JavaScript中异步调用Action,而且Action不再需要使用视图资源来显示该Action里的状态信息,而是由JSON插件负责将Action里的状态信息返回给调用页面通过这种方式,就可以完成Ajax交互。Struts2提供了一种可插拔方式来管理插件,安装Struts2的JSON插件与安装普通插件并没有太大的区别,一样只需要将Struts2插件的JAR文件复制到Web应用的WEB-INF/lib路径下即可。安装JSON插件按如下步骤进行:(1)登陆/p/jsonplugin/downloads/list 站点,下载Struts2的JSON插件的最新版本,当前最新版本是0.7,我们可以下载该版本的JSON插件。(2)将下载到的jsonplugin-0.7.jar文件复制到Web应用的WEB-INF路径下,即可完成JSON插件的安装。实现Action逻辑假设deptnew.html输入页面中包含了四个表单域,这四个表单域对于四个请求参数,因此应该使用Action来的dept对象封装这四个请求参数。四个表单域的name分别为dept.deptid、dept.deptname、dept.deptnum和dept.deptdesc。处理该请求的Action类代码如下:package org.wllt.ajax.actions;import java.util.Date;import java.util.HashMap;import java.util.Map;import org.wllt.ajax.beans.Dept;import com.googlecode.jsonplugin.annotations.JSON;import com.opensymphony.xwork2.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; /日期格式的属性 private Date date; private Dept dept; /三个请求参数对应的setter和getter方法 JSON(serialize=false) public String getField1() return field1; public void setField1(String field1)this.field1 = field1; /封装处理结果的属性的setter和getter方法 public int getInts() return ints; public void setInts(int ints) s = ints; JSON(format=yyyy-MM-dd) public Map getMap() return map; public void setMap(Map map) this.map = map; public String getField2() return field2;public void setField2(String field2) this.field2 = field2;public String getField3() return field3;public void setField3(String field3) this.field3 = f

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论