JSON數據格式的簡述和應用



在學習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()方法執行;

 

  1. <html>  
  2.     <head>  
  3.         <title></title>  
  4.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  5.         <script type="text/javascript">   
  6.               
  7.            function jsonTest(){  
  8.                  
  9.              //JSON數據格式定義(Json無非就是一個數組或者一個對象)  
  10.              //定義一個Json數據格式的數據,並賦值給json1  
  11.              var json1="[1,2,{" +   
  12.                      "a:123,b:'String',c:[100,1001]" +  
  13.              "}]";  
  14.               
  15.              var jsonArray = eval(json1);//返回一個包含3個元素的數組  
  16.              alert(jsonArray[0]);//顯示數組jsonArray的第1個元素  
  17.              alert(jsonArray[1]);//顯示jsonArray的第2個元素  
  18.              alert(jsonArray[2].a);//顯示jsonarray的第3個元素(是個對象)的a屬性  
  19.              alert(jsonArray[2].b);//顯示jsonarray的第3個元素(是個對象)的b屬性  
  20.              alert(jsonArray[2].c);//顯示jsonarray的第3個元素(是個對象)的c屬性  
  21.                
  22.             //定義一個Json數據格式的數據,並賦值給json2  
  23.              var json2="{" +   
  24.                      "a:'Hello',b:'[1,2,3]',c:function(){alert(\"Hi!!!\")}" +            
  25.                "}";  
  26.              var jsonObj=eval("("+ json2 + ")");//返回一個對象——此對象包含a、b屬性和c()函數  
  27.              alert(jsonObj.a);//顯示jsonObj對象的屬性a的值  
  28.              alert(jsonObj.b);//顯示jsonObj對象的屬性b的值  
  29.              jsonObj.c();  //調用jsonObj對象的c()函數  
  30.            }  
  31.         </script>  
  32.     </head>  
  33.     <body>  
  34.        <input type="button" value="JSON示例" οnclick="jsonTest()" />  
  35.     </body>  
  36. </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無非就是一個數組或者一個對象)

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章