使用JSON進行數據傳輸

一、選擇的意義

在異步應用程序中發送和接收信息時，可以選擇以純文本和 XML 作爲數據格式。爲了更好的使用ajax,我們將學習一種有用的數據格式 JavaScript Object Notation（JSON），以及如何使用它更輕鬆地在應用程序中移動數據和對象。JSON是一種簡單的數據交換格式，在某些方面，它的作用與XML非常類似，但比XML更爲簡單，JSON的語法簡化了數據交換的難度，而且提供了一種僞對象的方式。

Java的對象 < - >JavaScript對象(json數據格式)

二、JSON 基礎

簡單地說，JSON 可以將 JavaScript 對象中表示的一組數據轉換爲字符串（僞對象），然後就可以在函數之間輕鬆地傳遞這個字符串，或者在異步應用程序中將字符串從 Web 客戶端傳遞給服務器端程序。這個字符串看起來有點兒古怪（稍後會看到幾個示例），但是 JavaScript 很容易解釋它，而且 JSON 可以表示比名稱/值對更復雜的結構。例如，可以表示數組和複雜的對象，而不僅僅是鍵和值的簡單列表。

關於JSON對象

1、使用JavaScript語法創建對象

//定義一個函數，作爲構造函數

    function Person(name,sex)
{
  this.name=name;
  this.sex=sex;

}

//創建一個實例

var p=new Person("張三","男");

//輸出Person實例

 alert(p.name);

注意：通過該方式創建的對象是一般的腳本對象

2、從JavaScript1.2開始創建對象有了一種更快捷的語法(Json的語法)，如下：

var obj={name:"張三","sex":'男'};    

alert(obj.sex);

 

關於數組

1、早期的JavaScript數組

var arr=new Array();

arr[0]=’a’;

arr[1]=’bbc’

我們也可以通過如下方式創建數組

var arr=new Array(‘a’,’bbc’);

2、使用JSON語法，則可以通過如下方式創建數組

  var arr=[‘a’,’bbc’];

簡單 JSON 示例

按照最簡單的形式，可以用下面這樣的 JSON 表示名稱/值對：

{ "firstName":"Brett" }

 

這個示例非常基本，而且實際上比等效的純文本名稱/值對佔用更多的空間：

firstName=Brett

 

但是，當將多個名稱/值對串在一起時，JSON 就會體現出它的價值了。首先，可以創建包含多個名稱/值對的記錄，比如：

{"firstName": "Brett", "lastName":"McLaughlin", "email": "[email protected]"}

 

從語法方面來看，這與名稱/值對相比並沒有很大的優勢，但是在這種情況下 JSON 更容易使用，而且可讀性更好。例如，它明確地表示以上三個值都是同一記錄的一部分；花括號使這些值有了某種聯繫。

值的數組

當需要表示一組值時，JSON 不但能夠提高可讀性，而且可以減少複雜性。例如，假設您希望表示一個人名列表。在 XML 中，需要許多開始標記和結束標記；如果使用典型的名稱/值對（就像在本系列前面文章中看到的那種名稱/值對），那麼必須建立一種專有的數據格式，或者將鍵名稱修改爲 person1-firstName 這樣的形式。

如果使用 JSON，就只需將多個帶花括號的記錄分組在一起：

{ "people": [

  { "firstName": "Brett", "lastName":"McLaughlin", "email": "[email protected]" },

  { "firstName": "Jason", "lastName":"Hunter", "email": "[email protected]" },

  { "firstName": "Elliotte", "lastName":"Harold", "email": "[email protected]" }

]}

這不難理解。在這個示例中，只有一個名爲 people 的變量，值是包含三個條目的數組，每個條目是一個人的記錄，其中包含名、姓和電子郵件地址。上面的示例演示如何用括號將記錄組合成一個值。當然，可以使用相同的語法表示多個值（每個值包含多個記錄）：

