js中 JSON的使用全解


使用JSON進行數據傳輸

一、選擇的意義

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

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

二、JSON 基礎

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

關於JSON對象

1、使用JavaScript語法創建對象

//定義一個函數,作為構造函數

fucntion 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": "brett@newInstance.com"}

 

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

值的數組

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

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

{ "people": [
  { "firstName": "Brett", "lastName":"McLaughlin", "email": "brett@newInstance.com" },
  { "firstName": "Jason", "lastName":"Hunter", "email": "jason@servlets.com" },
  { "firstName": "Elliotte", "lastName":"Harold", "email": "elharo@macfaq.com" }
]}

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

{ "programmers": [
  { "firstName": "Brett", "lastName":"McLaughlin", "email": "brett@newInstance.com" },
  { "firstName": "Jason", "lastName":"Hunter", "email": "jason@servlets.com" },
  { "firstName": "Elliotte", "lastName":"Harold", "email": "elharo@macfaq.com" }
 ],
"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" }
 ]
}

這里最值得注意的是,能夠表示多個值,每個值進而包含多個值。但是還應該注意,在不同的主條目(programmersauthors 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": "brett@newInstance.com" },
    { "firstName": "Jason", "lastName":"Hunter", "email": "jason@servlets.com" },
    { "firstName": "Elliotte", "lastName":"Harold", "email": "elharo@macfaq.com" }
   ],
  "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)

 

四、JSONAjax中的應用

    JSONJavaScript 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());   

}   

 

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

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

js 代碼

function myEval() {   

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

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

    alert(obj.toJSONString());   

}   



免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM