JSON 101

最新推荐文章于 2025-04-07 10:39:18 发布

原创最新推荐文章于 2025-04-07 10:39:18 发布 · 188 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JSON

web 专栏收录该内容

1 篇文章

订阅专栏

JSON(JavaScript Object Notation)是一种轻量级的、独立于程序语言的文本数据交互格式.

先动手写一个例子：如图所示，当点击load data按钮，页面通过AJAX将以下JSON数据展示出来。

json_resp.php

{
"list":[
{"name":"JSON"},
{"name":"XML"},
{"name":"YAML"}
]
}

json_demo.php

<html>
<head>
<title>JSON Demo</title>
<script type="text/javascript">
function loadData() {
  var xmlhttp;
  if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  } else {
    // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

  xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
      var html = '';
      var json = eval('(' + xmlhttp.responseText + ')').list;
      for(var i=0; i<json.length; i++) {
        html = html + json[i].name + '<br>';
      }
      document.getElementById("datas").innerHTML = html;
    }
  }
  xmlhttp.open("GET","json_resp.php",true);
  xmlhttp.setRequestHeader("Content-type","application/json");
  xmlhttp.send(null);
}
</script>
</head>
<body>
<h1>JSON Demo</h1>
<input type="button" name="load" value="load datas" onclick="loadData();" />
<br /><br />
<h3>data list below!</h3>
<div id="datas">
null
</div>
</body>
</html>

解析JSON就只有几行代码，只用是Javascript内建的eval()函数，然后便是数组操作，是不是比XML方便多了呢！

下面结合例子中JSON数据来说明JSON的结构。

JSON中，冒号:为名称分隔符，逗号,为值分隔符。数据由对象{}，数组[]，字符""，数值xx.xx，false，null，true组成。

例子中，有一个大的对象，名称是"list"，它的值是一个数组，即{"list":[]}。

list值的数组中包含三个对象，即[{},{},{}]，中间用逗号分隔开。

里面每个对象中又包含一个键值对，如"name":"JSON"，键的名称"name"和值"JSON"中间用冒号分开。

值的类型可以是字符，比如"name":"JSON"；

可以是数值（整型和浮点型），比如 [{"value":250}, {"value":3.14159}]

可以是false, null或者true，比如[{"value":false}, {"value":null}, {"value":true}]

至此，JSON的基本語法解释完成。

参考：

http://www.json.org/json-zh.html