新鮮出爐的JSON，拿走不謝！

標籤：應用   參與   multi   標記   關係   運算式   習慣   浮點   send   

一、JSON簡介1、JSON全稱是JavaScript Object Notation即JavaScript對象標記法。

JSON是一種輕量級（Light-Weight）、基於文本的（Text-Based）、可讀的（Human-Readable）格式

JSON的名稱中雖然帶有JavaScript，但這是指其文法規則是參與JavaScript對象的，而不是指只能用於JavaScript語言。

JSON無論對於人，還是對於機器來說，都是十分便於閱讀和書寫的，而且相比XML（另一種常見的資料交換格式），檔案更小，因此迅速成為網路上十分流行的交換格式。

近年來JavaScript已經成為瀏覽器上事實上的標準語言，JavaScript的風靡，與JSON的流行也有密切的關係。因此JSON本身就是參考JavaScript對象的規則定義的，其文法與JavaScript定義的文法幾乎完全相同。

JSON格式創始人聲稱此格式永遠不升級，這就表示這種格式具有長時間的穩定性，10年前寫的檔案，10年後也能用，沒有任何相容性問題。

2、JSON的文法規則是怎樣的

JSON的文法規則很簡單，可稱得上“優雅完美”總結起來有：

-數組（Array）用方括弧（“[ ]”）表示

-對象（Object）用大括弧（“{ }”）表示

-成對的名稱和數值（name/value）組合成數組和對象

-名稱（name）置於雙引號中，值（value）有字串、數值、布爾值、null、對象和數組

-並列的資料之間用逗號（","）分隔

{

　　"name":"lucy",

　　"age":"18"

}

3、JSON和XML

JSON常被拿來與XML做比較，因為JSON的誕生本來就多多少少要有取代XML的意思。相比XML，JSON的優勢如下：

-沒有結束標籤，長度更短，讀寫更快

-能夠直接被被JavaScript解析器解析

-可以使用數組

JSON:{

　　"name":"lucy",

　　"age":21,

　　"friends":["lili","geen","mark"]

}

XML:

<root>

　　<name>lucy</name>

　　<age>21</age>

　　<friends>lili</friends>

　　<friends>geen</friends>

　　<friends>mark</friends>

</root>

4、JSON解析和產生

在JavaScript中，有兩個方法與此相關：JSON.parse和JSON.stringify

二、JSON格式規範

JSON的文法規則十分簡單，無論用何種方法總結都只有數條而已，它參考了C語言家族的一些習慣，學習起來並不會感到陌生。

1、對象（Object）

對象用大括弧（“{ }”）括起來，大括弧裡是一系列的“成對的名稱和數值”。

兩個並列的資料之間用逗號（“，”）隔開，注意兩點：

-使用英文的逗號（","）不要使用中文的逗號（"，"）

-最後一個“成對的名稱和數值”之後不要加逗號

2、數組（Array）

數組表示一系列有序的值，用方括弧（“[ ]”）包圍起來，並列的值之間用逗號隔開。

例如，以下數組是合法的

3、成對的名稱和數值（Name/Value）

名稱（Name）是一個字串，要用雙引號括起來，不能用單引號，也不能沒有引號，這一點與JavaScript不同。

值的類型只有七中：字串（string）、數值（number）、對象（object）、數組（array）、布爾（true/false）、null、不能有這之外的類型，例如undefined、函數等。

字串（string）的規則如下：

- 英文雙引號括起來，不能用單引號，也不能沒有

- 字串中不能單獨出現雙引號（"）和右斜杠（"\"）

- 如果要打雙引號或右斜杠，需要使用“右斜杠+字元”的形式

- 例如\"和\\，其他的逸出字元也是如此

字串的概念圖如下：

數值的概念圖如下：

三、字串轉化成對象

 解析，是指將符合JSON文法規則的字串轉換成對象的過程。

不同的程式設計語言都提供瞭解析JSON字串的方法，這裡主要講解JS中的解析方法，主要有三種：

