<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>静养心智-动抒豪情™ - 王聪明的日志 &#187; JSON</title>
	<atom:link href="http://wangcongming.info/tag/json/feed/" rel="self" type="application/rss+xml" />
	<link>http://wangcongming.info</link>
	<description>灵 动 生 活　　点 滴 感 悟</description>
	<lastBuildDate>Sun, 19 Feb 2012 18:04:56 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.2</generator>
		<item>
		<title>Twitter API 应用</title>
		<link>http://wangcongming.info/2007/04/twitter-api-%e5%ba%94%e7%94%a8/</link>
		<comments>http://wangcongming.info/2007/04/twitter-api-%e5%ba%94%e7%94%a8/#comments</comments>
		<pubDate>Sat, 28 Apr 2007 11:12:00 +0000</pubDate>
		<dc:creator>Wang Congming</dc:creator>
				<category><![CDATA[Geek Tweak]]></category>
		<category><![CDATA[API]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[JSON]]></category>
		<category><![CDATA[twitter]]></category>

		<guid isPermaLink="false">http://wangcongming.info/2007/04/28/twitter-api-%e5%ba%94%e7%94%a8/</guid>
		<description><![CDATA[题外话： &#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212; 我的需求很简单，就是将最近的几条twitter信息显示在blog上。 首先想到的办法就是，直接用blogger提供的feed功能。可是，输出的每条信息前都有个“Wang Congming:”长长的前缀，不喜欢。而且，blogger每抓取一次feed好像要缓存挺长时间，而twitter应该是实效性比较强的，恩～。 然后，就想到用twitter官方提供的Badges。However，他们给的不是我想要的。所以，只好去看看API说明，自己动手。 小小原理： &#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212; twitter支持四种格式的数据输出：xml, RSS, ATOM, JSON，以及 GET 和 POST 两种方法。当然，只是查询一下不需要授权的数据，自然用不上POST。所以，只需要GET一个JSON就行，通过URL传递适当的参数，得到我们需要的数据。 传递过来的 json 是一个函数，而我们需要的数据作为函数的参数。唯一要做的，就是事先定义这样一个函数，告诉它该怎么执行，怎么显示其中的数据。至于函数名，GET 时由自己用 callback 参数指定。 Click the expand button to read full text&#8230; 数据结构 &#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212; 返回的数据类似以下结构： twitterCallback([ { "created_at":"Sat Apr 28 15:45:24 +0000 2007", "text":"信息的内容～", "id":43160262/*该条信息的数字编号*/, "user":{ "name":"Wang Congming", "profile_image_url":"http:...", "description":"自我介绍", "location":"BeiJing", "screen_name":"WCM/*用户名*/", "url":"http:...", "id":5002701/*用户的数字编号*/, "protected":false } }, [...]]]></description>
			<content:encoded><![CDATA[<p><span style="font-weight: bold;">题外话：</span><br />
&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;<br />
我的需求很简单，就是将最近的几条twitter信息显示在blog上。</p>
<p>首先想到的办法就是，直接用blogger提供的feed功能。可是，输出的每条信息前都有个“Wang Congming:”长长的前缀，不喜欢。而且，blogger每抓取一次feed好像要缓存挺长时间，而twitter应该是实效性比较强的，恩～。</p>
<p>然后，就想到用twitter官方提供的Badges。However，他们给的不是我想要的。所以，只好去看看API说明，自己动手。</p>
<p><span style="font-weight: bold;">小小原理：</span><br />
&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;<br />
twitter支持四种格式的数据输出：xml, RSS, ATOM, JSON，以及 GET 和 POST 两种方法。当然，只是查询一下不需要授权的数据，自然用不上POST。所以，只需要GET一个JSON就行，通过URL传递适当的参数，得到我们需要的数据。</p>
<p>传递过来的 json 是一个函数，而我们需要的数据作为函数的参数。唯一要做的，就是事先定义这样一个函数，告诉它该怎么执行，怎么显示其中的数据。至于函数名，GET 时由自己用 callback 参数指定。</p>
<p><span class="note_text">Click the expand button to read full text&#8230;</span></p>
<p><span style="font-weight: bold;">数据结构</span><br />
&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;<br />
返回的数据类似以下结构：</p>
<pre>twitterCallback([   {      "created_at":"Sat Apr 28 15:45:24 +0000 2007",      "text":"信息的内容～",      "id":43160262/*该条信息的数字编号*/,      "user":{         "name":"Wang Congming",         "profile_image_url":"http:...",         "description":"自我介绍",         "location":"BeiJing",         "screen_name":"WCM/*用户名*/",         "url":"http:...",         "id":5002701/*用户的数字编号*/,         "protected":false      }   },   {      /* 第2/3/4...条信息，重复以上形式 */   }]);</pre>
<p><span style="font-weight: bold;">完成</span><br />
&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;<br />
根据以上数据，得代码如下：</p>
<pre>&lt;ul id="my_twitter"&gt;&lt;li&gt;Loading...&lt;/li&gt;&lt;/ul&gt;

&lt;script type="text/javascript"&gt;function relative_time(time_value) {   var time_correct = time_value.split('+0000');   var parsed_date = Date.parse(time_correct[0]+'GMT+0000'+time_correct[1]);   var relative_to = new Date();   var delta = parseInt((relative_to.getTime() - parsed_date) / 1000);   if(delta &lt; 60) return 'less than a minute ago';   else if(delta &lt; 120) return 'about a minute ago';   else if(delta &lt; (45*60)) return (parseInt(delta / 60)).toString() + ' minutes    ago';   else if(delta &lt; (90*60)) return 'about an hour ago';   else if(delta &lt; (24*60*60)) return 'about ' + (parseInt(delta / 3600)).toString() + ' hours ago';   else if(delta &lt; (48*60*60)) return '1 day ago';   else return (parseInt(delta / 86400)).toString() + ' days ago';}function twitterCallback(obj){   var twitterHTML = '';   for(var i=0; i&lt;(obj.length); i++){      twitterHTML += '&lt;li&gt;&lt;span class="item-title"&gt;&lt;a href="http://twitter.com/wcm/statuses/'+obj[i].id+'"&gt;' + obj[i].text + '&lt;/a&gt;&lt;/span&gt;&lt;span class="item-date"&gt; - ' + relative_time(obj[i].created_at) + '&lt;/span&gt;&lt;/li&gt;';   }   document.getElementById('my_twitter').innerHTML = twitterHTML;}&lt;/script&gt;

&lt;script src="http://twitter.com/statuses/user_timeline/5002701.json?callback=twitterCallback&amp;count=5" type="text/javascript"&gt;&lt;/script&gt;</pre>
<p>效果如右侧～</p>
<p><span style="font-weight: bold;">总结一下</span><br />
&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;<br />
1、以上代码，如果去掉ul间的“&lt;li&gt;Loading&#8230;&lt;/li&gt;”，然后存为一个单独的文件，将无法正常显示，加上后又变为正常。当然，并不限于Loading&#8230;，也并不限于ul之间。也就是说，只要在任何可以的地方，加上任何字符，就OK了，不加就不行，IE和ff均如此，不理解……。</p>
<p>2、twitter输出的”+0000&#8243;时区没有指名是哪个标准时间（虽然没多大差别），这将导致IE的Date.parse语法分析出错，所以先在”+0000&#8243;前加上GMT再分析。</p>
<p>3、”&#8230;/5002701.json?callback=twitterCallback&amp;count=5&#8243;。这里的5002701要换成自己的编号；twitterCallback即是指定的返回函数名，可自由命名；除了count外，还有其他筛选条件，如指定起始日期的since等。</p>
<p>4、<a href="http://groups.google.com/group/twitter-development-talk/web/api-documentation">Twitter API官方文档</a></p>
<p>关于JSON (JavaScript Object Notation): <a href="http://www.json.org/json-zh.html">http://www.json.org/json-zh.html</a></p>
]]></content:encoded>
			<wfw:commentRss>http://wangcongming.info/2007/04/twitter-api-%e5%ba%94%e7%94%a8/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
	</channel>
</rss>

