javascript讀寫json範例_javascript技巧-js教程-PHP中文網

首頁

web前端

js教程

javascript讀寫json範例_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 04:52 PM

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

JSON的規則很簡單：物件是一個無序的「『名稱/值』對」集合。一個物件以「{」（左括號）開始，「}」（右括號）結束。每個「名稱」後面跟著一個「:」（冒號）；「『名稱/值' 對」之間使用「,」（逗號）分隔。具體細節參考 http://www.json.org/json-zh.html

舉個簡單的例子：

js 程式碼

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.username); 

alert(user.username);

alert(user.username);

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 = 

{ 

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.age); alert(user.info.cellphone); alert(user.address[0].city);

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

alert(user.address[0].postcode); 
 
user.username = "Tom"; 

alert(user.username); 

} 

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

js 程式碼

複製程式碼

 程式碼如下:

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

alert(carr.toJSONString()); } function Car(make, model, year, color) { this.make = make;

this.model = model 
; >this.year = year; 

this.color = color; 

} 

可以使用eval來轉換JSON字元到Object 

 js 程式碼

複製程式碼

程式碼如下: function myEval() >var str = '{ "name": "Violet", "occupation": "character" }';

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

 alert(obj.toJSONString()); 

} 

或者使用parseJSON()方法

js 代碼

複製程式碼

程式碼如下:

function myEval() { var str = '{ "name": "Violet" , "occupation": "character" }'; var obj = str.parseJSON();

alert(obj.toJSONString());

}
}

下面使用prototype寫一個JSON的ajax範例。

先寫一個servlet (我的是servlet.ajax.JSONTest1.java)就寫一句話java 程式碼

複製🎜>複製程式碼程式碼如下: response.getWriter().print("{ /"name/": /"Violet/", /"occupation/": /"character/" }"); 再在頁面中寫一個ajax的請求js 程式碼複製程式碼程式碼如下:

 
function sendRequest() { 

var url = "/MyWebApp/JSONTest1"; 

var mailAjax = new Ajax.Request( 

var mailAjax = new Ajax.Request( 
 🎜>
{ 

method: 'get', 

onComplete: jsonResponse 

} 

); 

} 

); 🎜>
function jsonResponse(originalRequest) { 

alert(originalRequest.responseText); 

var myobj = originalRequest.responseg; .name); 

}

prototype-1.5.1.js中提供了JSON的方法，String.evalJSON(), 可以不使用json.js, 修改上面的方法

js 程式碼

複製程式碼程式碼如下:

alert(originalRequest.responseText);

var myobj = originalRequest.responseText.evalJSON(true); 

alert(obj); 
} 

JSON也提供了java的jar包http://www.json.org/java/index.html API也很簡單，以下舉例

在javascript中填加請求參數

js 程式碼

複製程式碼

程式碼如下: function sendRequest() { var carr = new Car("Dodge", "Coronet R/T", 1968, "yellow"); var pars = "carcar =" carr.toJSONString();

var url = "/MyWebApp/JSONTest1"; 

var mailAjax = new Ajax.Request( 

, 
url, 

{ 

method: 'get', 

parameters: pars, 

onComplete: jsonResponse 

} 
} 
 
; 🎜>
} 

使用JSON請求字串就可以簡單的產生JSONObject並進行解析,修改servlet添加JSON的處理(要使用json.jar) 

java程式碼

複製程式碼

程式碼如下: private void doService(🎜> private void doService(HttpSer)S. IOException {

String s3 = request.getParameter("car");

try { 

JSONObject jsonObj = new JSONObject(s3); 
JSONObject jsonObj = new JSONObject(s3); 
>🎜> .out.println(jsonObj.getString("model")); 

System.out.println(jsonObj.getInt("year")); 

} catch (JSONException e) { 

e.printStackTrace(); 

} 

response.getWriter().print("{ /"name/": /"Violet/", /"occupation /": /"character/" }"); 

} 

同樣可以使用JSONObject產生JSON字串，修改servlet 

java 程式碼

複製程式碼

程式碼如下: private void doService(HttpServletalquest request, Httocyal >String s3 = request.getParameter("car");

try { 

JSONObject jsonObj = new JSONObject(s3); 

System。 (jsonObj.getString("model")); 

System.out.println(jsonObj.getInt("year")); 

} catch (JSONException e) { 

e.printStackTrace(); 

} 

JSONObject resultJSON = new JSONObject(); 

try { 
resultJSON. , "Violet") 

.append("occupation", "developer") 

.append("age", new Integer(22)); 

System. out.println(resultJSON.toString()); 

} catch (JSONException e) { 

e.printStackTrace(); 

} 

response .getWriter().print(resultJSON.toString()); 

} 