- 使用eval（）

- 使用JSON.parse（）

- 使用第三方庫，例如JQuery等

1、eval（）

eval（）函數的參數是一個字串，其作用是直接執行其中的JS代碼。

eval（）能夠解析JSON字串，從這裡可以看出JSON和JS是高度嵌合的。但是，現在已經很少直接使用eval（）來解析了，如歌您的瀏覽器真的很舊，可能才需要這個方法。此外，eval（）是一個相對危險的函數，因為字串中可能含有未知因素。在這裡，作為學習還要知道這也是一種方法。

請注意eval（）的參數，在字串兩旁加了括弧，這是必須的，否則會報錯。

因為JSON字串是被大括弧（"{ }"）包圍的，直接放到eval（）會被當成語句塊來執行，因此要在兩旁加上括弧，使其變成運算式。

2、JSON.parse（）

現在絕大多數瀏覽器都支援JSON.parse（），是推薦使用的方式。

如果輸入了不符合規範的字串，會報錯。

JSON.parse（）可以有第二個參數，是個函數。此函數有兩個參數：name和value，分別代表名稱和值。當傳入一個JSON字串之後，傳回值將賦值給當前的名稱（name）。

利用第二個參數，可以在解析JSON字串的同時對資料進行一些處理。

 四、將對象轉化為字串

序列化，指將JS值轉化為JSON字串的過程。

JSON.stringify（）能夠將JS值轉換成JSON字串。

JSON.stringify（）產生字串可以用JSON.parse（）再還原成JS值。

1、參數的含義

JSON.stringify（value[,relacer[,space]]）

value：必選參數。被變換的JS值，一般是對象或數組。

relacer：可以省略。有兩種選擇：函數或數組。

-如果是函數，則每一組成對的名稱和數值，都會調用此函數，該函數返回一個值，作為名稱的值變換到結果字串中，如果返回undefined，則該成員被忽略。

- 如果是數組，則只有數組中存在名稱才能夠被轉換，且轉換後順序與數組中的值保持一致。

space：可以省略，這是為了排版，方便閱讀而存在的。可以在JSON字串中添加空白或定位字元等。

2、value的用法：3、replacer的用法：4、space的用法：五、JSON和XML的轉換

1、下載相關檔案

JQuery、jquery.json2xml.js、jquery.xml2json.js

2、XML字串轉換成JSON對象

$.xml2json(str)

3、JSON對象轉換成XML字串

$.json2xml(obj)

六、AJAX和JSON

JSON檔案被放置在伺服器端，用戶端請求該檔案用的最多的是Ajax，能夠實現非同步請求。

1、AJAX是什麼

全稱Asynchronous  JavaScript  and  XML即“非同步JavaScript和XML”，一般寫作Ajax

Ajax能夠與伺服器交換少量資料，從而非同步地更新部分網頁。

非同步，指的是當Ajax執行交換資料的操作時，其他的操作仍然可以執行。

一個最常見的應用是：開啟百度或Google首頁，當輸入文字後，搜尋欄下方會顯示出幾個建議的搜尋詞。這正是AJAX的應用。

2、建立和使用Ajax

建立Ajax對象要考慮瀏覽器版本問題，主要分為兩大類：IE7+/Chrome/Firefox/...和IE6/IE5

function  CreateXHR(){

　　if(window.XMLHttpRequest){

　　　　//對瀏覽器IE7+,Firefox，Chrome，Opera，Safari

　　　　return  new  XMLHttpRequest();

　　}else{

　　　　//對瀏覽器IE6,IE5

　　　　return  new  ActiveXObject("Microsoft.XMLHTTP");

　　}

}

然後，只要用如下方式建立即可

var  xmlhttp;

xmlhttp  = CreateXHR（）；

伺服器端有個檔案test.json，請求並輸出。

xmlhttp.open("GET","test.json,"true);

xmlhttp.send();