{ "programmers": [

  { "firstName": "Brett", "lastName":"McLaughlin", "email": "[email protected]" },

  { "firstName": "Jason", "lastName":"Hunter", "email": "[email protected]" },

  { "firstName": "Elliotte", "lastName":"Harold", "email": "[email protected]" }

],

"authors": [

  { "firstName": "Isaac", "lastName": "Asimov", "genre": "science fiction" },

  { "firstName": "Tad", "lastName": "Williams", "genre": "fantasy" },

  { "firstName": "Frank", "lastName": "Peretti", "genre": "christian fiction" }

],

"musicians": [

  { "firstName": "Eric", "lastName": "Clapton", "instrument": "guitar" },

  { "firstName": "Sergei", "lastName": "Rachmaninoff", "instrument": "piano" }

]

}

這裏最值得注意的是，能夠表示多個值，每個值進而包含多個值。但是還應該注意，在不同的主條目（programmers、authors和 musicians）之間，記錄中實際的名稱/值對可以不一樣。JSON 是完全動態的，允許在 JSON 結構的中間改變表示數據的方式。甚至可以聲明如下的Json對象

var obj2={people:{name:'張三',sex:"男"}}

alert(obj2.people.name);

在處理 JSON 格式的數據時，沒有需要遵守的預定義的約束。所以，在同樣的數據結構中，可以改變表示數據的方式，甚至可以以不同方式表示同一事物。

{deptid:'1',deptname:'開發部',deptnum:'2',deptdesc:'開發相關',

emps:[{empid:1,empname:'張三',sex:’男’,age:’20’},{empid:2,empname:'張三',sex:’男’,age:’20’}，{empid:3,empname:'張三',sex:’男’,age:’20’}]}

 

 

 

三、在JavaScript中使用JSON

掌握了 JSON 格式之後，在 JavaScript 中使用它就很簡單了。JSON 是 JavaScript 原生格式，這意味着在 JavaScript 中處理 JSON 數據不需要任何特殊的 API 或工具包。

將JSON 數據賦值給變量

例如，可以創建一個新的 JavaScript 變量，然後將 JSON 格式的數據字符串直接賦值給它：

var people =

  { "programmers": [

    { "firstName": "Brett", "lastName":"McLaughlin", "email": "[email protected]" },

    { "firstName": "Jason", "lastName":"Hunter", "email": "[email protected]" },

    { "firstName": "Elliotte", "lastName":"Harold", "email": "[email protected]" }

   ],

  "authors": [

    { "firstName": "Isaac", "lastName": "Asimov", "genre": "science fiction" },

    { "firstName": "Tad", "lastName": "Williams", "genre": "fantasy" },

    { "firstName": "Frank", "lastName": "Peretti", "genre": "christian fiction" }

   ],

  "musicians": [

    { "firstName": "Eric", "lastName": "Clapton", "instrument": "guitar" },

    { "firstName": "Sergei", "lastName": "Rachmaninoff", "instrument": "piano" }

   ]

  }

這非常簡單；現在 people 包含前面看到的 JSON 格式的數據。但是，這還不夠，因爲訪問數據的方式似乎還不明顯。

訪問數據

儘管看起來不明顯，但是上面的長字符串實際上只是一個數組；將這個數組放進 JavaScript 變量之後，就可以很輕鬆地訪問它。實際上，只需用點號表示法來表示數組元素。所以，要想訪問 programmers 列表的第一個條目的姓氏，只需在 JavaScript 中使用下面這樣的代碼：

people.programmers[0].lastName;

注意，數組索引是從零開始的。所以，這行代碼首先訪問 people 變量中的數據；然後移動到稱爲 programmers的條目，再移動到第一個記錄（[0]）；最後，訪問 lastName 鍵的值。結果是字符串值 “McLaughlin”。

下面是使用同一變量的幾個示例。

people.authors[1].genre                            // Value is "fantasy"

people.musicians[3].lastName            

// Undefined. This refers to the fourth entry,and there isn't one

people.programmers[2].firstName          // Value is "Elliotte"

利用這樣的語法，可以處理任何 JSON 格式的數據，而不需要使用任何額外的 JavaScript 工具包或 API。

修改 JSON 數據

正如可以用點號和括號訪問數據，也可以按照同樣的方式輕鬆地修改數據：

