jQuery解析JSON字符串的三种方式与eval安全性分析

jQuery解析JSON的三种方式概述

在JavaScript中将JSON字符串转换为JSON数据对象，通常有两种常见的处理路径：

第一种方法是利用eval()函数进行解析。

第二种方法是通过Function对象来执行返回的解析结果。

在jQuery中解析JSON数据时，若将其作为异步请求的传输对象，服务器返回的结果通常是JSON对象。本文主要讨论服务器返回JSON格式字符串的情况，对于使用JSONObject等插件封装的JSON对象，处理逻辑与此类似，此处不再赘述。

首先提供一组JSON字符串示例，内容如下：

代码示例：

 
var data="
{ 
root:
[ 
{name:'1',value:'0'},
{name:'6101',value:'北京市'},
{name:'6102',value:'天津市'},
{name:'6103',value:'上海市'},
{name:'6104',value:'重庆市'},
{name:'6105',value:'渭南市'},
{name:'6106',value:'延安市'},
{name:'6107',value:'汉中市'},
{name:'6108',value:'榆林市'},
{name:'6109',value:'安康市'},
{name:'6110',value:'商洛市'}
] 
}"; 

接下来，根据jQuery异步请求返回的数据类型（JSON对象或字符串），分别介绍两种获取结果后的处理方式。

使用eval函数解析JSON字符串

1. 针对服务器返回的JSON字符串，如果jQuery异步请求未指定类型说明，或者以字符串形式接收，则需要进行对象化处理。处理过程并不复杂，只需将该字符串放入eval()中执行一次即可。这种方法同样适用于普通JavaScript环境下获取JSON对象，具体示例如下：

var dataObj=eval("("+data+")");//转换为json对象

为什么在eval中需要添加 “("("+data+")");//” 这部分代码？

这主要源于eval函数本身的特性。由于JSON字符串以“{}”开头和结尾，在JavaScript中，这会被解析为一个语句块。因此，必须强制将其转换为表达式形式。

添加外层圆括号的目的是迫使eval函数在处理JavaScript代码时，将括号内的内容视为表达式（expression）而非语句（statement）。例如，对象字面量{}如果不加外层括号，eval会将其识别为JavaScript代码块的开始和结束标记，从而认为执行了一条空语句。因此，以下两种执行结果截然不同：

 
alert(eval("{}"); // 返回 undefined
alert(eval("({})");// 返回 object[Object]

这种在JS中包裹圆括号的写法非常常见。

例如：(function()) {}(); 用于执行闭包操作时也会用到类似技巧。

 
alert(dataObj.root.length);//输出root的子对象数量
$.each(dataObj.root,fucntion(idx,item){
if(idx==0){
return true;
} 
//输出每个root子对象的名称和值
alert("name:"+item.name+",value:"+item.value);
}) 

注：对于普通JavaScript生成JSON对象，只需将$.each()方法替换为for循环语句即可，其他逻辑保持不变。

使用$.getJSON直接获取JSON对象

2. 针对服务器返回的JSON字符串，如果jQuery异步请求将type参数（通常为此配置项）设置为“json”，或者使用$.getJSON()方法获取服务器返回数据，则无需使用eval()方法，因为此时得到的结果已经是JSON对象。只需直接调用该对象即可。以下以$.getJSON方法为例说明数据处理流程：

 
$.getJSON("http://www.phpzixue.cn/",{param:"gaoyusi"},function(data){
//此处返回的data已经是json对象
//以下其他操作同第一种情况
$.each(data.root,function(idx,item){
if(idx==0){
return true;//同countinue，返回false同break
} 
alert("name:"+item.name+",value:"+item.value);
}); 
}); 

这里需要特别注意，方式1中的eval()方法是动态执行其中的字符串（可能包含JS脚本），这极易引发系统安全问题。因此，建议采用规避了eval()的第三方客户端脚本库，例如JSON in JavaScript提供了不超过3k的脚本库供选择。

使用Function对象解析JSON

第二种解析方式是利用Function对象来完成，其典型应用场景是在jQuery的AJAX方法中，对success回调函数返回的数据data进行解析。

 
var json='{"name":"CJ","age":18}';
data =(new Function("","return "+json))();

此时的data即为一个解析后的JSON对象。