1. 程式人生 > >新鮮出爐的JSON,拿走不謝!

新鮮出爐的JSON,拿走不謝!

今天 而不是 信息 ipo 轉義字符 ray geometry turn base

一、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執行交換數據的操作時,其他的操作仍然可以執行。

一個最常見的應用是:打開百度或谷歌首頁,當輸入文字後,搜索欄下方會顯示出幾個建議的搜索詞。這正是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,拿走不謝!