<万博manbetx平台> 使用JSon和Yahoo! Web Services-万博manbetx平台

使用JSon和Yahoo! Web Services

2009-03-25 分类：JavaScript 阅读(5922) 评论(0)

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在内嵌页面加载完毕后加载！不需要任何代理或者欺骗。
下面是一个简单的使用例子。

<万博manbetx平台>
<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>
</万博manbetx平台>

　　把它作为文件madonna.万博manbetx平台保存到桌面，拖到浏览器中。

在你的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″
}
}
]
}
}
赞(0) 打赏
未经允许不得转载：万博manbetx平台 » 使用JSon和Yahoo! Web Services

相关推荐

评论 抢沙发

取消

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

置顶推荐

最近文章

热门标签

JavaScript (324)ES6 (222)代码片段 (188)实用代码 (182)jquery (61)css3 (54)css (48)ES2015 (28)jQuery插件 (26)React (26)前端招聘 (25)前端开发工具 (24)webpack (23)招聘 (20)npm (20)Babel (20)箭头函数 (19)Map (19)ES7 (18)Web Development (17)let (16)Chrome DevTools (16)async (16)IE6 BUG (15)前端开发 (15)Promise (14)const (14)ES2017 (14)Flexbox (14)Sass (14)

最新评论

分类目录

热门文章

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

联系我们

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

支付宝扫一扫打赏

微信扫一扫打赏