JS中的JSON物件
使用JSON進行資料傳輸
一、選擇的意義
在非同步應用程式中傳送和接收資訊時，可以選擇以純文字和 XML 作為資料格式。為了更好的使用ajax,我們將學習一種有用的資料格式 JavaScript Object Notation（JSON），以及如何使用它更輕鬆地在應用程式中移動資料和物件。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" }
]
}
這裡最值得注意的是，能夠表示多個值，每個值進而包含多個值。但是還應該注意，在不同的主條目（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": "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)。
四、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() {
var str = `{ "name": "張三", "sex": "男" }`;
var obj = eval(`(` + str + `)`);
alert(obj.toJSONString());
}
或者使用parseJSON()方法
function myparse()
{
var str= `{ "name": "張三", "sex": "男" }`;
var obj=str.parseJSON(); //把其Json文字解析成為json物件
alert(obj.toJSONString()); //把json物件轉換成JSON 文字
}