用javascript处理JSON

最新推荐文章于 2023-05-15 11:10:03 发布

yfgcq

最新推荐文章于 2023-05-15 11:10:03 发布

阅读量5k

点赞数

分类专栏： JS+CSS+Dhtml 文章标签： javascript json 服务器 ajax websphere object

本文链接：https://blog.csdn.net/yfgcq/article/details/1898846

版权

JS+CSS+Dhtml 专栏收录该内容

59 篇文章 0 订阅

订阅专栏

导读：
　　JSON javascript
　　因为JSON 是 javascript 的一个子集，所以，在javascript 中使用JSON是非常简单的。
　　
　　
　　js 代码
　　
　　var myJSONObject = {"bindings": [
　　{"ircEvent": "PRIVMSG", "method": "newURI", "regex": "^http://.*"},
　　{"ircEvent": "PRIVMSG", "method": "deleteURI", "regex": "^delete.*"},
　　{"ircEvent": "PRIVMSG", "method": "randomURI", "regex": "^random.*"}
　　]
　　};
　　在上面的例子中，我们创建了只包含一个成员 "bindings" 的一个对象，bindings 则包含了一个由3个对象组成的数组。这3个对象都包含3个成员："ircEvent"，"method"，"regex"。
　　在javascript 中，成员可以通过“点号”来获取。
　　比如：
　　js 代码
　　myJSONObject.bindings[0].method
　　通过eval() 函数可以将JSON字符串转化为对象。
　　js 代码
　　var myObject = eval('(' + myJSONtext + ')');
　　eval 函数非常快，但是它可以编译任何 javascirpt 代码，这样的话就可能产生安全的问题。eval 的使用是基于传入的代码参数是可靠的假设的，有一些情况下，可能客户端是不可信任的。
　　如果基于安全的考虑的话，最好是使用一个 JSON 解析器。一个JSON 解析器将只接受 JSON 文本。所以是更安全的。
　　js 代码
　　
　　var myObject = JSON.parse(myJSONtext, filter);
　　可选的 filter 参数将遍历每一个value key 值对，并进行相关的处理。如：
　　js 代码
　　myData = JSON.parse(text, function (key, value) {
　　return key.indexOf('date') >= 0 ? new Date(value) : value; });
　　stringifier 函数的作用跟 parse 相反，用来将一个js对象转换为 JSON 文本。
　　js 代码
　　var myJSONText = JSON.stringifier(myObject);
　　这里是一个开源的 JSON parser and JSON stringifier
　　json2.rar
　　描述: 一个开源的 JSON parser and JSON stringifier
　　
　　
　　下载
　　文件名: json2.rar
　　文件大小: 3 KB
　　下载过的: 文件被下载或查看34 次
　　声明：JavaEye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
　　相关文章： [2007-10-12 ]GT Grid 最新demo ( 兼与EXT Grid的性能对比) Mobile Firefox 要出来啦！
　　推荐链接：即刻点击免费下载Rational最新试用版软件 IBM WebSphere 应用服务器管理免费培训活动

本文转自
http://www.javaeye.com/topic/138707

使用JSON实现代码分离 <script src="http://blog.csdn.net/count.aspx?ID=1898888&Type=Rank" type="text/javascript"></script> 文章指数:0

CSDN Blog推出文章指数概念，文章指数是对Blog文章综合评分后推算出的，综合评分项分别是该文章的点击量，回复次数，被网摘收录数量，文章长度和文章类型；满分100，每月更新一次。

导读：

　　时间: 2007-11-09 14:05 关键字: JavaScript JSON

　　引用收藏

　　在学习JSON之前，当我在写大量JSP页面的时候，产生动态数据一般采用两种途径:

　　1.直接在页面中写java代码

　　2 采用各种标签代替

　　这两种用法的支持者都很多,但是我发现就算是采用标签也好,对于页面的重用还是无能为力,比如有几个页面都需要用到一个item数据，一个是管理用户页面，一个是订单页面。我们既要在管理用户的servlet写上setAttribute('item',item),也要在管理订单的servlet写上setAttribute('item',item);然后在页面上通过getAttribute()获得数据:

　　代码

　　 html="" tag="" ...="" ="">
　　或者采用标签的形式:

　　代码

　　 html tag... < ww:iterator>

　　很多时候我们会采用来重用这样的页面,但这里有个问题，如果多个的页面样式不一样呢?如果数据不是很多呢，这样会产生很多页面碎片,实践已经证明,重用页面并不是一个好办法.

　　有时候我想，如果我能单独用一个action来提供输出数据，每个需要这些数据的页面页面都去获取这些数据,关于这些数据在页面如何渲染是页面的问题，这个action只提供数据,这样我们重用数据不是比重用页面好很多么?

　　但是之前的技术并不能支撑这样的实现，一个页面如何自己主动去访问它需要的数据呢?

　　答案是当然是通过AJAX技术.但今天我介绍的是另外一种技术JSON.

　　先简单的介绍一下JSON(虽然很多人已经知道),JSON JavaScirp Object Notion 可以看成一段javascript对象树，比如 user.id 表示的是user对象的id，如果对webwork或则是srtus2.0熟悉的朋友应该对此并不陌生，对象树可以嵌套对象,比如user.cat.age 表示user对象的成员cat的年龄。除了对象还可以嵌套数组方法user.cat[0].sayHello();

　　我们这样声明一个JSON:

　　代码

　　var user = { id:’1’, name:’sanyun’}; alert(user.id) //输出1 user = { id:’1’, cat:{age:2,color:’white’ }}; alert(user.cat.age) //输出2

　　但是JSON本身是不能和后端通信的,不过我们可以通过

　　代码

　　 <script src="后端资源" type="text/javascript"></script>

　　来和服务器后端通信.

　　我们可以把它封装成一个方法:

　　代码

　　function CallBack(model) { this.model = model;} CallBack.init = function (url) { var headElement = document.getElementsByTagName("head").item(0); var scriptTag = document.createElement("script"); scriptTag.setAttribute("type", "text/javascript"); scriptTag.setAttribute("src", url); headElement.appendChild(scriptTag);};

　　不过需要注意的是采用这种方式后台MIME必须要设置为 html/Javascritp，当然你也可以轻松把这种方式替换成Ajax.

　　解析

　　通信之后我们需要做的是解析数据,一般来说,我们可以通过for in 简单的遍列JSON

　　代码

　　//model表示后端产生的JSON CallBack.update(model){ for(i in model){ var node =document.getElementByID(i); if(node){ node.value = model[i]; } }}

　　后台

　　代码