xmlhttp.onreadystatechange = function(){

　　if(xmlhttp.readystate == 4 && xmlhttp.status == 200){

　　　　var jsonstr = xmlhttp.responseText;

　　　　console.log(jsonstr);

　　}

其中，xmlhttp.readyState存有XMLHttpRequest的狀態，有五個值：

0：請求未初始化

1：伺服器串連已建立

2：請求已串連

3：請求處理中

4：請求已完成，且響應已就緒

xmlhttp.status的值為請求結果，200表示"OK"，404表示未找到頁面。

擷取來自伺服器的響應，可使用XMLHttpRequest對象的responseText或responseXML屬性，前者是以字串形式，後者是以XML形式。

}

七、GeoJSON和TopJSON

GeoJSON和TopJSON是符合JSON文法規則的兩種資料格式，用於表示地理資訊。

1、GeoJSON

GeoJSON是用於描述地理空間資訊的資料格式。GeoJSON不是一種新的格式，其文法規範是符合JSON格式的，只不過對其名稱進行了規範，專門用於表示地理資訊。

GeoJSON的最外層是一個單獨的對象（object）。這個對象可表示：

-幾何體（Geometry）

-特徵（Feature）

- 特徵幾何（FeatureCollection）

最外層的GeoJSON裡可能包含有很多子物件，每一個GeoJSON對象都有一個type屬性，表示對象的類型，type的值必須是下面之一。

- point：點

- MultiPoint：多點

-LineString：線

-MultiLineString：多線

-Polygon：面

-MultiPolygon：多面

-GeometryCollection：幾何體集合

-Feature：特徵

下面舉幾個例子：

點對象：

{

　　"type":"Point",

　　"coordinates":[-105,39]

}

線對象：

{

　　"type":"LineString",

　　"coordinates":[[-105,39],[-107,38]]

}

面對象：

{

　　"type":"Polygon",

　　"coordinates":[[  [30,0], [31,0], [31,5], [30,5], [30,0] ]]

}

由以上格式可以發現，每一個對象都有一個成員變數coordinates.

如果type的值為Point、MultiPoint、LineString、MultiLineString、Polygon、MultiPolygon之一，則對象必須有變數coordinates。

如果type的值為GeometrayCollection（幾何體集合）那麼該對象必須有變數geometries，其值是一個數組，數組的每一項都是一個GeoJSON的幾何對象。例如：

{

　　"type":"GeometryCollection",

　　"geometries":[

　　　　{

　　　　　　"type":"Point",

　　　　　　"coordinates":[100,40]

　　　　},

　　　　{

　　　　　　"type":"LineString",

　　　　　　"coordinates":[ [100,30],[100,35] ]

　　　　}

　　]

}

如果type的值為Feature（特徵），那麼此特徵對象必須包含有變數geometry，表示幾何體，geometry的值必須是幾何體對象。此特徵對象還包含有一個properties，表示特性，properties的值可以是任意JSON對象或null。例如：

{
　　"type": "Feature",
　　"properties": {
　　　　"name": "北京"
　　},
　　"geometry": {
　　　　"type": "Point",
　　　　"coordinates": [ 116.3671875, 39.977120098439634]
　　}
}

如果type的值為FeatureCollection（特徵集合），則該對象必須有一個名稱為features的成員。features的值是一個數組，數組的每一項都是一個特徵對象。

2、TopoJSON

TopoJSON是GeoJSON按拓撲學編碼後的擴充形式，是由D3的作者Mike Bostock制定的。相比GeoJSON直接使用Ploygon、Point之類的幾何體來表示圖形的方法，TopoJSON消除了冗餘，檔案大小縮小了80%，因為邊界線只記錄一次（例如廣西和廣東的交界線只記錄一次）。地理座標使用整數，不使用浮點數。

3、線上工具

線上產生GeoJSON：http://geojson.io/

簡化，轉換GeoJSON和TopoJSON：http://mapshaper.org/

未完待續（今天有點晚了，後期更）.....

新鮮出爐的JSON，拿走不謝！