js 程式碼

🎜>

程式碼如下: function jsonResponse(originalRequest) { alert(originalRequest.response) {

alert(originalRequest.response); responseText.evalJSON(true);

alert(myobj.name);

alert(myobj.age);

}

參考

http://www.json.org/js.html

http://www.blogjava.net/Jkallen/archive/2006/03/28/37905 .html

http://www.json.org/

http://www.prototypejs.org/learn/json

http://www.json .org/java/index.html

http://www.ibm.com/developerworks/cn/web/wa-ajaxintro10/index.html

使用JSON
JSON也就是JavaScript Object Notation，就是一個描述資料的輕量級語法。 JSON的優雅是因為它是JavaScript語言的子集。接下來你將看到它為什麼如此重要。首先，來比較一下JSON和XML語法。

JSON和XML都使用結構化方法來描述資料。例如一個地址簿應用程式可以提供用來產生XML格式的地址卡的web服務：

複製代碼代碼如下:

 
Sean Kelly 
SK🎜>Sean Kelly 
SK Consulting 
 
kelly@seankelly.biz 
kelly@seankelly .tv 
 
 1 214 555 1212 
 1 214 555 1213 
 1 214 555 1214 
 
1234 Main St 
Springfield, TX 78080-1216 
5678 Main St 
Springfield, TX 78080-1316 
 
http://seankelly.biz/ 
http://seankelly.tv/

使用JSON, 形式如下:

複製程式碼

程式碼如下:

 
{ 
"fullname": "Sean Kelly"", Kelly" "org": "SK Consulting", 
"emailaddrs": [ 
{"type": "work", "value": "kelly@seankelly.biz"}, 
{"type": "home", "pref": 1, "value": "kelly@seankelly.tv"} 
], 
"telephones": [ 
{"type": "work", "pref" : 1, "value": " 1 214 555 1212"}, 
{"type": "fax", "value": " 1 214 555 1213"}, 
{"type": "mobile" , "value": " 1 214 555 1214"} 
], 
"addresses": [ 
{"type": "work", "format": "us", 
"value ": "1234 Main StnSpringfield, TX 78080-1216"}, 
{"type": "home", "format": "us", 
"value": "5678 Main StnSpringfield, TX 78080-1316 "} 
], 
"urls": [ 
{"type": "work", "value": "http://seankelly.biz/"}, 
{"type" : "home", "value": "http://seankelly.tv/"} 
] 
} 

如你所看到的，JSON有結構化的嵌套數據元素，這一點和XML相似。 JSON也是基於文字的，XML也是如此。兩者都使用Unicode。 JSON和 XML都很容易閱讀。主觀上，JSON更清晰，冗餘更少。 JSON WEB網站嚴格地描述了JSON語法，目前就是這樣的。它確實是一個簡單的小語言！ XML確實適合標記文檔，但JSON是資料互動的理想格式。每個JSON文件描述了一個這樣一個對象，該對象包含有：嵌套對象、數組、字串、數字、布林值或空值。

在這些位址卡範例程式碼中，JSON版本是更輕量級的，只佔用了682位元組的空間，而XML版本則需要744位元組空間。儘管這不是一個可觀的節省。而實際的好處則來自解析過程。

XML對比JSON：喪失地位
透過使用XMLHttpRequest對象，可以從你的基於AJAX的應用程式取得XML和JSON檔案。典型的，互動程式碼如下：

複製程式碼程式碼如下:

 
var req = newV​​D req (); 
req.open("GET", "http://localhost/addr?cardID=32", /*async*/true); 
req.onreadystatechange = myHandler; 
req. send(/*no params*/null); 

作為WEB伺服器回應，你提供的處理器函數（myHandler函數）被多次調用，為你提供提前終止事務，更新進度條等機會。通常的，只有在web請求完成以後才起作用：那時，你就可以使用傳回的資料了。

為了處理XML版本的地址卡數據，myHandler的代碼如下：

複製代碼代碼如下:

 
function myHandler() { 
if (req.readyState == 4 /*complete*/) { 
// Update address field in a form with first street address 
var addrField = document。 address')[0]; 
var addrText = fistAddr.firstChild; 
var addrValue = addrText.nodeValue; 
addrField.value = addrValue; 
} 
addrField.value = addrValue; 
} 


 

值得注意的是你不必解析XML文件：XMLHttpRequest物件自動地解析了，並使responseXML中的DOM樹可用。透過使用 responseXML屬性，可以呼叫getElementsByTagName方法來尋找文件的位址部分，你也可以使用第一個去找到它。然後，可以再調用getElementsByTagName在位址部分找出第一個位址元素。這就取得了文件的第一個DOM子節點，就是一個文字節點，並取得節點的值，這就是你想要的街道地址。最後，可以在表單域中顯示結果。

確實不是一個簡單的工作，現在，使用JSON再試一下：

複製程式碼程式碼如下:

function myHandler() { 
if (req.readyState == 4 /*complete*/) { 
var addrField = document.getElementById('addr'); var card = eval('(' req.responseText ')'); 
addrField.value = card.addresses[0].value; 
} 
} 


你 所做的第一件事就是解析JSON回應。但是，因為JSON是JavaScript的子集，所以你可以使用JavaScript自己的編譯器來解析它，透過呼叫eval函數。解析JSON僅需要一行！此外，操縱JSON中的物件就像操縱其他JavaScript物件一樣。這顯然比透過DOM樹來操縱簡單，例如： 
card.addresses[0].value 是第一個街道地址, "1234 Main Stb &" 
card.addresses[0].type 是地址類型, "work" 
card.addresses[1] 是家庭地址物件
card.fullname 是card的名稱, "Sean Kelly" 
如果更仔細觀察，你可能會發現XML格式中文件至少有一個跟元素，card。這在JSON裡是不存在的，為什麼？ 大概就是，如果你正在開發JavaScript來存取Web服務，你已經知道你想要得到的。然而，你可以在JSON中這麼使用： 
{"card": {"fullname": ...}} 

使用這個技術，你的JSON檔案總是以一個帶有單一命名屬性的物件開始，該屬性標識了物件的種類。 

JSON是快速可靠的嗎？ 

JSON 提供輕量的小文檔，並且JSON在JavaScript更容易使用。 XMLHttpRequest自動為你解析了XML文檔，而你還要手工解析JSON文 件，但是解析JSON比解析XML更慢麼？作者通過幾千次的反覆測試，使用XMLHttpRequest解析XML和解析JSON，結果是解析JSON比 XML快10倍！當把AJAX當作桌面應用看待時，速度是最重要的因素，很明顯，JSON更優秀。 

當然，你不能總是控制伺服器端來為AJAX程式產生資料。你也可以使用第三方伺服器來代替伺服器提供XML格式的輸出。並且，如果伺服器剛好提供JSON，你可以確定你真的想使用它嗎? 

程式碼中值得注意的是，你將回應文字直接傳入到eval中。如果你控制著伺服器，就可以這麼做。如果不是，一個惡意伺服器可以使你的瀏覽器執行危險操作。在這樣的情況下，你最好使用寫在JavaScript中的程式碼來解析JSON。幸運地，這已經有了。 

說到解析，Python愛好者可能注意到JSON不只是JavaScript的子集，它還是Python的一個子集。你可以在Python中直接執行JSON，或是使用安全JSON解析代替。 JSON.org網站列舉了許多常用JSON解析器。 

伺服器端的JSON 

到 現在為止，你或許將焦點注意在運行在客戶瀏覽器中的基於AJAX的web應用程式使用JSON。自然地，首先，JSON格式的資料必須在伺服器端產生。幸 運地是，建立JSON或將其他存在的資料轉換成JSON是相當簡單的。一些WEB應用程式框架，例如TurboGears，自動包括對JSON輸出的支 持。 

此外商業WEB服務供應商也注意到了JSON。 Yahoo最近創建了許多基於JSON的web服務。 Yahoo的多種搜尋服務，履行計劃，del.icio.us，還有高速公路交通服務也都支援JSON輸出。毫無疑問，其他主要WEB服務提供者也將加入到對JSON的支援中。 

總結 

JSON 的聰明在於它是JavaScript和Python的子集，使得它更易用，為AJAX提供高效的資料互動。它解析更快，比XML更容易使用。 JSON正成為 現在「Web 2.0」的最強音。每個開發者，無論是標準桌面應用程式或網路應用程序，越來越注意到了它的簡單和便捷。希望你能體會到在buzzword- compliant, Web-2.0-based, AJAX-enabled, 敏捷開發中應用到JSON的樂趣。