JSON(JavaScript Object Notation)是一个轻量级的数据格式,这个数据格式是基于javascript的对象符号。他不需要javascript去读或者写;
通过任何程序语言、库和工具我们可以轻松解析JSON。
要了解完整的json定义和它的很多用法,我们建议访问Douglas Crockfordd的网站JSON.org,,并且访问此站点下的JSON: The Fat-Free Alternative to XML。
很多Yahoo! Web Services提供json输出格式作为xml的替换。这篇文章主要介绍The Yahoo! Web Services如何应用json输出格式以及如何在你程序中应用JSON。
它包含以下部分:
- JSON 格式概述
- 如何请求json的数据
- 如何在应用和script中运用json
- JSON和xml的对比
?
JSON格式概述
Json是基于javascript对象格式的一种非常简单的文本格式。这种格式包含了以下几个基础的元素:
- 对象。对象开始结束于({})符号。
- 对象成员。组成成员的字符串和值,使用(:)分割。成员之间用(,)隔开。
- 数组。数组由括号开始和结束,并包含值,值由逗号分割。
- 值。一个数值可以是字符串,数字,对象,数组或者true,false,null
- 字符串。字符是由Unicode字符或者转义过的反斜线等组成,并由双引号包围。
一个简单的json例子如下:
{ “Image”: { “Width”:800, “Height”:600, “Title”:”View from 15th Floor”, “Thumbnail”: { “Url”:”http:\/\/scd.mm-b1.yimg.com\/image\/481989943″, “Height”: 125, “Width”: “100″ }, “IDs”:[ 116, 943, 234, 38793 ] } }
在这个例子中,image是顶层元素,所有其他数据都是image对象的成员。Width, Height 和 Title是包含数字和字符串的简单成员。 Thumbnail 是一个嵌套的对象,包含了URL, Height 和 Width. IDs 是包含了数字的数组。注意URL的值,使用了(”\/”)进行转义。
如何获得JSON的数据
很多支持JSON的 Yahoo! Web Services 都使用相同的参数来产生和使用JSON数据。
- 通过output=json获取JSON数据
- 使用 callback=function回调JSON数据
- JSON 和 XML的对比
使用output=json:
Yahoo! Web Services 默认返回的是xml数据格式,如果需要返回JSON格式,就需要在请求中加上output=json的参数:
https://search.yahooapis.com/ImageSearchService/V1/imageSearch?appid=YahooDemo&query=Madonna&output=json
使用callback=function:
回调参数(callback=function),在括号中把JSON数据你选择的函数名封装在一起。
如下:
https://search.yahooapis.com/ImageSearchService/V1/imageSearch?appid=YahooDemo&query=Madonna&output=json&callback=ws_results
回掉函数的名称只能用大小写的字母(A-Z, a-z), 数字(0-9) , 点(.), 下划线 (_), 和括号([ and ])。硬括号必须经过URL转义。
以下是注意点:
在回调中,结果被封装如下:
ws_results( …json output… );
因为JSON输出是原始的JavaScript,不需要在你的回调函数中解析返回的对象。你可以立刻访问返回的元素,就好像你已经把对象传递到ws_result函数。
除了简单的函数名之外,返回函数还可以用JavaScript对象或者数组形式,如下:
callback=ws_results.obj
… 或者这样:
callback=ws_results.obj.array[4]
重点:硬括号在回调时必须经过url转义,如下:
https://search.yahooapis.com/ImageSearchService/V1/imageSearch?appid=YahooDemo&query=Madonna&output=json&callback=ws_results.obj.array%5B4%5D
在客户端JavaScript里,回调对使用 web service 的请求非常有用。通常使用xmlhttprequest的web service请求在运行时会违反浏览器关于跨域调用的安全机制。这种约束机制要求你在一个代理服务起来处理请求,或者,通过url重写来欺骗浏览器,让浏览器觉得数据来自同一个服务器。
使用JSON和回调,可以把Yahoo! Web Service请求放到一个<script>标签里面,然后在页面上的任何地方用一个JavaScrip函数来操作结果。使用这个机制,Yahoo! Web Services输出的JSON在内嵌页面加载完毕后加载!不需要任何代理或者欺骗。
下面是一个简单的使用例子。
<html> <head> <title>How Many Pictures Of Madonna Do We Have?</title> </head> </body> <script type=”text/javascript”> function ws_results(obj) { alert(obj.ResultSet.totalResultsAvailable); } </script> <script type=”text/javascript” src=”https://search.yahooapis.com/ImageSearchService/V1/imageSearch?appid=YahooDemo&query=Madonna&output=json&callback=ws_results”></script> <body></body> </html>
把它作为文件madonna.html保存到桌面,拖到浏览器中。
在你的Script或者Application中使用JSON
JSON 数据可以直接被JavaScript解析,使用eval()方法:
var myObj = eval( ‘(’ + jsontext + ‘)’ );
注意:eval会把所有的json文字解析,不会通过安全校验。虽然由Yahoo! Web Services提供的JSON没有包含恶意代码,你可以放心的使用JSON解析器,该解析器只是检查JSON纯文本文字结构并没有执行任何其他代码。也可以使用crockford.com (json.org)提供的开源的JSON解析器。
一些安全注意点
虽然Yahoo! Web services只包含纯文本没有任何JavaScript代码,但是动态的script标签会向Yahoo!暴露你的DOM。如果你担心Yahoo! Web Services输出的JSON或者担心暴露DOM,请不要使用动态的script标签,使用XMLHttpRequest然后手动解析JSON,或者用XML输出代替。
如果你有兴趣阅读使用动态script标签的替代方案,请访问Douglas Crockford的JSONRequest。
对比JSON和XML
Yahoo! Web Services输出的XML和JSON包含相同的数据;唯一的差别是数据格式。基于不同的服务,从XML转换成JSON符号的方法可能有所不同,但一般你只需要遵循以下规则:
- 响应只存在一个顶层对象。
- 把简单的XML元素(元素只包含内容)转换成字符串/值组合。
- 把复杂的XML元素(包含其它嵌套元素)转化成嵌套对象。
- 把属性转化为字符串/值组合。
- 如果一个元素同时包含内容和属性,属性转化成字符/值的组合,内容转化成内容命名的字符/值组合。
- 重复的元素对应到数组,数组在元素之后命名。数组的值是基于重复的元素,也就是说,简单内容转变成简单值,嵌套元素转换成对象。注意,无论如何,如果一个包含了重复元素的响应包含只有一个元素的话, 你将不会获得只含一个JSON元素的数组,该元素被当作是一个单一复杂的XML元素来处理。对于重复的元素来说你必须确保你测试了一个数组或者一个标量值。
下面两个例子展示了拥有相同数据的XML和JSON
XML:
<?xml version="1.0" encoding="UTF-8"?> <ResultSet xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance" xmlns="urn:yahoo:srchmi" xsi:schemaLocation="urn:yahoo:srchmi https://search.yahooapis.com/ImageSearchService/V1/ImageSearchResponse.xsd" totalResultsAvailable="229307" totalResultsReturned="2" firstResultPosition="1"><Result> <Title>madonna 116</Title> <Summary>Picture 116 of 184</Summary> <Url>https://www.celebritypicturesarchive.com/pictures/m/madonna/madonna-116.jpg</Url> <ClickUrl>https://www.celebritypicturesarchive.com/pictures/m/madonna/madonna-116.jpg</ClickUrl> <RefererUrl>https://www.celebritypicturesarchive.com/pgs/m/Madonna/Madonna%20picture_116.htm</RefererUrl> <FileSize>36990</FileSize> <FileFormat>jpeg</FileFormat> <Height>530</Height> <Width>425</Width> <Thumbnail> <Url>https://scd.mm-b1.yimg.com/image/481989943</Url> <Height>125</Height> <Width>100</Width> </Thumbnail> </Result> <Result> <Title>madonna 118</Title> <Summary>Picture 118 of 184</Summary> <Url>https://www.celebritypicturesarchive.com/pictures/m/madonna/madonna-118.jpg</Url> <ClickUrl>https://www.celebritypicturesarchive.com/pictures/m/madonna/madonna-118.jpg</ClickUrl> <RefererUrl>https://www.celebritypicturesarchive.com/pgs/m/Madonna/Madonna%20picture_118.htm</RefererUrl> <FileSize>40209</FileSize> <FileFormat>jpeg</FileFormat> <Height>700</Height> <Width>473</Width> <Thumbnail> <Url>https://scd.mm-b1.yimg.com/image/500892420</Url> <Height>130</Height> <Width>87</Width> </Thumbnail> </Result> </ResultSet>
JSON:
{”ResultSet”:{ “totalResultsAvailable”:”229307″, “totalResultsReturned”:”2″, “firstResultPosition”:”1″, “Result”:[ { “Title”:”madonna 116″, “Summary”:”Picture 116 of 184″, “Url”:”http:\/\/www.celebritypicturesarchive.com\/pictures\/m\/madonna\/madonna-116.jpg”, “ClickUrl”:”http:\/\/www.celebritypicturesarchive.com\/pictures\/m\/madonna\/madonna-116.jpg”, “RefererUrl”:”http:\/\/www.celebritypicturesarchive.com\/pgs\/m\/Madonna\/Madonna%20picture_116.htm”, “FileSize”:”36990″, “FileFormat”:”jpeg”, “Height”:”530″, “Width”:”425″, “Thumbnail”:{ “Url”:”http:\/\/scd.mm-b1.yimg.com\/image\/481989943″, “Height”:”125″, “Width”:”100″ } }, { “Title”:”madonna 118″, “Summary”:”Picture 118 of 184″, “Url”:”http:\/\/www.celebritypicturesarchive.com\/pictures\/m\/madonna\/madonna-118.jpg”, “ClickUrl”:”http:\/\/www.celebritypicturesarchive.com\/pictures\/m\/madonna\/madonna-118.jpg”, “RefererUrl”:”http:\/\/www.celebritypicturesarchive.com\/pgs\/m\/Madonna\/Madonna%20picture_118.htm”, “FileSize”:”40209″, “FileFormat”:”jpeg”, “Height”:”700″, “Width”:”473″, “Thumbnail”:{ “Url”:”http:\/\/scd.mm-b1.yimg.com\/image\/500892420″, “Height”:”130″, “Width”:”87″ } } ] } }
最新评论
写的挺好的
有没有兴趣翻译 impatient js? https://exploringjs.com/impatient-js/index.html
Flexbox playground is so great!
感谢总结。
awesome!
这个好像很早就看到类似的文章了
比其他的教程好太多了
柯理化讲的好模糊…没懂