DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> js讀取並解析JSON類型數據的方法
js讀取並解析JSON類型數據的方法
編輯:關於JavaScript     

本文實例講述了js讀取並解析JSON類型數據的方法。分享給大家供大家參考,具體如下:

一、什麼是JSON?

JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式,采用完全獨立於語言的文本格式,是理想的數據交換格式,同時,JSON是 JavaScript 原生格式。
非常適合於服務器與 JavaScript 的交互

二、為什麼使用JSON而不是XML

他們都是這樣說的:盡管有許多宣傳關於 XML 如何擁有跨平台,跨語言的優勢,然而,除非應用於 Web Services,否則,在普通的 Web 應用中,開發者經常為 XML 的解析傷透了腦筋,無論是服務器端生成或處理 XML,還是客戶端用 JavaScript 解析 XML,都常常導致復雜的代碼,極低的開發效率。實際上,對於大多數 Web 應用來說,他們根本不需要復雜的 XML 來傳輸數據,XML 的擴展性很少具有優勢,許多 AJAX 應用甚至直接返回 HTML 片段來構建動態 Web 頁面。和返回 XML 並解析它相比,返回 HTML 片段大大降低了系統的復雜性,但同時缺少了一定的靈活性

三、如何使用

下面代碼是html代碼片段,實現點擊按鈕解析json格式數據並alert內容
復制代碼 代碼如下:<input type="button" value="button" onclick="clicks();"/>
下面是js函數代碼:

var json = {
  contry:{
  area:{
   man:"12萬",
   women:"10萬"
  }
  }
 };
//方式一:使用eval解析
 var obj = eval(json);
 alert(obj.constructor);
 alert(obj.contry.area.women);
 //方式二:使用Funtion函數
 var strJSON = "{name:'json name'}";//得到的JSON
 var obj = new Function("return" + strJSON)();//轉換後的JSON對象
 alert(obj.name);//json name
 alert(obj.constructor);
//復雜一點的json數組數據的解析
 var value1 = [ 
  {"c01":"1","c02":"2","c03":"3","c04":"4","c05":"5","c06":"6","c07":"7","c08":"8","c09":"9"},
   {"c01":"2","c02":"4","c03":"5","c04":"2","c05":"8","c06":"11","c07":"21","c08":"1","c09":"12"},
  {"c01":"5","c02":"1","c03":"4","c04":"11","c05":"9","c06":"8","c07":"1","c08":"8","c09":"2"}
   ]; 
 var obj1 = eval(value1);
 alert(obj1[0].c01);
 //復雜一點的json的另一種形式
 var value2 = {
   "list":[
   {"password":"1230","username":"coolcooldool"},
   {"password":"thisis2","username":"okokok"}
   ],
   "array":[
   {"password":"1230","username":"coolcooldool"},
   {"password":"thisis2","username":"okokok"}
   ]
   };
 var obj2 = eval(value2);
 alert(obj2.list[0].password);
}

四、eval

① 這種形式將使得性能顯著降低,因為它必須運行編譯器

② eval函數還減弱了你的應用的安全性,因為它給被求值的文本賦予了太多的權力。就像with語句執行的方式一樣,它降低了語言的性能

③ Function構造器是eval的另一種形式,所以它同樣也應該被避免使用。

希望本文所述對大家JavaScript程序設計有所幫助。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved