javascript eval和JSON之间的联系

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml"  lang="zn-ch">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
 5 <title>JavaScript加载JSon数据</title>
 6 
 7 <!-- <script language="javascript" type="text/javascript" src="http://218.28.165.218:9009/JSONData.js" ></script>
 8 <script language="javascript" type="text/javascript" src="http://127.0.0.1:8080/JSONData.js?GZip=TRUE" ></script>
 9 -->
10 
11 <script language="javascript" type="text/javascript" >
12 //<![CDATA[
13     function contactList(jsons){
14         var table = document.getElementById("contactTable");
15         var Json=eval("(" +  jsons + ")");
16         var arr = Json.DataSetArray[0].Data;
17         
18         for(var i=0; i<arr.length; i++){
19             var jsonObj = arr[i]; //获取json对象
20             var tr = table.insertRow(table.rows.length);
21             var td1 = tr.insertCell(0);
22             td1.align = "right";
23             var td2 = tr.insertCell(1);
24             td2.align = "center";
25             var td3 = tr.insertCell(2);
26             td3.align = "center";
27 
28             /*
29             td1.innerHTML = jsonObj.id;
30             td2.innerHTML = jsonObj.name;
31             td3.innerHTML = jsonObj.phone;
32             */
33             td1.innerHTML = jsonObj.IP;
34             td2.innerHTML = jsonObj.ID;
35             td3.innerHTML = jsonObj.MacAddr;
36             
37             
38         }
39                 //    var F = eval("{'A':'123456','B':'天津'}");
40             
41             document.getElementById("lastname").value = "123456_北京";
42             //document.getElementById("lastname").bgcolor="yellow";
43             //document.getElementById("firstname").value = F.A;
44             
45     }
46 
47     function pageInit(){
48         //var contact = "[{id:1,name:'张三',phone:'287413288'},{id:2,name:'李四',phone:'13693009088'},{id:3,name:'王五',phone:'12345'},{id:4,name:'lwm8246',phone:'123456789'}]";
49         //http://218.28.165.218:9009/JSONData.js 这里动态返回
50         var contact = '{"ID":"MULTI_DATASET_JSON","DataSetCount":0,"DataSetArray":[{"JSON_RECORD_COUNT":16,"JSON_PACKET_ID":"{D752CD84-1752-4FE8-9E1B-B6CC9F208C9F}","Data":[{"IP":"123.15.54.26","ID":128,"MacAddr":"00-21-97-9A-6B-6E","Port":4318,"FKey":"{920548AC-1EA5-42F0-A97B-0619316C7C7E}"},{"IP":"116.231.93.243","ID":114,"MacAddr":"52-54-00-7A-BD-82","Port":1299,"FKey":"{675C7A46-B25A-455B-941A-1B0E65BCF2EC}"},{"IP":"192.168.0.254","ID":95,"MacAddr":"00-FF-57-8A-4F-3B","Port":1493,"FKey":"{4748EA82-DA20-41F3-9A53-3F8220277234}"},{"IP":"125.46.82.2","ID":97,"MacAddr":"00-21-97-9A-71-B5","Port":4656,"FKey":"{BB03F7BA-5576-4EB6-85C2-4511473E9CEE}"},{"IP":"125.46.82.2","ID":124,"MacAddr":"00-1B-21-39-19-50","Port":4913,"FKey":"{4DB8EDE7-B3BC-49A0-B92D-4AFAB825EF13}"},{"IP":"171.8.7.6","ID":126,"MacAddr":"00-22-15-C6-0E-74","Port":1936,"FKey":"{1A86DCEA-006B-4871-B327-5ACC1EC4D39F}"},{"IP":"218.28.170.66","ID":117,"MacAddr":"30-5A-3A-08-72-BC","Port":4508,"FKey":"{BDECD43F-6A23-4B59-8218-75EF773C506D}"},{"IP":"123.15.58.42","ID":115,"MacAddr":"D0-50-99-3D-10-B0","Port":1695,"FKey":"{711EE78D-779F-4047-8B0F-7869F7479DD0}"},{"IP":"61.168.16.130","ID":121,"MacAddr":"10-78-D2-4D-E2-96","Port":1706,"FKey":"{95BE6B46-5BC4-4C17-8287-830BED519F12}"},{"IP":"218.29.118.226","ID":94,"MacAddr":"14-DD-A9-52-A8-7B","Port":3661,"FKey":"{86FBC5A2-DFCA-4BD1-9032-8A7F624B1F5C}"},{"IP":"192.168.0.254","ID":116,"MacAddr":"28-D2-44-9B-ED-BA","Port":50782,"FKey":"{5EE5A1E8-4EEF-44F3-AB53-96A7932672B4}"},{"IP":"192.168.0.254","ID":107,"MacAddr":"BC-5F-F4-D9-BC-E7","Port":1109,"FKey":"{3A022497-7F32-4ECA-B729-A638957E2651}"},{"IP":"192.168.0.254","ID":127,"MacAddr":"24-0A-64-A8-92-58","Port":29510,"FKey":"{A91095EF-0602-4DAD-A16A-B86C487D38C7}"},{"IP":"192.168.0.254","ID":106,"MacAddr":"68-F7-28-25-64-7C","Port":49179,"FKey":"{B991059F-984F-454D-9A9C-C3026C05D973}"},{"IP":"218.29.117.75","ID":113,"MacAddr":"D8-CB-8A-7A-90-DC","Port":1050,"FKey":"{602CDC6E-3A6E-4BA1-ACB7-D87B9BB56E13}"},{"IP":"192.168.0.254","ID":112,"MacAddr":"52-54-00-05-9F-37","Port":1167,"FKey":"{C4E118E9-53FC-4F26-AE86-E841B2BDBEC0}"}],"Cols":[{"JsonType":"integer","FieldIndex":0,"FieldType":"Largeint","FieldSize":0,"FieldName":"ID","Required":false},{"JsonType":"string","FieldIndex":1,"FieldType":"Guid","FieldSize":38,"FieldName":"FKey","Required":false},{"JsonType":"string","FieldIndex":2,"FieldType":"String","FieldSize":50,"FieldName":"MacAddr","Required":false},{"JsonType":"string","FieldIndex":3,"FieldType":"String","FieldSize":50,"FieldName":"IP","Required":false},{"JsonType":"integer","FieldIndex":4,"FieldType":"Integer","FieldSize":0,"FieldName":"Port","Required":false}]}]}';
51         contactList(contact);
52     }
53     
54 //]]
55 </script>
56 </head>
57 <body onload="pageInit();">
58 <H2><center>查询结果</center></H2>
59 
60 <form>
61 First name: 
62 <input type="text" id="firstname" value="abcd" />
63 <br /><br />
64 Last name: 
65 <input type="text" id="lastname"  bgcolor="yellow"/>
66 </form>
67 <br /><br />
68 <table width="80%" border="0" cellspacing="0" id="contactTable">
69   <tr bgcolor="#339933" style="font-size:18px;FONT-WEIGHT:bold;">
70     <td align="center">编号</td>
71     <td align="center">姓名</td>
72     <td align="center">电话</td>
73   </tr>
74 </table>
75 </body>
76 </html>
77 
78 <!--
79  JSONData.js
80  
81  var contact = "[{id:1,name:'张三',phone:'287413288'},{id:2,name:'李四',phone:'13693009088'},{id:3,name:'王五',phone:'12345'},{id:4,name:'lwm8246',phone:'123456789'},{id:5,name:'lwm8246_ABCD',phone:'010-12345678'}]";
82 -->
83 <!--
84 function id(x) {
85   if (typeof x == "string") return document.getElementById(x);
86   return x;
87   }
88 -->