people.musicians[1].lastName = "Rachmaninov";

 

在將字符串轉換爲 JavaScript json格式對象之後，就可以像這樣修改變量中的數據。

注意:json格式的對象和json文本是不同的

var obj={name:"張三","sex":'男'};    //json格式的對象

var str="{name:"張三","sex":'男'}"; //json格式的字符串（json格式的文本）

轉換回字符串

當然，如果不能輕鬆地將對象轉換回本文提到的文本格式，那麼所有數據修改都沒有太大的價值。在 JavaScript 中這種轉換也很簡單：

var newJSONtext = people.toJSONString();

這樣就行了！現在就獲得了一個可以在任何地方使用的文本字符串，例如，可以將它用作 Ajax 應用程序中的請求字符串。

更重要的是，可以將任何 JavaScript 對象轉換爲 JSON 文本。並非只能處理原來用 JSON 字符串賦值的變量。爲了對名爲myObject 的對象進行轉換，只需執行相同形式的命令：

<script type="text/javascript">

   function Car(make,model,year,color)

   {

      this.make=make;  

      this.model=model;  

      this.year=year;  

      this.color=color;

    }  

    function showCar()

    {

     var carr = new Car("Dodge","Coronet R/T",1968,"yellow");  

     alert(carr.toJSONString());  

    }

</script>

這就是 JSON 與其他數據格式之間最大的差異。如果使用 JSON，只需調用一個簡單的函數，就可以獲得經過格式化的數據，可以直接使用了。對於其他數據格式，需要在原始數據和格式化數據之間進行轉換。即使使用 Document Object Model 這樣的API（提供了將自己的數據結構轉換爲文本的函數），也需要學習這個 API 並使用 API 的對象，而不是使用原生的 JavaScript 對象和語法。

最終結論是，如果要處理大量 JavaScript 對象，那麼 JSON 幾乎肯定是一個好選擇，這樣就可以輕鬆地將數據轉換爲可以在請求中發送給服務器端程序的格式(Ajax)。

四、JSON在Ajax中的應用

    JSON（JavaScript Object Notation）一種簡單的數據格式，比xml更輕巧。 JSON 是 JavaScript 原生格式，這意味着在 JavaScript 中處理 JSON 數據不需要任何特殊的 API 或工具包。

通過以上學習我們知道JSON的規則很簡單：對象是一個無序的“‘名稱/值’對”集合。一個對象以“{”（左括號）開始，“}”（右括號）結束。每個“名稱”後跟一個“:”（冒號）；“‘名稱/值’對”之間使用“,”（逗號）分隔。

1、通過Json格式來聲明對象和操作對象

案例：

 js 代碼

function showJSON()

{   

    var user =    

    {    

        "username":"andy",

        "age":20,

        "info": { "tel": "123456", "cellphone": "98765"},

        "addresses":   

            [   

                {"city":"beijing","postcode":"222333"},

                {"city":"newyork","postcode":"555666"}

            ]   

    }

    alert(user.username);

    alert(user.age);

    alert(user.info.cellphone);

    alert(user.address[0].city);

    alert(user.address[0].postcode);

}   

這表示一個user對象，擁有username, age, info, address 等屬性。

同樣也可以用JSON來簡單的修改數據，修改上面的例子

js 代碼

function showJSON() {   

    var user =    

    {    

        "username":"andy",   

        "age":20,   

        "info": { "tel": "123456", "cellphone": "98765"},   

        "address":   

            [   

                {"city":"beijing","postcode":"222333"},   

                {"city":"newyork","postcode":"555666"}   

            ]   

    }   

       

    alert(user.username);   

    alert(user.age);   

    alert(user.info.cellphone);   

    alert(user.address[0].city);   

    alert(user.address[0].postcode);   

       

    user.username = "Tom";   

    alert(user.username);   

} 

2、一般對象轉換成JSON格式的字符

JSON提供了json.js包，下載http://www.json.org/json.js 後，將其引入然後就可以簡單的使用object.toJSONString()轉換成JSON數據。

js 代碼

