Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Parsing the JSON Response
The results that are returned as the response are accessible via the request object. In order to access the results, we need to access the request’s responseText property and then parse it into a valid JSON string that we can work with. With the jsonparser included, this is very simple; all we do to parse the response as JSON is:
var gblogs = this.request.responseText.parseJSON();
Once we’ve parsed the response, we need to get to the results, which are always included in a responseData object that includes an array named results. Iterating the results array allows us to access the properties of each blog result and create an HTML structure to render the blogs posts on the web page.
var results = gblogs.responseData.results;
Table 4—Google Blog Search Properties
|
Property |
Description |
|---|---|
|
title |
Title of the blog post. |
|
titleNoFormatting |
Title of the blog post with no HTML. |
|
postUrl |
The URL to the blog post. |
|
content |
Part of the blog post content. |
|
author |
Name of the blog post author. |
|
blogUrl |
The URL of the blog that the post came from. |
|
publishedDate |
The date of the blog post. |
For this example, we’ll be creating a vertical list of blog posts from the results. To stack the blogs posts, we’ll start by creating a div element that will contain each post and give it a CSS class name of post, so that we can style it.
Then we’ll create an anchor tag to link the blog posts to the original source. To access the blog post’s original URL, we need to use the postUrl property as the href value. Once we have our anchor created, we’ll set the innerHTML value to the blog post title, which will ultimately create a hyperlink out of the post title back to the original source.
To set the innerHTML of the anchor tag to the post title, we’ll access the titleNoFormatting property. This property will give us an unformatted title, so that we can style it later with CSS.
To add a little detail to the post, let’s write who the author was and the date he published the post. We’ll do this by creating an italic element and using the author and publishedDate properties to create the string.
Once the blog posts have been created, we can add them to a div in our HTML file that has an id set to gblogs. This div will later be created in our HTML file in order to create the reference point for the widget. To add a little interactivity to the widget, we’ll create a simple auto-refresh function to update the widget automatically. Simply set an interval in the window.onload function that calls the GoogleAPI.SearchBlogs method every 10 seconds.
Listing 2: The GoogleAPI Object Makes Ajax Requests, Parses Results, and Renders the Widget as HTML (GoogleAPI.js)
document.write('<script type="text/javascript" src="assets/js/jsonparser.js"></script>');
var GoogleAPI = new Object();
GoogleAPI.blogQuery = "Peachpit";
GoogleAPI.SearchBlogs = function()
{
GoogleAPI.callback = GoogleAPI.onBlogsSearched;
var gateway = "service/gateway.php?feed="+ escape("http://ajax.googleapis.com/
ajax/services/search/blogs?v=1.0&rsz=small&start="+ Math.floor((Math.random()*50)+1)
+"&q=")+ GoogleAPI.blogQuery;
GoogleAPI.makeRequest(gateway);
}
GoogleAPI.onBlogsSearched = function(request)
{
var divBlogs= document.getElementById('gblog');
divBlogs.innerHTML = '';
if(this.request.responseText)
{
var gblogs = this.request.responseText.parseJSON();
var results = gblogs.responseData.results;
if(results.length > 0)
{
for(var i=0; i<results.length; i++)
{
var post = document.createElement('div');
post.className = 'post';
var postHref = document.createElement('a');
postHref.href = results[i].postUrl;
postHref.target = "_blank";
postHref.innerHTML = results[i].titleNoFormatting;
var postDate = document.createElement('i');
postDate.innerHTML = 'from '+ results[i].author +' posted '+ results[i].publishedDate;
post.appendChild(postHref);
post.appendChild(postDate);
divBlogs.appendChild(post);
}
}
else GoogleAPI.ThrowError("There were no blog results");
}
else GoogleAPI.ThrowError("There was an error receiving the blogs feed");
}
GoogleAPI.makeRequest = function(gw)
{
this.request = (window.XMLHttpRequest) ? new XMLHttpRequest(): new ActiveXObject("Microsoft.XMLHTTP");
this.request.onreadystatechange = function() { GoogleAPI.checkReadyState(); };
this.request.open('GET', gw, true);
this.request.send(gw);
}
GoogleAPI.ThrowError = function(msg)
{
alert(msg);
}
GoogleAPI.checkReadyState = function()
{
switch(this.request.readyState)
{
case 1: break;
case 2: break;
case 3: break;
case 4:
this.callback(this.request);
}
}
window.onload = function()
{
GoogleAPI.SearchBlogs();
__imgInterval = setInterval(GoogleAPI.SearchBlogs, 10000);
}