Publishers of technology books, eBooks, and videos for creative people

Home > Articles

  • Print
  • + Share This
From the author of Parsing the Response

Parsing the 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 gimages = 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 (see Table 4). Iterating the results array allows us to access the properties of each image result and create an HTML structure to render the images on the web page.

var results = gimages.responseData.results;

Table 4—Google Image Search Properties




Title of the image


Title of the image with no HTML


Raw URL of image


Escaped URL of image


Short URL associated with result


URL of the original source page for the image


Width of image in pixels


Height of image in pixels


Width of image thumbnail in pixels


Height of image thumbnail in pixels


URL of thumbnail image


Snippet of information from the image’s original source page


Same snippet of information as content, with no HTML

In the example, we’re accessing each individual image result’s URL property for the escaped version of the image URL, which we’ll use to create an image element to be rendered on the web page as HTML.

Next, we create an anchor element to wrap the image and set the href to the image’s originalContextUrl, which links all the images to their original source. Once the image has been created with the anchor tag, we can add it to the div in the HTML with an id of gimages. 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.SearchImages 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.imageQuery = "Peachpit";
GoogleAPI.SearchImages = function()
    GoogleAPI.callback = GoogleAPI.onImagesSearched;
    var gateway = "service/gateway.php?feed="+ escape("
     services/search/images?v=1.0&rsz=small&start="+ Math.floor((Math.random()*50)+1)
     +"&q=")+ GoogleAPI.imageQuery;
GoogleAPI.onImagesSearched = function(request)
    var divImages = document.getElementById('gimages');
    divImages.innerHTML = '';
        var gimages = this.request.responseText.parseJSON();
        var results = gimages.responseData.results;
        if(results.length > 0)
            for(var i=0; i<results.length; i++)
            var image = document.createElement('img');
            image.src = results[i].url.replace(/%2520/g, "%20");
            var imageAnchor = document.createElement('a');
   = '_blank';
            imageAnchor.href = results[i].originalContextUrl;
            imageAnchor.className = 'gimageAnchor';
        else GoogleAPI.ThrowError("There were no image results");
    else GoogleAPI.ThrowError("There was an error receiving the images feed");
GoogleAPI.makeRequest = function(gw)
    this.request = (window.XMLHttpRequest) ? new XMLHttpRequest(): new ActiveXObject("Microsoft.XMLHTTP"); 
    this.request.onreadystatechange = function() { GoogleAPI.checkReadyState(); };'GET', gw, true);
GoogleAPI.ThrowError = function(msg)
GoogleAPI.checkReadyState = function()
        case 1: break;
        case 2: break;
        case 3: break;
        case 4:
window.onload = function()
    __imgInterval = setInterval(GoogleAPI.SearchImages, 10000);
  • + Share This
  • 🔖 Save To Your Account