在學習AJAX的過程中,接觸了一種新的數據格式——Json數據格式,一開始不是很明白,後來通過做一個“股票”的小程序,有了些瞭解,下面是我的總結(並非"股票"例子程序),希望對大家有所幫助。
一,概念
(1)一種輕量級的數據交換格式;
(2)純文本格式,Javascript原生支持;
二,與XML格式比較:
雖然Ajax的定義中有XML,但是很多應用中會選用json格式來進行數據交換;
(1)比XML格式的優勢:因爲是JavaScript的原生支持,所以它在JavaScript裏面去解析式非常快的,可
以迅速的把json的文本格式轉換成JavaScript裏的對象或數組,不需要用DOM,如果是XML則還需要
用DOM來解析,而DOM的操作在不同的瀏覽器中還是存在着一些小的差異的,並且在IE這種瀏覽器中DOM操作的效率也不是很好;
(2)比XML格式的缺點:XML已經是很成熟的數據格式了,各種各樣的應用都在使用XML,所以無論是在任
何一種服務器端語言裏,都有很成熟的輔助的開源包/平臺自己提供的包去操作XML的數據,去生成XML格
式的數據,但是Json,這方面的成熟度還相對較低,雖然隨着Ajax技術的發展和流行,很多服務器端語言
也都有了一些開源包去來做Json格式數據的生成,但是和json相比成熟度還是很低的。
三,例子
(1)簡單認識
右邊的Json數據格式中的內容——
中括號[]:代表數組;
大括號{}:用來定義對象;——右邊json格式的數據,每個大括號{}就對應一個book對象,所以共3個book對象; isdn、author、name、prive均是對象book的屬性;
(2)小應用
如果從服務器端返回的一個json數據格式最終代表的是數組,可以直接用eval()的方式去對它進行一個執
行,返回成一個javascript數組;
如果json數據格式對應的是一個對象的話,則必須要在它的外層加上"(" ")",再用eval()方法執行;
- <html>
- <head>
- <title></title>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <script type="text/javascript">
- function jsonTest(){
- //JSON數據格式定義(Json無非就是一個數組或者一個對象)
- //定義一個Json數據格式的數據,並賦值給json1
- var json1="[1,2,{" +
- "a:123,b:'String',c:[100,1001]" +
- "}]";
- var jsonArray = eval(json1);//返回一個包含3個元素的數組
- alert(jsonArray[0]);//顯示數組jsonArray的第1個元素
- alert(jsonArray[1]);//顯示jsonArray的第2個元素
- alert(jsonArray[2].a);//顯示jsonarray的第3個元素(是個對象)的a屬性
- alert(jsonArray[2].b);//顯示jsonarray的第3個元素(是個對象)的b屬性
- alert(jsonArray[2].c);//顯示jsonarray的第3個元素(是個對象)的c屬性
- //定義一個Json數據格式的數據,並賦值給json2
- var json2="{" +
- "a:'Hello',b:'[1,2,3]',c:function(){alert(\"Hi!!!\")}" +
- "}";
- var jsonObj=eval("("+ json2 + ")");//返回一個對象——此對象包含a、b屬性和c()函數
- alert(jsonObj.a);//顯示jsonObj對象的屬性a的值
- alert(jsonObj.b);//顯示jsonObj對象的屬性b的值
- jsonObj.c(); //調用jsonObj對象的c()函數
- }
- </script>
- </head>
- <body>
- <input type="button" value="JSON示例" οnclick="jsonTest()" />
- </body>
- </html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function jsonTest(){
//JSON數據格式定義(Json無非就是一個數組或者一個對象)
//定義一個Json數據格式的數據,並賦值給json1
var json1="[1,2,{" +
"a:123,b:'String',c:[100,1001]" +
"}]";
var jsonArray = eval(json1);//返回一個包含3個元素的數組
alert(jsonArray[0]);//顯示數組jsonArray的第1個元素
alert(jsonArray[1]);//顯示jsonArray的第2個元素
alert(jsonArray[2].a);//顯示jsonarray的第3個元素(是個對象)的a屬性
alert(jsonArray[2].b);//顯示jsonarray的第3個元素(是個對象)的b屬性
alert(jsonArray[2].c);//顯示jsonarray的第3個元素(是個對象)的c屬性
//定義一個Json數據格式的數據,並賦值給json2
var json2="{" +
"a:'Hello',b:'[1,2,3]',c:function(){alert(\"Hi!!!\")}" +
"}";
var jsonObj=eval("("+ json2 + ")");//返回一個對象——此對象包含a、b屬性和c()函數
alert(jsonObj.a);//顯示jsonObj對象的屬性a的值
alert(jsonObj.b);//顯示jsonObj對象的屬性b的值
jsonObj.c(); //調用jsonObj對象的c()函數
}
</script>
</head>
<body>
<input type="button" value="JSON示例" οnclick="jsonTest()" />
</body>
</html>
在IE調試窗口:看變量值
四,總結:
(1)瞭解:Json數據格式是怎樣一個形式;
(2)掌握:如果從服務器端接受到了Json數據後,怎麼把它轉換成Javascript中的數組/對象——使用eval()方法
(注:客戶端使用responseText接收服務器端返回的Json數據)
(3)JSON數據格式定義(Json無非就是一個數組或者一個對象)