3、JSON数据处理
现在，我们基本实现了jquery.weibo.search.js插件，用来搜索某一话题下的微博的功能，由于时间的关系我们已经把界面设计好了，具体的HTML代码如下：
<!-- From design--> <!DOCTYPE html> <html> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <title></title> <link type="text/css" href="https://www.jb51.net/css/weibo.serach.style.css"> </head> <body> <table> <tbody> <tr> <td> <div> </div> </td> <td> <div> </div> </td> </tr> </tbody> </table> </body> </html>
接下来，我们在页面代码中引用jQuery库和自定义微博话题搜索插件jquery.weibo.search.js，具体代码如下：
<!-- Adds Javascript reference --> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="https://www.jb51.net/js/jquery.weibo.search.js"></script>
上面，我们直接引用Google提供的jQuery库，当然我们也把jQuery库下载到本地，然后引入到项目中，接下来我们在head元素中添加调用微博话题搜索插件的代码，具体代码如下：
<!-- When document ready invokes charCount function--> <script type="text/javascript"> // Invokes webioSearch function. $(document).ready(function () { $("#weibo1").weiboSearch({ term:'情人节', direction:'down' }); $("#weibo2").weiboSearch({ term:'元宵节', direction:'up' }); }); </script>
上面，我们在页面中调用了weiboSearch()的默认方法，并且搜索“情人节”话题下的微博。接下来，我们打开Chrome中Network选项，查看search/topics中的请求包含了source、count、q和callback（回调函数）参数。
图3 Ajax请求
由于Chrome中的JSON数据没有换行不便于查看，所以我们在Firefox中查看返回的JSON格式的数据。
图4微博JSON数据
上面的JSON数据不便于查看，这里我们使用JSON viewer格式化微博数据，格式化后的数据如下：
图5格式化的JSON数据
通过上图，我们发现微博数据包含在try/catch语句中，如果请求成功catch中将为空，反之，返回相应的错误提示信息。
接下来，我们把微博数据提取出来，然后去掉try/catch我们在JSON viewer中查看微博数据的结构。
图6 微博JSON数据
通过上图，我们知道返回数据是一个JSON数组，它的大小是根据我们的请求参数count决定的，而且微博规定每个请求最多返回200条微博。
接下来，我们需要把数据显示到页面中，现在让我们实现success方法吧！具体代码如下：
// Gets response data from weibo api. success: function(json) { if (json.data.error) { // Can't get data displays error. failEye(json.data.error); return; } // Emptys contain with fade out effect. $cont.fadeOut('fast', function() { $cont.empty(); // iterates weibo results $.each(json.data.statuses, function(i) { if (!opts.filter.call(opts, this) || this.truncated) return; // skip this weibo, some weibos may be deleted. var $img, $text, w, tweet = opts.formatter(this, opts), $tweet = $(tweet); // Weibo data. $tweet.css(opts.css['tweet']); $img = $tweet.find('.weiboSearchProfileImg').css(opts.css['img']); $tweet.find('.weiboSearchUser').css(opts.css['user']); $tweet.find('.weiboSearchTime').css(opts.css['time']); $tweet.find('a').css(opts.css['a']); $tweet.appendTo($cont); $text = $tweet.find('.weiboSearchText').css(opts.css['text']); if (opts.avatar) { w = $img.outerWidth() + parseInt($tweet.css('paddingLeft')); $text.css('paddingLeft', w); } }) // Loads weibos with fade in effect. $cont.fadeIn('fast'); // Invokes weibo api again. if (json.data.statuses.length < 2) { if (opts.refreshSeconds) setTimeout(gradWeibos, opts.refreshSeconds * 1000); return; } }); }
在success()方法中，我们使用了jQuery的fadeIn()和fadeOut()函数实现微博加载时淡入和清除时淡出的效果。
接着，我们使用$.each()方法遍历JSON数组中的每条微博信息，然后把它们添加到页面DOM中。
图7 微博信息
我们通过跨源请求调用微博search/topics接口，然后把服务器返回的JSON数据显示到页面中。