json教程:全面详解JSON
就最近写了很多Ajax的东西，接触到Ajax的第一件事就是HttpXML.send()之后，服务器要返回什么数据，一般都是responseText或responseXML，也就是说，1. 返回纯文字;2. 返回XML，纯文字难以分析处理(要跑DOM时)，XML在服务器端要花很多力气去‘组合’出XML数据，然后用户端再写很多Code去分析处理，这是很没效率的。
所以就快快把JSON学一学吧!
JSON概念
进入JSON前，请先看我这篇‘第二篇：简单介绍JavaScript内建对象’Array对象第一段‘Array声明’的地方，声明一个Javascript Array对象，基本上是两种语法：
// 正式声明
var team1 = new Array('Bruce', 'Sherry', 'Happy');
// 整合声明
var team2 = ['Bruce', 'Sherry', 'Happy'];
alert(team1[0]); // Bruce
alert(team2[2]); // Happy一个比较正式，一个是比较简写，通常Javascript写久了，会采用第二种方式来声明Array。
再来看Javascript对象的声明，基本上也是两种：
// 正式声明
var Bruce = new Object();
Bruce.name = 'King Kong';
Bruce.age = 18;
Bruce.sex = 'male';
alert(Bruce.age); // 18
// 整合声明
var Bruce = {
'name' : 'King Kong',
'age' : 18,
'sex' : 'male'
}
alert(Bruce.name); // King Kong
alert(Bruce[name]); // King Kong一样，久了也是会选第二种来写，再来我们看看Javascript的‘Array + Object’的声明：
// 声明一个familys Array，里面包含两个Object
var familys = [
{'name' : 'Bruce',
'age' : 18,
'sex' : 'male'},
{'name' : 'Sherry',
'age' : 16,
'sex' : 'famale'}
];
alert(family[0].name); // Bruce
alert(family[1].sex); // famale到这里你已经会了JSON的80%以上了，JSON (JavaScript Object Notation)已经说明的很清楚了，它是一个JavaScript的子集，它利用Object与Array来表示数据，让数据很容易的可以交换使用。
JSON写法
我们先来看完整的JSON写法：
{
'familys' = [
{'name' : 'Bruce',
'age' : 18,
'sex' : 'male'},
{'name' : 'Sherry',
'age' : 16,
'sex' : 'famale'}
]
}JSON会建构出两种结构：(1)‘"名称" : 值’的集合;(2)Array。
JSON的细节
比对上面范例，你会发现一客人也不难。
JSON Object：
以"{"开始，以"}"结尾
每个名称后跟着一个":"
每对"名称:值"之间用","分隔
{ // 以"{"开始
'name' : 'Bruce', // 每个名称后跟着一个":"
'age' : 18, // 每对"名称:值"之间用","分隔
'sex' : 'male'
} // 以"}"结尾JSON Array：
以"["开始，以"]"结尾
值之间使用","
{
// familys为一维数组，数组里包含两笔对象数据
'familys' = [ // 以"["开始
{'name' : 'Bruce',
'age' : 18,
'sex' : 'male'}, // 值之间使用","
{'name' : 'Sherry',
'age' : 16,
'sex' : 'famale'}
] // 以"]"结尾
}JSON Value：
值本身可以是String、Number、true、false、null、Object、Array;
JSON String：
由双引号包围的任意Unicode字符集合。可以使用"反斜线(\)"来转义。
{
"details" : "这是JSON的值. \n 此格式比XML合适Ajax交换数据使用."
}JSON Number：
与一般数值相同，除8 / 16进制外。
JSON的使用
那JSON要如何使用呢?
原生的JSON格式数据，目前在IE7以上及MF 3以上，已经内建解析JSON格式的能力，但在兼容性及网络上的不确定性(其他浏览器)，建议在有需要使用JSON格式的页面引用json2.js，依官方说法，请不要在使用json.js这个版本的Script了。
我们有一JSON格式的String：
var jsonData = "{'familys'=[{'name' : 'Bruce', 'age' : 18, 'sex' :
'male'},
{'name' : 'Sherry','age' : 16, 'sex' : 'famale'}]}"方法一：使用eval()
这个方法会引发安全性问题，我就不介绍了。
方法二：使用json2.js (IE7以上及MF 3以上可以不引用)
先在网页中引用json2.js，然后使用json2所提供的parse方法：
var jsonData = "{'familys'=[{'name' : 'Bruce', 'age' : 18, 'sex' :
'male'},
{'name' : 'Sherry','age' : 16, 'sex' : 'famale'}]}"
var jsonObj = JSON.parse(jsonData); // 将JSON格式数据转为对象
alert(jsonObj.familys[0].name); // Bruce
alert(jsonObj.familys[1].age); // 16这样之后，我们就能在Ajax函数将服务器传回的JSON格式做解析：
// ...
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
var jsonObj = JSON.parse(xmlHttp.responseText);
// ...
}使用了JSON来交换数据后，你会发现相关Ajax的源程序变简单了，例如：
// 原始Ajax函数
function Do(xmlHttp) {
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
var familys = xmlHttp.responseXML.getElementsByTagName('familys');
for (var i = 0; i < familys.length; i++) {
var name =
familys.getElementsByTagName('name')[0].firstChild.nodeValue;
var age = familys.getElementsByTagName('age')[0].firstChild.nodeValue;
var sex = familys.getElementsByTagName('sex')[0].firstChild.nodeValue;
}
}
}
// 使用JSON后的Ajax函数
function Do(xmlHttp) {
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
var jsonObj = JSON.parse(xmlHttp.responseText);
var name = jsonObj.familys[0].name;
var age = jsonObj.familys[0].age;
var sex = jsonObj.familys[0].sex;
}
不只有变简单，而且程序的撰写更直觉。另外，你也可以把Object转为JSON：
// 声明一个familys Array，里面包含两个Object
var familys = [
{'name' : 'Bruce',
'age' : 18,
'sex' : 'male'},
{'name' : 'Sherry',
'age' : 16,
'sex' : 'famale'}
];
var jsonData = JSON.stringify(familys);更快速的是使用jQuery的$getJSON，但这超出了JSON的讨论了。以上是接收解析JSON，那如果我要传送JSON给服务器呢?也简单：
var xhr = request(); // 建立XHR对象
xhr.onreadystatechange = handler;
xhr.open('POST',URL);
xhr.setRequestHeader('Content-Type', 'application/json'); // 这里是重客人
xhr.send(json);记得使用'application/json'来传送即可，但一般服务器端是看不懂JSON，不过没关系，在JSON官网最下方或上网找一下，已经有很多高手分享出来可以在服务器解析JSON的元件或Source Code，让JSON数据传送到服务器后，依然方便好用。
使用JSONP进行跨站请求
这个主题比较生硬，如果你不会使用到跨网站请求，可以先跳过。
一般而言，在网站中是不太充许你去存取其他网站的内容，但不是百分百，例如iframe或img就是很好的例子，但其他HTML、Javascript就都不太能做这种事，例如XMLHttpRequest，这是一种保护。但现今网页已经很少能不去存取其他网站，例如挂个‘噗浪’‘fb’…，但偏偏XMLHttpRequest不充许跨网站去存取。
后来有人发展出了JSONP(JSON with Padding)，JSONP利用Javascript的callback机制，绕过Browser的安全限制，关键在动态载入
这差不多就是JSONP的基础了，通过动态建立script及Javascript callback，来载入跨网站JSON数据。
最后我们来看整个JSONP的运作流程示意源程序，注意程序的流程，Step 1在Client--> Step 2在Server--> Step 3 回到Client。
Client端：*.html
// 使用jQuery
// Step 1：送出JSONP请求，
$(function(){
$('#send').click(function(){
// 最后必须是 &callback=funcion 或 &jsoncallback=function 结尾
var URL =
"http://abc.com/jsonp.aspx?id=1&name=Bruce&jsoncallback=dosomething";
$.ajax({
type : 'GET',
dataType : 'jsonp', // 记得是jsonp
url : URL,
error : function(xhr, error){ alert('Ajax request error.');}
})
})
});
// Step 3：收到服务器回应后(response.write(jsonp))，执行的callback的function
function dosomething(jsonData){
// jsonData会取得Server传回{...json data ...}
alert(jsonData.name);
alert(jsonData.age);
alert(jsonData.sex);
}在建立非同请求时，在网址最后加上‘&callback=函数名称’或‘&jsoncallback=函数名称’，就可以取得其他域的数据并执行后续callback的函数。
Server端 *.aspx
' Step 2：进行相关处理
'接收到的id & name处理...
' 以下是重客人，组合出function及json数据，然后返回
Dim jsonp AS String =
' dosomething是 function name
' {...} 是json data
jsonp = "dosomething({ _
' ... json data ... _
})"
Response.Write(jsonp)参考资料：
Javascript
http://www.json.org/json-zh.html (官方网站，一定要看)
https://github.com/douglascrockford/JSON-js (请下载json2.js使用)
http://blog.roodo.com/syshen/archives/1410294.html (JSON介绍)
http://herolin.twbbs.org/?s=jsonp
http://caterpillar.onlyfun.net/Gossip/JavaScript/index.html (很多Javascript数据)
http://www.pozzware.com (可以下载到Visual Basic 2008解析JSON的Source Code，可自行编译为*.DLL，但注册及成为正式用户需要一些日子，我约二~三周后才成为RegisteredUser，然后才下载到PW.JSON Library)
- 评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
-