View Code

定义和用法

eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。

eval函数的工作原理

eval函数会评估一个给定的含有JavaScript代码的字符串，并且试图去执行包含在字符串里的表达式或者一系列的合法的JavaScript语句。eval函数将把最后一个表达式或者语句所包含的值或引用作为返回值。

举例说明

eval评估JavaScript表达式

  var bar = 'bar';
  var foobar = eval('"foo" + bar');
  alert(foobar);

eval评估JavaScript语句

  var bar = 'bar';
  var foobar = eval('if(bar == "bar") {bar="foo-bar";} else {bar = "bar-foo";}');
  alert(foobar);

JSON的格式

JSON的格式是由大括号和由冒号（：）构成的名值对所组成的。注意JSON格式与对象字面量 (object literals) 的区别：JSON的名字部分严格用引号+名字来表示。

举例说明

对象的字面量

1 var objectLiteral = { 
2   name: "Objector.L", 
3   age: "24",  
4   special: "JavaScript",  
5   sayName: function() {
6      return this.name;  
7   }
8 };

JSON对象

 1 var jsonFormat = {
 2   "summary": "Blogs",
 3   "blogrolls": [
 4     {       
 5        "title": "Explore JavaScript", 
 6        "link": "http://example.com/"
 7     },  
 8     {        
 9        "title": "Explore JavaScript",
10        "link": "http://example.com/"
11      }
12   ]
13 };

eval和JSON

由于Ajax的兴起，JSON这种轻量级的数据格式作为客户端与服务器之间的传输格式逐渐地流行起来，进而出现的问题是如何将服务器端构建好的JSON数据转化为可用的JavaScript对象。利用eval函数无疑是一种简单而直接的方法。在转化的时候需要将JSON字符串的外面包装一层圆括号：

var jsonObject = eval("(" + jsonFormat + ")");

为什么要加括号？

加上圆括号的目的是迫使eval函数在评估JavaScript代码的时候强制将括号内的表达式（expression）转化为对象，而不是作为语句（statement）来执行。举一个例子，例如对象字面量{}，如若不加外层的括号，那么eval会将大括号识别为JavaScript代码块的开始和结束标记，那么{}将会被认为是执行了一句空语句。所以下面两个执行结果是不同的：

alert(eval("{}"); // return undefine

alert(eval("({})");// return object[Object]

JSON格式的名字部分为什么要加引号？

因为eval函数会将{foo:”bar”}解释成合法的JavaScript语句，而非表达式。但是人们往往想要的是让eval将这段代码解释成一个对象。所以JSON格式会强制你去在名字的外侧加上引号再结合圆括号，这样eval就不会错误的将JSON解释成代码块。

举例说明

eval错误解析语义

alert(eval('{foo:"bar"}'));   // return "bar", incorrect

eval正确解析JSON

alert(eval('({"foo": "bar"})')); // return JSON object, correct

结论

理解eval的工作原理和json的严格的限定格式，合理结合eval和json应用于JavaScript的数据传递和对象转换。

following this format:

eval('{' + jsonString + ')');