function Car(make, model, year, color) {   

     this.make  =  make;   

     this.model  =  model;   

     this.year  =  year;   

     this.color  =  color;   

}   

function showCar() {   

    var carr = new Car("Dodge", "Coronet R/T", 1968, "yellow");   

    alert(carr.toJSONString());   

}   

 

2、js對象和JSON格式的js對象、JSON格式的js對象和JSON文本的轉換

可以使用eval來轉換JSON字符到JSON格式的Object

js 代碼

function myeval_r() {   

    var str = '{ "name": "張三", "sex": "男" }';   

    var obj = eval_r('(' + str + ')');   

    alert(obj.toJSONString());   

}   

或者使用parseJSON()方法

function myparse()

{   

    var str= '{ "name": "張三", "sex": "男" }';   

    var obj=str.parseJSON();   //把其Json文本解析成爲json對象   

    alert(obj.toJSONString()); //把json對象轉換成JSON 文本  

}   

JS操作JSON總結

 

JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式，採用完全獨立於語言的文本格式，是理想的數據交換格式。同時，JSON是 JavaScript 原生格式，這意味着在 JavaScript 中處理 JSON數據不須要任何特殊的 API 或工具包。

    本文主要是對JS操作JSON的要領做下總結。

    在JSON中，有兩種結構：對象和數組。

    1. 一個對象以“{”（左括號）開始，“}”（右括號）結束。每個“名稱”後跟一個“:”（冒號）；“‘名稱/值’ 對”之間運用 “,”（逗號）分隔。 名稱用引號括起來；值如果是字符串則必須用括號，數值型則不須要。例如：

    var o={"xlid":"cxh","xldigitid":123456,"topscore":2000,"topplaytime":"2009-08-20"}；

    2. 數組是值（value）的有序集合。一個數組以“[”（左中括號）開始，“]”（右中括號）結束。值之間運用 “,”（逗號）分隔。

    例如：

    var jsonranklist=[{"xlid":"cxh","xldigitid":123456,"topscore":2000,"topplaytime":"2009-08-20"},{"xlid":"zd","xldigitid":123456,"topscore":1500,"topplaytime":"2009-11-20"}];

    爲了方便地處理JSON數據，JSON提供了json.js包，下載地址：http://www.json.org/json.js

    在數據傳輸流程中，json是以文本，即字符串的形式傳遞的，而JS操作的是JSON對象，所以，JSON對象和JSON字符串之間的相互轉換是關鍵。例如：

    JSON字符串:

    var str1 = '{ "name": "cxh", "sex": "man" }';

    JSON對象:

    var str2 = { "name": "cxh", "sex": "man" };

    一、JSON字符串轉換爲JSON對象

    要運用上面的str1，必須運用下面的要領先轉化爲JSON對象：

    //由JSON字符串轉換爲JSON對象

    var obj = eval_r('(' + str + ')');

或者

 

    var obj = str.parseJSON(); //由JSON字符串轉換爲JSON對象

    或者

    var obj = JSON.parse(str); //由JSON字符串轉換爲JSON對象

    然後，就可以這樣讀取：

    Alert(obj.name);

    Alert(obj.sex);

    特別留心：如果obj本來就是一個JSON對象，那麼運用 eval（）函數轉換後（哪怕是多次轉換）還是JSON對象，但是運用 parseJSON（）函數處理後會有疑問（拋出語法異常）。

    二、可以運用 toJSONString()或者全局要領 JSON.stringify()將JSON對象轉化爲JSON字符串。

    例如：

    var last=obj.toJSONString(); //將JSON對象轉化爲JSON字符

    或者

    var last=JSON.stringify(obj); //將JSON對象轉化爲JSON字符

    alert(last);

    留心：

    上面的多個要領中，除了eval_r()函數是js自帶的之外，其他的多個要領都來自json.js包。新版本的 JSON 修改了 API，將 JSON.stringify() 和 JSON.parse() 兩個要領都注入到了 Javascript 的內建對象裏面，前者變成了 Object.toJSONString()，而後者變成了 String.parseJSON()。如果提示找不到toJSONString()和parseJSON()要領，則說明您的json包版本太低。