【译】 Using JSON (JavaScript Object Notation) with Yahoo! Web Services(z)-优快云博客

　　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″
      }
    }
  ]
}
}