======================================================
注：本文原始碼點此下載
======================================================

簡單地說,json 可以將 java script 物件中表示的一組資料轉換為字串,然後就可以在函式之間輕鬆地傳遞這個字串,或者在非同步應用程式中將字串從 web 客戶傳遞給伺服器端程式。這個字串看起來有點兒古怪(稍後會看到幾個示例),但是java script 很容易解釋它,而且 json 可以表示比名稱/值對更復雜的結構。例如,可以表示陣列和複雜的物件,而不僅僅是鍵和值的簡單列表。

1.簡單 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 格式的資料時,沒有需要遵守的預定義的約束。所以,在同樣的資料結構中,可以改變表示

資料的方式,甚至可以以不同方式表示同一事物。

在 java script 中使用 json

掌握了 json 格式之後,在 java script 中使用它就很簡單了。json 是 java script 原生格式,這意味著在 javascript 中處理 json 資料不需要任何特殊的 api 或工具包。

2.將 json 資料賦值給變數

例如,可以建立一個新的 java script 變數,然後將 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 格式的資料。但是,這還不夠,因為訪問資料的方式似乎還不明顯。

訪問資料

儘管看起來不明顯,但是上面的長字串實際上只是一個數組;將這個陣列放進 java script 變數之後,就可以很輕鬆地訪問它。實際上,只需用點號表示法來表示陣列元素。所以,要想訪問 programmers 列表的第一個條目的姓氏,只需在 java script 中使用下面這樣的程式碼: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 格式的資料,而不需要使用任何額外的 java script 工具包或 api。

3.修改 json 資料

正如可以用點號和括號訪問資料,也可以按照同樣的方式輕鬆地修改資料:

people.musicians[1].lastname = "rachmaninov";

在將字串轉換為 java script 物件之後,就可以像這樣修改變數中的資料。

轉換回字串

當然,如果不能輕鬆地將物件轉換回本文提到的文字格式,那麼所有資料修改都沒有太大的價值。在 javascript 中這種轉換也很簡單:

string newjsontext = people.tojsonstring();

這樣就行了!現在就獲得了一個可以在任何地方使用的文字字串,例如,可以將它用作 ajax 應用程式中

的請求字串。

更重要的是,可以將任何 java script 物件轉換為 json 文字。並非只能處理原來用 json 字串賦值的變數。為了對名為 myobject 的物件進行轉換,只需執行相同形式的命令:

string myobjectinjson = myobject.tojsonstring();

4.將 json 發給伺服器

將 json 發給伺服器並不難,但卻至關重要,而且還有一些重要的選擇要做。但是,一旦決定使用 json,所要做的這些選擇就會十分簡單而且數量有限,所以您需要考慮和關注的事情不多。重要的是能夠將json 字串傳送給伺服器,而且最好能做到儘快和

儘可能簡單。

通過 get 以名稱/值對傳送 json

將 json 資料發給伺服器的最簡單方法是將其轉換成文字,然後以名稱/值對的值的方式進行傳送。請務必注意,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" } ] }

如果要以名稱/值對將其傳送到伺服器端,應該如下所示:

var url = "organizepeople.php?people=" + people.tojsonstring();

xmlhttp.open("get", url, true);

xmlhttp.onreadystatechange = updatepage;

xmlhttp.send(null);

這看起來不錯,但卻存在一個問題:在 json 資料中會有空格和各種字元,web 瀏覽器往往要嘗試對其繼續編譯。要確保這些字元不會在伺服器上(或者在將資料傳送給伺服器的過程中)引起混亂,需要在 javascript escape() 函式中做如下新增:

var url = "organizepeople.php?people=" + escape(people.tojsonstring());

request.open("get", url, true);

request.onreadystatechange = updatepage;

request.send(null);

該函式可以處理空格、斜線和其他任何可能影響瀏覽器的內容,並將它們轉換成 web 可用字元(比如,空格會被轉換成 %20,瀏覽器並不會將其視為空格處理,而是不做更改,將其直接傳遞到伺服器)。之後,伺服器會(通常自動)再把它們轉換回它們傳輸後的本來 “面目”。

這種做法的缺點有兩個:

● 在使用 get 請求傳送大塊資料時,對 url 字串有長度限制。雖然這個限制很寬泛,但物件的json 字串表示的長度可能超出您的想象,尤其是在使用極其複雜的物件時更是如此。

● 在跨網路以純文字傳送所有資料的時候,傳送資料面臨的不安全性超出了您的處理能力。

簡言之,以上是 get 請求的兩個限制,而不是簡單的兩個與 json 資料相關的事情。在想要傳送使用者名稱和姓之外的更多內容,比如表單中的選擇時,二者可能會需要多加註意。若要處理任何機密或極長的內容,可以使用 post 請求。

利用 post 請求傳送 json 資料

當決定使用 post 請求將 json 資料傳送給伺服器時,並不需要對程式碼進行大量更改,如下所示:

var url = "organizepeople.php?timestamp=" + new date().gettime();

request.open("post", url, true);

request.onreadystatechange = updatepage;

request.setrequestheader("content-type", "application/x-www-form-urlencoded");

request.send(people.tojsonstring());

請求使用 post 而非 get 開啟,而且 content-type 頭被設定為讓伺服器預知它能得到何種資料。在這種情況下,即為 application/x-www-form-urlencoded,它讓伺服器知道現在傳送的是文字,正如它從常規的 html 表單中得到的一樣。

另一個簡單提示是 url 的末尾追加了時間。這就確保了請求不會在它第一次被髮送後即快取,而是會在此方法每次被呼叫後重新建立和重發;此 url 會由於時間戳的不同而稍微有些不同。這種技巧常被用於確保到指令碼的 post 每次都會實際生成新請求且 web 伺服器不會嘗試快取來自伺服器的響應。

json 就只是文字

不管使用 get 還是 post,關鍵之處在於 json 就只是文字。由於不需要特殊編碼而且每個伺服器端指令碼都能處理文字資料,所以可以輕鬆利用 json 並將其應用到伺服器。假如 json 是二進位制格式的或是一些怪異的文字編碼,情況就不這麼簡單了;幸好 json 只是常規的文字資料(正如指令碼能從表單提交中所接收到的資料,在 post 段和 content-type 頭中亦可以看出),所以在將資料傳送到伺服器時無需太費心。

======================================================
在最後，我邀請大家參加新浪APP，就是新浪免費送大家的一個空間，支援PHP+MySql，免費二級域名，免費域名繫結 這個是我邀請的地址，您通過這個連結註冊即為我的好友，並獲贈雲豆500個，價值5元哦！短網址是http://t.cn/SXOiLh我建立的小站每天訪客已經達到2000+了，每天掛廣告賺50+元哦，呵呵，飯錢不愁了，\(^o^)/