使用JSon和Yahoo! Web Services

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的参数:

http://search.yahooapis.com/ImageSearchService/V1/imageSearch?appid=YahooDemo&query=Madonna&output=json

使用callback=function:

回调参数(callback=function),在括号中把JSON数据你选择的函数名封装在一起。

如下:

http://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转义,如下:

http://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=”http://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="http://www.w3.org/2001/XMLSchema-instance" xmlns="urn:yahoo:srchmi" xsi:schemaLocation="urn:yahoo:srchmi http://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>http://www.celebritypicturesarchive.com/pictures/m/madonna/madonna-116.jpg</Url>
<ClickUrl>http://www.celebritypicturesarchive.com/pictures/m/madonna/madonna-116.jpg</ClickUrl>
<RefererUrl>http://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>http://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>http://www.celebritypicturesarchive.com/pictures/m/madonna/madonna-118.jpg</Url>
<ClickUrl>http://www.celebritypicturesarchive.com/pictures/m/madonna/madonna-118.jpg</ClickUrl>
<RefererUrl>http://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>http://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″
}
}
]
}
}
赞(0) 打赏
未经允许不得转载:WEB前端开发 » 使用JSon和Yahoo! Web Services

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