　　public class ShowType extends HttpServlet { protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.addHeader("Cache-Control", "no-cache"); //(1) response.setContentType("HTML/JavaScript;charset=GBK");//(2) PrintWriter out = response.getWriter(); String json = ” {name:'jiangyunpeng', status:'1',sex:'female'} ”//(3) out.print("CallBack.update("+json+")"); //(4) } }

　　(1)首先需要设置缓存为空

　　(2)然后MIME必须要设置为 html/Javascritp

　　(3)产生一段JSON，这里我们是手动产生的，可以采用JSON开源框架

　　(4)调用我们前面页面定义的JS函数

　　通过这样处理了之后我们的页面再也没有任何JAVA代码或者自定义标签了,他完全是一个HTML页面(当然这里为了演示，把解析JSON过程过于简单化了),他具有这些好处:

　　1.它是一个HTML，响应速度比JSP快

　　2.对于一些表单元素,比如checkbox,select，如果采用java代码会很繁琐,

　　代码

　　function initCheckbox(){ if(' '==1){ //这里有JAVA代码 document.getElementById('checkbox').checked = true; }else{ document.getElementById('checkbox').checked = fasle; } }

　　但是如果采用JSON的话

　　代码

　　function initCheckbox(){ if(status==1){ //这里只有JSON document.getElementById('checkbox').checked = true; }else{ document.getElementById('checkbox').checked = fasle; } }

　　我们可以把这段代码放在解析方法里面，判断查询的对象如果是checkbox,就像上面这样处理，这样我们就可以更本不用关心它是否是checkbox

　　3.重用了数据.多个页面可以通过JSON访问相同的数据，这里没有setAttribute(),也不用考虑生命周期。

　　4.降低了服务器端的负载。因为我们把解析的数据任务放在客户端里面进行，服务器只需要产生一些JSON字符串。

　　5.分离了JAVA代码和JS,诸如验证，判断，很多时候在javascript里面嵌套java，可读性很差。

　　小结：我觉得采用JSON是个不错的选择，大家可以试试。

　　

　　原来大伙早知道啦！

　　参考：http://www.javaworld.com/javaworld/jw-11-2006/jw-1115-json.html

　　 Ajax.rar

　　描述:

　　

本文转自

http://www.javaeye.com/topic/139477
>

Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=1898888

用 JSON 处理缓存 <script src="http://blog.csdn.net/count.aspx?ID=1898855&Type=Rank" type="text/javascript"></script> 文章指数:0

导读：
　　未显示需要 JavaScript 的文档选项
　　级别：中级
　　Bakul L. Patel(bakul.patel@in.ibm.com), 软件开发, IBM India Pvt. Ltd.
　　2006 年 11 月 07 日
　　数据验证是每个企业 Web 应用程序中最富于挑战性、日新月异的部分。通常验证元数据会使 JavaScript 模块中混入服务器端代码。在本文中，您将了解如何在服务器代码的帮助下将元数据缓存在客户端的优秀方法，服务器代码将提供 JSON（JavaScript Object Notation）形式的字符串化元数据。这种方法还允许以类似 Ajax 的方式来处理多值和多组属性。
　　每个应用程序的开发都是为了解决某个领域的问题。而每个领域都有自己的一套约束数据的规则和规范。应用程序将这些约束应用于数据时，约束也就成了验证。所有应用程序都需要验证用户输入的数据。
　　目前，应用程序一般都使用 if-else 语句组合来验证数据。这些语句包含了开发人员硬编码或通过服务器端代码置入的验证数据。通常，开发人员会使用服务器端代码来避免可能导致 JavaServer Page（JSP）的细微数据更改。
　　您可以使用 JavaScript Object Notation（JSON）来分组和缓存元数据，并使用 JavaScript 函数来访问元数据以验证用户输入。
　　JavaScript 中有分散的元数据时，您无法控制服务器将评估多少数据以及有多少数据传递到客户机。所有服务器端代码片段都将被评估并发送到服务器上。但是，使用 JSON 缓存数据时，您可以完全控制向客户机发送的元数据量，因为服务器端代码将生成 JSON 形式的元数据。这有助于仅将元数据发送至与看到或输入数据的用户相对应的客户机上。
　　您还可以使用 JSON 来缓存用户输入的数据。程序缓存数据后，将擦除数据字段而不是刷新屏幕，这与 Ajax 类似。通过这种方法，用户可以为同一属性输入另一组数据。
　　让我们一起来探究一下如何使用 JSON 来缓存元数据。
　　JSON 概览
　　使用 JSON（即 JavaScript Object Notation），将以一种特定的字符串形式来表示 JavaScript 对象。如果将具有这样一种形式的字符串赋给任意一个 JavaScript 变量，该变量随后将引用一个通过指定给该变量的字符串构建的对象。
　　例如，假定有一个 policy 对象，它拥有以下属性：
　　计划名称
　　描述
　　持续时间
　　您可以使用以下这种 JSON 形式的字符串来表示该 policy 对象：
　　{"Plane":{"Full Life Cover"}, "Description":{"The best life insurance plan"}, "Term":{"20 years"}}
　　如果将此字符串赋给任意一个 JavaScript 变量，则该变量将接受以这种对象为单位的数据。要访问数据，请提供需要访问的属性所在的路径。对于本例，将以上字符串赋给一个名为 policy的变量：
　　var policy = {"Plane":{"Full Life Cover"}, "Description":{"The best life insurance plan"}, "Term":{"20 years"}}
　　将此字符串粘贴到 HTML 页面的标题部分中，然后编写以下警报：
　　alert(policy.Plan)
　　如果在任何支持 JavaScript 的浏览器中查看此页面，您都会看到显示策略计划的警报。
　　示例
　　为了演示 JSON 的性能，我们来看一个有 vehicle 对象列表的 person 对象和一个可以拥有一台或多台车辆的 person 对象。每台车辆都有以下属性：
　　品牌
　　注册码
　　CC
　　浏览器 UI 应当允许用户添加多台具有优秀应用性能的车辆（通常为固有要求）。每个属性都有一些与之关联的限制或验证规则。您需要指定以下规则：
　　品牌名称
　　品牌名称决不能包含数字。
　　品牌名称最多可包含两个单词，中间可加一个空格。
　　注册码
　　注册码必须全都是数字。
　　CC
　　CC 必须全都是数字。
　　CC 的最小值为 50，最大值为 5000。
　　将有三个与车辆属性相对应的输入字段，用户可在其中输入信息。接下来，您将看到如何将验证消息分组到 JSON 组中以及如何访问这些验证消息。
　　传统方法
　　现在，当用户输入的车辆数据为 40CC 时，程序必须显示一条消息，说明输入的数据不在有效的 CC 范围内。您可以用清单 1中的代码简单地显示这条消息：
　　 清单 1. 传统代码
　　

if(cc < || cc > ) {
alert(<%= ResourceList.vehicleCCRangeMsg >);
}
　　ResourceList是一个服务器端类，该类中含有关于车辆的国际化消息（如 vehicleCCRangeMsg）。这种方法解决问题时略显混乱：
　　在这种方法中，您将把服务器端代码添加到所有客户端验证函数中，以检查条件并显示消息。
　　如果更改了元数据和消息（例如服务器端类或变量）的组织方法，您将会为更改使用这些元数据和消息的客户机脚本验证函数感到十分头痛。
　　JSON 能帮助您做什么？
　　如果只需在条件语句和警报中引用一个 JavaScript 变量而不是服务器端代码，您感觉怎么样？不需要把服务器端代码包含在 JavaScript 中，而保存的服务器端元数据和消息中的更改也不会影响客户端脚本。这种方法太棒了，是不是？好的，那就是使用基于 JSON 缓存元数据时要做的。
　　您将使用一个 JavaScript 对象把我们的验证数据和消息分组到一个层级中。然后就像访问层级的 JavaScript 对象一样访问这些消息。就是这样，您已经做到了！
　　当此 JSON 元数据对象就绪后，先前的 JavaScript 代码片段将类似于清单 2。
　　 清单 2. 带有 JSON 元数据缓存对象的警报
　　

if(cc cc >vehicleValidationsMetadata.CC.maxCC) {
alert(vehicleValidationsMetadata.CC.RangeMessage);
}
　　现在，问题是谁来准备 JSON 元数据对象？嗯，只有服务器能做这项工作。服务器必须生成这个 JSON 对象，并将其提供给客户机（浏览器）。一些 Java API 可以帮助您准备此类（事实上是任意一类）JSON 对象。请参阅参考资料来查看那些 API。
　　生成 JSON 元数据对象的典型方法为：
　　为实体及其验证消息准备一个层级 Java 对象。
　　对这些实体及其验证消息调用 toString()。这些实体及其验证消息最有可能把一个 JSON 形式的字符串提供给您。
　　将该字符串另存到一个请求范围内。
　　在 JSP 中，获取该字符串，并将其指派到 JavaScript 变量值的大括号内。
　　最终的车辆元数据对象看上去就会像清单 3一样。
　　 清单 3. 验证元数据 JSON 对象
　　

var vehicleValidationsMetadata = {
"BrandName":{
"CanContainDigits":{false},
"MaxWords":{2},
"FormatMessage":{"Brand Name cannot contain digits."},
"WordLimitMessage":{"Brand Name cannot contain more than two words"}
},
　　"RegistrationNumber":{
"CanContainAlphabets":{false},
"CanContainDigits":{"true"},
"FormatMessage":{"Registration Number can contain only digits."}
},
"CC":{
"minCC":{50},
"maxCC":{5000},
"FormatMessage":
{"CC can only be numeric"},
"RangeMessage":{"CC can be within range of 50 and 5000"}
}
}
　　服务器必须生成整个字符串，第一行和最后一行除外，因为当前的用户语言环境可能要求使用这些消息（并且只有服务器端代码能完成这项工作）。在这里，需要注意的一点是此元数据对象仅用于验证车辆。更理想的情况是将 vehicle 元数据对象封装到 person 元数据对象中。那样，您就不需要再创建另一个 JavaScript 变量，而只需将该元数据对象包含到 person 元数据对象中。
　　在将此元数据对象准备好后，您可以使用该对象中的元数据和消息来验证数据输入和显示消息。现在，验证车辆输入信息的 JavaScript 函数看上去就会跟清单 4一样。
　　 清单 4. 车辆数据验证函数
　　

function validateVehicleData() {
var brandName = //get brand name from form field
var registrationNumber = //get Registration Number from form field.
var CC = //get CC from form field
var brandNameTokens = brandName.split(' ');
if(brandNameTokens.length >vehicleValidationsMetadata.BrandName.MaxWords) {
alert(vehicleValidationMessages.BrandName.WordLimitMessage);
}
.
.
.
if((!vehicleValidationsMetadata.RegistrationNumber.CanContainAlphabets) &&
isNaN(parseInt(registrationNumber))) {
alert(vehicleValidationMessages.RegistrationNumber.FormatMessage);
}
var ccNum = parseInt(CC);
if(ccNum ccNum >vehicleValidationMessages.CC.maxCC) {
alert(vehicleValidationMessages.CC.RangeMessage);
}
}
　　这段代码看上去是不是好多了？它没有在 JavaScript 中混入服务器代码。如果服务器端更改存储元数据的方法，则无需再重写客户机脚本。这会使 JSP 编程人员的日子更轻松些。
　　扩展客户端数据缓存
　　某些 Web 应用程序要求用户为同一个属性或对象输入多个数据。例如，person-vehicle 要求人员为其拥有的每台车辆都输入数据。如果此人拥有多台车辆，应用程序必须允许输入多台车辆的数据。我将把此类对象作为一个多组属性来引用。如果多组属性包含任何可以保存多个数据实例的属性，我将称之为多值属性。
　　现在，多组属性和多值属性面临的问题是必须将数据输入到相同的输入字段中。那意味着在输入第二台车辆的数据之前，必须先保存已输入的第一台车辆的数据。您可以通过两种方法来解决此问题：
　　将第一台车辆的数据发送到服务器上并清空输入字段，以允许用户输入下一台车辆的数据。
　　将数据缓存到客户机上并清空输入字段，以允许用户输入下一台车辆的数据。
　　第一种方法存在的问题是每输入一台车辆的数据就需要访问一次服务器。这不太好；如果在输入车辆数据后都必须等待服务器响应，用户会觉得很失望。换种方法，第二种方法的响应时间几乎为零。用户可以快速输入所有车辆数据而无需等待。但这里需要考虑的是如何将数据存储到客户端上。这里有更多方法可将数据存储到客户机上：
　　在用户单击以添加下一台车辆的数据时将数据以某种形式缓存到隐藏的表字段中。
　　将数据缓存到一个 JavaScript 对象中。
　　如果要将数据存储到隐藏字段中，您会为用户每次输入新的车辆数据都要处理很多隐藏字段或处理隐藏字段数据而感到烦恼。这就像有字符串操作就需要频繁处理字符串一样。
　　但是第二种缓存数据的方法提供了一种面向对象的方法来缓存。当用户输入新车辆数据时，您将在数组对象中创建一个新元素。不需要任何笨拙的字符串操作。当用户输完所有车辆数据后，您只需构建一个源于该对象的 JSON 字符串，并通过存储到某个隐藏字段中的方式将该字符串发送至服务器。这种方法要比第一种方法好得多。
　　JSON、数据缓存和 Ajax 功能
　　当使用 JSON 将数据缓存到客户端时，系统将在用户每次单击 Add Vehicle 按钮时更新数据缓存对象。用于完成此项任务的 JavaScript 函数看起来可能跟清单 5一样。
　　 清单 5. 用于将车辆数据添加到 JavaScript 对象中以进行客户端缓存的函数
　　

function addVehicleData() {
var brand = //get vehicle brand;
　　var regNo = //get registration number;
var cc = //get cc;
vehicleData[vehicleData.length] = new Object();
vehicleData[vehicleData.length].brandName = new Object();
vehicleData[vehicleData.length].brandName = brand;
//same way update other two properties
}
　　在这里，vehicleData是用于在用户装入页面时进行初始化的 JavaScript 变量。它被初始化为一个新的数组对象，该数组对象为空或者含有用户先前输入的车辆的车辆元素。
　　当此函数将数据保存到 JavaScript 对象中后，程序可以调用另一个函数来清空输入字段以允许用户输入新数据。
　　在此类应用程序中，要求用户输入出现次数最少或出现次数最多的多组或多值属性。您可以将这些限制置入 JSON 元数据对象中。在这种情况下，先前的元数据对象将变为清单 6中所示的代码。
　　 清单 6. 带有出现次数限制的 JSON 元数据对象
　　

var vehicleValidationsMetadata = {
"MIN_OCC":{0},
"MAX_OCC":{10},
"MAX_OCC_MSG":{"...."},
"MIN_OCC_MSG":{".....},
//Everything else is the same
}
　　然后，addVehicleData()函数将先验证数据的出现次数，然后在仅当总出现次数未超出允许的限制时再将数据添加到 JavaScript 对象中。清单 7显示了检查方法。
　　 清单 7. JSON 元数据对象限制检查
　　

function addVehicleData() {
if(vehicleData.length == vehicleValidationsMetadata.MAX_OCC-1) {
alert(vehicleValidationsMetadata.MAX_OCC_MSG);
}
　　//Everything else is the same
}
　　当用户提交一个页面时调用的函数实际上用于验证最少的出现次数。这种方法的最大好处是屏幕不需要刷新以输入新车辆数据。提供此类静态屏幕曾经是 Ajax 技术的主要目标，而您现在用 JSON 也能完成此目标。这是关于更新 JSON 数据对象和通过 JavaScript 处理 HTML DOM 树的全部内容。用户响应时间是最小值，因为所有操作仅在客户端上执行。您可以使用 JSON 来为应用程序提供 Ajax 功能。
　　当用户单击 Save 按钮时，程序将调用另一个 JavaScript 函数，该函数将把此 JSON 对象字符串化并将其存储到程序提交到服务器上的隐藏表字段中。JSON.js（请参阅参考资料）有一个 JSON.stringify()函数，该函数将获取 JavaScript 对象作为输入并返回字符串输出。
　　服务器端必须能够理解 JSON 形式的字符串并生成一个服务器端对象，以处理和保存数据。Web 站点 http://www.json.org/java/index.html 提供了一个 Java API，该 API 用于处理基于 Java 的应用程序的大部分需求。
　　结束语
　　您在本文中看到了 JSON 的强大用途。归结如下：
　　JSON 提供了一种优秀的面向对象的方法，以便将元数据缓存到客户机上。
　　JSON 帮助分离了验证数据和逻辑。
　　JSON 帮助为 Web 应用程序提供了 Ajax 的本质。
　　参考资料
　　学习
　　您可以参阅本文在 developerWorks 全球网站上的英文原文。
　　json.org：获取关于 JavaScript Object Notation 的有用信息、库和链接。
　　Ajax：访问此信息站点，查阅关于 Ajax 的更多信息以及如何将这些技术应用到 Web 开发中。
　　developerWorks 中国网站 Ajax 资源中心：查阅关于 Ajax 编程模型的一站式信息库，其中包括文章和教程、论坛、博客、维基、事件和新闻。
　　developerWorks 中国网站的 Web 专区：了解专门针对 Web 架构及开发的信息，包括下载和产品、开放源码项目、技术库、培训和事件通知，以改进工作。
　　随时关注 developerWorks 技术活动和网络广播中不断发布的技术讲座，通过这些技术讲座可以缩短学习周期，并且可以提高高难软件项目的质量和结果。
　　 获得产品和技术
　　json.js：下载用于 JSON 的 JavaScript。
　　Java API：获取用于 JSON 的免费 API。
　　讨论
　　加入 JSON group on Yahoo，查看人们如何使用 JSON。
　　通过参与 developerWorks blogs加入 developerWorks 社区！
　　关于作者
　　Bakul Patel 是 IBM 的一名软件工程师。他参与开发了一些基于 WebSphere 的产品，并且为研究 Ajax 和 JSON 等新一代 GUI 技术做了大量工作。他的兴趣爱好包括音乐和户外运动。

本文转自
http://www.ibm.com/developerworks/cn/web/wa-cachejson.html

Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=1898855